From 35fe512bd16fe52f192f80308696ccb1b5d5eadc Mon Sep 17 00:00:00 2001 From: DeepnaPooja Date: Wed, 2 Sep 2026 17:01:38 +0530 Subject: [PATCH] Add loading sheet view fix --- Distribution/docs/testbug.md | 2 +- .../_components/loading-sheet-view-sheet.tsx | 102 ++++++++++++++++++ .../_components/loading-sheets-client.tsx | 21 ++++ 3 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheet-view-sheet.tsx diff --git a/Distribution/docs/testbug.md b/Distribution/docs/testbug.md index c701303..571dbbe 100644 --- a/Distribution/docs/testbug.md +++ b/Distribution/docs/testbug.md @@ -6,7 +6,6 @@ Running log of backend API failures found during testing and the corresponding f | # | Area | Backend API Failure | Frontend Change Needed | Date | |---|------|----------------------|--------------------------|------| -| 2 | Operations → Loading Sheets | | Add a View icon to the action column in Operations → Loading Sheets table | 2026-09-01 | | 3 | Sales (Create Sale) | Sale create not working | Update the Create Sale modal UI |Sale summary calculation not display | Add view icon to the action | 2026-09-01 | | 4 | Orders | | Add a View icon to the action column in Orders table | 2026-09-01 | | 5 | Payments (Record Payment) | Cannot add new payment | Add a View icon to the action column in Payments table | 2026-09-01 | @@ -40,6 +39,7 @@ Running log of backend API failures found during testing and the corresponding f |---|------|----------------------|--------------------------|----------|------| | 1 | Operations → Rides (Create Ride) | Create Ride failed with "Vehicle not found" | — | Fixed DTO field naming mismatch | 2026-09-02 | | 29 | Operations → Rides | Cancel-request API routes mismatched | Added View, Edit, and Cancel icons to Rides table | Fixed API routes + added action icons | 2026-09-02 | +| 2 | Operations → Loading Sheets | — | Missing View icon | Added View icon + details modal (status, dispatch/receipt confirmer + timestamps, item-level dispatched/received/resolved breakdown) | 2026-09-02 | ## Implementation Guide diff --git a/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheet-view-sheet.tsx b/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheet-view-sheet.tsx new file mode 100644 index 0000000..8ab855d --- /dev/null +++ b/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheet-view-sheet.tsx @@ -0,0 +1,102 @@ +'use client' + +import { Badge } from '@/components/ui/badge' +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog' +import { Separator } from '@/components/ui/separator' +import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api' + +const LS_STATUS_VARIANT: Record = { + Pending: 'secondary', + DispatchConfirmed: 'default', + ReceiptConfirmed: 'default', + DiscrepancyFlagged: 'destructive', + Resolved: 'secondary', +} + +const fmtDateTime = (v: string | null) => + v + ? new Date(v).toLocaleString('en-GB', { + day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', + }) + : '—' + +interface LoadingSheetViewSheetProps { + open: boolean + onClose: () => void + sheet: LoadingSheetResponse | null +} + +function Row({ label, value }: { label: string; value: React.ReactNode }) { + return ( +
+ {label} + {value} +
+ ) +} + +export function LoadingSheetViewSheet({ open, onClose, sheet }: LoadingSheetViewSheetProps) { + if (!sheet) return null + + return ( + !v && onClose()}> + + + Loading Sheet Details + + +
+ {sheet.id.substring(0, 8)}} /> + + {sheet.status}} /> + + + + + +
+ + + +
+

Items ({sheet.items.length})

+
+ + + + + + + + + + + {sheet.items.length === 0 ? ( + + + + ) : ( + sheet.items.map((item) => ( + + + + + + + )) + )} + +
ItemDispatchedReceivedResolved
+ No items on this sheet. +
{item.itemName}{item.quantityDispatched}{item.quantityReceived}{item.quantityResolved}
+
+
+ + + ) +} diff --git a/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx b/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx index ceb351c..36bde8a 100644 --- a/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx +++ b/distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx @@ -8,6 +8,8 @@ import { toast } from '@/components/ui/toast' import { loadingSheets as loadingSheetsApi, getApiError, getPaginatedItems } from '@/lib/api/index' import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api' +import { LoadingSheetViewSheet } from './loading-sheet-view-sheet' + const fmtDate = (v: string) => new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) @@ -28,6 +30,9 @@ export function LoadingSheetsClient() { const [page, setPage] = useState(1) const [pageSize, setPageSize] = useState(20) + const [viewOpen, setViewOpen] = useState(false) + const [selectedSheet, setSelectedSheet] = useState(null) + const fetchData = useCallback(async (p: number, ps: number) => { setLoading(true) try { @@ -45,6 +50,11 @@ export function LoadingSheetsClient() { fetchData(page, pageSize) }, [fetchData, page, pageSize]) + function handleView(row: LoadingSheetResponse) { + setSelectedSheet(row) + setViewOpen(true) + } + async function handleConfirmDispatch(row: LoadingSheetResponse) { try { await loadingSheetsApi.confirmDispatch(row.id) @@ -114,6 +124,11 @@ export function LoadingSheetsClient() { ], rowActions: { actions: () => [ + { + action: 'view', + label: 'View sheet', + onClick: handleView, + }, { action: 'confirm', label: 'Confirm dispatch', @@ -151,6 +166,12 @@ export function LoadingSheetsClient() { setPageSize(p.pageSize) }} /> + + setViewOpen(false)} + sheet={selectedSheet} + /> ) }