summaryrefslogtreecommitdiff
path: root/lib/vendors
diff options
context:
space:
mode:
Diffstat (limited to 'lib/vendors')
-rw-r--r--lib/vendors/items-table/delete-vendor-items-dialog.tsx182
-rw-r--r--lib/vendors/items-table/item-action-dialog.tsx248
-rw-r--r--lib/vendors/items-table/item-table-columns.tsx4
-rw-r--r--lib/vendors/items-table/item-table-toolbar-actions.tsx36
-rw-r--r--lib/vendors/items-table/item-table.tsx23
-rw-r--r--lib/vendors/materials-table/add-item-dialog.tsx289
-rw-r--r--lib/vendors/materials-table/delete-vendor-items-dialog.tsx182
-rw-r--r--lib/vendors/materials-table/feature-flags-provider.tsx108
-rw-r--r--lib/vendors/materials-table/item-action-dialog.tsx207
-rw-r--r--lib/vendors/materials-table/item-table-columns.tsx195
-rw-r--r--lib/vendors/materials-table/item-table-toolbar-actions.tsx122
-rw-r--r--lib/vendors/materials-table/item-table.tsx92
-rw-r--r--lib/vendors/repository.ts51
-rw-r--r--lib/vendors/service.ts409
-rw-r--r--lib/vendors/validations.ts35
15 files changed, 2158 insertions, 25 deletions
diff --git a/lib/vendors/items-table/delete-vendor-items-dialog.tsx b/lib/vendors/items-table/delete-vendor-items-dialog.tsx
new file mode 100644
index 00000000..bcc84cc8
--- /dev/null
+++ b/lib/vendors/items-table/delete-vendor-items-dialog.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { VendorItemsView } from "@/db/schema/vendors"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeVendorItems } from "../service"
+
+interface DeleteVendorItemsDialogProps
+ extends React.ComponentPropsWithoutRef<typeof Dialog> {
+ vendorId: number
+ items: Row<VendorItemsView>["original"][]
+ showTrigger?: boolean
+ onSuccess?: () => void
+}
+
+export function DeleteVendorItemsDialog({
+ vendorId,
+ items,
+ showTrigger = true,
+ onSuccess,
+ ...props
+}: DeleteVendorItemsDialogProps) {
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+ const isDesktop = useMediaQuery("(min-width: 640px)")
+
+ function onDelete() {
+ startDeleteTransition(async () => {
+ const { error } = await removeVendorItems({
+ itemCodes: items.map((item) => item.itemCode).filter(Boolean) as string[],
+ vendorId,
+ })
+
+ if (error) {
+ toast.error(error)
+ return
+ }
+
+ props.onOpenChange?.(false)
+ toast.success(
+ items.length === 1
+ ? "Item deleted successfully"
+ : `${items.length} items deleted successfully`
+ )
+ onSuccess?.()
+ })
+ }
+
+ if (isDesktop) {
+ return (
+ <Dialog {...props}>
+ {showTrigger ? (
+ <DialogTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ Delete ({items.length})
+ </Button>
+ </DialogTrigger>
+ ) : null}
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Are you absolutely sure?</DialogTitle>
+ <DialogDescription>
+ This action cannot be undone. This will permanently delete{" "}
+ <span className="font-medium">{items.length}</span>
+ {items.length === 1 ? " item" : " items"} from this vendor.
+ </DialogDescription>
+ </DialogHeader>
+
+ {/* 삭제될 아이템 목록 미리보기 */}
+ <div className="max-h-32 overflow-y-auto rounded-md border p-2">
+ {items.map((item, index) => (
+ <div key={item.itemCode || index} className="flex justify-between text-sm py-1">
+ <span className="font-medium truncate">{item.itemName}</span>
+ <span className="text-muted-foreground ml-2 flex-shrink-0">
+ {item.itemCode}
+ </span>
+ </div>
+ ))}
+ </div>
+
+ <DialogFooter className="gap-2 sm:space-x-0">
+ <DialogClose asChild>
+ <Button variant="outline">Cancel</Button>
+ </DialogClose>
+ <Button
+ aria-label="Delete selected items"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ Delete
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+ }
+
+ return (
+ <Drawer {...props}>
+ {showTrigger ? (
+ <DrawerTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ Delete ({items.length})
+ </Button>
+ </DrawerTrigger>
+ ) : null}
+ <DrawerContent>
+ <DrawerHeader>
+ <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+ <DrawerDescription>
+ This action cannot be undone. This will permanently delete{" "}
+ <span className="font-medium">{items.length}</span>
+ {items.length === 1 ? " item" : " items"} from this vendor.
+ </DrawerDescription>
+ </DrawerHeader>
+
+ {/* 삭제될 아이템 목록 미리보기 */}
+ <div className="max-h-32 overflow-y-auto rounded-md border p-2 mx-4">
+ {items.map((item, index) => (
+ <div key={item.itemCode || index} className="flex justify-between text-sm py-1">
+ <span className="font-medium truncate">{item.itemName}</span>
+ <span className="text-muted-foreground ml-2 flex-shrink-0">
+ {item.itemCode}
+ </span>
+ </div>
+ ))}
+ </div>
+
+ <DrawerFooter className="gap-2 sm:space-x-0">
+ <DrawerClose asChild>
+ <Button variant="outline">Cancel</Button>
+ </DrawerClose>
+ <Button
+ aria-label="Delete selected items"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+ )}
+ Delete
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/items-table/item-action-dialog.tsx b/lib/vendors/items-table/item-action-dialog.tsx
new file mode 100644
index 00000000..19df27f8
--- /dev/null
+++ b/lib/vendors/items-table/item-action-dialog.tsx
@@ -0,0 +1,248 @@
+// components/vendor-items/item-actions-dialogs.tsx
+"use client"
+
+import * as React from "react"
+import type { DataTableRowAction } from "@/types/table"
+import { VendorItemsView } from "@/db/schema/vendors"
+import { toast } from "sonner"
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+
+import { updateVendorItem, deleteVendorItem, getItemsForVendor } from "../service"
+
+interface ItemActionsDialogsProps {
+ vendorId: number
+ rowAction: DataTableRowAction<VendorItemsView> | null
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorItemsView> | null>>
+}
+
+export function ItemActionsDialogs({
+ vendorId,
+ rowAction,
+ setRowAction,
+}: ItemActionsDialogsProps) {
+ const [isUpdatePending, startUpdateTransition] = React.useTransition()
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+ const [availableMaterials, setAvailableMaterials] = React.useState<any[]>([])
+ const [selectedItemCode, setSelectedItemCode] = React.useState<string>("")
+
+ // 사용 가능한 재료 목록 로드
+ React.useEffect(() => {
+ if (rowAction?.type === "update") {
+ getItemsForVendor(vendorId).then((result) => {
+ if (result.data) {
+ setAvailableMaterials(result.data)
+ }
+ })
+ }
+ }, [rowAction, vendorId])
+
+ // Edit Dialog
+ const EditDialog = () => {
+ if (!rowAction || rowAction.type !== "update") return null
+
+ const item = rowAction.row.original
+
+ const handleSubmit = () => {
+ if (!selectedItemCode) {
+ toast.error("Please select a new item")
+ return
+ }
+
+ if (!item.itemCode) {
+ toast.error("Invalid item code")
+ return
+ }
+
+ startUpdateTransition(async () => {
+ const result = await updateVendorItem(vendorId, item.itemCode, selectedItemCode)
+
+ if (result.error) {
+ toast.error(result.error)
+ } else {
+ toast.success("Item updated successfully")
+ setRowAction(null)
+ }
+ })
+ }
+
+ return (
+ <Dialog
+ open={true}
+ onOpenChange={(open) => !open && setRowAction(null)}
+ >
+ <DialogContent className="sm:max-w-[425px]">
+ <DialogHeader>
+ <DialogTitle>Change Item</DialogTitle>
+ <DialogDescription>
+ Select a new item to replace "{item.itemName}" (Code: {item.itemCode || 'N/A'}).
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ <div className="space-y-2">
+ <Label>Current Item</Label>
+ <div className="p-2 bg-muted rounded-md">
+ <div className="font-medium">{item.itemName}</div>
+ <div className="text-sm text-muted-foreground">Code: {item.itemCode || 'N/A'}</div>
+ </div>
+ </div>
+
+ <div className="space-y-2">
+ <Label htmlFor="newItem">New Item</Label>
+ <Select value={selectedItemCode} onValueChange={setSelectedItemCode}>
+ <SelectTrigger>
+ <SelectValue placeholder="Select a new item" />
+ </SelectTrigger>
+ <SelectContent>
+ {availableMaterials.map((material) => (
+ <SelectItem key={material.itemCode} value={material.itemCode}>
+ <div>
+ <div className="font-medium">{material.itemName}</div>
+ <div className="text-sm text-muted-foreground">Code: {material.itemCode}</div>
+ </div>
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+
+ <DialogFooter>
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => setRowAction(null)}
+ disabled={isUpdatePending}
+ >
+ Cancel
+ </Button>
+ <Button
+ onClick={handleSubmit}
+ disabled={isUpdatePending || !selectedItemCode}
+ >
+ {isUpdatePending ? "Updating..." : "Update Item"}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+ }
+
+ // Delete Dialog
+ const DeleteDialog = () => {
+ if (!rowAction || rowAction.type !== "delete") return null
+
+ const item = rowAction.row.original
+
+ const handleDelete = () => {
+ if (!item.itemCode) {
+ toast.error("Invalid item code")
+ return
+ }
+
+ startDeleteTransition(async () => {
+ const result = await deleteVendorItem(vendorId, item.itemCode)
+
+ if (result.error) {
+ toast.error(result.error)
+ } else {
+ toast.success("Item deleted successfully")
+ setRowAction(null)
+ }
+ })
+ }
+
+ return (
+ <AlertDialog
+ open={true}
+ onOpenChange={(open) => !open && setRowAction(null)}
+ >
+ <AlertDialogContent>
+ return (
+ <AlertDialog
+ open={true}
+ onOpenChange={(open) => !open && setRowAction(null)}
+ >
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ <AlertDialogDescription>
+ This will permanently delete the item "{item.itemName}" (Code: {item.itemCode || 'N/A'}).
+ This action cannot be undone.
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <AlertDialogFooter>
+ <AlertDialogCancel disabled={isDeletePending}>
+ Cancel
+ </AlertDialogCancel>
+ <AlertDialogAction
+ onClick={handleDelete}
+ disabled={isDeletePending}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {isDeletePending ? "Deleting..." : "Delete"}
+ </AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ )
+ }
+
+ return (
+ <>
+ <EditDialog />
+ <DeleteDialog />
+ </>
+ )
+}
+ <AlertDialogFooter>
+ <AlertDialogCancel disabled={isDeletePending}>
+ Cancel
+ </AlertDialogCancel>
+ <AlertDialogAction
+ onClick={handleDelete}
+ disabled={isDeletePending}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {isDeletePending ? "Deleting..." : "Delete"}
+ </AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ )
+ }
+
+ return (
+ <>
+ <EditDialog />
+ <DeleteDialog />
+ </>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/items-table/item-table-columns.tsx b/lib/vendors/items-table/item-table-columns.tsx
index b5d26434..769722e4 100644
--- a/lib/vendors/items-table/item-table-columns.tsx
+++ b/lib/vendors/items-table/item-table-columns.tsx
@@ -24,10 +24,8 @@ import {
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
-import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
-import { VendorItemsView, vendors } from "@/db/schema/vendors"
-import { modifyVendor } from "../service"
+import { VendorItemsView } from "@/db/schema/vendors"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { vendorItemsColumnsConfig } from "@/config/vendorItemsColumnsConfig"
diff --git a/lib/vendors/items-table/item-table-toolbar-actions.tsx b/lib/vendors/items-table/item-table-toolbar-actions.tsx
index f7bd2bf6..8be67f71 100644
--- a/lib/vendors/items-table/item-table-toolbar-actions.tsx
+++ b/lib/vendors/items-table/item-table-toolbar-actions.tsx
@@ -1,3 +1,4 @@
+// components/vendor-items/item-table-toolbar-actions.tsx
"use client"
import * as React from "react"
@@ -8,21 +9,26 @@ import { toast } from "sonner"
import { exportTableToExcel } from "@/lib/export"
import { Button } from "@/components/ui/button"
-
// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
import { importTasksExcel } from "@/lib/tasks/service" // 예시
-import { VendorItemsView } from "@/db/schema/vendors"
+import {
+ VendorItemsView
+} from "@/db/schema/vendors"
import { AddItemDialog } from "./add-item-dialog"
+import { DeleteVendorItemsDialog } from "./delete-vendor-items-dialog"
interface VendorsTableToolbarActionsProps {
table: Table<VendorItemsView>
vendorId: number
}
-export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolbarActionsProps) {
+export function VendorsTableToolbarActions({ table, vendorId }: VendorsTableToolbarActionsProps) {
// 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
const fileInputRef = React.useRef<HTMLInputElement>(null)
+ // 선택된 행들 가져오기
+ const selectedRows = table.getFilteredSelectedRowModel().rows
+
// 파일이 선택되었을 때 처리
async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
const file = event.target.files?.[0]
@@ -55,7 +61,6 @@ export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolb
} catch (err) {
toast.error("파일 업로드 중 오류가 발생했습니다.")
-
}
}
@@ -66,10 +71,21 @@ export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolb
return (
<div className="flex items-center gap-2">
-
- <AddItemDialog vendorId={vendorId}/>
-
- {/** 3) Import 버튼 (파일 업로드) */}
+ <AddItemDialog vendorId={vendorId} />
+
+ {/* 삭제 버튼 - 선택된 행이 있을 때만 표시 */}
+ {selectedRows.length > 0 && (
+ <DeleteVendorItemsDialog
+ vendorId={vendorId}
+ items={selectedRows.map((row) => row.original)}
+ onSuccess={() => {
+ // 삭제 성공 후 선택 해제
+ table.toggleAllPageRowsSelected(false)
+ }}
+ />
+ )}
+
+ {/** 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>
@@ -86,13 +102,13 @@ export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolb
onChange={onFileChange}
/>
- {/** 4) Export 버튼 */}
+ {/** Export 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() =>
exportTableToExcel(table, {
- filename: "tasks",
+ filename: "vendor-items",
excludeColumns: ["select", "actions"],
})
}
diff --git a/lib/vendors/items-table/item-table.tsx b/lib/vendors/items-table/item-table.tsx
index d8cd0ea2..a58a136c 100644
--- a/lib/vendors/items-table/item-table.tsx
+++ b/lib/vendors/items-table/item-table.tsx
@@ -13,8 +13,11 @@ import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { useFeatureFlags } from "./feature-flags-provider"
import { getColumns } from "./item-table-columns"
-import { getVendorItems, } from "../service"
-import { VendorItemsView, vendors } from "@/db/schema/vendors"
+import {
+ getVendorItems,
+} from "../service"
+import { VendorItemsView } from "@/db/schema/vendors"
+import { ItemActionsDialogs } from "./item-action-dialog"
import { VendorsTableToolbarActions } from "./item-table-toolbar-actions"
interface VendorsTableProps {
@@ -22,25 +25,24 @@ interface VendorsTableProps {
[
Awaited<ReturnType<typeof getVendorItems>>,
]
- >,
- vendorId:number
+ >,
+ vendorId: number
}
-export function VendorItemsTable({ promises , vendorId}: VendorsTableProps) {
+export function VendorItemsTable({ promises, vendorId }: VendorsTableProps) {
const { featureFlags } = useFeatureFlags()
// Suspense로 받아온 데이터
const [{ data, pageCount }] = React.use(promises)
const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorItemsView> | null>(null)
- // getColumns() 호출 시, router를 주입
+ // getColumns() 호출 시, setRowAction을 주입
const columns = React.useMemo(
() => getColumns({ setRowAction }),
[setRowAction]
)
const filterFields: DataTableFilterField<VendorItemsView>[] = [
-
]
const advancedFilterFields: DataTableAdvancedFilterField<VendorItemsView>[] = [
@@ -80,6 +82,13 @@ export function VendorItemsTable({ promises , vendorId}: VendorsTableProps) {
<VendorsTableToolbarActions table={table} vendorId={vendorId} />
</DataTableAdvancedToolbar>
</DataTable>
+
+ {/* 수정/삭제 다이얼로그 추가 */}
+ <ItemActionsDialogs
+ vendorId={vendorId}
+ rowAction={rowAction}
+ setRowAction={setRowAction}
+ />
</>
)
} \ No newline at end of file
diff --git a/lib/vendors/materials-table/add-item-dialog.tsx b/lib/vendors/materials-table/add-item-dialog.tsx
new file mode 100644
index 00000000..f4a7fef7
--- /dev/null
+++ b/lib/vendors/materials-table/add-item-dialog.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import { cn } from "@/lib/utils"
+
+import {
+ createVendorItemSchema,
+ type CreateVendorItemSchema,
+} from "../validations"
+
+import { createVendorItem, getMaterialsForVendor, ItemDropdownOption } from "../service"
+
+interface AddItemDialogProps {
+ vendorId: number
+}
+
+export function AddItemDialog({ vendorId }: AddItemDialogProps) {
+ const [open, setOpen] = React.useState(false)
+ const [commandOpen, setCommandOpen] = React.useState(false)
+ const [items, setItems] = React.useState<ItemDropdownOption[]>([])
+ const [filteredItems, setFilteredItems] = React.useState<ItemDropdownOption[]>([])
+ const [isLoading, setIsLoading] = React.useState(false)
+ const [searchTerm, setSearchTerm] = React.useState("")
+
+ // 선택된 아이템의 정보를 보여주기 위한 상태
+ const [selectedItem, setSelectedItem] = React.useState<{
+ itemName: string;
+ description: string;
+ } | null>(null)
+
+ // react-hook-form 세팅 - 서버로 보낼 값은 vendorId와 itemCode만
+ const form = useForm<CreateVendorItemSchema>({
+ resolver: zodResolver(createVendorItemSchema),
+ defaultValues: {
+ vendorId,
+ itemCode: "",
+ },
+ })
+
+ console.log(vendorId)
+
+ // 아이템 목록 가져오기 (한 번만 호출)
+ const fetchItems = React.useCallback(async () => {
+ if (items.length > 0) return // 이미 로드된 경우 스킵
+
+ setIsLoading(true)
+ try {
+ const result = await getMaterialsForVendor(vendorId)
+ if (result.data) {
+ setItems(result.data)
+ setFilteredItems(result.data)
+ }
+ } catch (error) {
+ console.error("Failed to fetch items:", error)
+ } finally {
+ setIsLoading(false)
+ }
+ }, [items.length])
+
+ // 팝오버 열릴 때 아이템 목록 로드
+ React.useEffect(() => {
+ if (commandOpen) {
+ fetchItems()
+ }
+ }, [commandOpen, fetchItems])
+
+ // 클라이언트 사이드 필터링
+ React.useEffect(() => {
+ if (!items.length) return
+
+ if (!searchTerm.trim()) {
+ setFilteredItems(items)
+ return
+ }
+
+ const lowerSearch = searchTerm.toLowerCase()
+ const filtered = items.filter(item =>
+ item.itemCode.toLowerCase().includes(lowerSearch) ||
+ item.itemName.toLowerCase().includes(lowerSearch) ||
+ (item.description && item.description.toLowerCase().includes(lowerSearch))
+ )
+
+ setFilteredItems(filtered)
+ }, [searchTerm, items])
+
+ // 선택된 아이템 데이터로 폼 업데이트
+ const handleSelectItem = (item: ItemDropdownOption) => {
+ // 폼에는 itemCode만 설정
+ form.setValue("itemCode", item.itemCode)
+
+ // 나머지 정보는 표시용 상태에 저장
+ setSelectedItem({
+ itemName: item.itemName,
+ description: item.description || "",
+ })
+
+ setCommandOpen(false)
+ }
+
+ // 폼 제출 - itemCode만 서버로 전송
+ async function onSubmit(data: CreateVendorItemSchema) {
+ // 서버에는 vendorId와 itemCode만 전송됨
+ const result = await createVendorItem(data)
+ console.log(result)
+ if (result.error) {
+ alert(`에러: ${result.error}`)
+ return
+ }
+ // 성공 시 모달 닫고 폼 리셋
+ form.reset()
+ setSelectedItem(null)
+ setOpen(false)
+ }
+
+ // 모달 열림/닫힘 핸들
+ function handleDialogOpenChange(nextOpen: boolean) {
+ if (!nextOpen) {
+ // 닫힐 때 폼 리셋
+ form.reset()
+ setSelectedItem(null)
+ }
+ setOpen(nextOpen)
+ }
+
+ // 현재 선택된 아이템 코드
+ const selectedItemCode = form.watch("itemCode")
+
+ // 선택된 아이템 코드가 있으면 상세 정보 표시를 위한 아이템 찾기
+ const displayItemCode = selectedItemCode || "아이템 선택..."
+ const displayItemName = selectedItem?.itemName || ""
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ {/* 모달 열기 버튼 */}
+ <DialogTrigger asChild>
+ <Button variant="default" size="sm">
+ Add Item
+ </Button>
+ </DialogTrigger>
+
+ <DialogContent className="max-h-[90vh] overflow-hidden flex flex-col">
+ <DialogHeader>
+ <DialogTitle>Create New Item</DialogTitle>
+ <DialogDescription>
+ 아이템을 선택한 후 <b>Create</b> 버튼을 누르세요.
+ </DialogDescription>
+ </DialogHeader>
+
+ {/* shadcn/ui Form + react-hook-form */}
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
+ <div className="space-y-4 py-4 flex-1 overflow-y-auto">
+
+ {/* 아이템 선택 */}
+ <div>
+ <FormLabel className="text-sm font-medium">아이템 선택</FormLabel>
+ <Popover open={commandOpen} onOpenChange={setCommandOpen}>
+ <PopoverTrigger asChild>
+ <Button
+ variant="outline"
+ role="combobox"
+ aria-expanded={commandOpen}
+ className="w-full justify-between mt-1"
+ >
+ {selectedItemCode
+ ? `${selectedItemCode} - ${displayItemName}`
+ : "아이템 선택..."}
+ <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+ </Button>
+ </PopoverTrigger>
+ <PopoverContent className="w-[400px] p-0">
+ <Command>
+ <CommandInput
+ placeholder="아이템 코드/이름 검색..."
+ onValueChange={setSearchTerm}
+ />
+ <CommandList className="max-h-[200px]">
+ <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+ {isLoading ? (
+ <div className="py-6 text-center text-sm">로딩 중...</div>
+ ) : (
+ <CommandGroup>
+ {filteredItems.map((item) => (
+ <CommandItem
+ key={item.itemCode}
+ value={`${item.itemCode} ${item.itemName}`}
+ onSelect={() => handleSelectItem(item)}
+ >
+ <Check
+ className={cn(
+ "mr-2 h-4 w-4",
+ selectedItemCode === item.itemCode
+ ? "opacity-100"
+ : "opacity-0"
+ )}
+ />
+ <span className="font-medium">{item.itemCode}</span>
+ <span className="ml-2 text-gray-500 truncate">- {item.itemName}</span>
+ </CommandItem>
+ ))}
+ </CommandGroup>
+ )}
+ </CommandList>
+ </Command>
+ </PopoverContent>
+ </Popover>
+ </div>
+
+ {/* 아이템 정보 영역 - 선택된 경우에만 표시 */}
+ {selectedItem && (
+ <div className="rounded-md border p-3 mt-4 overflow-hidden">
+ <h3 className="font-medium text-sm mb-2">선택된 아이템 정보</h3>
+
+ {/* Item Code - readonly (hidden field) */}
+ <FormField
+ control={form.control}
+ name="itemCode"
+ render={({ field }) => (
+ <FormItem className="hidden">
+ <FormControl>
+ <Input {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+
+ {/* Item Name (표시용) */}
+ <div className="mb-2">
+ <p className="text-xs font-medium text-gray-500">Item Name</p>
+ <p className="text-sm mt-0.5 break-words">{selectedItem.itemName}</p>
+ </div>
+
+ {/* Description (표시용) */}
+ {selectedItem.description && (
+ <div>
+ <p className="text-xs font-medium text-gray-500">Description</p>
+ <p className="text-sm mt-0.5 break-words max-h-20 overflow-y-auto">{selectedItem.description}</p>
+ </div>
+ )}
+ </div>
+ )}
+
+ </div>
+
+ <DialogFooter className="flex-shrink-0 pt-2">
+ <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+ Cancel
+ </Button>
+ <Button
+ type="submit"
+ disabled={form.formState.isSubmitting || !selectedItemCode}
+ >
+ Create
+ </Button>
+ </DialogFooter>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/materials-table/delete-vendor-items-dialog.tsx b/lib/vendors/materials-table/delete-vendor-items-dialog.tsx
new file mode 100644
index 00000000..132a54fb
--- /dev/null
+++ b/lib/vendors/materials-table/delete-vendor-items-dialog.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { VendorMaterialsView } from "@/db/schema/vendors"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeVendorMaterials } from "../service"
+
+interface DeleteVendorItemsDialogProps
+ extends React.ComponentPropsWithoutRef<typeof Dialog> {
+ vendorId: number
+ items: Row<VendorMaterialsView>["original"][]
+ showTrigger?: boolean
+ onSuccess?: () => void
+}
+
+export function DeleteVendorItemsDialog({
+ vendorId,
+ items,
+ showTrigger = true,
+ onSuccess,
+ ...props
+}: DeleteVendorItemsDialogProps) {
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+ const isDesktop = useMediaQuery("(min-width: 640px)")
+
+ function onDelete() {
+ startDeleteTransition(async () => {
+ const { error } = await removeVendorMaterials({
+ itemCodes: items.map((item) => item.itemCode).filter(Boolean) as string[],
+ vendorId,
+ })
+
+ if (error) {
+ toast.error(error)
+ return
+ }
+
+ props.onOpenChange?.(false)
+ toast.success(
+ items.length === 1
+ ? "Item deleted successfully"
+ : `${items.length} items deleted successfully`
+ )
+ onSuccess?.()
+ })
+ }
+
+ if (isDesktop) {
+ return (
+ <Dialog {...props}>
+ {showTrigger ? (
+ <DialogTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ Delete ({items.length})
+ </Button>
+ </DialogTrigger>
+ ) : null}
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Are you absolutely sure?</DialogTitle>
+ <DialogDescription>
+ This action cannot be undone. This will permanently delete{" "}
+ <span className="font-medium">{items.length}</span>
+ {items.length === 1 ? " item" : " items"} from this vendor.
+ </DialogDescription>
+ </DialogHeader>
+
+ {/* 삭제될 아이템 목록 미리보기 */}
+ <div className="max-h-32 overflow-y-auto rounded-md border p-2">
+ {items.map((item, index) => (
+ <div key={item.itemCode || index} className="flex justify-between text-sm py-1">
+ <span className="font-medium truncate">{item.itemName}</span>
+ <span className="text-muted-foreground ml-2 flex-shrink-0">
+ {item.itemCode}
+ </span>
+ </div>
+ ))}
+ </div>
+
+ <DialogFooter className="gap-2 sm:space-x-0">
+ <DialogClose asChild>
+ <Button variant="outline">Cancel</Button>
+ </DialogClose>
+ <Button
+ aria-label="Delete selected items"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ Delete
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+ }
+
+ return (
+ <Drawer {...props}>
+ {showTrigger ? (
+ <DrawerTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ Delete ({items.length})
+ </Button>
+ </DrawerTrigger>
+ ) : null}
+ <DrawerContent>
+ <DrawerHeader>
+ <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+ <DrawerDescription>
+ This action cannot be undone. This will permanently delete{" "}
+ <span className="font-medium">{items.length}</span>
+ {items.length === 1 ? " item" : " items"} from this vendor.
+ </DrawerDescription>
+ </DrawerHeader>
+
+ {/* 삭제될 아이템 목록 미리보기 */}
+ <div className="max-h-32 overflow-y-auto rounded-md border p-2 mx-4">
+ {items.map((item, index) => (
+ <div key={item.itemCode || index} className="flex justify-between text-sm py-1">
+ <span className="font-medium truncate">{item.itemName}</span>
+ <span className="text-muted-foreground ml-2 flex-shrink-0">
+ {item.itemCode}
+ </span>
+ </div>
+ ))}
+ </div>
+
+ <DrawerFooter className="gap-2 sm:space-x-0">
+ <DrawerClose asChild>
+ <Button variant="outline">Cancel</Button>
+ </DrawerClose>
+ <Button
+ aria-label="Delete selected items"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+ )}
+ Delete
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/materials-table/feature-flags-provider.tsx b/lib/vendors/materials-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/materials-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/materials-table/item-action-dialog.tsx b/lib/vendors/materials-table/item-action-dialog.tsx
new file mode 100644
index 00000000..d06f609c
--- /dev/null
+++ b/lib/vendors/materials-table/item-action-dialog.tsx
@@ -0,0 +1,207 @@
+"use client"
+
+import * as React from "react"
+import type { DataTableRowAction } from "@/types/table"
+import { VendorMaterialsView } from "@/db/schema/vendors"
+import { toast } from "sonner"
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { deleteVendorMaterial, getMaterialsForVendor, updateVendorMaterial } from "../service"
+
+
+interface ItemActionsDialogsProps {
+ vendorId: number
+ rowAction: DataTableRowAction<VendorMaterialsView> | null
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorMaterialsView> | null>>
+}
+
+export function ItemActionsDialogs({
+ vendorId,
+ rowAction,
+ setRowAction,
+}: ItemActionsDialogsProps) {
+ const [isUpdatePending, startUpdateTransition] = React.useTransition()
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+ const [availableMaterials, setAvailableMaterials] = React.useState<any[]>([])
+ const [selectedItemCode, setSelectedItemCode] = React.useState<string>("")
+
+ // 사용 가능한 재료 목록 로드
+ React.useEffect(() => {
+ if (rowAction?.type === "update") {
+ getMaterialsForVendor(vendorId).then((result) => {
+ if (result.data) {
+ setAvailableMaterials(result.data)
+ }
+ })
+ }
+ }, [rowAction, vendorId])
+
+ // Edit Dialog
+ const EditDialog = () => {
+ if (!rowAction || rowAction.type !== "update") return null
+
+ const item = rowAction.row.original
+
+ const handleSubmit = () => {
+ if (!selectedItemCode) {
+ toast.error("Please select a new item")
+ return
+ }
+
+ startUpdateTransition(async () => {
+ const result = await updateVendorMaterial(vendorId, item.itemCode, selectedItemCode)
+
+ if (result.error) {
+ toast.error(result.error)
+ } else {
+ toast.success("Item updated successfully")
+ setRowAction(null)
+ }
+ })
+ }
+
+ return (
+ <Dialog
+ open={true}
+ onOpenChange={(open) => !open && setRowAction(null)}
+ >
+ <DialogContent className="sm:max-w-[425px]">
+ <DialogHeader>
+ <DialogTitle>Change Item</DialogTitle>
+ <DialogDescription>
+ Select a new item to replace "{item.itemName}" (Code: {item.itemCode}).
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ <div className="space-y-2">
+ <Label>Current Item</Label>
+ <div className="p-2 bg-muted rounded-md">
+ <div className="font-medium">{item.itemName}</div>
+ <div className="text-sm text-muted-foreground">Code: {item.itemCode}</div>
+ </div>
+ </div>
+
+ <div className="space-y-2">
+ <Label htmlFor="newItem">New Item</Label>
+ <Select value={selectedItemCode} onValueChange={setSelectedItemCode}>
+ <SelectTrigger>
+ <SelectValue placeholder="Select a new item" />
+ </SelectTrigger>
+ <SelectContent>
+ {availableMaterials.map((material) => (
+ <SelectItem key={material.itemCode} value={material.itemCode}>
+ <div>
+ <div className="font-medium">{material.itemName}</div>
+ <div className="text-sm text-muted-foreground">Code: {material.itemCode}</div>
+ </div>
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+
+ <DialogFooter>
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => setRowAction(null)}
+ disabled={isUpdatePending}
+ >
+ Cancel
+ </Button>
+ <Button
+ onClick={handleSubmit}
+ disabled={isUpdatePending || !selectedItemCode}
+ >
+ {isUpdatePending ? "Updating..." : "Update Item"}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+ }
+
+ // Delete Dialog
+ const DeleteDialog = () => {
+ if (!rowAction || rowAction.type !== "delete") return null
+
+ const item = rowAction.row.original
+
+ const handleDelete = () => {
+ startDeleteTransition(async () => {
+ const result = await deleteVendorMaterial(vendorId, item.itemCode)
+
+ if (result.success) {
+ toast.success(result.message)
+ setRowAction(null)
+ } else {
+ toast.error(result.message)
+ }
+ })
+ }
+
+ return (
+ <AlertDialog
+ open={true}
+ onOpenChange={(open) => !open && setRowAction(null)}
+ >
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ <AlertDialogDescription>
+ This will permanently delete the item "{item.itemName}" (Code: {item.itemCode}).
+ This action cannot be undone.
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <AlertDialogFooter>
+ <AlertDialogCancel disabled={isDeletePending}>
+ Cancel
+ </AlertDialogCancel>
+ <AlertDialogAction
+ onClick={handleDelete}
+ disabled={isDeletePending}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {isDeletePending ? "Deleting..." : "Delete"}
+ </AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ )
+ }
+
+ return (
+ <>
+ <EditDialog />
+ <DeleteDialog />
+ </>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/materials-table/item-table-columns.tsx b/lib/vendors/materials-table/item-table-columns.tsx
new file mode 100644
index 00000000..d2aa0f8f
--- /dev/null
+++ b/lib/vendors/materials-table/item-table-columns.tsx
@@ -0,0 +1,195 @@
+"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 { VendorMaterialsView } from "@/db/schema/vendors"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorMaterialsColumnsConfig } from "@/config/vendorMaterialsColumnsConfig"
+
+
+
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorMaterialsView> | null>>;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<VendorMaterialsView>[] {
+ // ----------------------------------------------------------------
+ // 1) select 컬럼 (체크박스)
+ // ----------------------------------------------------------------
+ const selectColumn: ColumnDef<VendorMaterialsView> = {
+ 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<VendorMaterialsView> = {
+ id: "actions",
+ enableHiding: false,
+ cell: function Cell({ row }) {
+ const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+ 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" })
+
+ }}
+ >
+ Edit
+ </DropdownMenuItem>
+
+ <DropdownMenuSeparator />
+ <DropdownMenuItem
+ onSelect={() => setRowAction({ row, type: "delete" })}
+ >
+ Delete
+ <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ )
+ },
+ size: 40,
+ }
+
+ // ----------------------------------------------------------------
+ // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+ // ----------------------------------------------------------------
+ // 3-1) groupMap: { [groupName]: ColumnDef<VendorMaterialsView>[] }
+ const groupMap: Record<string, ColumnDef<VendorMaterialsView>[]> = {}
+
+ vendorMaterialsColumnsConfig.forEach((cfg) => {
+ // 만약 group가 없으면 "_noGroup" 처리
+ const groupName = cfg.group || "_noGroup"
+
+ if (!groupMap[groupName]) {
+ groupMap[groupName] = []
+ }
+
+ // child column 정의
+ const childCol: ColumnDef<VendorMaterialsView> = {
+ accessorKey: cfg.id,
+ enableResizing: true,
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+ ),
+ minSize: cfg.minWidth,
+ size: cfg.defaultWidth,
+ meta: {
+ excelHeader: cfg.excelHeader,
+ group: cfg.group,
+ type: cfg.type,
+ },
+ cell: ({ row, cell }) => {
+
+
+ if (cfg.id === "createdAt") {
+ const dateVal = cell.getValue() as Date
+ return formatDate(dateVal)
+ }
+
+ if (cfg.id === "updatedAt") {
+ const dateVal = cell.getValue() as Date
+ return formatDate(dateVal)
+ }
+
+
+ // code etc...
+ return row.getValue(cfg.id) ?? ""
+ },
+ }
+
+ groupMap[groupName].push(childCol)
+ })
+
+ // ----------------------------------------------------------------
+ // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+ // ----------------------------------------------------------------
+ const nestedColumns: ColumnDef<VendorMaterialsView>[] = []
+
+ // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+ // 여기서는 그냥 Object.entries 순서
+ Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+ if (groupName === "_noGroup") {
+ // 그룹 없음 → 그냥 최상위 레벨 컬럼
+ nestedColumns.push(...colDefs)
+ } else {
+ // 상위 컬럼
+ nestedColumns.push({
+ id: groupName,
+ header: groupName, // "Basic Info", "Metadata" 등
+ columns: colDefs,
+ })
+ }
+ })
+
+ // ----------------------------------------------------------------
+ // 4) 최종 컬럼 배열: select, nestedColumns, actions
+ // ----------------------------------------------------------------
+ return [
+ selectColumn,
+ ...nestedColumns,
+ actionsColumn,
+ ]
+} \ No newline at end of file
diff --git a/lib/vendors/materials-table/item-table-toolbar-actions.tsx b/lib/vendors/materials-table/item-table-toolbar-actions.tsx
new file mode 100644
index 00000000..16df1a19
--- /dev/null
+++ b/lib/vendors/materials-table/item-table-toolbar-actions.tsx
@@ -0,0 +1,122 @@
+// components/vendor-items/item-table-toolbar-actions.tsx
+"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"
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import {
+ VendorMaterialsView
+} from "@/db/schema/vendors"
+import { AddItemDialog } from "./add-item-dialog"
+import { DeleteVendorItemsDialog } from "./delete-vendor-items-dialog"
+
+interface VendorsTableToolbarActionsProps {
+ table: Table<VendorMaterialsView>
+ vendorId: number
+}
+
+export function VendorsTableToolbarActions({ table, vendorId }: VendorsTableToolbarActionsProps) {
+ // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+ const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+ // 선택된 행들 가져오기
+ const selectedRows = table.getFilteredSelectedRowModel().rows
+
+ // 파일이 선택되었을 때 처리
+ 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">
+ <AddItemDialog vendorId={vendorId} />
+
+ {/* 삭제 버튼 - 선택된 행이 있을 때만 표시 */}
+ {selectedRows.length > 0 && (
+ <DeleteVendorItemsDialog
+ vendorId={vendorId}
+ items={selectedRows.map((row) => row.original)}
+ onSuccess={() => {
+ // 삭제 성공 후 선택 해제
+ table.toggleAllPageRowsSelected(false)
+ }}
+ />
+ )}
+
+ {/** 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}
+ />
+
+ {/** Export 버튼 */}
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() =>
+ exportTableToExcel(table, {
+ filename: "vendor-items",
+ 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/materials-table/item-table.tsx b/lib/vendors/materials-table/item-table.tsx
new file mode 100644
index 00000000..066d8de5
--- /dev/null
+++ b/lib/vendors/materials-table/item-table.tsx
@@ -0,0 +1,92 @@
+"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 { useFeatureFlags } from "./feature-flags-provider"
+import { getVendorMaterials, } from "../service"
+import { VendorMaterialsView, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./item-table-toolbar-actions"
+import { getColumns } from "./item-table-columns"
+import { ItemActionsDialogs } from "./item-action-dialog"
+
+interface VendorsTableProps {
+ promises: Promise<
+ [
+ Awaited<ReturnType<typeof getVendorMaterials>>,
+ ]
+ >,
+ vendorId:number
+}
+
+export function VendorMaterialsTable({ promises , vendorId}: VendorsTableProps) {
+ const { featureFlags } = useFeatureFlags()
+
+ // Suspense로 받아온 데이터
+ const [{ data, pageCount }] = React.use(promises)
+ const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorMaterialsView> | null>(null)
+
+ // getColumns() 호출 시, router를 주입
+ const columns = React.useMemo(
+ () => getColumns({ setRowAction }),
+ [setRowAction]
+ )
+
+ const filterFields: DataTableFilterField<VendorMaterialsView>[] = [
+
+ ]
+
+ const advancedFilterFields: DataTableAdvancedFilterField<VendorMaterialsView>[] = [
+ { id: "itemName", label: "Item Name", type: "text" },
+ { id: "itemCode", label: "Item Code", type: "text" },
+ { id: "description", label: "Description", type: "text" },
+ { id: "createdAt", label: "Created at", type: "date" },
+ { id: "updatedAt", label: "Updated 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.itemCode),
+ shallow: false,
+ clearOnDefault: true,
+ })
+
+ return (
+ <>
+ <DataTable
+ table={table}
+ >
+ <DataTableAdvancedToolbar
+ table={table}
+ filterFields={advancedFilterFields}
+ shallow={false}
+ >
+ <VendorsTableToolbarActions table={table} vendorId={vendorId} />
+ </DataTableAdvancedToolbar>
+ </DataTable>
+
+ <ItemActionsDialogs
+ vendorId={vendorId}
+ rowAction={rowAction}
+ setRowAction={setRowAction}
+ />
+ </>
+ )
+} \ No newline at end of file
diff --git a/lib/vendors/repository.ts b/lib/vendors/repository.ts
index 1f59aac0..04d6322a 100644
--- a/lib/vendors/repository.ts
+++ b/lib/vendors/repository.ts
@@ -2,7 +2,7 @@
import { and, eq, inArray, count, gt, AnyColumn, SQLWrapper, SQL} from "drizzle-orm";
import { PgTransaction } from "drizzle-orm/pg-core";
-import { VendorContact, vendorContacts, vendorItemsView, vendorPossibleItems, vendors, vendorsWithTypesView, type Vendor } from "@/db/schema/vendors";
+import { VendorContact, vendorContacts, vendorItemsView, vendorMaterialsView, vendorPossibleItems, vendors, vendorsWithTypesView, type Vendor } from "@/db/schema/vendors";
import db from '@/db/db';
import { items } from "@/db/schema/items";
import { rfqs,rfqItems, rfqEvaluations, vendorResponses } from "@/db/schema/rfq";
@@ -225,6 +225,44 @@ export async function countVendorItems(
return res[0]?.count ?? 0;
}
+export async function selectVendorMaterials(
+ tx: PgTransaction<any, any, any>,
+ params: {
+ where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+ orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+ offset?: number;
+ limit?: number;
+ }
+) {
+ const { where, orderBy, offset = 0, limit = 10 } = params;
+
+ return tx
+ .select({
+ // vendor_possible_items cols
+ vendorItemId: vendorMaterialsView.vendorItemId,
+ vendorId: vendorMaterialsView.vendorId,
+ itemCode: vendorMaterialsView.itemCode,
+ createdAt: vendorMaterialsView.createdAt,
+ updatedAt: vendorMaterialsView.updatedAt,
+ itemName: vendorMaterialsView.itemName,
+ description: vendorMaterialsView.description,
+ })
+ .from(vendorMaterialsView)
+ .where(where ?? undefined)
+ .orderBy(...(orderBy ?? []))
+ .offset(offset)
+ .limit(limit);
+}
+
+export async function countVendorMaterials(
+ tx: PgTransaction<any, any, any>,
+ where?: any
+) {
+ const res = await tx.select({ count: count() }).from(vendorMaterialsView).where(where);
+ return res[0]?.count ?? 0;
+}
+
+
export async function insertVendorItem(
tx: PgTransaction<any, any, any>,
data: NewVendorItem // DB와 동일한 insert 가능한 타입
@@ -236,6 +274,17 @@ export async function insertVendorItem(
.returning({ id: vendorPossibleItems.id, createdAt: vendorPossibleItems.createdAt });
}
+export async function insertVendorMaterial(
+ tx: PgTransaction<any, any, any>,
+ data: NewVendorItem // DB와 동일한 insert 가능한 타입
+) {
+ // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+ return tx
+ .insert(vendorPossibleMateirals)
+ .values(data)
+ .returning({ id: vendorPossibleMateirals.id, createdAt: vendorPossibleMateirals.createdAt });
+}
+
export async function selectRfqHistory(
tx: PgTransaction<any, any, any>,
{ where, orderBy, offset, limit }: SelectVendorsOptions
diff --git a/lib/vendors/service.ts b/lib/vendors/service.ts
index 16f57b57..fb834814 100644
--- a/lib/vendors/service.ts
+++ b/lib/vendors/service.ts
@@ -2,8 +2,9 @@
import { revalidateTag, unstable_noStore } from "next/cache";
import db from "@/db/db";
-import { vendorAttachments, VendorContact, vendorContacts, vendorDetailView, vendorItemsView, vendorPossibleItems, vendors, vendorsWithTypesView, vendorTypes, type Vendor } from "@/db/schema";
+import { vendorAttachments, VendorContact, vendorContacts, vendorDetailView, vendorItemsView, vendorMaterialsView, vendorPossibleItems, vendorPossibleMateirals, vendors, vendorsWithTypesView, vendorTypes, type Vendor } from "@/db/schema";
import logger from '@/lib/logger';
+import * as z from "zod"
import { filterColumns } from "@/lib/filter-columns";
import { unstable_cache } from "@/lib/unstable-cache";
@@ -28,6 +29,8 @@ import {
selectRfqHistory,
selectVendorsWithTypes,
countVendorsWithTypes,
+ countVendorMaterials,
+ insertVendorMaterial,
} from "./repository";
@@ -40,6 +43,7 @@ import type {
GetVendorItemsSchema,
CreateVendorItemSchema,
GetRfqHistorySchema,
+ GetVendorMaterialsSchema,
} from "./validations";
import { asc, desc, ilike, inArray, and, or, gte, lte, eq, isNull, count, sql } from "drizzle-orm";
@@ -51,7 +55,7 @@ import JSZip from 'jszip';
import { promises as fsPromises } from 'fs';
import { sendEmail } from "../mail/sendEmail";
import { PgTransaction } from "drizzle-orm/pg-core";
-import { items } from "@/db/schema/items";
+import { items, materials } from "@/db/schema/items";
import { users } from "@/db/schema/users";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
@@ -740,6 +744,86 @@ export async function getVendorItems(input: GetVendorItemsSchema, id: number) {
return cachedFunction();
}
+export async function getVendorMaterials(input: GetVendorMaterialsSchema, id: number) {
+ const cachedFunction = unstable_cache(
+
+ async () => {
+ try {
+ const offset = (input.page - 1) * input.perPage;
+
+ // const advancedTable = input.flags.includes("advancedTable");
+ const advancedTable = true;
+
+ // advancedTable 모드면 filterColumns()로 where 절 구성
+ const advancedWhere = filterColumns({
+ table: vendorMaterialsView,
+ filters: input.filters,
+ joinOperator: input.joinOperator,
+ });
+
+
+ let globalWhere
+ if (input.search) {
+ const s = `%${input.search}%`
+ globalWhere = or(ilike(vendorMaterialsView.itemCode, s)
+ , ilike(vendorMaterialsView.description, s)
+ )
+ // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+ }
+
+ const vendorWhere = eq(vendorMaterialsView.vendorId, id)
+
+ const finalWhere = and(
+ // advancedWhere or your existing conditions
+ advancedWhere,
+ globalWhere,
+ vendorWhere
+ )
+
+
+ // 아니면 ilike, inArray, gte 등으로 where 절 구성
+ const where = finalWhere
+
+ const orderBy =
+ input.sort.length > 0
+ ? input.sort.map((item) =>
+ item.desc ? desc(vendorMaterialsView[item.id]) : asc(vendorMaterialsView[item.id])
+ )
+ : [asc(vendorMaterialsView.createdAt)];
+
+ // 트랜잭션 내부에서 Repository 호출
+ const { data, total } = await db.transaction(async (tx) => {
+ const data = await selectVendorMaterials(tx, {
+ where,
+ orderBy,
+ offset,
+ limit: input.perPage,
+ });
+ const total = await countVendorMaterials(tx, where);
+ return { data, total };
+ });
+
+
+ const pageCount = Math.ceil(total / input.perPage);
+
+
+ console.log(data)
+
+ return { data, pageCount };
+ } catch (err) {
+ // 에러 발생 시 디폴트
+ return { data: [], pageCount: 0 };
+ }
+ },
+ [JSON.stringify(input), String(id)], // 캐싱 키
+ {
+ revalidate: 3600,
+ tags: [`vendor-materials-${id}`], // revalidateTag("tasks") 호출 시 무효화
+ }
+ );
+ return cachedFunction();
+}
+
export interface ItemDropdownOption {
itemCode: string;
itemName: string;
@@ -820,6 +904,327 @@ export async function createVendorItem(input: CreateVendorItemSchema) {
}
}
+
+
+const updateVendorItemSchema = z.object({
+ oldItemCode: z.string().min(1, "Old item code is required"),
+ newItemCode: z.string().min(1, "New item code is required"),
+ vendorId: z.number().min(1, "Vendor ID is required"),
+})
+
+
+export async function deleteVendorItem(
+ vendorId: number,
+ itemCode: string
+) {
+ try {
+ const validatedData = deleteVendorItemSchema.parse({
+ itemCode,
+ vendorId,
+ })
+
+ await db
+ .delete(vendorPossibleItems)
+ .where(
+ and(
+ eq(vendorPossibleItems.itemCode, validatedData.itemCode),
+ eq(vendorPossibleItems.vendorId, validatedData.vendorId)
+ )
+ )
+
+ revalidateTag(`vendor-items-${vendorId}`);
+
+ return { success: true, message: "Item deleted successfully" }
+ } catch (error) {
+ console.error("Error deleting vendor item:", error)
+ return {
+ success: false,
+ message: error instanceof z.ZodError
+ ? error.errors[0].message
+ : "Failed to delete item"
+ }
+ }
+}
+
+export async function updateVendorItem(
+ vendorId: number,
+ oldItemCode: string,
+ newItemCode: string
+) {
+ unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+
+ try {
+ const validatedData = updateVendorItemSchema.parse({
+ oldItemCode,
+ newItemCode,
+ vendorId,
+ })
+
+ await db.transaction(async (tx) => {
+ // 기존 아이템 삭제
+ await tx
+ .delete(vendorPossibleItems)
+ .where(
+ and(
+ eq(vendorPossibleItems.itemCode, validatedData.oldItemCode),
+ eq(vendorPossibleItems.vendorId, validatedData.vendorId)
+ )
+ )
+
+ // 새 아이템 추가
+ await tx.insert(vendorPossibleItems).values({
+ vendorId: validatedData.vendorId,
+ itemCode: validatedData.newItemCode,
+ })
+ })
+
+ // 캐시 무효화
+ revalidateTag(`vendor-items-${vendorId}`)
+
+ return { data: null, error: null }
+ } catch (err) {
+ console.error("Error updating vendor item:", err)
+ return {
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+export async function removeVendorItems(input: {
+ itemCodes: string[]
+ vendorId: number
+}) {
+ unstable_noStore()
+
+ try {
+ const validatedData = removeVendorItemsSchema.parse(input)
+
+ await db
+ .delete(vendorPossibleItems)
+ .where(
+ and(
+ inArray(vendorPossibleItems.itemCode, validatedData.itemCodes),
+ eq(vendorPossibleItems.vendorId, validatedData.vendorId)
+ )
+ )
+
+ revalidateTag(`vendor-items-${validatedData.vendorId}`)
+
+ return { data: null, error: null }
+ } catch (err) {
+ console.error("Error deleting vendor items:", err)
+ return {
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+// 스키마도 추가해야 합니다
+const removeVendorItemsSchema = z.object({
+ itemCodes: z.array(z.string()).min(1, "At least one item code is required"),
+ vendorId: z.number().min(1, "Vendor ID is required"),
+})
+
+const deleteVendorItemSchema = z.object({
+ itemCode: z.string().min(1, "Item code is required"),
+ vendorId: z.number().min(1, "Vendor ID is required"),
+})
+
+export async function getMaterialsForVendor(vendorId: number) {
+ return unstable_cache(
+ async () => {
+ try {
+ // 해당 vendorId가 이미 가지고 있는 itemCode 목록을 서브쿼리로 구함
+ // 그 아이템코드를 제외(notIn)하여 모든 items 테이블에서 조회
+ const itemsData = await db
+ .select({
+ itemCode: materials.itemCode,
+ itemName: materials.itemName,
+ description: materials.description,
+ })
+ .from(materials)
+ .leftJoin(
+ vendorPossibleMateirals,
+ eq(materials.itemCode, vendorPossibleMateirals.itemCode)
+ )
+ // vendorPossibleItems.vendorId가 이 vendorId인 행이 없는(즉 아직 등록되지 않은) 아이템만
+ .where(
+ isNull(vendorPossibleMateirals.id) // 또는 isNull(vendorPossibleItems.itemCode)
+ )
+ .orderBy(asc(materials.itemName))
+
+ return {
+ data: itemsData.map((item) => ({
+ itemCode: item.itemCode ?? "", // null이라면 ""로 치환
+ itemName: item.itemName,
+ description: item.description ?? "" // null이라면 ""로 치환
+ })),
+ error: null
+ }
+ } catch (err) {
+ console.error("Failed to fetch items for vendor dropdown:", err)
+ return {
+ data: [],
+ error: "아이템 목록을 불러오는데 실패했습니다.",
+ }
+ }
+ },
+ // 캐시 키를 vendorId 별로 달리 해야 한다.
+ ["materials-for-vendor", String(vendorId)],
+ {
+ revalidate: 3600, // 1시간 캐싱
+ tags: ["materials"], // revalidateTag("materials") 호출 시 무효화
+ }
+ )()
+}
+
+export async function createVendorMaterial(input: CreateVendorItemSchema) {
+ unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+ try {
+ await db.transaction(async (tx) => {
+ // DB Insert
+ const [newContact] = await insertVendorMaterial(tx, {
+ vendorId: input.vendorId,
+ itemCode: input.itemCode,
+
+ });
+ return newContact;
+ });
+
+ // 캐시 무효화 (협력업체 연락처 목록 등)
+ revalidateTag(`vendor-materials-${input.vendorId}`);
+
+ return { data: null, error: null };
+ } catch (err) {
+ return { data: null, error: getErrorMessage(err) };
+ }
+}
+
+const updateVendorMaterialSchema = z.object({
+ oldItemCode: z.string().min(1, "Old item code is required"),
+ newItemCode: z.string().min(1, "New item code is required"),
+ vendorId: z.number().min(1, "Vendor ID is required"),
+})
+
+
+export async function deleteVendorMaterial(
+ vendorId: number,
+ itemCode: string
+) {
+ try {
+ const validatedData = deleteVendorItemSchema.parse({
+ itemCode,
+ vendorId,
+ })
+
+ await db
+ .delete(vendorPossibleMateirals)
+ .where(
+ and(
+ eq(vendorPossibleMateirals.itemCode, validatedData.itemCode),
+ eq(vendorPossibleMateirals.vendorId, validatedData.vendorId)
+ )
+ )
+
+ revalidateTag(`vendor-materials-${vendorId}`);
+
+ return { success: true, message: "Item deleted successfully" }
+ } catch (error) {
+ console.error("Error deleting vendor item:", error)
+ return {
+ success: false,
+ message: error instanceof z.ZodError
+ ? error.errors[0].message
+ : "Failed to delete item"
+ }
+ }
+}
+
+export async function updateVendorMaterial(
+ vendorId: number,
+ oldItemCode: string,
+ newItemCode: string
+) {
+ unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+
+ try {
+ const validatedData = updateVendorMaterialSchema.parse({
+ oldItemCode,
+ newItemCode,
+ vendorId,
+ })
+
+ await db.transaction(async (tx) => {
+ // 기존 아이템 삭제
+ await tx
+ .delete(vendorPossibleMateirals)
+ .where(
+ and(
+ eq(vendorPossibleMateirals.itemCode, validatedData.oldItemCode),
+ eq(vendorPossibleMateirals.vendorId, validatedData.vendorId)
+ )
+ )
+
+ // 새 아이템 추가
+ await tx.insert(vendorPossibleMateirals).values({
+ vendorId: validatedData.vendorId,
+ itemCode: validatedData.newItemCode,
+ })
+ })
+
+ // 캐시 무효화
+ revalidateTag(`vendor-items-${vendorId}`)
+
+ return { data: null, error: null }
+ } catch (err) {
+ console.error("Error updating vendor item:", err)
+ return {
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+export async function removeVendorMaterials(input: {
+ itemCodes: string[]
+ vendorId: number
+}) {
+ unstable_noStore()
+
+ try {
+ const validatedData = removeVendormaterialsSchema.parse(input)
+
+ await db
+ .delete(vendorPossibleMateirals)
+ .where(
+ and(
+ inArray(vendorPossibleMateirals.itemCode, validatedData.itemCodes),
+ eq(vendorPossibleMateirals.vendorId, validatedData.vendorId)
+ )
+ )
+
+ revalidateTag(`vendor-materials-${validatedData.vendorId}`)
+
+ return { data: null, error: null }
+ } catch (err) {
+ console.error("Error deleting vendor items:", err)
+ return {
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+// 스키마도 추가해야 합니다
+const removeVendormaterialsSchema = z.object({
+ itemCodes: z.array(z.string()).min(1, "At least one item code is required"),
+ vendorId: z.number().min(1, "Vendor ID is required"),
+})
+
+
+
export async function getRfqHistory(input: GetRfqHistorySchema, vendorId: number) {
return unstable_cache(
async () => {
diff --git a/lib/vendors/validations.ts b/lib/vendors/validations.ts
index 10ea3e78..7ba54ccf 100644
--- a/lib/vendors/validations.ts
+++ b/lib/vendors/validations.ts
@@ -8,7 +8,7 @@ import {
import * as z from "zod"
import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
-import { Vendor, VendorContact, vendorInvestigationsView, VendorItemsView, vendors, VendorWithType } from "@/db/schema/vendors";
+import { Vendor, VendorContact, VendorItemsView, VendorMaterialsView, vendors, VendorWithType } from "@/db/schema/vendors";
import { rfqs } from "@/db/schema/rfq"
@@ -424,4 +424,35 @@ export const updateVendorSchemaWithConditions = updateVendorInfoSchema.superRefi
}
)
-export type UpdateVendorInfoSchema = z.infer<typeof updateVendorInfoSchema> \ No newline at end of file
+export type UpdateVendorInfoSchema = z.infer<typeof updateVendorInfoSchema>
+
+
+export const searchParamsMaterialCache = createSearchParamsCache({
+ // 공통 플래그
+ flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+ []
+ ),
+
+ // 페이징
+ page: parseAsInteger.withDefault(1),
+ perPage: parseAsInteger.withDefault(10),
+
+ // 정렬 (vendors 테이블에 맞춰 Vendor 타입 지정)
+ sort: getSortingStateParser<VendorMaterialsView>().withDefault([
+ { id: "createdAt", desc: true }, // createdAt 기준 내림차순
+ ]),
+
+ // 고급 필터
+ filters: getFiltersStateParser().withDefault([]),
+ joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+ // 검색 키워드
+ search: parseAsString.withDefault(""),
+
+
+ itemName: parseAsString.withDefault(""),
+ itemCode: parseAsString.withDefault(""),
+ description: parseAsString.withDefault(""),
+});
+
+export type GetVendorMaterialsSchema = Awaited<ReturnType<typeof searchParamsMaterialCache.parse>>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 03:15:13 +0000