star-erp/resources/js/Components/Warehouse/SafetyStock/SafetyStockList.tsx

/**
 * 安全庫存設定列表
 */

import { Trash2, Pencil, CheckCircle, Package, AlertTriangle } 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 { SafetyStockSetting, WarehouseInventory } from "@/types/warehouse";
import { calculateProductTotalStock, getSafetyStockStatus } from "@/utils/inventory";
import { Can } from "@/Components/Permission/Can";

interface SafetyStockListProps {
    settings: SafetyStockSetting[];
    inventories: WarehouseInventory[];
    onEdit: (setting: SafetyStockSetting) => void;
    onDelete: (id: string) => void;
}

export default function SafetyStockList({
    settings,
    inventories,
    onEdit,
    onDelete,
}: SafetyStockListProps) {
    if (settings.length === 0) {
        return (
            <div className="bg-white rounded-lg border border-dashed p-12 text-center">
                <div className="mx-auto w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4">
                    <Package className="h-6 w-6 text-gray-400" />
                </div>
                <h3 className="text-lg font-medium text-gray-900">尚無安全庫存設定</h3>
                <p className="text-gray-500 mt-1 max-w-xs mx-auto">
                    尚未為此倉庫設定任何商品的安全庫存量。設定後系統將在庫存不足時提醒您。
                </p>
            </div>
        );
    }

    // 按產品類型與名稱排序
    const sortedSettings = [...settings].sort((a, b) => {
        if (a.productType !== b.productType) {
            return a.productType.localeCompare(b.productType, "zh-TW");
        }
        return a.productName.localeCompare(b.productName, "zh-TW");
    });

    // 獲取狀態徽章 (與 InventoryTable 保持一致)
    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="bg-white rounded-lg border shadow-sm overflow-hidden">
            <Table>
                <TableHeader>
                    <TableRow className="bg-gray-50/50">
                        <TableHead className="w-[50px]">#</TableHead>
                        <TableHead className="w-[250px]">商品名稱</TableHead>
                        <TableHead className="w-[120px]">類型</TableHead>
                        <TableHead className="w-[150px] text-right">安全庫存量</TableHead>
                        <TableHead className="w-[150px] text-right">目前總庫存</TableHead>
                        <TableHead className="w-[150px]">庫存狀態</TableHead>
                        <TableHead className="w-[100px] text-right">操作</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {sortedSettings.map((setting, index) => {
                        const currentStock = calculateProductTotalStock(inventories, setting.productId);

                        return (
                            <TableRow key={setting.id}>
                                <TableCell className="text-gray-500 font-medium">
                                    {index + 1}
                                </TableCell>
                                <TableCell className="font-medium text-gray-900">
                                    {setting.productName}
                                </TableCell>
                                <TableCell>
                                    <Badge variant="outline" className="font-normal">
                                        {setting.productType}
                                    </Badge>
                                </TableCell>
                                <TableCell className="text-right font-semibold">
                                    {setting.safetyStock} {setting.unit || '個'}
                                </TableCell>
                                <TableCell className="text-right">
                                    <span className={currentStock < setting.safetyStock ? "text-orange-600 font-bold" : "text-gray-700"}>
                                        {currentStock} {setting.unit || '個'}
                                    </span>
                                </TableCell>
                                <TableCell>
                                    {getStatusBadge(currentStock, setting.safetyStock)}
                                </TableCell>
                                <TableCell className="text-right">
                                    <div className="flex justify-end gap-2">
                                        <Can permission="inventory.safety_stock">
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                onClick={() => onEdit(setting)}
                                                className="button-outlined-primary"
                                            >
                                                <Pencil className="h-4 w-4" />
                                            </Button>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                onClick={() => onDelete(setting.id)}
                                                className="button-outlined-error"
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </Can>
                                    </div>
                                </TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </div>
    );
}