3/25 까지의 대표님 작업사항

5 files changed, 721 insertions, 0 deletions

diff --git a/lib/vendors/rfq-history-table/feature-flags-provider.tsx b/lib/vendors/rfq-history-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/rfq-history-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx b/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx
new file mode 100644
index 00000000..7e22e96a
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx
@@ -0,0 +1,223 @@
+"use client"

+

+import * as React from "react"

+import { type DataTableRowAction } from "@/types/table"

+import { type ColumnDef } from "@tanstack/react-table"

+import { Ellipsis } from "lucide-react"

+import { toast } from "sonner"

+

+import { getErrorMessage } from "@/lib/handle-error"

+import { formatDate } from "@/lib/utils"

+import { Badge } from "@/components/ui/badge"

+import { Button } from "@/components/ui/button"

+import { Checkbox } from "@/components/ui/checkbox"

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuRadioGroup,

+  DropdownMenuRadioItem,

+  DropdownMenuSeparator,

+  DropdownMenuShortcut,

+  DropdownMenuSub,

+  DropdownMenuSubContent,

+  DropdownMenuSubTrigger,

+  DropdownMenuTrigger,

+} from "@/components/ui/dropdown-menu"

+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"

+

+import { VendorItem,  vendors } from "@/db/schema/vendors"

+import { modifyVendor } from "../service"

+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"

+import { getRFQStatusIcon } from "@/lib/tasks/utils"

+import { rfqHistoryColumnsConfig } from "@/config/rfqHistoryColumnsConfig"

+

+export interface RfqHistoryRow {

+  id: number;

+  rfqCode: string | null;

+  projectCode: string | null;

+  projectName: string | null;

+  description: string | null;

+  dueDate: Date;

+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";

+  vendorStatus: string;

+  totalAmount: number | null;

+  currency: string | null;

+  leadTime: string | null;

+  itemCount: number;

+  tbeResult: string | null;

+  cbeResult: string | null;

+  createdAt: Date;

+  items: {

+    rfqId: number;

+    id: number;

+    itemCode: string;

+    description: string | null;

+    quantity: number | null;

+    uom: string | null;

+  }[];

+}

+

+interface GetColumnsProps {

+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<RfqHistoryRow> | null>>;

+  openItemsModal: (rfqId: number) => void;

+}

+

+/**

+ * tanstack table 컬럼 정의 (중첩 헤더 버전)

+ */

+export function getColumns({ setRowAction, openItemsModal }: GetColumnsProps): ColumnDef<RfqHistoryRow>[] {

+  // ----------------------------------------------------------------

+  // 1) select 컬럼 (체크박스)

+  // ----------------------------------------------------------------

+  const selectColumn: ColumnDef<RfqHistoryRow> = {

+    id: "select",

+    header: ({ table }) => (

+      <Checkbox

+        checked={

+          table.getIsAllPageRowsSelected() ||

+          (table.getIsSomePageRowsSelected() && "indeterminate")

+        }

+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}

+        aria-label="Select all"

+        className="translate-y-0.5"

+      />

+    ),

+    cell: ({ row }) => (

+      <Checkbox

+        checked={row.getIsSelected()}

+        onCheckedChange={(value) => row.toggleSelected(!!value)}

+        aria-label="Select row"

+        className="translate-y-0.5"

+      />

+    ),

+    size: 40,

+    enableSorting: false,

+    enableHiding: false,

+  }

+

+  // ----------------------------------------------------------------

+  // 2) actions 컬럼 (Dropdown 메뉴)

+  // ----------------------------------------------------------------

+  const actionsColumn: ColumnDef<RfqHistoryRow> = {

+    id: "actions",

+    enableHiding: false,

+    cell: function Cell({ row }) {

+      return (

+        <DropdownMenu>

+          <DropdownMenuTrigger asChild>

+            <Button

+              aria-label="Open menu"

+              variant="ghost"

+              className="flex size-8 p-0 data-[state=open]:bg-muted"

+            >

+              <Ellipsis className="size-4" aria-hidden="true" />

+            </Button>

+          </DropdownMenuTrigger>

+          <DropdownMenuContent align="end" className="w-40">

+            <DropdownMenuItem

+              onSelect={() => setRowAction({ row, type: "update" })}

+            >

+              View Details

+            </DropdownMenuItem>

+          </DropdownMenuContent>

+        </DropdownMenu>

+      )

+    },

+    size: 40,

+  }

