From e0dfb55c5457aec489fc084c4567e791b4c65eb1 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 26 Mar 2025 00:37:41 +0000
Subject: 3/25 까지의 대표님 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/form-list/table/meta-sheet.tsx | 245 +++++++++++++++++++++++++++++++++++++
 1 file changed, 245 insertions(+)
 create mode 100644 lib/form-list/table/meta-sheet.tsx

(limited to 'lib/form-list/table/meta-sheet.tsx')

diff --git a/lib/form-list/table/meta-sheet.tsx b/lib/form-list/table/meta-sheet.tsx
new file mode 100644
index 00000000..155e4f5a
--- /dev/null
+++ b/lib/form-list/table/meta-sheet.tsx
@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from "react"
+import { useMemo } from "react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "@/components/ui/sheet"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@/components/ui/tabs"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card"
+import type { TagTypeClassFormMappings } from "@/db/schema/vendorData" // or your actual type
+import { fetchFormMetadata, FormColumn } from "@/lib/forms/services"
+
+
+interface ViewMetasProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  form: TagTypeClassFormMappings | null
+}
+
+export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
+  // metadata & loading
+  const [metadata, setMetadata] = React.useState<{
+    formName: string
+    formCode: string
+    columns: FormColumn[]
+  } | null>(null)
+  const [loading, setLoading] = React.useState(false)
+
+  // Group columns by type for better organization
+  const groupedColumns = useMemo(() => {
+    if (!metadata?.columns) return {}
+    
+    return metadata.columns.reduce((acc, column) => {
+      const type = column.type
+      if (!acc[type]) {
+        acc[type] = []
+      }
+      acc[type].push(column)
+      return acc
+    }, {} as Record<string, FormColumn[]>)
+  }, [metadata])
+
+  // Types for the tabs
+  const columnTypes = useMemo(() => {
+    return Object.keys(groupedColumns)
+  }, [groupedColumns])
+
+  // Fetch metadata when form changes and dialog is opened
+  React.useEffect(() => {
+    async function fetchMeta() {
+      if (!form || !open) return
+      
+      setLoading(true)
+      try {
+        // 서버 액션 호출
+        const metaData = await fetchFormMetadata(form.formCode)
+        if (metaData) {
+          setMetadata(metaData)
+        } else {
+          setMetadata(null)
+        }
+      } catch (error) {
+        console.error("Error fetching form metadata:", error)
+        setMetadata(null)
+      } finally {
+        setLoading(false)
+      }
+    }
+    
+    fetchMeta()
+  }, [form, open])
+
+  if (!form) return null
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-y-auto">
+
+          <SheetHeader className="mb-4">
+            <SheetTitle>Form Metadata</SheetTitle>
+            <SheetDescription>
+            </SheetDescription>
+              {loading ? (
+                <div className="text-muted-foreground">Loading metadata...</div>
+              ) : metadata ? (
+                <div className="flex flex-col gap-1">
+                  <div className="flex gap-2 items-center">
+                    <span className="font-semibold">Form Code:</span>
+                    <Badge variant="outline">{metadata.formCode}</Badge>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <span className="font-semibold">Form Name:</span>
+                    <span>{metadata.formName}</span>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  No metadata found for form code: {form.formCode}
+                </div>
+              )}
+
+          </SheetHeader>
+
+          {loading ? (
+            <div className="flex items-center justify-center h-40">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+          ) : metadata ? (
+            <Tabs defaultValue="all" className="mt-4">
+              <TabsList className="mb-4 flex-wrap">
+                <TabsTrigger value="all">All ({metadata.columns.length})</TabsTrigger>
+                {columnTypes.map((type) => (
+                  <TabsTrigger key={type} value={type}>
+                    {type} ({groupedColumns[type].length})
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              <TabsContent value="all">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>All Fields</CardTitle>
+                    <CardDescription>All form fields and their properties</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Key</TableHead>
+                          <TableHead>Label</TableHead>
+                          <TableHead>Type</TableHead>
+                          <TableHead>Options</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {metadata.columns.map((column) => (
+                          <TableRow key={column.key}>
+                            <TableCell className="font-mono text-sm">{column.key}</TableCell>
+                            <TableCell>{column.label}</TableCell>
+                            <TableCell>
+                              <Badge variant="secondary">{column.type}</Badge>
+                            </TableCell>
+                            <TableCell>
+                              {column.options ? (
+                                <div className="flex flex-wrap gap-1">
+                                  {column.options.map((option) => (
+                                    <Badge key={option} variant="outline" className="text-xs">
+                                      {option}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              ) : (
+                                "-"
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              {columnTypes.map((type) => (
+                <TabsContent key={type} value={type}>
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{type.charAt(0).toUpperCase() + type.slice(1)} Fields</CardTitle>
+                      <CardDescription>Fields with type "{type}"</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Key</TableHead>
+                            <TableHead>Label</TableHead>
+                            {type === "select" && <TableHead>Options</TableHead>}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {groupedColumns[type].map((column) => (
+                            <TableRow key={column.key}>
+                              <TableCell className="font-mono text-sm">{column.key}</TableCell>
+                              <TableCell>{column.label}</TableCell>
+                              {type === "select" && (
+                                <TableCell>
+                                  {column.options ? (
+                                    <div className="flex flex-wrap gap-1">
+                                      {column.options.map((option) => (
+                                        <Badge key={option} variant="outline" className="text-xs">
+                                          {option}
+                                        </Badge>
+                                      ))}
+                                    </div>
+                                  ) : (
+                                    "-"
+                                  )}
+                                </TableCell>
+                              )}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              ))}
+            </Tabs>
+          ) : (
+            <div className="text-center py-8">
+              <div className="text-lg font-medium">No metadata found</div>
+              <p className="text-muted-foreground mt-2">
+                Could not find metadata for form code: {form.formCode}
+              </p>
+            </div>
+          )}
+    
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3