2026-02-10 10:47:31 +08:00
|
|
|
|
import { Head, Link } from "@inertiajs/react";
|
|
|
|
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
2026-01-06 16:17:12 +08:00
|
|
|
|
import {
|
|
|
|
|
|
Package,
|
|
|
|
|
|
AlertTriangle,
|
2026-02-10 10:47:31 +08:00
|
|
|
|
MinusCircle,
|
2026-01-06 16:17:12 +08:00
|
|
|
|
Clock,
|
2026-02-10 10:47:31 +08:00
|
|
|
|
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";
|
2026-01-06 16:17:12 +08:00
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
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[];
|
2026-01-06 16:17:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
interface Props {
|
2026-02-10 10:47:31 +08:00
|
|
|
|
stats: {
|
|
|
|
|
|
totalItems: number;
|
|
|
|
|
|
lowStockCount: number;
|
|
|
|
|
|
negativeCount: number;
|
|
|
|
|
|
expiringCount: number;
|
|
|
|
|
|
};
|
|
|
|
|
|
abnormalItems: AbnormalItem[];
|
2026-01-06 16:17:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
// 狀態 Badge 映射
|
|
|
|
|
|
const statusConfig: Record<string, { label: string; className: string }> = {
|
|
|
|
|
|
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 = [
|
2026-01-06 16:17:12 +08:00
|
|
|
|
{
|
2026-02-10 16:07:31 +08:00
|
|
|
|
label: "庫存明細數",
|
2026-02-10 10:47:31 +08:00
|
|
|
|
value: stats.totalItems,
|
|
|
|
|
|
icon: <Package className="h-6 w-6" />,
|
|
|
|
|
|
color: "text-primary-main",
|
|
|
|
|
|
bgColor: "bg-primary-lightest",
|
|
|
|
|
|
borderColor: "border-primary-light",
|
|
|
|
|
|
href: "/inventory/stock-query",
|
2026-01-06 16:17:12 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-02-10 10:47:31 +08:00
|
|
|
|
label: "低庫存",
|
|
|
|
|
|
value: stats.lowStockCount,
|
|
|
|
|
|
icon: <AlertTriangle className="h-6 w-6" />,
|
|
|
|
|
|
color: "text-amber-600",
|
|
|
|
|
|
bgColor: "bg-amber-50",
|
|
|
|
|
|
borderColor: "border-amber-200",
|
|
|
|
|
|
href: "/inventory/stock-query?status=low_stock",
|
|
|
|
|
|
alert: stats.lowStockCount > 0,
|
2026-01-06 16:17:12 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-02-10 10:47:31 +08:00
|
|
|
|
label: "負庫存",
|
|
|
|
|
|
value: stats.negativeCount,
|
|
|
|
|
|
icon: <MinusCircle className="h-6 w-6" />,
|
|
|
|
|
|
color: "text-red-600",
|
|
|
|
|
|
bgColor: "bg-red-50",
|
|
|
|
|
|
borderColor: "border-red-200",
|
|
|
|
|
|
href: "/inventory/stock-query?status=negative",
|
|
|
|
|
|
alert: stats.negativeCount > 0,
|
2026-01-06 16:17:12 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-02-10 10:47:31 +08:00
|
|
|
|
label: "即將過期",
|
|
|
|
|
|
value: stats.expiringCount,
|
|
|
|
|
|
icon: <Clock className="h-6 w-6" />,
|
|
|
|
|
|
color: "text-yellow-600",
|
|
|
|
|
|
bgColor: "bg-yellow-50",
|
|
|
|
|
|
borderColor: "border-yellow-200",
|
|
|
|
|
|
href: "/inventory/stock-query?status=expiring",
|
|
|
|
|
|
alert: stats.expiringCount > 0,
|
2026-01-06 16:17:12 +08:00
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<AuthenticatedLayout
|
|
|
|
|
|
breadcrumbs={[
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "儀表板",
|
|
|
|
|
|
href: "/",
|
|
|
|
|
|
isPage: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
]}
|
|
|
|
|
|
>
|
|
|
|
|
|
<Head title="儀表板" />
|
2026-01-06 16:17:12 +08:00
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|
|
|
|
|
{/* 頁面標題 */}
|
|
|
|
|
|
<div className="mb-6">
|
2026-01-13 17:00:58 +08:00
|
|
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<LayoutDashboard className="h-6 w-6 text-primary-main" />
|
|
|
|
|
|
庫存總覽
|
2026-01-13 17:00:58 +08:00
|
|
|
|
</h1>
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<p className="text-gray-500 mt-1">
|
|
|
|
|
|
即時掌握庫存狀態，異常情況一目了然
|
|
|
|
|
|
</p>
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
{/* 統計卡片 */}
|
|
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
|
|
|
|
{cards.map((card) => (
|
|
|
|
|
|
<Link key={card.label} href={card.href}>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className={`relative rounded-xl border ${card.borderColor} ${card.bgColor} p-5 transition-all hover:shadow-md hover:-translate-y-0.5 cursor-pointer`}
|
|
|
|
|
|
>
|
|
|
|
|
|
{card.alert && (
|
|
|
|
|
|
<span className="absolute top-3 right-3 h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse" />
|
|
|
|
|
|
)}
|
|
|
|
|
|
<div className="flex items-center gap-3 mb-3">
|
|
|
|
|
|
<div className={card.color}>
|
|
|
|
|
|
{card.icon}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="text-sm font-medium text-grey-1">
|
|
|
|
|
|
{card.label}
|
|
|
|
|
|
</span>
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</div>
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<div
|
|
|
|
|
|
className={`text-3xl font-bold ${card.color}`}
|
|
|
|
|
|
>
|
|
|
|
|
|
{card.value.toLocaleString()}
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-02-10 10:47:31 +08:00
|
|
|
|
</Link>
|
2026-01-06 16:17:12 +08:00
|
|
|
|
))}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
{/* 異常庫存清單 */}
|
|
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
|
|
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
|
|
|
|
|
|
<h2 className="text-lg font-semibold text-grey-0 flex items-center gap-2">
|
|
|
|
|
|
<AlertTriangle className="h-5 w-5 text-amber-500" />
|
|
|
|
|
|
異常庫存清單
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</h2>
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<Link href="/inventory/stock-query?status=abnormal">
|
|
|
|
|
|
<Button
|
|
|
|
|
|
variant="outline"
|
|
|
|
|
|
size="sm"
|
|
|
|
|
|
className="button-outlined-primary gap-1"
|
|
|
|
|
|
>
|
|
|
|
|
|
查看完整庫存
|
|
|
|
|
|
<ArrowRight className="h-4 w-4" />
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Link>
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-10 10:47:31 +08:00
|
|
|
|
<Table>
|
|
|
|
|
|
<TableHeader className="bg-gray-50">
|
|
|
|
|
|
<TableRow>
|
|
|
|
|
|
<TableHead className="w-[50px] text-center">
|
|
|
|
|
|
#
|
|
|
|
|
|
</TableHead>
|
|
|
|
|
|
<TableHead>商品代碼</TableHead>
|
|
|
|
|
|
<TableHead>商品名稱</TableHead>
|
|
|
|
|
|
<TableHead>倉庫</TableHead>
|
|
|
|
|
|
<TableHead className="text-right">
|
|
|
|
|
|
數量
|
|
|
|
|
|
</TableHead>
|
|
|
|
|
|
<TableHead className="text-center">
|
|
|
|
|
|
狀態
|
|
|
|
|
|
</TableHead>
|
|
|
|
|
|
</TableRow>
|
|
|
|
|
|
</TableHeader>
|
|
|
|
|
|
<TableBody>
|
|
|
|
|
|
{abnormalItems.length === 0 ? (
|
|
|
|
|
|
<TableRow>
|
|
|
|
|
|
<TableCell
|
|
|
|
|
|
colSpan={6}
|
|
|
|
|
|
className="text-center py-8 text-gray-500"
|
|
|
|
|
|
>
|
|
|
|
|
|
🎉 目前沒有異常庫存，一切正常！
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
</TableRow>
|
|
|
|
|
|
) : (
|
|
|
|
|
|
abnormalItems.map((item, index) => (
|
|
|
|
|
|
<TableRow key={item.id}>
|
|
|
|
|
|
<TableCell className="text-gray-500 font-medium text-center">
|
|
|
|
|
|
{index + 1}
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
<TableCell className="font-mono text-sm">
|
|
|
|
|
|
{item.product_code}
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
<TableCell className="font-medium">
|
|
|
|
|
|
{item.product_name}
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
<TableCell>
|
|
|
|
|
|
{item.warehouse_name}
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
<TableCell
|
|
|
|
|
|
className={`text-right font-medium ${item.quantity < 0
|
2026-02-10 16:07:31 +08:00
|
|
|
|
? "text-red-600"
|
|
|
|
|
|
: ""
|
2026-02-10 10:47:31 +08:00
|
|
|
|
}`}
|
|
|
|
|
|
>
|
|
|
|
|
|
{item.quantity}
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
<TableCell className="text-center">
|
|
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-1">
|
|
|
|
|
|
{item.statuses.map(
|
|
|
|
|
|
(status) => {
|
|
|
|
|
|
const config =
|
|
|
|
|
|
statusConfig[
|
|
|
|
|
|
status
|
|
|
|
|
|
];
|
|
|
|
|
|
if (!config)
|
|
|
|
|
|
return null;
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Badge
|
|
|
|
|
|
key={status}
|
|
|
|
|
|
variant="outline"
|
|
|
|
|
|
className={
|
|
|
|
|
|
config.className
|
|
|
|
|
|
}
|
|
|
|
|
|
>
|
|
|
|
|
|
{config.label}
|
|
|
|
|
|
</Badge>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
)}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</TableCell>
|
|
|
|
|
|
</TableRow>
|
|
|
|
|
|
))
|
|
|
|
|
|
)}
|
|
|
|
|
|
</TableBody>
|
|
|
|
|
|
</Table>
|
2026-01-06 16:17:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</AuthenticatedLayout>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