+

+  // ----------------------------------------------------------------

+  // 3) 일반 컬럼들

+  // ----------------------------------------------------------------

+  const basicColumns: ColumnDef<RfqHistoryRow>[] = rfqHistoryColumnsConfig.map((cfg) => {

+    const column: ColumnDef<RfqHistoryRow> = {

+      accessorKey: cfg.id,

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />

+      ),

+      size: cfg.size,

+    }

+

+    if (cfg.id === "description") {

+      column.cell = ({ row }) => {

+        const description = row.original.description

+        if (!description) return null

+        return (

+          <Tooltip>

+            <TooltipTrigger asChild>

+              <div className="break-words whitespace-normal line-clamp-2">

+                {description}

+              </div>

+            </TooltipTrigger>

+            <TooltipContent side="bottom" className="max-w-[400px] whitespace-pre-wrap break-words">

+              {description}

+            </TooltipContent>

+          </Tooltip>

+        )

+      }

+    }

+

+    if (cfg.id === "status") {

+      column.cell = ({ row }) => {

+        const statusVal = row.original.status

+        if (!statusVal) return null

+        const Icon = getRFQStatusIcon(statusVal)

+        return (

+          <div className="flex items-center">

+            <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />

+            <span className="capitalize">{statusVal}</span>

+          </div>

+        )

+      }

+    }

+

+    if (cfg.id === "totalAmount") {

+      column.cell = ({ row }) => {

+        const amount = row.original.totalAmount

+        const currency = row.original.currency

+        if (!amount || !currency) return null

+        return (

+          <div className="whitespace-nowrap">

+            {`${currency} ${amount.toLocaleString()}`}

+          </div>

+        )

+      }

+    }

+

+    if (cfg.id === "dueDate" || cfg.id === "createdAt") {

+      column.cell = ({ row }) => (

+        <div className="whitespace-nowrap">

+          {formatDate(row.getValue(cfg.id))}

+        </div>

+      )

+    }

+

+    return column

+  })

+

+  const itemsColumn: ColumnDef<RfqHistoryRow> = {

+    id: "items",

+    header: "Items",

+    cell: ({ row }) => {

+      const rfq = row.original;

+      const count = rfq.itemCount || 0;

+      return (

+        <Button variant="ghost" onClick={() => openItemsModal(rfq.id)}>

+          {count === 0 ? "No Items" : `${count} Items`}

+        </Button>

+      )

+    },

+  }

+

+  // ----------------------------------------------------------------

+  // 4) 최종 컬럼 배열

+  // ----------------------------------------------------------------

+  return [

+    selectColumn,

+    ...basicColumns,

+    itemsColumn,

+    actionsColumn,

+  ]

+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx b/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx
new file mode 100644
index 00000000..46eaa6a6
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx
@@ -0,0 +1,136 @@
+"use client"

+

+import * as React from "react"

+import { type Table } from "@tanstack/react-table"

+import { Download, Upload } from "lucide-react"

+import { toast } from "sonner"

+

+import { exportTableToExcel } from "@/lib/export"

+import { Button } from "@/components/ui/button"

+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"

+

+

+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import

+import { importTasksExcel } from "@/lib/tasks/service" // 예시

+import {   VendorItem } from "@/db/schema/vendors"

+// import { AddItemDialog } from "./add-item-dialog"

+

