Kalana B. Thilakarathna
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { stock } from '@/lib/api/index'
|
|
import type { StockBalanceResponse } from '@/types/api'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const LOW_STOCK_THRESHOLD = 10
|
|
|
|
export function StockAlertsWidget() {
|
|
const [alerts, setAlerts] = useState<StockBalanceResponse[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const res = await stock.balances({ pageSize: 100, page: 1 })
|
|
const low = (res.items ?? []).filter(b => b.quantity <= LOW_STOCK_THRESHOLD)
|
|
setAlerts(low)
|
|
} 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-10 w-full" />
|
|
<Skeleton className="h-10 w-full" />
|
|
<Skeleton className="h-10 w-full" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const outOfStock = alerts.filter(a => a.quantity === 0)
|
|
const lowStock = alerts.filter(a => a.quantity > 0)
|
|
|
|
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">{alerts.length}</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
alert{alerts.length !== 1 ? 's' : ''}
|
|
{outOfStock.length > 0 && (
|
|
<span className="ml-1 text-destructive">({outOfStock.length} out of stock)</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5 overflow-auto">
|
|
{alerts.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">All stock levels are healthy</p>
|
|
) : (
|
|
alerts.map(b => (
|
|
<div key={`${b.itemId}-${b.locationId}`} 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">{b.itemName}</span>
|
|
<span className="text-xs text-muted-foreground capitalize">{b.locationType}</span>
|
|
</div>
|
|
<Badge
|
|
variant={b.quantity === 0 ? 'destructive' : 'outline'}
|
|
className="ml-2 shrink-0"
|
|
>
|
|
{b.quantity === 0 ? 'Out of stock' : `${b.quantity} left`}
|
|
</Badge>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|