Kalana B. Thilakarathna
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { loadingSheets } from '@/lib/api/index'
|
|
import type { LoadingSheetResponse } from '@/types/api'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
|
Pending: 'outline',
|
|
DispatchConfirmed: 'secondary',
|
|
ReceiptConfirmed: 'default',
|
|
DiscrepancyFlagged: 'destructive',
|
|
Resolved: 'default',
|
|
}
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
Pending: 'Pending',
|
|
DispatchConfirmed: 'Dispatched',
|
|
ReceiptConfirmed: 'Received',
|
|
DiscrepancyFlagged: 'Discrepancy',
|
|
Resolved: 'Resolved',
|
|
}
|
|
|
|
export function LoadingSheetsWidget() {
|
|
const [data, setData] = useState<LoadingSheetResponse[]>([])
|
|
const [total, setTotal] = useState(0)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const res = await loadingSheets.list({ status: 'Pending', pageSize: 5, page: 1 })
|
|
setData(res.items ?? [])
|
|
setTotal(res.total ?? 0)
|
|
} catch {
|
|
// silent
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { fetchData() }, [fetchData])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Skeleton className="h-8 w-16" />
|
|
<Skeleton className="h-12 w-full" />
|
|
<Skeleton className="h-12 w-full" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 overflow-hidden">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-3xl font-bold">{total}</span>
|
|
<span className="text-sm text-muted-foreground">pending sheet{total !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5 overflow-auto">
|
|
{data.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No pending loading sheets</p>
|
|
) : (
|
|
data.map(sheet => (
|
|
<div key={sheet.id} className="flex items-center justify-between rounded-xl border px-3 py-2">
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate text-sm font-medium">{sheet.warehouseName}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{sheet.items.length} item{sheet.items.length !== 1 ? 's' : ''}
|
|
</span>
|
|
</div>
|
|
<Badge variant={STATUS_VARIANT[sheet.status] ?? 'outline'} className="ml-2 shrink-0">
|
|
{STATUS_LABEL[sheet.status] ?? sheet.status}
|
|
</Badge>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|