mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 實作即時庫存查詢功能、儀表板庫存導盤，及優化手動入庫批號與儲位連動與選單顯示

Browse Source
This commit is contained in:
sky121113
2026-02-10 10:47:31 +08:00
parent 6980eac1a4
commit a6393e03d8
12 changed files with 1401 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
resources/js/Pages/Dashboard.tsx
View File

@@ -1,211 +1,259 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Link, Head, usePage } from '@inertiajs/react';
import { PageProps } from '@/types/global';
import { cn } from "@/lib/utils";
import { Head, Link } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import {
Package,
Users,
ShoppingCart,
Warehouse as WarehouseIcon,
AlertTriangle,
MinusCircle,
Clock,
TrendingUp,
ChevronRight
} from 'lucide-react';
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 Stats {
productsCount: number;
vendorsCount: number;
purchaseOrdersCount: number;
warehousesCount: number;
totalInventoryValue: number;
pendingOrdersCount: number;
lowStockCount: number;
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: Stats;
stats: {
totalItems: number;
lowStockCount: number;
negativeCount: number;
expiringCount: number;
};
abnormalItems: AbnormalItem[];
}
export default function Dashboard({ stats }: Props) {
const { branding } = usePage<PageProps>().props;
const cardData = [
{
label: '商品總數',
value: stats.productsCount,
icon: <Package className="h-6 w-6 text-primary-main" />,
description: '目前系統中的商品種類',
color: 'bg-primary-main/10',
},
{
label: '合作廠商',
value: stats.vendorsCount,
icon: <Users className="h-6 w-6 text-blue-600" />,
description: '已建立資料的供應商',
color: 'bg-blue-50',
},
{
label: '採購單據',
value: stats.purchaseOrdersCount,
icon: <ShoppingCart className="h-6 w-6 text-purple-600" />,
description: '歷年累計採購單數量',
color: 'bg-purple-50',
},
{
label: '倉庫站點',
value: stats.warehousesCount,
icon: <WarehouseIcon className="h-6 w-6 text-orange-600" />,
description: '目前營運中的倉庫環境',
color: 'bg-orange-50',
},
];
// 狀態 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",
},
};
const alertData = [
export default function Dashboard({ stats, abnormalItems }: Props) {
const cards = [
{
label: '待處理採購單',
value: stats.pendingOrdersCount,
icon: <Clock className="h-5 w-5" />,
status: stats.pendingOrdersCount > 0 ? 'warning' : 'normal',
label: "庫存品項數",
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",
},
{
label: '低庫存警示',
label: "低庫存",
value: stats.lowStockCount,
icon: <AlertTriangle className="h-5 w-5" />,
status: stats.lowStockCount > 0 ? 'error' : 'normal',
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,
},
{
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,
},
{
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,
},
];
return (
<AuthenticatedLayout>
<Head title={`控制台 - ${branding?.short_name || 'Star'} ERP`} />
<AuthenticatedLayout
breadcrumbs={[
{
label: "儀表板",
href: "/",
isPage: true,
},
]}
>
<Head title="儀表板" />
<div className="p-8 max-w-7xl mx-auto">
<div className="mb-8">
<div className="container mx-auto p-6 max-w-7xl">
{/* 頁面標題 */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<TrendingUp className="h-6 w-6 text-primary-main" />
系統總覽
<LayoutDashboard className="h-6 w-6 text-primary-main" />
庫存總覽
</h1>
<p className="text-gray-500 mt-1">歡迎回來，這是您的 {branding?.short_name || 'Star'} ERP 營運數據概況。</p>
<p className="text-gray-500 mt-1">
即時掌握庫存狀態，異常情況一目了然
</p>
</div>
{/* 主要數據卡片 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
{cardData.map((card, index) => (
<div key={index} className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-4">
<div className={`p-3 rounded-xl ${card.color}`}>
{card.icon}
{/* 統計卡片 */}
<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>
</div>
<span className="text-xs font-medium text-grey-3 bg-grey-5 px-2 py-1 rounded-full border border-grey-4">
統計中
</span>
</div>
<div>
<h3 className="text-grey-2 text-sm font-medium mb-1">{card.label}</h3>
<div className="flex items-baseline gap-2">
<span className="text-2xl font-bold text-grey-0">{card.value}</span>
<div
className={`text-3xl font-bold ${card.color}`}
>
{card.value.toLocaleString()}
</div>
<p className="text-xs text-grey-3 mt-2">{card.description}</p>
</div>
</div>
</Link>
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* 警示與通知 */}
<div className="lg:col-span-1 space-y-6">
<h2 className="text-xl font-bold text-grey-0 flex items-center gap-2">
<TrendingUp className="h-5 w-5 text-primary-main" />
即時動態
{/* 異常庫存清單 */}
<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" />
異常庫存清單
</h2>
<div className="bg-white rounded-2xl border border-grey-4 shadow-sm divide-y divide-grey-4">
{alertData.map((alert, index) => (
<div key={index} className="p-6 flex items-center justify-between group cursor-pointer hover:bg-background-light transition-colors">
<div className="flex items-center gap-4">
<div className={cn(
"p-2 rounded-lg",
alert.status === 'error' ? "bg-red-50 text-red-600" :
alert.status === 'warning' ? "bg-amber-50 text-amber-600" : "bg-grey-5 text-grey-2"
)}>
{alert.icon}
</div>
<div>
<p className="text-sm font-medium text-grey-1">{alert.label}</p>
<p className="text-xs text-grey-3">需立即查看</p>
</div>
</div>
<div className="flex items-center gap-2">
<span className={cn(
"text-lg font-bold",
alert.status === 'error' ? "text-red-600" :
alert.status === 'warning' ? "text-amber-600" : "text-grey-1"
)}>
{alert.value}
</span>
<ChevronRight className="h-4 w-4 text-grey-4 group-hover:translate-x-1 transition-transform" />
</div>
</div>
))}
</div>
<div className="bg-primary/5 rounded-2xl p-6 border border-primary/10">
<h4 className="text-sm font-bold text-primary mb-2">系統提示</h4>
<p className="text-xs text-grey-1 leading-relaxed">
目前系統運行正常。如有任何問題，請聯絡開發團隊獲取支援。
</p>
</div>
<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>
</div>
{/* 快速捷徑 */}
<div className="lg:col-span-2 space-y-6">
<h2 className="text-xl font-bold text-grey-0">快速操作</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Link href="/products" className="group h-full">
<div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-primary-main transition-all h-full flex flex-col justify-between">
<div>
<h3 className="font-bold text-grey-0 mb-1 group-hover:text-primary-main">商品管理</h3>
<p className="text-sm text-grey-2">查看並編輯所有商品資料與單位換算。</p>
</div>
<div className="mt-4 flex items-center text-xs font-bold text-primary-main group-hover:gap-2 transition-all">
即刻前往 <ChevronRight className="h-3 w-3" />
</div>
</div>
</Link>
<Link href="/purchase-orders" className="group h-full">
<div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-purple-500 transition-all h-full flex flex-col justify-between">
<div>
<h3 className="font-bold text-grey-0 mb-1 group-hover:text-purple-600">採購單管理</h3>
<p className="text-sm text-grey-2">處理進貨、追蹤採購進度與管理單據。</p>
</div>
<div className="mt-4 flex items-center text-xs font-bold text-purple-600 group-hover:gap-2 transition-all">
即刻前往 <ChevronRight className="h-3 w-3" />
</div>
</div>
</Link>
<Link href="/vendors" className="group h-full">
<div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-blue-500 transition-all h-full flex flex-col justify-between">
<div>
<h3 className="font-bold text-grey-0 mb-1 group-hover:text-blue-600">廠商管理</h3>
<p className="text-sm text-grey-2">管理供應商聯絡資訊與供貨清單。</p>
</div>
<div className="mt-4 flex items-center text-xs font-bold text-blue-600 group-hover:gap-2 transition-all">
即刻前往 <ChevronRight className="h-3 w-3" />
</div>
</div>
</Link>
<Link href="/warehouses" className="group h-full">
<div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-orange-500 transition-all h-full flex flex-col justify-between">
<div>
<h3 className="font-bold text-grey-0 mb-1 group-hover:text-orange-600">倉庫與庫存</h3>
<p className="text-sm text-grey-2">管理入庫、庫存水位與基礎設施。</p>
</div>
<div className="mt-4 flex items-center text-xs font-bold text-orange-600 group-hover:gap-2 transition-all">
即刻前往 <ChevronRight className="h-3 w-3" />
</div>
</div>
</Link>
</div>
</div>
<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
? "text-red-600"
: ""
}`}
>
{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>
</div>
</div>
</AuthenticatedLayout>