Add item details viewing

distribution_fe/app/(dashboard)/catalogue/items/_components/item-view-sheet.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import type { ItemSummaryResponse } from '@/types/api'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+interface ItemViewSheetProps {
+  open: boolean
+  onClose: () => void
+  item: ItemSummaryResponse | null
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-2 text-sm border-b last:border-0">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium text-right">{value}</span>
+    </div>
+  )
+}
+
+export function ItemViewSheet({ open, onClose, item }: ItemViewSheetProps) {
+  if (!item) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Item Details</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col">
+          <Row label="SKU" value={item.sku} />
+          <Row label="Name" value={item.name} />
+          <Row label="Category" value={item.categoryName} />
+          <Row label="Brand" value={item.brandName ?? '—'} />
+          <Row label="Base UOM" value={item.baseUomName} />
+          <Row label="Sale Price" value={`Rs. ${item.salePrice?.toFixed(2) ?? '0.00'}`} />
+          <Row label="Sync Source" value={item.syncSource} />
+          <Row label="Status" value={<Badge variant={item.isActive ? 'default' : 'secondary'}>{item.isActive ? 'Active' : 'Inactive'}</Badge>} />
+          <Row label="Created At" value={fmtDate(item.createdAt)} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

distribution_fe/app/(dashboard)/catalogue/items/_components/items-client.tsx

@@ -13,6 +13,7 @@ import { items as itemsApi, getApiError, getPaginatedItems } from '@/lib/api/ind
 import type { ItemSummaryResponse } from '@/types/api'
 
 import { ItemSheet } from './item-sheet'
+import { ItemViewSheet } from './item-view-sheet'
 
 export function ItemsClient() {
   const [data, setData] = useState<ItemSummaryResponse[]>([])
@@ -23,6 +24,8 @@ export function ItemsClient() {
 
   const [sheetOpen, setSheetOpen] = useState(false)
   const [editing, setEditing] = useState<ItemSummaryResponse | null>(null)
+  const [viewOpen, setViewOpen] = useState(false)
+  const [viewing, setViewing] = useState<ItemSummaryResponse | null>(null)
 
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
@@ -51,6 +54,21 @@ export function ItemsClient() {
     setSheetOpen(true)
   }
 
+  function openView(item: ItemSummaryResponse) {
+    setViewing(item)
+    setViewOpen(true)
+  }
+
+  async function handleDelete(item: ItemSummaryResponse) {
+    try {
+      await itemsApi.remove(item.id)
+      toast.add({ title: 'Item deactivated', type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to deactivate item', description: getApiError(err), type: 'error' })
+    }
+  }
+
   const tableConfig = useMemo<TableConfig<ItemSummaryResponse>>(() => ({
     rowKey: 'id',
     serverSide: true,
@@ -117,11 +135,22 @@ export function ItemsClient() {
     ],
     rowActions: {
       actions: () => [
+        {
+          action: 'view',
+          label: 'View item',
+          onClick: openView,
+        },
         {
           action: 'edit',
           label: 'Edit item',
           onClick: openEdit,
         },
+        {
+          action: 'cancel',
+          label: 'Delete item',
+          onClick: handleDelete,
+          visible: (target) => target.isActive,
+        },
       ],
     },
   }), [pageSize])
@@ -158,6 +187,12 @@ export function ItemsClient() {
         item={editing}
         onSuccess={() => fetchData(page, pageSize)}
       />
+
+      <ItemViewSheet
+        open={viewOpen}
+        onClose={() => setViewOpen(false)}
+        item={viewing}
+      />
     </>
   )
 }