first commit

resources/js/Components/Vendor/VendorList.tsx

@@ -0,0 +1,130 @@
+/**
+ * 廠商列表顯示元件
+ */
+
+import { Phone, Mail, Package, Pencil, Trash2, Calendar, Eye } from "lucide-react";
+import { Button } from "@/Components/ui/button";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/Components/ui/table";
+import type { Supplier } from "@/types/vendor";
+
+interface VendorListProps {
+    suppliers: Supplier[];
+    searchQuery: string;
+    onViewDetails: (supplier: Supplier) => void;
+    onEdit: (supplier: Supplier) => void;
+    onDelete: (supplier: Supplier) => void;
+}
+
+export default function VendorList({
+    suppliers,
+    searchQuery,
+    onViewDetails,
+    onEdit,
+    onDelete,
+}: VendorListProps) {
+    const isEmpty = suppliers.length === 0;
+    const emptyMessage = searchQuery ? "未找到符合條件的廠商" : "尚無廠商資料";
+
+    const formatDate = (dateString?: string) => {
+        if (!dateString) return "-";
+        const date = new Date(dateString);
+        return date.toLocaleDateString("zh-TW", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        });
+    };
+
+    return (
+        <div className="bg-card rounded-lg border border-border overflow-hidden">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[200px]">廠商名稱</TableHead>
+                        <TableHead className="w-[120px]">聯絡人</TableHead>
+                        <TableHead className="w-[140px]">聯絡電話</TableHead>
+                        <TableHead className="w-[180px]">Email</TableHead>
+                        <TableHead className="w-[130px]">上次採購日</TableHead>
+                        <TableHead className="w-[220px] text-right">操作</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {isEmpty ? (
+                        <TableRow>
+                            <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                                {emptyMessage}
+                            </TableCell>
+                        </TableRow>
+                    ) : (
+                        suppliers.map((supplier) => (
+                            <TableRow key={supplier.id}>
+                                <TableCell>
+                                    <div className="flex items-center gap-2">
+                                        <Package className="h-4 w-4 text-muted-foreground" />
+                                        <span>{supplier.name}</span>
+                                    </div>
+                                </TableCell>
+                                <TableCell>{supplier.contact || "-"}</TableCell>
+                                <TableCell>
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Phone className="h-3 w-3 text-muted-foreground" />
+                                        {supplier.phone || "-"}
+                                    </div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Mail className="h-3 w-3 text-muted-foreground" />
+                                        {supplier.email || "-"}
+                                    </div>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Calendar className="h-3 w-3 text-muted-foreground" />
+                                        {formatDate(supplier.lastPurchaseDate)}
+                                    </div>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                    <div className="flex items-center justify-end gap-2">
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => onViewDetails(supplier)}
+                                            className="gap-1 button-outlined-primary"
+                                        >
+                                            <Eye className="h-3 w-3" />
+                                            查看
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => onEdit(supplier)}
+                                            className="gap-1 button-outlined-primary"
+                                        >
+                                            <Pencil className="h-3 w-3" />
+                                            編輯
+                                        </Button>
+                                        <Button
+                                            size="sm"
+                                            onClick={() => onDelete(supplier)}
+                                            className="gap-1 button-filled-error"
+                                        >
+                                            <Trash2 className="h-3 w-3" />
+                                            刪除
+                                        </Button>
+                                    </div>
+                                </TableCell>
+                            </TableRow>
+                        ))
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}