first commit

resources/js/Components/Product/ProductTable.tsx

@@ -0,0 +1,201 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/Components/ui/table";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Pencil, Trash2, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/Components/ui/alert-dialog";
+import type { Product } from "@/Pages/Product/Index";
+// import BarcodeViewDialog from "@/Components/Product/BarcodeViewDialog";
+
+interface ProductTableProps {
+  products: Product[];
+  onEdit: (product: Product) => void;
+  onDelete: (id: number) => void;
+
+  startIndex: number;
+  sortField: string | null;
+  sortDirection: "asc" | "desc" | null;
+  onSort: (field: string) => void;
+}
+
+export default function ProductTable({
+  products,
+  onEdit,
+  onDelete,
+  startIndex,
+  sortField,
+  sortDirection,
+  onSort,
+}: ProductTableProps) {
+  // const [barcodeDialogOpen, setBarcodeDialogOpen] = useState(false);
+  // const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+
+  const SortIcon = ({ field }: { field: string }) => {
+    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" />;
+  };
+
+  // 查看條碼
+  /*
+  const handleViewBarcode = (product: Product) => {
+    setSelectedProduct(product);
+    setBarcodeDialogOpen(true);
+  };
+  */
+
+  return (
+    <>
+      <div className="bg-white rounded-lg shadow-sm border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[50px] text-center">#</TableHead>
+              <TableHead>
+                <button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900 font-semibold">
+                  商品編號 <SortIcon field="code" />
+                </button>
+              </TableHead>
+              <TableHead>
+                <button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900 font-semibold">
+                  商品名稱 <SortIcon field="name" />
+                </button>
+              </TableHead>
+              <TableHead>
+                <button onClick={() => onSort("category_id")} className="flex items-center hover:text-gray-900 font-semibold">
+                  分類 <SortIcon field="category_id" />
+                </button>
+              </TableHead>
+              <TableHead>基本單位</TableHead>
+              <TableHead>換算率</TableHead>
+              <TableHead className="text-center">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {products.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-8 text-gray-500">
+                  無符合條件的商品資料
+                </TableCell>
+              </TableRow>
+            ) : (
+              products.map((product, index) => (
+                <TableRow key={product.id}>
+                  <TableCell className="text-gray-500 font-medium text-center">
+                    {startIndex + index}
+                  </TableCell>
+                  <TableCell className="font-mono text-sm text-gray-700">
+                    {product.code}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col">
+                      <span className="font-medium">{product.name}</span>
+                      {product.brand && <span className="text-xs text-gray-400">{product.brand}</span>}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">
+                      {product.category?.name || '-'}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{product.base_unit}</TableCell>
+                  <TableCell>
+                    {product.large_unit ? (
+                      <span className="text-sm text-gray-500">
+                        1 {product.large_unit} = {Number(product.conversion_rate)} {product.base_unit}
+                      </span>
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <div className="flex justify-center gap-2">
+                      {/*
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleViewBarcode(product)}
+                        className="h-8 px-2 text-primary hover:text-primary-dark hover:bg-primary-lightest"
+                      >
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                      */}
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onEdit(product)}
+                        className="button-outlined-primary"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="outline" size="sm" className="button-outlined-error">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>確認刪除</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              確定要刪除「{product.name}」嗎？此操作無法復原。
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>取消</AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={() => onDelete(product.id)}
+                              className="bg-red-600 hover:bg-red-700"
+                            >
+                              刪除
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 條碼查看對話框 - Temporarily disabled */}
+      {/*
+      {selectedProduct && (
+        <BarcodeViewDialog
+          open={barcodeDialogOpen}
+          onOpenChange={setBarcodeDialogOpen}
+          productName={selectedProduct.name}
+          productCode={selectedProduct.code}
+          barcodeValue={selectedProduct.code}
+        />
+      )}
+      */}
+    </>
+  );
+}