From 9eb8e80f4f736c4edffa650c685d1f170ca51aa1 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Thu, 15 May 2025 01:19:49 +0000
Subject: (대표님) 구매 요청사항 반영한 통합 rfq / 필터 개인화 / po-rfq
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../po-rfq/detail-table/update-vendor-sheet.tsx    | 449 +++++++++++++++++++++
 1 file changed, 449 insertions(+)
 create mode 100644 components/po-rfq/detail-table/update-vendor-sheet.tsx

(limited to 'components/po-rfq/detail-table/update-vendor-sheet.tsx')

diff --git a/components/po-rfq/detail-table/update-vendor-sheet.tsx b/components/po-rfq/detail-table/update-vendor-sheet.tsx
new file mode 100644
index 00000000..45e4a602
--- /dev/null
+++ b/components/po-rfq/detail-table/update-vendor-sheet.tsx
@@ -0,0 +1,449 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import { RfqDetailView } from "./rfq-detail-column"
+import { updateRfqDetail } from "@/lib/procurement-rfqs/services"
+
+// 폼 유효성 검증 스키마
+const updateRfqDetailSchema = z.object({
+  vendorId: z.string().min(1, "벤더를 선택해주세요"),
+  currency: z.string().min(1, "통화를 선택해주세요"),
+  paymentTermsCode: z.string().min(1, "지불 조건을 선택해주세요"),
+  incotermsCode: z.string().min(1, "인코텀즈를 선택해주세요"),
+  incotermsDetail: z.string().optional(),
+  deliveryDate: z.string().optional(),
+  taxCode: z.string().optional(),
+  placeOfShipping: z.string().optional(),
+  placeOfDestination: z.string().optional(),
+  materialPriceRelatedYn: z.boolean().default(false),
+})
+
+type UpdateRfqDetailFormValues = z.infer<typeof updateRfqDetailSchema>
+
+// 데이터 타입 정의
+interface Vendor {
+  id: number;
+  vendorName: string;
+  vendorCode: string;
+}
+
+interface Currency {
+  code: string;
+  name: string;
+}
+
+interface PaymentTerm {
+  code: string;
+  description: string;
+}
+
+interface Incoterm {
+  code: string;
+  description: string;
+}
+
+interface UpdateRfqDetailSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  detail: RfqDetailView | null;
+  vendors: Vendor[];
+  currencies: Currency[];
+  paymentTerms: PaymentTerm[];
+  incoterms: Incoterm[];
+  onSuccess?: () => void;
+}
+
+export function UpdateRfqDetailSheet({ 
+  detail, 
+  vendors, 
+  currencies, 
+  paymentTerms, 
+  incoterms,
+  onSuccess,
+  ...props 
+}: UpdateRfqDetailSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [vendorOpen, setVendorOpen] = React.useState(false)
+
+  const form = useForm<UpdateRfqDetailFormValues>({
+    resolver: zodResolver(updateRfqDetailSchema),
+    defaultValues: {
+      vendorId: detail?.vendorName ? String(vendors.find(v => v.vendorName === detail.vendorName)?.id || "") : "",
+      currency: detail?.currency || "",
+      paymentTermsCode: detail?.paymentTermsCode || "",
+      incotermsCode: detail?.incotermsCode || "",
+      incotermsDetail: detail?.incotermsDetail || "",
+      deliveryDate: detail?.deliveryDate ? new Date(detail.deliveryDate).toISOString().split('T')[0] : "",
+      taxCode: detail?.taxCode || "",
+      placeOfShipping: detail?.placeOfShipping || "",
+      placeOfDestination: detail?.placeOfDestination || "",
+      materialPriceRelatedYn: detail?.materialPriceRelatedYn || false,
+    },
+  })
+
+  // detail이 변경될 때 form 값 업데이트
+  React.useEffect(() => {
+    if (detail) {
+      const vendorId = vendors.find(v => v.vendorName === detail.vendorName)?.id
+      
+      form.reset({
+        vendorId: vendorId ? String(vendorId) : "",
+        currency: detail.currency || "",
+        paymentTermsCode: detail.paymentTermsCode || "",
+        incotermsCode: detail.incotermsCode || "",
+        incotermsDetail: detail.incotermsDetail || "",
+        deliveryDate: detail.deliveryDate ? new Date(detail.deliveryDate).toISOString().split('T')[0] : "",
+        taxCode: detail.taxCode || "",
+        placeOfShipping: detail.placeOfShipping || "",
+        placeOfDestination: detail.placeOfDestination || "",
+        materialPriceRelatedYn: detail.materialPriceRelatedYn || false,
+      })
+    }
+  }, [detail, form, vendors])
+
+  function onSubmit(values: UpdateRfqDetailFormValues) {
+    if (!detail) return
+
+    startUpdateTransition(async () => {
+      try {
+        const result = await updateRfqDetail(detail.detailId, values)
+
+        if (!result.success) {
+          toast.error(result.message || "수정 중 오류가 발생했습니다")
+          return
+        }
+
+        props.onOpenChange?.(false)
+        toast.success("RFQ 벤더 정보가 수정되었습니다")
+        onSuccess?.()
+      } catch (error) {
+        console.error("RFQ 벤더 수정 오류:", error)
+        toast.error("수정 중 오류가 발생했습니다")
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex w-full flex-col gap-6 sm:max-w-xl">
+        <SheetHeader className="text-left">
+          <SheetTitle>RFQ 벤더 정보 수정</SheetTitle>
+          <SheetDescription>
+            벤더 정보를 수정하고 저장하세요
+          </SheetDescription>
+        </SheetHeader>
+        <ScrollArea className="flex-1 pr-4">
+          <Form {...form}>
+            <form
+              id="update-rfq-detail-form"
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              {/* 검색 가능한 벤더 선택 필드 */}
+              <FormField
+                control={form.control}
+                name="vendorId"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>벤더 <span className="text-red-500">*</span></FormLabel>
+                    <Popover open={vendorOpen} onOpenChange={setVendorOpen}>
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={vendorOpen}
+                            className={cn(
+                              "w-full justify-between",
+                              !field.value && "text-muted-foreground"
+                            )}
+                          >
+                            {field.value
+                              ? vendors.find((vendor) => String(vendor.id) === field.value)
+                                ? `${vendors.find((vendor) => String(vendor.id) === field.value)?.vendorName} (${vendors.find((vendor) => String(vendor.id) === field.value)?.vendorCode})`
+                                : "벤더를 선택하세요"
+                              : "벤더를 선택하세요"}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="벤더 검색..." />
+                          <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                          <ScrollArea className="h-60">
+                            <CommandGroup>
+                              {vendors.map((vendor) => (
+                                <CommandItem
+                                  key={vendor.id}
+                                  value={`${vendor.vendorName} ${vendor.vendorCode}`}
+                                  onSelect={() => {
+                                    form.setValue("vendorId", String(vendor.id), {
+                                      shouldValidate: true,
+                                    })
+                                    setVendorOpen(false)
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      String(vendor.id) === field.value
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  {vendor.vendorName} ({vendor.vendorCode})
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </ScrollArea>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="currency"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>통화 <span className="text-red-500">*</span></FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="통화를 선택하세요" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {currencies.map((currency) => (
+                          <SelectItem key={currency.code} value={currency.code}>
+                            {currency.name} ({currency.code})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="paymentTermsCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>지불 조건 <span className="text-red-500">*</span></FormLabel>
+                      <Select onValueChange={field.onChange} value={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="지불 조건 선택" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {paymentTerms.map((term) => (
+                            <SelectItem key={term.code} value={term.code}>
+                              {term.description}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="incotermsCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>인코텀즈 <span className="text-red-500">*</span></FormLabel>
+                      <Select onValueChange={field.onChange} value={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="인코텀즈 선택" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {incoterms.map((incoterm) => (
+                            <SelectItem key={incoterm.code} value={incoterm.code}>
+                              {incoterm.description}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="incotermsDetail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>인코텀즈 세부사항</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="인코텀즈 세부사항" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="deliveryDate"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>납품 예정일</FormLabel>
+                      <FormControl>
+                        <Input {...field} type="date" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="taxCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>세금 코드</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="세금 코드" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="placeOfShipping"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>선적지</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="선적지" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="placeOfDestination"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>도착지</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="도착지" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="materialPriceRelatedYn"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>자재 가격 관련 여부</FormLabel>
+                    </div>
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+          <SheetClose asChild>
+            <Button type="button" variant="outline">
+              취소
+            </Button>
+          </SheetClose>
+          <Button
+            type="submit"
+            form="update-rfq-detail-form"
+            disabled={isUpdatePending}
+          >
+            {isUpdatePending && (
+              <Loader
+                className="mr-2 size-4 animate-spin"
+                aria-hidden="true"
+              />
+            )}
+            저장
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3