first commit

resources/js/Components/Warehouse/WarehouseCard.tsx

@@ -0,0 +1,161 @@
+/**
+ * 倉庫卡片元件
+ * 顯示單個倉庫的資訊和統計
+ */
+
+import { useState } from "react";
+import {
+  Package,
+  AlertTriangle,
+  MapPin,
+  Edit,
+  Info,
+  FileText,
+} from "lucide-react";
+import { Warehouse, WarehouseStats } from "@/types/warehouse";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Card, CardContent } from "@/Components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/Components/ui/dialog";
+
+interface WarehouseCardProps {
+  warehouse: Warehouse;
+  stats: WarehouseStats;
+  hasWarning: boolean;
+  onViewInventory: (warehouseId: string) => void;
+  onEdit: (warehouse: Warehouse) => void;
+}
+
+export default function WarehouseCard({
+  warehouse,
+  stats,
+  hasWarning,
+  onViewInventory,
+  onEdit,
+}: WarehouseCardProps) {
+  const [showInfoDialog, setShowInfoDialog] = useState(false);
+
+  return (
+    <Card
+      className={`relative overflow-hidden transition-all hover:shadow-lg flex flex-col ${hasWarning
+        ? "border-orange-400 border-2 bg-orange-50/50"
+        : "border-gray-200"
+        }`}
+    >
+      {/* 警告橫幅 */}
+      {hasWarning && (
+        <div className="absolute top-0 left-0 right-0 bg-orange-500 text-white px-4 py-1 flex items-center gap-2 text-sm">
+          <AlertTriangle className="h-4 w-4" />
+          <span>低庫存警告</span>
+        </div>
+      )}
+
+      <CardContent className={`p-6 flex flex-col flex-1 ${hasWarning ? "pt-12" : "pt-6"}`}>
+        {/* 上半部：資訊區域 */}
+        <div className="flex-1">
+          {/* 標題區塊 */}
+          <div className="flex items-start justify-between mb-4">
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <h3 className="text-2xl font-bold">{warehouse.name}</h3>
+                <button
+                  onClick={() => setShowInfoDialog(true)}
+                  className="text-gray-400 hover:text-gray-600 transition-colors"
+                >
+                  <Info className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-sm text-gray-600 mb-4 line-clamp-2 min-h-[40px]">
+            {warehouse.description || "無描述"}
+          </div>
+
+          {/* 統計區塊 - 庫存警告 */}
+          <div className="space-y-3">
+            {/* 低庫存警告狀態 */}
+            <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
+              <div className="flex items-center gap-2 text-gray-600">
+                <AlertTriangle className="h-4 w-4" />
+                <span className="text-sm">低庫存警告</span>
+              </div>
+              <div>
+                {hasWarning ? (
+                  <Badge className="bg-orange-500 text-white hover:bg-orange-600 border-none px-2 py-0.5">
+                    {stats.lowStockCount} 項
+                  </Badge>
+                ) : (
+                  <Badge variant="secondary" className="bg-green-100 text-green-700 hover:bg-green-100 border-green-200">
+                    正常
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 下半部：操作按鈕 */}
+        <div className="mt-5 pt-3 border-t border-gray-200">
+          <div className="flex gap-2">
+            <Button
+              onClick={() => onViewInventory(warehouse.id)}
+              className="flex-1 button-filled-primary"
+              size="sm"
+            >
+              <Package className="h-4 w-4 mr-2" />
+              查看庫存
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onEdit(warehouse)}
+              className="button-outlined-primary"
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+
+      {/* 倉庫資訊對話框 */}
+      <Dialog open={showInfoDialog} onOpenChange={setShowInfoDialog}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>{warehouse.name}</DialogTitle>
+            <DialogDescription>
+              {warehouse.code}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <div className="flex items-start gap-2 text-gray-600">
+                <MapPin className="h-5 w-5 mt-0.5 flex-shrink-0" />
+                <div>
+                  <p className="text-sm text-gray-500 mb-1">地址</p>
+                  <p className="text-gray-900">{warehouse.address || "-"}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-start gap-2 text-gray-600">
+                <FileText className="h-5 w-5 mt-0.5 flex-shrink-0" />
+                <div>
+                  <p className="text-sm text-gray-500 mb-1">描述</p>
+                  <p className="text-gray-900 whitespace-pre-wrap">{warehouse.description || "-"}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}