+interface RfqHistoryRow {

+  id: number;

+  rfqCode: string | null;

+  projectCode: string | null;

+  projectName: string | null;

+  description: string | null;

+  dueDate: Date;

+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";

+  vendorStatus: string;

+  totalAmount: number | null;

+  currency: string | null;

+  leadTime: string | null;

+  itemCount: number;

+  tbeResult: string | null;

+  cbeResult: string | null;

+  createdAt: Date;

+  items: {

+    rfqId: number;

+    id: number;

+    itemCode: string;

+    description: string | null;

+    quantity: number | null;

+    uom: string | null;

+  }[];

+}

+

+interface RfqHistoryTableToolbarActionsProps {

+  table: Table<RfqHistoryRow>

+}

+

+export function RfqHistoryTableToolbarActions({

+  table,

+}: RfqHistoryTableToolbarActionsProps) {

+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식

+  const fileInputRef = React.useRef<HTMLInputElement>(null)

+

+  // 파일이 선택되었을 때 처리

+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {

+    const file = event.target.files?.[0]

+    if (!file) return

+

+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)

+    event.target.value = ""

+

+    // 서버 액션 or API 호출

+    try {

+      // 예: 서버 액션 호출

+      const { errorFile, errorMessage } = await importTasksExcel(file)

+

+      if (errorMessage) {

+        toast.error(errorMessage)

+      }

+      if (errorFile) {

+        // 에러 엑셀을 다운로드

+        const url = URL.createObjectURL(errorFile)

+        const link = document.createElement("a")

+        link.href = url

+        link.download = "errors.xlsx"

+        link.click()

+        URL.revokeObjectURL(url)

+      } else {

+        // 성공

+        toast.success("Import success")

+        // 필요 시 revalidateTag("tasks") 등

+      }

+

+    } catch (err) {

+      toast.error("파일 업로드 중 오류가 발생했습니다.")

+      

+    }

+  }

+

+  // function handleImportClick() {

+  //   // 숨겨진 <input type="file" /> 요소를 클릭

+  //   fileInputRef.current?.click()

+  // }

+

+  return (

+    <div className="flex items-center gap-2">

+      <DataTableViewOptions table={table} />

+

+      {/* 조회만 하는 모듈 */}

+      {/* <AddItemDialog vendorId={vendorId}/> */}

+

+      {/** 3) Import 버튼 (파일 업로드) */}

+      {/* <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>

+        <Upload className="size-4" aria-hidden="true" />

+        <span className="hidden sm:inline">Import</span>

+      </Button> */}

+      {/*

+        실제로는 숨겨진 input과 연결:

+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용

+      */}

+      <input

+        ref={fileInputRef}

+        type="file"

+        accept=".xlsx,.xls"

+        className="hidden"

+        onChange={onFileChange}

+      />

+

+      {/** 4) Export 버튼 */}

+      <Button

+        variant="outline"

+        size="sm"

+        onClick={() =>

+          exportTableToExcel(table, {

+            filename: "rfq-history",

+            excludeColumns: ["select", "actions"],

+          })

+        }

+        className="gap-2"

+      >

+        <Download className="size-4" aria-hidden="true" />

+        <span className="hidden sm:inline">Export</span>

+      </Button>

+    </div>

+  )

