From e4b2bef735e6aab6a5ecae9a017c5c618a6d3a4b Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Thu, 3 Jul 2025 02:48:24 +0000
Subject: (최겸) 기술영업 벤더 아이템 조회 아이콘 기능 추가
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tech-vendor-possible-items-view-dialog.tsx     | 201 +++++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx

(limited to 'lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx')

diff --git a/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx b/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx
new file mode 100644
index 00000000..b2b9c990
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendor-possible-items-view-dialog.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Package, FileText, X } from "lucide-react"
+import { getVendorItemsByType } from "../service"
+
+interface VendorPossibleItem {
+  id: number;
+  itemCode: string;
+  itemList: string;
+  workType: string | null;
+  shipTypes?: string | null; // 조선용
+  subItemList?: string | null; // 해양용
+  techVendorType: "조선" | "해양TOP" | "해양HULL";
+}
+
+interface TechVendorPossibleItemsViewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  vendor: {
+    id: number;
+    vendorName?: string | null;
+    vendorCode?: string | null;
+    techVendorType?: string | null;
+  } | null;
+}
+
+export function TechVendorPossibleItemsViewDialog({
+  open,
+  onOpenChange,
+  vendor,
+}: TechVendorPossibleItemsViewDialogProps) {
+  const [items, setItems] = React.useState<VendorPossibleItem[]>([]);
+  const [loading, setLoading] = React.useState(false);
+
+  console.log("TechVendorPossibleItemsViewDialog render:", { open, vendor });
+
+  React.useEffect(() => {
+    console.log("TechVendorPossibleItemsViewDialog useEffect:", { open, vendorId: vendor?.id });
+    if (open && vendor?.id && vendor?.techVendorType) {
+      loadItems();
+    }
+  }, [open, vendor?.id, vendor?.techVendorType]);
+
+  const loadItems = async () => {
+    if (!vendor?.id || !vendor?.techVendorType) return;
+    
+    console.log("Loading items for vendor:", vendor.id, vendor.techVendorType);
+    setLoading(true);
+    try {
+      const result = await getVendorItemsByType(vendor.id, vendor.techVendorType);
+      console.log("Items loaded:", result);
+      if (result.data) {
+        setItems(result.data);
+      }
+    } catch (error) {
+      console.error("Failed to load items:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case "조선":
+        return "조선";
+      case "해양TOP":
+        return "해양TOP";
+      case "해양HULL":
+        return "해양HULL";
+      default:
+        return type;
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case "조선":
+        return "bg-blue-100 text-blue-800";
+      case "해양TOP":
+        return "bg-green-100 text-green-800";
+      case "해양HULL":
+        return "bg-purple-100 text-purple-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-none w-[1200px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            벤더 Possible Items 조회
+            <Badge variant="outline" className="ml-2">
+              {vendor?.vendorName || `Vendor #${vendor?.id}`}
+            </Badge>
+            {vendor?.techVendorType && (
+              <Badge variant="secondary" className={getTypeColor(vendor.techVendorType)}>
+                {getTypeLabel(vendor.techVendorType)}
+              </Badge>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            해당 벤더가 공급 가능한 아이템 목록을 확인할 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="overflow-x-auto w-full">
+          <div className="space-y-4">
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <div className="text-center space-y-2">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                  <p className="text-sm text-muted-foreground">아이템을 불러오는 중...</p>
+                </div>
+              </div>
+            ) : items.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <FileText className="h-12 w-12 text-muted-foreground mb-3" />
+                <h3 className="text-lg font-medium mb-1">등록된 아이템이 없습니다</h3>
+                <p className="text-sm text-muted-foreground">
+                  이 벤더에 등록된 아이템이 없습니다.
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 헤더 행 (라벨) */}
+                <div className="flex items-center gap-2 border-b pb-2 font-medium text-sm">
+                  <div className="w-[50px] text-center">No.</div>
+                  <div className="w-[120px] pl-2">타입</div>
+                  <div className="w-[200px] ">자재 그룹</div>
+                  <div className="w-[150px] ">공종</div>
+                  <div className="w-[300px] ">자재명</div>
+                  <div className="w-[150px] ">선종/자재명(상세)</div>
+                </div>
+
+                {/* 아이템 행들 */}
+                <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-2">
+                  {items.map((item, index) => (
+                    <div
+                      key={item.id}
+                      className="flex items-center gap-2 group hover:bg-gray-50 p-2 rounded-md transition-colors border"
+                    >
+                      <div className="w-[50px] text-center text-sm font-medium text-muted-foreground">
+                        {index + 1}
+                      </div>
+                      <div className="w-[120px] pl-2">
+                        <Badge variant="secondary" className={`text-xs ${getTypeColor(item.techVendorType)}`}>
+                          {getTypeLabel(item.techVendorType)}
+                        </Badge>
+                      </div>
+                      <div className="w-[200px] pl-2 font-mono text-sm">
+                        {item.itemCode}
+                      </div>
+                      <div className="w-[150px] pl-2 text-sm">
+                        {item.workType || '-'}
+                      </div>
+                      <div className="w-[300px] pl-2 font-medium">
+                        {item.itemList}
+                      </div>
+                      <div className="w-[150px] pl-2 text-sm">
+                        {item.techVendorType === '조선' ? item.shipTypes : item.subItemList}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex justify-between items-center pt-2 border-t">
+                  <div className="flex items-center gap-2">
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">
+                      총 {items.length}개 아이템
+                    </span>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="mt-6">
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            <X className="mr-2 h-4 w-4" />
+            닫기
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+} 
\ No newline at end of file
-- 
cgit v1.2.3

