import { Head, Link } from "@inertiajs/react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Package, AlertTriangle, MinusCircle, Clock, ArrowRight, LayoutDashboard, } from "lucide-react"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { Badge } from "@/Components/ui/badge"; import { Button } from "@/Components/ui/button"; interface AbnormalItem { id: number; product_code: string; product_name: string; warehouse_name: string; quantity: number; safety_stock: number | null; expiry_date: string | null; statuses: string[]; } interface Props { stats: { totalItems: number; lowStockCount: number; negativeCount: number; expiringCount: number; }; abnormalItems: AbnormalItem[]; } // 狀態 Badge 映射 const statusConfig: Record = { negative: { label: "負庫存", className: "bg-red-100 text-red-800 border-red-200", }, low_stock: { label: "低庫存", className: "bg-amber-100 text-amber-800 border-amber-200", }, expiring: { label: "即將過期", className: "bg-yellow-100 text-yellow-800 border-yellow-200", }, expired: { label: "已過期", className: "bg-red-100 text-red-800 border-red-200", }, }; export default function Dashboard({ stats, abnormalItems }: Props) { const cards = [ { label: "庫存明細數", value: stats.totalItems, icon: , color: "text-primary-main", bgColor: "bg-primary-lightest", borderColor: "border-primary-light", href: "/inventory/stock-query", }, { label: "低庫存", value: stats.lowStockCount, icon: , color: "text-amber-600", bgColor: "bg-amber-50", borderColor: "border-amber-200", href: "/inventory/stock-query?status=low_stock", alert: stats.lowStockCount > 0, }, { label: "負庫存", value: stats.negativeCount, icon: , color: "text-red-600", bgColor: "bg-red-50", borderColor: "border-red-200", href: "/inventory/stock-query?status=negative", alert: stats.negativeCount > 0, }, { label: "即將過期", value: stats.expiringCount, icon: , color: "text-yellow-600", bgColor: "bg-yellow-50", borderColor: "border-yellow-200", href: "/inventory/stock-query?status=expiring", alert: stats.expiringCount > 0, }, ]; return (

{/* 頁面標題 */}

庫存總覽

即時掌握庫存狀態，異常情況一目了然

{/* 統計卡片 */}

{cards.map((card) => (

{card.alert && ( )}

{card.icon}

{card.label}

{card.value.toLocaleString()}

))}

{/* 異常庫存清單 */}

異常庫存清單

# 商品代碼商品名稱倉庫數量狀態 {abnormalItems.length === 0 ? ( 🎉 目前沒有異常庫存，一切正常！ ) : ( abnormalItems.map((item, index) => ( {index + 1} {item.product_code} {item.product_name} {item.warehouse_name} {item.quantity}

{item.statuses.map( (status) => { const config = statusConfig[ status ]; if (!config) return null; return ( {config.label} ); } )}

)) )}

); }