Update sales pages

distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx

@@ -8,9 +8,18 @@ import { DataTable } from '@/components/shared/data-table'
 import type { TableConfig } from '@/components/shared/data-table'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { toast } from '@/components/ui/toast'
-import { loadingSheets as loadingSheetsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api'
+import { loadingSheets as loadingSheetsApi, rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { LoadingSheetResponse, LoadingSheetStatus, RideResponse } from '@/types/api'
+
+const ALL = '__all__'
 
 import { LoadingSheetViewSheet } from './loading-sheet-view-sheet'
 import { LoadingSheetCreateDialog } from './loading-sheet-create-dialog'
@@ -36,10 +45,25 @@ export function LoadingSheetsClient() {
   const [viewOpen, setViewOpen] = useState(false)
   const [selectedSheet, setSelectedSheet] = useState<LoadingSheetResponse | null>(null)
 
+  const [ridesList, setRidesList] = useState<RideResponse[]>([])
+  const [rideId, setRideId] = useState('')
+  const [statusFilter, setStatusFilter] = useState<LoadingSheetStatus | ''>('')
+
+  useEffect(() => {
+    ridesApi.list({ pageSize: 200 })
+      .then((res) => setRidesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' }))
+  }, [])
+
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
     try {
-      const res = await loadingSheetsApi.list({ page: p, pageSize: ps })
+      const res = await loadingSheetsApi.list({
+        page: p,
+        pageSize: ps,
+        rideId: rideId || undefined,
+        status: statusFilter || undefined,
+      })
       setData(getPaginatedItems(res))
       setTotal(res.total)
     } catch (err) {
@@ -47,12 +71,19 @@ export function LoadingSheetsClient() {
     } finally {
       setLoading(false)
     }
-  }, [])
+  }, [rideId, statusFilter])
 
   useEffect(() => {
     fetchData(page, pageSize)
   }, [fetchData, page, pageSize])
 
+  const hasFilters = !!rideId || !!statusFilter
+
+  function clearFilters() {
+    setRideId('')
+    setStatusFilter('')
+  }
+
   function handleView(row: LoadingSheetResponse) {
     setSelectedSheet(row)
     setViewOpen(true)
@@ -159,6 +190,49 @@ export function LoadingSheetsClient() {
         </Button>
       </div>
 
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="flex flex-col gap-1">
+          <label className="text-xs text-muted-foreground">Ride</label>
+          <Select
+            value={rideId || ALL}
+            onValueChange={(v) => { setRideId(v === ALL ? '' : v); setPage(1) }}
+          >
+            <SelectTrigger className="w-52">
+              <SelectValue placeholder="All rides" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All rides</SelectItem>
+              {ridesList.map((r) => (
+                <SelectItem key={r.id} value={r.id}>{r.vehicleNumberPlate} — {r.driverFullName}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-xs text-muted-foreground">Status</label>
+          <Select
+            value={statusFilter || ALL}
+            onValueChange={(v) => { setStatusFilter(v === ALL ? '' : v as LoadingSheetStatus); setPage(1) }}
+          >
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All statuses</SelectItem>
+              <SelectItem value="Planned">Planned</SelectItem>
+              <SelectItem value="Confirmed">Confirmed</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {hasFilters && (
+          <Button variant="ghost" size="sm" onClick={() => { clearFilters(); setPage(1) }}>
+            Clear filters
+          </Button>
+        )}
+      </div>
+
       <DataTable
         config={tableConfig}
         data={data}