remove PriceListSheet component and integrate new price list creation page

distribution_fe/app/(dashboard)/pricing/schemes/_components/scheme-view-sheet.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import type { SchemeResponse } from '@/types/api'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+interface SchemeViewSheetProps {
+  open: boolean
+  onClose: () => void
+  scheme: SchemeResponse | 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 SchemeViewSheet({ open, onClose, scheme }: SchemeViewSheetProps) {
+  if (!scheme) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Scheme Details</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col">
+          <Row label="Name" value={scheme.name} />
+          <Row label="Rule Type" value={<Badge>{scheme.ruleType}</Badge>} />
+          <Row label="Region" value={scheme.regionName ?? 'All Regions'} />
+          <Row label="Eligible Segment" value={scheme.eligibleSegment ?? 'All Segments'} />
+          <Row label="Status" value={<Badge variant={scheme.isActive ? 'default' : 'secondary'}>{scheme.isActive ? 'Active' : 'Inactive'}</Badge>} />
+          <Row label="Date Range" value={`${fmtDate(scheme.dateRangeFrom)} → ${fmtDate(scheme.dateRangeTo)}`} />
+          <Row label="Agent Limit Exempt" value={scheme.agentLimitExempt ? 'Yes' : 'No'} />
+          {scheme.baselineExpectedSales > 0 && (
+            <Row label="Baseline Expected Sales" value={`Rs. ${scheme.baselineExpectedSales.toLocaleString()}`} />
+          )}
+          {scheme.ruleConfig && <Row label="Rule Config" value={<span className="font-mono text-xs">{scheme.ruleConfig}</span>} />}
+          {scheme.triggerItemName && (
+            <Row label="Trigger" value={`${scheme.triggerQty} × ${scheme.triggerItemName}`} />
+          )}
+          {scheme.freeItemName && (
+            <Row label="Free Goods" value={`${scheme.freeQty} × ${scheme.freeItemName}`} />
+          )}
+          <Row label="Created" value={fmtDate(scheme.createdAt)} />
+        </div>
+
+        {scheme.bundleComponents.length > 0 && (
+          <div>
+            <p className="mb-2 text-sm font-medium text-foreground">Bundle Components</p>
+            <div className="overflow-x-auto rounded-xl border">
+              <table className="w-full text-sm">
+                <thead className="bg-muted/50">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-medium">Item</th>
+                    <th className="px-3 py-2 text-right font-medium">Qty</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {scheme.bundleComponents.map((c) => (
+                    <tr key={c.itemId} className="border-t">
+                      <td className="px-3 py-2">{c.itemName} <span className="ml-1 text-xs text-muted-foreground">({c.sku})</span></td>
+                      <td className="px-3 py-2 text-right">{c.qty}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

distribution_fe/app/(dashboard)/pricing/schemes/_components/schemes-client.tsx

@@ -9,10 +9,11 @@ import type { TableConfig } from '@/components/shared/data-table'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/toast'
-import { schemes as schemesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import { schemes as schemesApi, getApiError } from '@/lib/api/index'
 import type { SchemeResponse, SchemeRuleType } from '@/types/api'
 
 import { SchemeSheet } from './scheme-sheet'
+import { SchemeViewSheet } from './scheme-view-sheet'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -27,19 +28,18 @@ const RULE_TYPE_VARIANT: Record<SchemeRuleType, 'default' | 'secondary'> = {
 export function SchemesClient() {
   const [data, setData] = useState<SchemeResponse[]>([])
   const [loading, setLoading] = useState(true)
-  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
 
   const [sheetOpen, setSheetOpen] = useState(false)
   const [editing, setEditing] = useState<SchemeResponse | null>(null)
+  const [viewing, setViewing] = useState<SchemeResponse | null>(null)
+  const [viewOpen, setViewOpen] = useState(false)
 
-  const fetchData = useCallback(async (p: number, ps: number) => {
+  const fetchData = useCallback(async () => {
     setLoading(true)
     try {
-      const res = await schemesApi.list({ page: p, pageSize: ps })
-      setData(getPaginatedItems(res))
-      setTotal(res.total)
+      const items = await schemesApi.list()
+      setData(items)
     } catch (err) {
       toast.add({ title: 'Failed to load schemes', description: getApiError(err), type: 'error' })
     } finally {
@@ -48,8 +48,8 @@ export function SchemesClient() {
   }, [])
 
   useEffect(() => {
-    fetchData(page, pageSize)
-  }, [fetchData, page, pageSize])
+    fetchData()
+  }, [fetchData])
 
   function openCreate() {
     setEditing(null)
@@ -61,9 +61,23 @@ export function SchemesClient() {
     setSheetOpen(true)
   }
 
+  function openView(scheme: SchemeResponse) {
+    setViewing(scheme)
+    setViewOpen(true)
+  }
+
+  async function handleDelete(scheme: SchemeResponse) {
+    try {
+      await schemesApi.remove(scheme.id)
+      toast.add({ title: 'Scheme deactivated', type: 'success' })
+      fetchData()
+    } catch (err) {
+      toast.add({ title: 'Failed to deactivate scheme', description: getApiError(err), type: 'error' })
+    }
+  }
+
   const tableConfig = useMemo<TableConfig<SchemeResponse>>(() => ({
     rowKey: 'id',
-    serverSide: true,
     stickyHeader: true,
     emptyMessage: 'No schemes yet. Add one to get started.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
@@ -118,11 +132,22 @@ export function SchemesClient() {
     ],
     rowActions: {
       actions: () => [
+        {
+          action: 'view',
+          label: 'View scheme',
+          onClick: openView,
+        },
         {
           action: 'edit',
           label: 'Edit scheme',
           onClick: openEdit,
         },
+        {
+          action: 'cancel',
+          label: 'Delete scheme',
+          onClick: handleDelete,
+          visible: (target) => target.isActive,
+        },
       ],
     },
   }), [pageSize])
@@ -146,9 +171,8 @@ export function SchemesClient() {
         config={tableConfig}
         data={data}
         loading={loading}
-        totalCount={total}
+        totalCount={data.length}
         onServerSideChange={({ page: p }) => {
-          setPage(p.page)
           setPageSize(p.pageSize)
         }}
       />
@@ -157,7 +181,13 @@ export function SchemesClient() {
         open={sheetOpen}
         onClose={() => setSheetOpen(false)}
         scheme={editing}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={fetchData}
+      />
+
+      <SchemeViewSheet
+        open={viewOpen}
+        onClose={() => setViewOpen(false)}
+        scheme={viewing}
       />
     </>
   )