343 lines
18 KiB
TypeScript
343 lines
18 KiB
TypeScript
import { Head, Link } from "@inertiajs/react";
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
|
import {
|
|
AlertTriangle,
|
|
MinusCircle,
|
|
Clock,
|
|
LayoutDashboard,
|
|
TrendingUp,
|
|
DollarSign,
|
|
ClipboardCheck,
|
|
Trophy,
|
|
Package,
|
|
} from "lucide-react";
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip as RechartsTooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/Components/ui/tooltip";
|
|
|
|
interface Props {
|
|
stats: {
|
|
totalItems: number;
|
|
lowStockCount: number;
|
|
negativeCount: number;
|
|
expiringCount: number;
|
|
totalInventoryValue: number;
|
|
thisMonthRevenue: number;
|
|
pendingOrdersCount: number;
|
|
pendingTransferCount: number;
|
|
pendingProductionCount: number;
|
|
todoCount: number;
|
|
salesTrend: { date: string; amount: number }[];
|
|
topSellingProducts: { name: string; amount: number }[];
|
|
topInventoryValue: { name: string; code: string; value: number }[];
|
|
topSellingByQuantity: { name: string; code: string; value: number }[];
|
|
expiringSoon: { name: string; batch_number: string; expiry_date: string; quantity: number }[];
|
|
};
|
|
}
|
|
|
|
export default function Dashboard({ stats }: Props) {
|
|
const mainCards = [
|
|
{
|
|
label: "庫存總值",
|
|
value: `NT$ ${Math.round(stats.totalInventoryValue).toLocaleString()}`,
|
|
description: `品項總數: ${stats.totalItems}`,
|
|
icon: <TrendingUp className="h-5 w-5" />,
|
|
color: "text-blue-600",
|
|
bgColor: "bg-blue-50",
|
|
borderColor: "border-blue-100",
|
|
},
|
|
{
|
|
label: "本月銷售營收",
|
|
value: `NT$ ${Math.round(stats.thisMonthRevenue).toLocaleString()}`,
|
|
description: "基於銷售導入數據",
|
|
icon: <DollarSign className="h-5 w-5" />,
|
|
color: "text-emerald-600",
|
|
bgColor: "bg-emerald-50",
|
|
borderColor: "border-emerald-100",
|
|
},
|
|
{
|
|
label: "待辦任務",
|
|
value: stats.todoCount,
|
|
description: (
|
|
<div className="flex items-center gap-1 font-medium">
|
|
<Link href={route('purchase-orders.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
|
|
採購: {stats.pendingOrdersCount}
|
|
</Link>
|
|
<span className="mx-1 text-gray-400">|</span>
|
|
<Link href={route('production-orders.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
|
|
生產: {stats.pendingProductionCount}
|
|
</Link>
|
|
<span className="mx-1 text-gray-400">|</span>
|
|
<Link href={route('inventory.transfer.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
|
|
調撥: {stats.pendingTransferCount}
|
|
</Link>
|
|
</div>
|
|
),
|
|
icon: <ClipboardCheck className="h-5 w-5" />,
|
|
color: "text-purple-600",
|
|
bgColor: "bg-purple-50",
|
|
borderColor: "border-purple-100",
|
|
alert: stats.todoCount > 0,
|
|
},
|
|
];
|
|
|
|
const alertCards = [
|
|
{
|
|
label: "低庫存",
|
|
value: stats.lowStockCount,
|
|
icon: <AlertTriangle className="h-4 w-4" />,
|
|
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: <MinusCircle className="h-4 w-4" />,
|
|
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: <Clock className="h-4 w-4" />,
|
|
color: "text-yellow-600",
|
|
bgColor: "bg-yellow-50",
|
|
borderColor: "border-yellow-200",
|
|
href: "/inventory/stock-query?status=expiring",
|
|
alert: stats.expiringCount > 0,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
breadcrumbs={[{ label: "儀表板", href: "/", isPage: true }]}
|
|
>
|
|
<Head title="儀表板" />
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl space-y-8">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
|
<LayoutDashboard className="h-6 w-6 text-primary-main" />
|
|
系統概況
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">即時分析營運數據與庫存警示</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{alertCards.map((card) => (
|
|
<Link key={card.label} href={card.href} className="flex-1 md:flex-none">
|
|
<div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${card.borderColor} ${card.bgColor} transition-colors hover:shadow-sm`}>
|
|
<div className={card.color}>{card.icon}</div>
|
|
<span className="text-xs font-medium text-gray-700">{card.label}</span>
|
|
<span className={`text-sm font-bold ${card.color}`}>{card.value}</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{mainCards.map((card) => (
|
|
<div key={card.label} className={`relative rounded-xl border ${card.borderColor} bg-white p-6 shadow-sm`}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className={`p-2 rounded-lg ${card.bgColor} ${card.color}`}>
|
|
{card.icon}
|
|
</div>
|
|
{card.alert && (
|
|
<span className="flex h-2 w-2 rounded-full bg-red-500 animate-pulse" />
|
|
)}
|
|
</div>
|
|
<div className="text-sm font-medium text-gray-500 mb-1">{card.label}</div>
|
|
<div className="text-2xl font-bold text-gray-900 mb-1">{card.value}</div>
|
|
<div className="text-xs text-gray-400">{card.description}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 銷售趨勢 & 熱銷排行 */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* 銷售趨勢 - Area Chart */}
|
|
<div className="lg:col-span-2 bg-white rounded-xl border border-gray-200 shadow-sm p-6">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<TrendingUp className="h-5 w-5 text-emerald-500" />
|
|
<h2 className="text-lg font-semibold text-gray-800">近 30 日銷售趨勢</h2>
|
|
</div>
|
|
<div className="h-[300px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={stats.salesTrend} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="colorAmount" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
|
|
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<XAxis dataKey="date" />
|
|
<YAxis tickFormatter={(value) => `$${value / 1000}k`} />
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
<RechartsTooltip formatter={(value) => `NT$ ${Number(value).toLocaleString()}`} />
|
|
<Area type="monotone" dataKey="amount" stroke="#10b981" fillOpacity={1} fill="url(#colorAmount)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 熱銷商品排行 (金額) - Bar Chart */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<Trophy className="h-5 w-5 text-indigo-500" />
|
|
<h2 className="text-lg font-semibold text-gray-800">熱銷金額 Top 5</h2>
|
|
</div>
|
|
<div className="h-[300px] w-full flex flex-col justify-center space-y-6">
|
|
{stats.topSellingProducts.length > 0 ? (
|
|
(() => {
|
|
const maxAmount = Math.max(...stats.topSellingProducts.map(p => p.amount));
|
|
return stats.topSellingProducts.map((product, index) => (
|
|
<div key={index} className="space-y-1">
|
|
<div className="flex justify-between items-end">
|
|
<div className="min-w-0 flex-1 pr-4">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="block text-sm font-medium text-gray-700 truncate cursor-help">
|
|
{product.name}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{product.name}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<span className="text-sm font-bold text-indigo-600 shrink-0">
|
|
NT$ {product.amount.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
|
|
<div
|
|
className="bg-indigo-500 h-2 rounded-full transition-all duration-500"
|
|
style={{ width: `${(product.amount / maxAmount) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
));
|
|
})()
|
|
) : (
|
|
<div className="h-full flex items-center justify-center text-gray-400 text-sm">暫無銷售數據</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 其他排行資訊 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* 庫存積壓排行 */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
|
|
<DollarSign className="h-4 w-4 text-blue-500" />
|
|
<h3 className="font-semibold text-gray-700">庫存積壓 Top 5</h3>
|
|
</div>
|
|
<div className="divide-y divide-gray-100">
|
|
{stats.topInventoryValue.length > 0 ? stats.topInventoryValue.map((item, idx) => (
|
|
<div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
|
|
<div className="min-w-0 flex-1 pr-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.name}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<div className="text-xs text-gray-500 truncate">{item.code}</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-bold text-gray-700">NT$ {item.value.toLocaleString()}</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="p-8 text-center text-gray-400 text-sm">無庫存資料</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 熱銷數量排行 */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
|
|
<Package className="h-4 w-4 text-emerald-500" />
|
|
<h3 className="font-semibold text-gray-700">熱銷數量 Top 5</h3>
|
|
</div>
|
|
<div className="divide-y divide-gray-100">
|
|
{stats.topSellingByQuantity.length > 0 ? stats.topSellingByQuantity.map((item, idx) => (
|
|
<div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
|
|
<div className="min-w-0 flex-1 pr-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.name}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<div className="text-xs text-gray-500 truncate">{item.code}</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-bold text-gray-700">{item.value.toLocaleString()} <span className="text-xs font-normal text-gray-500">件</span></div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="p-8 text-center text-gray-400 text-sm">無銷售資料</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 即將過期商品 */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
|
|
<Clock className="h-4 w-4 text-red-500" />
|
|
<h3 className="font-semibold text-gray-700">即將過期 Top 5</h3>
|
|
</div>
|
|
<div className="divide-y divide-gray-100">
|
|
{stats.expiringSoon.length > 0 ? stats.expiringSoon.map((item, idx) => (
|
|
<div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
|
|
<div className="min-w-0 flex-1 pr-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.name}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<div className="text-xs text-gray-500 truncate">批號: {item.batch_number}</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-bold text-red-600">{item.expiry_date}</div>
|
|
<div className="text-xs text-gray-500">庫存: {item.quantity}</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="p-8 text-center text-green-500 text-sm">目前無即將過期商品</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|