mirror of
https://git.meshkee.com/Meshkee/dashboards.git
synced 2026-08-11 22:30:58 +04:30
Initial commit: Meshkee dashboards monorepo.
Includes business, customer, and super-admin apps with shared packages and production deploy scripts. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,314 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { Breadcrumbs } from '../components/Breadcrumbs'
|
||||
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
|
||||
import { PickWebsiteBrandsModal } from '../components/PickWebsiteBrandsModal'
|
||||
import { StoreSpecialModal } from '../components/StoreSpecialModal'
|
||||
import { WebsiteGroupCarousel } from '../components/WebsiteGroupCarousel'
|
||||
import { WebsiteGroupItemCard } from '../components/WebsiteGroupItemCard'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { ApiError } from '../lib/api'
|
||||
import {
|
||||
createWebsiteBrandGroup,
|
||||
deleteWebsiteBrandGroup,
|
||||
listWebsiteBrandGroups,
|
||||
updateWebsiteBrandGroup,
|
||||
} from '../services/websiteBrandGroupService'
|
||||
import type { WebsiteBrandGroup } from '../types/websiteBrandGroup'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import fabStyles from './StoreItemsPage.module.css'
|
||||
import styles from './StoreSpecialsPage.module.css'
|
||||
|
||||
export function WebsiteSpecialBrandsPage() {
|
||||
const { showToast } = useToast()
|
||||
const [groups, setGroups] = useState<WebsiteBrandGroup[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [editGroupTarget, setEditGroupTarget] = useState<WebsiteBrandGroup | null>(null)
|
||||
const [deleteGroupTarget, setDeleteGroupTarget] = useState<WebsiteBrandGroup | null>(null)
|
||||
const [pickItemsTarget, setPickItemsTarget] = useState<WebsiteBrandGroup | null>(null)
|
||||
const [removeTarget, setRemoveTarget] = useState<{
|
||||
group: WebsiteBrandGroup
|
||||
brandId: string
|
||||
brandName: string
|
||||
} | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
void loadGroups(controller.signal)
|
||||
return () => controller.abort()
|
||||
}, [])
|
||||
|
||||
async function loadGroups(signal?: AbortSignal) {
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const data = await listWebsiteBrandGroups(1, 50, signal)
|
||||
setGroups(data.items)
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to load special brand groups.')
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function replaceGroup(updated: WebsiteBrandGroup) {
|
||||
setGroups((prev) => prev.map((entry) => (entry.id === updated.id ? updated : entry)))
|
||||
}
|
||||
|
||||
async function handleCreateGroup(title: string) {
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const result = await createWebsiteBrandGroup({
|
||||
title,
|
||||
sortOrder: groups.length,
|
||||
})
|
||||
setGroups((prev) => [...prev, result.group])
|
||||
setCreateOpen(false)
|
||||
showToast('Special brand group created.', 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to create special brand group.')
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEditGroup(title: string) {
|
||||
if (!editGroupTarget) return
|
||||
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const result = await updateWebsiteBrandGroup(editGroupTarget.id, { title })
|
||||
replaceGroup(result.group)
|
||||
setEditGroupTarget(null)
|
||||
showToast('Special brand group updated.', 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to update special brand group.')
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDeleteGroup() {
|
||||
if (!deleteGroupTarget) return
|
||||
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
await deleteWebsiteBrandGroup(deleteGroupTarget.id)
|
||||
setGroups((prev) => prev.filter((entry) => entry.id !== deleteGroupTarget.id))
|
||||
setDeleteGroupTarget(null)
|
||||
showToast('Special brand group deleted.', 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to delete special brand group.')
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddBrands(brandIds: string[]) {
|
||||
if (!pickItemsTarget) return
|
||||
|
||||
const existingIds = pickItemsTarget.items.map((item) => item.id)
|
||||
const nextIds = [...existingIds, ...brandIds]
|
||||
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const result = await updateWebsiteBrandGroup(pickItemsTarget.id, {
|
||||
brandIds: nextIds,
|
||||
})
|
||||
replaceGroup(result.group)
|
||||
setPickItemsTarget(null)
|
||||
showToast('Brands added to group.', 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to add brands.')
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmRemoveFromGroup() {
|
||||
if (!removeTarget) return
|
||||
|
||||
const { group, brandId } = removeTarget
|
||||
const nextIds = group.items.map((item) => item.id).filter((id) => id !== brandId)
|
||||
|
||||
setIsSaving(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const result = await updateWebsiteBrandGroup(group.id, {
|
||||
brandIds: nextIds,
|
||||
})
|
||||
replaceGroup(result.group)
|
||||
setRemoveTarget(null)
|
||||
showToast('Removed from special brand group.', 'success')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError('Unable to remove brand.')
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={pageStyles.content}>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Website', href: '/website' },
|
||||
{ label: 'Special Brands' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className={pageStyles.pageHeader}>
|
||||
<div>
|
||||
<h2 className={pageStyles.pageTitle}>Special Brands</h2>
|
||||
<p className={pageStyles.pageSubtitle}>
|
||||
Curate featured brands into groups for your website homepage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
|
||||
{isLoading ? (
|
||||
<p className={styles.empty}>Loading special brand groups...</p>
|
||||
) : groups.length === 0 ? (
|
||||
<p className={styles.empty}>
|
||||
No special brand groups yet. Use the + button to create one, then add brands to each
|
||||
carousel.
|
||||
</p>
|
||||
) : (
|
||||
<div className={styles.carousels}>
|
||||
{groups.map((group) => (
|
||||
<WebsiteGroupCarousel
|
||||
key={group.id}
|
||||
title={group.title}
|
||||
items={group.items}
|
||||
itemKey={(item) => item.id}
|
||||
onAddItems={() => setPickItemsTarget(group)}
|
||||
onEditGroup={() => setEditGroupTarget(group)}
|
||||
onDeleteGroup={() => setDeleteGroupTarget(group)}
|
||||
addTooltip={`Add brands to ${group.title}`}
|
||||
editTooltip="Edit group"
|
||||
deleteTooltip="Delete group"
|
||||
renderItem={(item) => (
|
||||
<WebsiteGroupItemCard
|
||||
title={item.nameEn}
|
||||
nameFa={item.nameFa}
|
||||
subtitle={item.about}
|
||||
onRemove={() =>
|
||||
setRemoveTarget({
|
||||
group,
|
||||
brandId: item.id,
|
||||
brandName: item.nameEn,
|
||||
})
|
||||
}
|
||||
removeTooltip="Remove from group"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={fabStyles.fabDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={fabStyles.addFab}
|
||||
onClick={() => setCreateOpen(true)}
|
||||
aria-label="Add special brand group"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<StoreSpecialModal
|
||||
open={createOpen}
|
||||
onClose={() => !isSaving && setCreateOpen(false)}
|
||||
onSubmit={handleCreateGroup}
|
||||
title="Add Special Brand Group"
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
|
||||
<StoreSpecialModal
|
||||
open={!!editGroupTarget}
|
||||
onClose={() => !isSaving && setEditGroupTarget(null)}
|
||||
onSubmit={handleEditGroup}
|
||||
initialTitle={editGroupTarget?.title ?? ''}
|
||||
title="Edit Special Brand Group"
|
||||
submitLabel="Save"
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
|
||||
<PickWebsiteBrandsModal
|
||||
open={!!pickItemsTarget}
|
||||
groupTitle={pickItemsTarget?.title ?? ''}
|
||||
existingBrandIds={pickItemsTarget?.items.map((item) => item.id) ?? []}
|
||||
onClose={() => !isSaving && setPickItemsTarget(null)}
|
||||
onConfirm={handleAddBrands}
|
||||
isSubmitting={isSaving}
|
||||
/>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
open={!!deleteGroupTarget}
|
||||
title="Delete Special Brand Group"
|
||||
message={
|
||||
deleteGroupTarget
|
||||
? `Delete "${deleteGroupTarget.title}"? Brands will remain in your catalog.`
|
||||
: ''
|
||||
}
|
||||
onConfirm={() => void confirmDeleteGroup()}
|
||||
onCancel={() => !isSaving && setDeleteGroupTarget(null)}
|
||||
/>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
open={!!removeTarget}
|
||||
title="Remove from Group"
|
||||
message={
|
||||
removeTarget
|
||||
? `Remove "${removeTarget.brandName}" from "${removeTarget.group.title}"?`
|
||||
: ''
|
||||
}
|
||||
onConfirm={() => void confirmRemoveFromGroup()}
|
||||
onCancel={() => !isSaving && setRemoveTarget(null)}
|
||||
/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user