+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-history-table.tsx b/lib/vendors/rfq-history-table/rfq-history-table.tsx
new file mode 100644
index 00000000..71830303
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { getColumns } from "./rfq-history-table-columns"
+import { getRfqHistory } from "../service"
+import { RfqHistoryTableToolbarActions } from "./rfq-history-table-toolbar-actions"
+import { RfqItemsTableDialog } from "./rfq-items-table-dialog"
+import { getRFQStatusIcon } from "@/lib/tasks/utils"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
+export interface RfqHistoryRow {
+  id: number;
+  rfqCode: string | null;
+  projectCode: string | null;
+  projectName: string | null;
+  description: string | null;
+  dueDate: Date;
+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";
+  vendorStatus: string;
+  totalAmount: number | null;
+  currency: string | null;
+  leadTime: string | null;
+  itemCount: number;
+  tbeResult: string | null;
+  cbeResult: string | null;
+  createdAt: Date;
+  items: {
+    rfqId: number;
+    id: number;
+    itemCode: string;
+    description: string | null;
+    quantity: number | null;
+    uom: string | null;
+  }[];
+}
+
+interface RfqHistoryTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getRfqHistory>>,
+    ]
+  >
+}
+
+export function VendorRfqHistoryTable({ promises }: RfqHistoryTableProps) {
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqHistoryRow> | null>(null)
+
+  const [itemsModalOpen, setItemsModalOpen] = React.useState(false);
+  const [selectedRfq, setSelectedRfq] = React.useState<RfqHistoryRow | null>(null);
+
+  const openItemsModal = React.useCallback((rfqId: number) => {
+    const rfq = data.find(r => r.id === rfqId);
+    if (rfq) {
+      setSelectedRfq(rfq);
+      setItemsModalOpen(true);
+    }
+  }, [data]);
+
+  const columns = React.useMemo(() => getColumns({
+    setRowAction,
+    openItemsModal,
+  }), [setRowAction, openItemsModal]);
+
+  const filterFields: DataTableFilterField<RfqHistoryRow>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      placeholder: "Filter RFQ Code...",
+    },
+    {
+      id: "status",
+      label: "Status",
+      options: ["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getRFQStatusIcon(status),
+      })),
+    },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      placeholder: "Filter Vendor Status...",
+    }
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<RfqHistoryRow>[] = [
+    { id: "rfqCode", label: "RFQ Code", type: "text" },
+    { id: "projectCode", label: "Project Code", type: "text" },
+    { id: "projectName", label: "Project Name", type: "text" },
+    { 
+      id: "status", 
+      label: "RFQ Status", 
+      type: "multi-select",
+      options: ["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getRFQStatusIcon(status),
+      })),
+    },
+    { id: "vendorStatus", label: "Vendor Status", type: "text" },
+    { id: "dueDate", label: "Due Date", type: "date" },
+    { id: "createdAt", label: "Created At", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: true,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <TooltipProvider>
+        <DataTable
+          table={table}
+        >
+          <DataTableAdvancedToolbar
+            table={table}
+            filterFields={advancedFilterFields}
+            shallow={false}
+          >
+            <RfqHistoryTableToolbarActions table={table} />
+          </DataTableAdvancedToolbar>
+        </DataTable>
+
+        <RfqItemsTableDialog
+          open={itemsModalOpen}
+          onOpenChange={setItemsModalOpen}
+          items={selectedRfq?.items ?? []}
+        />
+      </TooltipProvider>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
new file mode 100644
index 00000000..49a5d890
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DataTable } from "@/components/data-table/data-table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+interface RfqItem {
+  id: number
+  itemCode: string
+  description: string | null
+  quantity: number | null
+  uom: string | null
+}
+
+interface RfqItemsTableDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  items: RfqItem[]
+}
+
+export function RfqItemsTableDialog({
+  open,
+  onOpenChange,
+  items,
+}: RfqItemsTableDialogProps) {
+  const columns = React.useMemo<ColumnDef<RfqItem>[]>(
+    () => [
+      {
+        accessorKey: "itemCode",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Item Code" />
+        ),
+      },
+      {
+        accessorKey: "description",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Description" />
+        ),
+        cell: ({ row }) => row.getValue("description") || "-",
+      },
+      {
+        accessorKey: "quantity",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Quantity" />
+        ),
+        cell: ({ row }) => {
+          const quantity = row.getValue("quantity") as number | null;
+          return (
+            <div className="text-center">
+              {quantity !== null ? quantity.toLocaleString() : "-"}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: "uom",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="UoM" />
+        ),
+        cell: ({ row }) => row.getValue("uom") || "-",
+      },
+    ],
+    []
+  )
+
+  const { table } = useDataTable({
+    data: items,
+    columns,
+    pageCount: 1,
+    enablePinning: false,
+    enableAdvancedFilter: false,
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>RFQ Items</DialogTitle>
+          <DialogDescription>
+            Items included in this RFQ
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          <DataTable table={table} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+} 
\ No newline at end of file