131 lines
5.8 KiB
TypeScript
131 lines
5.8 KiB
TypeScript
/**
|
|
* 廠商列表顯示元件
|
|
*/
|
|
|
|
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>
|
|
);
|
|
}
|