first commit

resources/js/Components/Warehouse/Inventory/InventoryAdjustmentDialog.tsx

@@ -0,0 +1,224 @@
+import { useState, useEffect } from "react";
+import { useForm } from "@inertiajs/react";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import { Textarea } from "@/Components/ui/textarea";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/Components/ui/select";
+import { WarehouseInventory } from "@/types/warehouse";
+import { toast } from "sonner";
+import { Minus, Plus, Equal } from "lucide-react";
+
+interface InventoryAdjustmentDialogProps {
+    warehouseId: string;
+    item: WarehouseInventory | null;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+type Operation = "add" | "subtract" | "set";
+
+export default function InventoryAdjustmentDialog({
+    warehouseId,
+    item,
+    isOpen,
+    onClose,
+}: InventoryAdjustmentDialogProps) {
+    const [operation, setOperation] = useState<Operation>("add");
+
+    const { data, setData, put, processing, reset, errors } = useForm({
+        quantity: 0,
+        reason: "盤點調整",
+        notes: "",
+        operation: "add" as Operation,
+        type: "adjustment", // 預設類型
+    });
+
+    // 重新開放時重置
+    useEffect(() => {
+        if (isOpen) {
+            reset();
+            setOperation("add");
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        setData("operation", operation);
+    }, [operation]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!item) return;
+
+        put(route("warehouses.inventory.update", {
+            warehouse: warehouseId,
+            product: item.productId // 這裡後端接收 product (或可用 inventory ID 擴充)
+        }), {
+            onSuccess: () => {
+                toast.success("庫存調整成功");
+                onClose();
+            },
+            onError: () => {
+                toast.error("調整失敗，請檢查欄位資料");
+            }
+        });
+    };
+
+    if (!item) return null;
+
+    // 計算剩餘庫存預覽
+    const getResultQuantity = () => {
+        const inputQty = Number(data.quantity) || 0;
+        switch (operation) {
+            case "add": return item.quantity + inputQty;
+            case "subtract": return Math.max(0, item.quantity - inputQty);
+            case "set": return inputQty;
+            default: return item.quantity;
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>手動庫存調整</DialogTitle>
+                    <DialogDescription>
+                        調整商品：{item.productName} (批號: {item.batchNumber || "無"})
+                    </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit} className="space-y-6 py-4">
+                    {/* 現有庫存 */}
+                    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
+                        <span className="text-gray-600">現有庫存</span>
+                        <span className="font-bold text-lg">{item.quantity}</span>
+                    </div>
+
+                    {/* 調整方式 */}
+                    <div className="space-y-3">
+                        <Label>調整方式</Label>
+                        <div className="grid grid-cols-3 gap-2">
+                            <Button
+                                type="button"
+                                variant={operation === "add" ? "default" : "outline"}
+                                className={`flex flex-col gap-1 h-auto py-2 ${operation === "add" ? "bg-primary text-white" : ""}`}
+                                onClick={() => setOperation("add")}
+                            >
+                                <Plus className="h-4 w-4" />
+                                <span className="text-xs">增加</span>
+                            </Button>
+                            <Button
+                                type="button"
+                                variant={operation === "subtract" ? "default" : "outline"}
+                                className={`flex flex-col gap-1 h-auto py-2 ${operation === "subtract" ? "bg-primary text-white" : ""}`}
+                                onClick={() => setOperation("subtract")}
+                            >
+                                <Minus className="h-4 w-4" />
+                                <span className="text-xs">減少</span>
+                            </Button>
+                            <Button
+                                type="button"
+                                variant={operation === "set" ? "default" : "outline"}
+                                className={`flex flex-col gap-1 h-auto py-2 ${operation === "set" ? "bg-primary text-white" : ""}`}
+                                onClick={() => setOperation("set")}
+                            >
+                                <Equal className="h-4 w-4" />
+                                <span className="text-xs">直接設定</span>
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* 調整數量 */}
+                    <div className="space-y-2">
+                        <Label htmlFor="quantity">調整數量</Label>
+                        <Input
+                            id="quantity"
+                            type="number"
+                            step="0.01"
+                            value={data.quantity === 0 ? "" : data.quantity}
+                            onChange={e => setData("quantity", Number(e.target.value))}
+                            placeholder="請輸入數量"
+                            className={errors.quantity ? "border-red-500" : ""}
+                        />
+                        {errors.quantity && <p className="text-xs text-red-500">{errors.quantity}</p>}
+                    </div>
+
+                    {/* 預計剩餘庫存 */}
+                    <div className="flex items-center justify-between p-3 bg-primary/5 rounded-lg border border-primary/20">
+                        <span className="text-gray-600">調整後庫存</span>
+                        <span className="font-bold text-lg text-primary">{getResultQuantity()}</span>
+                    </div>
+
+                    {/* 調整原因 */}
+                    <div className="space-y-2">
+                        <Label htmlFor="reason">調整原因</Label>
+                        <Select
+                            value={data.reason}
+                            onValueChange={val => setData("reason", val)}
+                        >
+                            <SelectTrigger>
+                                <SelectValue placeholder="選擇原因" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="盤點調整">盤點調整</SelectItem>
+                                <SelectItem value="損耗">損耗</SelectItem>
+                                <SelectItem value="其他">其他</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    {/* 備註 */}
+                    <div className="space-y-2">
+                        <Label htmlFor="notes">備註（選填）</Label>
+                        <Textarea
+                            id="notes"
+                            value={data.notes}
+                            onChange={e => setData("notes", e.target.value)}
+                            placeholder="輸入調整細節..."
+                            rows={2}
+                        />
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={onClose}
+                            disabled={processing}
+                        >
+                            取消
+                        </Button>
+                        <Button
+                            type="submit"
+                            disabled={processing || data.quantity <= 0 && operation !== "set"}
+                        >
+                            確認調整
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+// Helper: 假如沒有 route 函式 (Ziggy)，則需要手動處理 URL
+function route(name: string, params: any) {
+    if (name === "warehouses.inventory.update") {
+        return `/warehouses/${params.warehouse}/inventory/${params.product}`;
+    }
+    return "";
+}

resources/js/Components/Warehouse/Inventory/InventoryStats.tsx

@@ -0,0 +1,32 @@
+/**
+ * 庫存統計資訊元件
+ */
+
+interface InventoryStatsProps {
+    totalItems: number;
+    totalQuantity: number;
+    lowStockItems: number;
+}
+
+export default function InventoryStats({
+    totalItems,
+    totalQuantity,
+    lowStockItems,
+}: InventoryStatsProps) {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-white p-4 rounded-lg border shadow-sm">
+                <p className="text-sm text-gray-500">在庫品項</p>
+                <p className="text-2xl font-bold">{totalItems} 項</p>
+            </div>
+            <div className="bg-white p-4 rounded-lg border shadow-sm">
+                <p className="text-sm text-gray-500">在庫總量</p>
+                <p className="text-2xl font-bold">{totalQuantity.toLocaleString()} 個</p>
+            </div>
+            <div className="bg-white p-4 rounded-lg border shadow-sm">
+                <p className="text-sm text-gray-500 font-medium text-red-600">低庫存告警</p>
+                <p className="text-2xl font-bold text-red-600">{lowStockItems} 項</p>
+            </div>
+        </div>
+    );
+}

resources/js/Components/Warehouse/Inventory/InventoryTable.tsx

@@ -0,0 +1,300 @@
+/**
+ * 庫存表格元件 (扁平化列表版)
+ * 顯示庫存項目列表，不進行折疊分組
+ */
+
+import { useState, useMemo } from "react";
+import {
+    AlertTriangle,
+    Trash2,
+    Eye,
+    CheckCircle,
+    Package,
+    ArrowUpDown,
+    ArrowUp,
+    ArrowDown
+} from "lucide-react";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/Components/ui/table";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { WarehouseInventory } from "@/types/warehouse";
+import { getSafetyStockStatus } from "@/utils/inventory";
+import { formatDate } from "@/utils/format";
+
+interface InventoryTableProps {
+    inventories: WarehouseInventory[];
+    onView: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+
+type SortField = "productName" | "quantity" | "lastInboundDate" | "lastOutboundDate" | "safetyStock" | "status";
+type SortDirection = "asc" | "desc" | null;
+
+export default function InventoryTable({
+    inventories,
+    onView,
+    onDelete,
+}: InventoryTableProps) {
+    const [sortField, setSortField] = useState<SortField | null>("status");
+    const [sortDirection, setSortDirection] = useState<SortDirection>("asc"); // "asc" for status means Priority High (Low Stock) first
+
+    // 處理排序
+    const handleSort = (field: SortField) => {
+        if (sortField === field) {
+            if (sortDirection === "asc") {
+                setSortDirection("desc");
+            } else if (sortDirection === "desc") {
+                setSortDirection(null);
+                setSortField(null);
+            } else {
+                setSortDirection("asc");
+            }
+        } else {
+            setSortField(field);
+            setSortDirection("asc");
+        }
+    };
+
+    // 排序後的列表
+    const sortedInventories = useMemo(() => {
+        if (!sortField || !sortDirection) {
+            return inventories;
+        }
+
+        return [...inventories].sort((a, b) => {
+            let aValue: string | number;
+            let bValue: string | number;
+
+            // Status Priority map for sorting: Low > Near > Normal
+            const statusPriority: Record<string, number> = {
+                "低於": 1,
+                "接近": 2,
+                "正常": 3
+            };
+
+            switch (sortField) {
+                case "productName":
+                    aValue = a.productName;
+                    bValue = b.productName;
+                    break;
+                case "quantity":
+                    aValue = a.quantity;
+                    bValue = b.quantity;
+                    break;
+                case "lastInboundDate":
+                    aValue = a.lastInboundDate || "";
+                    bValue = b.lastInboundDate || "";
+                    break;
+                case "lastOutboundDate":
+                    aValue = a.lastOutboundDate || "";
+                    bValue = b.lastOutboundDate || "";
+                    break;
+                case "safetyStock":
+                    aValue = a.safetyStock ?? -1; // null as -1 or Infinity depending on desired order
+                    bValue = b.safetyStock ?? -1;
+                    break;
+                case "status":
+                    const aStatus = (a.safetyStock !== null && a.safetyStock !== undefined) ? getSafetyStockStatus(a.quantity, a.safetyStock) : "正常";
+                    const bStatus = (b.safetyStock !== null && b.safetyStock !== undefined) ? getSafetyStockStatus(b.quantity, b.safetyStock) : "正常";
+                    aValue = statusPriority[aStatus] || 3;
+                    bValue = statusPriority[bStatus] || 3;
+                    break;
+                default:
+                    return 0;
+            }
+
+            if (typeof aValue === "string" && typeof bValue === "string") {
+                return sortDirection === "asc"
+                    ? aValue.localeCompare(bValue, "zh-TW")
+                    : bValue.localeCompare(aValue, "zh-TW");
+            } else {
+                return sortDirection === "asc"
+                    ? (aValue as number) - (bValue as number)
+                    : (bValue as number) - (aValue as number);
+            }
+        });
+    }, [inventories, sortField, sortDirection]);
+
+    const SortIcon = ({ field }: { field: SortField }) => {
+        if (sortField !== field) {
+            return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
+        }
+        if (sortDirection === "asc") {
+            return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
+        }
+        if (sortDirection === "desc") {
+            return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
+        }
+        return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
+    };
+
+    if (inventories.length === 0) {
+        return (
+            <div className="text-center py-12 text-gray-400">
+                <Package className="h-12 w-12 mx-auto mb-4 opacity-20" />
+                <p>無符合條件的品項</p>
+                <p className="text-sm mt-1">請調整搜尋或篩選條件</p>
+            </div>
+        );
+    }
+
+    // 獲取狀態徽章
+    const getStatusBadge = (quantity: number, safetyStock: number) => {
+        const status = getSafetyStockStatus(quantity, safetyStock);
+        switch (status) {
+            case "正常":
+                return (
+                    <Badge className="bg-green-100 text-green-700 border-green-300 hover:bg-green-100">
+                        <CheckCircle className="mr-1 h-3 w-3" />
+                        正常
+                    </Badge>
+                );
+            case "接近": // 數量 <= 安全庫存 * 1.2
+                return (
+                    <Badge className="bg-yellow-100 text-yellow-700 border-yellow-300 hover:bg-yellow-100">
+                        <AlertTriangle className="mr-1 h-3 w-3" />
+                        接近
+                    </Badge>
+                );
+            case "低於": // 數量 < 安全庫存
+                return (
+                    <Badge className="bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-100">
+                        <AlertTriangle className="mr-1 h-3 w-3" />
+                        低於
+                    </Badge>
+                );
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className="overflow-x-auto">
+            <Table>
+                <TableHeader>
+                    <TableRow className="bg-gray-50/50">
+                        <TableHead className="w-[50px] text-center">#</TableHead>
+                        <TableHead className="w-[25%]">
+                            <button onClick={() => handleSort("productName")} className="flex items-center hover:text-gray-900 font-semibold">
+                                商品資訊 <SortIcon field="productName" />
+                            </button>
+                        </TableHead>
+                        <TableHead className="w-[10%] text-right">
+                            <div className="flex justify-end">
+                                <button onClick={() => handleSort("quantity")} className="flex items-center hover:text-gray-900 font-semibold">
+                                    庫存數量 <SortIcon field="quantity" />
+                                </button>
+                            </div>
+                        </TableHead>
+                        <TableHead className="w-[12%]">
+                            <button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
+                                最新入庫 <SortIcon field="lastInboundDate" />
+                            </button>
+                        </TableHead>
+                        <TableHead className="w-[12%]">
+                            <button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
+                                最新出庫 <SortIcon field="lastOutboundDate" />
+                            </button>
+                        </TableHead>
+                        <TableHead className="w-[10%] text-right">
+                            <div className="flex justify-end">
+                                <button onClick={() => handleSort("safetyStock")} className="flex items-center hover:text-gray-900 font-semibold">
+                                    安全庫存 <SortIcon field="safetyStock" />
+                                </button>
+                            </div>
+                        </TableHead>
+                        <TableHead className="w-[10%] text-center">
+                            <div className="flex justify-center">
+                                <button onClick={() => handleSort("status")} className="flex items-center hover:text-gray-900 font-semibold">
+                                    狀態 <SortIcon field="status" />
+                                </button>
+                            </div>
+                        </TableHead>
+                        <TableHead className="w-[10%] text-center">操作</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {sortedInventories.map((item, index) => (
+                        <TableRow key={item.id}>
+                            <TableCell className="text-gray-500 font-medium text-center">
+                                {index + 1}
+                            </TableCell>
+                            {/* 商品資訊 */}
+                            <TableCell>
+                                <div className="flex flex-col">
+                                    <div className="font-medium text-gray-900">{item.productName}</div>
+                                    <div className="text-xs text-gray-500">{item.productCode}</div>
+                                </div>
+                            </TableCell>
+
+                            {/* 庫存數量 */}
+                            <TableCell className="text-right">
+                                <span className="font-medium text-gray-900">{item.quantity}</span>
+                                <span className="text-xs text-gray-500 ml-1">{item.unit}</span>
+                            </TableCell>
+
+                            {/* 最新入庫 */}
+                            <TableCell className="text-gray-600">
+                                {item.lastInboundDate ? formatDate(item.lastInboundDate) : "-"}
+                            </TableCell>
+
+                            {/* 最新出庫 */}
+                            <TableCell className="text-gray-600">
+                                {item.lastOutboundDate ? formatDate(item.lastOutboundDate) : "-"}
+                            </TableCell>
+
+                            {/* 安全庫存 */}
+                            <TableCell className="text-right">
+                                {item.safetyStock !== null && item.safetyStock >= 0 ? (
+                                    <span className="font-medium text-gray-900">
+                                        {item.safetyStock} <span className="text-xs text-gray-500 font-normal">{item.unit}</span>
+                                    </span>
+                                ) : (
+                                    <span className="text-gray-400 text-xs">未設定</span>
+                                )}
+                            </TableCell>
+
+                            {/* 狀態 */}
+                            <TableCell className="text-center">
+                                {(item.safetyStock !== null && item.safetyStock !== undefined) ? getStatusBadge(item.quantity, item.safetyStock) : (
+                                    <Badge variant="outline" className="text-gray-400 border-dashed">正常</Badge>
+                                )}
+                            </TableCell>
+
+                            {/* 操作 */}
+                            <TableCell className="text-center">
+                                <div className="flex justify-center gap-2">
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => onView(item.id)}
+                                        title="查看庫存流水帳"
+                                        className="button-outlined-primary"
+                                    >
+                                        <Eye className="h-4 w-4" />
+                                    </Button>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => onDelete(item.id)}
+                                        title="刪除"
+                                        className="button-outlined-error"
+                                    >
+                                        <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}

resources/js/Components/Warehouse/Inventory/InventoryToolbar.tsx

@@ -0,0 +1,60 @@
+/**
+ * 庫存篩選工具列
+ * 包含搜尋框和產品類型篩選
+ */
+
+import { Search, Filter } from "lucide-react";
+import { Input } from "@/Components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/Components/ui/select";
+
+interface InventoryToolbarProps {
+    searchTerm: string;
+    onSearchChange: (value: string) => void;
+    typeFilter: string;
+    onTypeFilterChange: (value: string) => void;
+}
+
+export default function InventoryToolbar({
+    searchTerm,
+    onSearchChange,
+    typeFilter,
+    onTypeFilterChange,
+}: InventoryToolbarProps) {
+    return (
+        <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between p-4 bg-white rounded-lg border shadow-sm">
+            <div className="relative w-full md:max-w-md">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                    placeholder="搜尋商品名稱或批號..."
+                    value={searchTerm}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                    className="pl-10"
+                />
+            </div>
+
+            <div className="flex items-center gap-3 w-full md:w-auto">
+                <div className="flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
+                    <Filter className="h-4 w-4" />
+                    <span>篩選類型：</span>
+                </div>
+                <Select value={typeFilter} onValueChange={onTypeFilterChange}>
+                    <SelectTrigger className="w-full md:w-[180px]">
+                        <SelectValue placeholder="所有類型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">所有類型</SelectItem>
+                        <SelectItem value="原物料">原物料</SelectItem>
+                        <SelectItem value="半成品">半成品</SelectItem>
+                        <SelectItem value="成品">成品</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
+}

resources/js/Components/Warehouse/Inventory/TransactionTable.tsx

@@ -0,0 +1,68 @@
+
+
+export interface Transaction {
+    id: string;
+    type: string;
+    quantity: number;
+    balanceAfter: number;
+    reason: string | null;
+    userName: string;
+    actualTime: string;
+}
+
+interface TransactionTableProps {
+    transactions: Transaction[];
+}
+
+export default function TransactionTable({ transactions }: TransactionTableProps) {
+    if (transactions.length === 0) {
+        return (
+            <div className="text-center py-8 text-gray-500">
+                暫無異動紀錄
+            </div>
+        );
+    }
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="w-full text-sm text-left">
+                <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+                    <tr>
+                        <th className="px-4 py-3 w-[50px]">#</th>
+                        <th className="px-4 py-3">時間</th>
+                        <th className="px-4 py-3">類型</th>
+                        <th className="px-4 py-3 text-right">變動數量</th>
+                        <th className="px-4 py-3 text-right">結餘</th>
+                        <th className="px-4 py-3">經手人</th>
+                        <th className="px-4 py-3">原因/備註</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {transactions.map((tx, index) => (
+                        <tr key={tx.id} className="border-b hover:bg-gray-50">
+                            <td className="px-4 py-3 text-center text-gray-500 font-medium">{index + 1}</td>
+                            <td className="px-4 py-3 whitespace-nowrap">{tx.actualTime}</td>
+                            <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-xs ${tx.quantity > 0
+                                    ? 'bg-green-100 text-green-800'
+                                    : tx.quantity < 0
+                                        ? 'bg-red-100 text-red-800'
+                                        : 'bg-gray-100 text-gray-800'
+                                    }`}>
+                                    {tx.type}
+                                </span>
+                            </td>
+                            <td className={`px-4 py-3 text-right font-medium ${tx.quantity > 0 ? 'text-green-600' : tx.quantity < 0 ? 'text-red-600' : ''
+                                }`}>
+                                {tx.quantity > 0 ? '+' : ''}{tx.quantity}
+                            </td>
+                            <td className="px-4 py-3 text-right">{tx.balanceAfter}</td>
+                            <td className="px-4 py-3">{tx.userName}</td>
+                            <td className="px-4 py-3 text-gray-500">{tx.reason || '-'}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}