Add route to StoresClient and implement updateStatus API method

distribution_fe/app/(dashboard)/stores/_components/stores-client.tsx

@@ -10,8 +10,8 @@ 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 { stores as storesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { StoreResponse, KycStatus } from '@/types/api'
+import { stores as storesApi, routes as routesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { StoreResponse, KycStatus, RouteResponse } from '@/types/api'
 
 import { StoreSheet } from './store-sheet'
 import { StoreVisitHistorySheet } from './store-visit-history-sheet'
@@ -34,6 +34,12 @@ export function StoresClient() {
   const [editing, setEditing] = useState<StoreResponse | null>(null)
   const [historyOpen, setHistoryOpen] = useState(false)
   const [viewingHistory, setViewingHistory] = useState<StoreResponse | null>(null)
+  const [routesList, setRoutesList] = useState<RouteResponse[]>([])
+
+  const routeNameById = useMemo(
+    () => new Map(routesList.map((r) => [r.id, r.routeName])),
+    [routesList]
+  )
 
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
@@ -52,6 +58,12 @@ export function StoresClient() {
     fetchData(page, pageSize)
   }, [fetchData, page, pageSize])
 
+  useEffect(() => {
+    routesApi.list({ pageSize: 200 })
+      .then((res) => setRoutesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' }))
+  }, [])
+
   function openCreate() {
     setEditing(null)
     setSheetOpen(true)
@@ -69,7 +81,7 @@ export function StoresClient() {
 
   async function toggleActive(store: StoreResponse) {
     try {
-      await storesApi.update(store.id, { isActive: !store.isActive })
+      await storesApi.updateStatus(store.id, !store.isActive)
       toast.add({
         title: store.isActive ? 'Store deactivated' : 'Store activated',
         type: 'success',
@@ -102,8 +114,11 @@ export function StoresClient() {
       {
         key: 'routeId',
         title: 'Route',
-        fields: [{ key: 'routeId' }],
+        fields: ['routeId'],
         minWidth: 140,
+        cellRender: (row) => (
+          <span className="text-sm">{routeNameById.get(row.routeId) ?? row.routeId}</span>
+        ),
       },
       {
         key: 'kycStatus',
@@ -159,7 +174,7 @@ export function StoresClient() {
         },
       ],
     },
-  }), [pageSize, openEdit, openHistory, toggleActive])
+  }), [pageSize, openEdit, openHistory, toggleActive, routeNameById])
 
   return (
     <>