diff options
Diffstat (limited to 'lib/pcr/table/detail-table')
| -rw-r--r-- | lib/pcr/table/detail-table/create-pcr-pr-dialog.tsx | 598 | ||||
| -rw-r--r-- | lib/pcr/table/detail-table/pcr-detail-column.tsx | 333 | ||||
| -rw-r--r-- | lib/pcr/table/detail-table/pcr-detail-table.tsx | 121 | ||||
| -rw-r--r-- | lib/pcr/table/detail-table/pcr-detail-toolbar-action.tsx | 79 |
4 files changed, 1131 insertions, 0 deletions
diff --git a/lib/pcr/table/detail-table/create-pcr-pr-dialog.tsx b/lib/pcr/table/detail-table/create-pcr-pr-dialog.tsx new file mode 100644 index 00000000..1244d179 --- /dev/null +++ b/lib/pcr/table/detail-table/create-pcr-pr-dialog.tsx @@ -0,0 +1,598 @@ +"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Calendar } from "@/components/ui/calendar"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import { CalendarIcon } from "lucide-react"
+import { format } from "date-fns"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+import { PcrPoData } from "@/lib/pcr/types"
+import { createPcrPrAction } from "@/lib/pcr/actions"
+
+const pcrPrSchema = z.object({
+ materialNumber: z.string().min(1, "자재번호는 필수입니다"),
+ materialDetails: z.string().optional(),
+ quantityBefore: z.number().optional(),
+ quantityAfter: z.number().optional(),
+ weightBefore: z.number().optional(),
+ weightAfter: z.number().optional(),
+ subcontractorWeightBefore: z.number().optional(),
+ subcontractorWeightAfter: z.number().optional(),
+ supplierWeightBefore: z.number().optional(),
+ supplierWeightAfter: z.number().optional(),
+ specDrawingBefore: z.string().optional(),
+ specDrawingAfter: z.string().optional(),
+ initialPoContractDate: z.date().optional(),
+ specChangeDate: z.date().optional(),
+ poContractModifiedDate: z.date().optional(),
+ confirmationDate: z.date().optional(),
+ designManager: z.string().optional(),
+})
+
+type PcrPrFormData = z.infer<typeof pcrPrSchema>
+
+interface CreatePcrPrDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ selectedPcrPo: PcrPoData | null
+ onSuccess: () => void
+}
+
+export function CreatePcrPrDialog({
+ open,
+ onOpenChange,
+ selectedPcrPo,
+ onSuccess,
+}: CreatePcrPrDialogProps) {
+ const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+ const form = useForm<PcrPrFormData>({
+ resolver: zodResolver(pcrPrSchema),
+ defaultValues: {
+ materialNumber: "",
+ materialDetails: "",
+ quantityBefore: undefined,
+ quantityAfter: undefined,
+ weightBefore: undefined,
+ weightAfter: undefined,
+ subcontractorWeightBefore: undefined,
+ subcontractorWeightAfter: undefined,
+ supplierWeightBefore: undefined,
+ supplierWeightAfter: undefined,
+ specDrawingBefore: "",
+ specDrawingAfter: "",
+ initialPoContractDate: undefined,
+ specChangeDate: undefined,
+ poContractModifiedDate: undefined,
+ confirmationDate: undefined,
+ designManager: "",
+ },
+ })
+
+ const onSubmit = async (data: PcrPrFormData) => {
+ if (!selectedPcrPo) {
+ toast.error("선택된 PCR_PO가 없습니다")
+ return
+ }
+
+ setIsSubmitting(true)
+ try {
+ const result = await createPcrPrAction({
+ ...data,
+ poContractNumber: selectedPcrPo.poContractNumber,
+ })
+
+ if (result.success) {
+ toast.success("PCR_PR이 성공적으로 생성되었습니다")
+ form.reset()
+ onOpenChange(false)
+ onSuccess()
+ } else {
+ toast.error(result.error || "PCR_PR 생성에 실패했습니다")
+ }
+ } catch (error) {
+ console.error("PCR_PR 생성 오류:", error)
+ toast.error("PCR_PR 생성 중 오류가 발생했습니다")
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+ <DialogHeader>
+ <DialogTitle>PCR_PR 생성</DialogTitle>
+ <DialogDescription>
+ PO/계약번호: {selectedPcrPo?.poContractNumber}
+ </DialogDescription>
+ </DialogHeader>
+
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+ {/* 기본 정보 섹션 */}
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="materialNumber"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>자재번호 *</FormLabel>
+ <FormControl>
+ <Input placeholder="자재번호를 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="designManager"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>설계 담당자</FormLabel>
+ <FormControl>
+ <Input placeholder="설계 담당자를 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+
+ <FormField
+ control={form.control}
+ name="materialDetails"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>자재내역</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="자재내역을 입력하세요"
+ className="resize-none"
+ rows={3}
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 수량 정보 섹션 */}
+ <div className="space-y-4">
+ <h4 className="text-sm font-medium text-muted-foreground">수량 정보</h4>
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="quantityBefore"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>수량 (변경전)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="quantityAfter"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>수량 (변경후)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ </div>
+
+ {/* 중량 정보 섹션 */}
+ <div className="space-y-4">
+ <h4 className="text-sm font-medium text-muted-foreground">중량 정보</h4>
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="weightBefore"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>중량 (변경전)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="weightAfter"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>중량 (변경후)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="subcontractorWeightBefore"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>사급중량 (변경전)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="subcontractorWeightAfter"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>사급중량 (변경후)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="supplierWeightBefore"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>도급중량 (변경전)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="supplierWeightAfter"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>도급중량 (변경후)</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ step="0.001"
+ placeholder="0.000"
+ {...field}
+ onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ </div>
+
+ {/* SPEC 도면 정보 섹션 */}
+ <div className="space-y-4">
+ <h4 className="text-sm font-medium text-muted-foreground">SPEC 도면 정보</h4>
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="specDrawingBefore"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>SPEC 도면 (변경전)</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="SPEC 도면 정보를 입력하세요"
+ className="resize-none"
+ rows={2}
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="specDrawingAfter"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>SPEC 도면 (변경후)</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="SPEC 도면 정보를 입력하세요"
+ className="resize-none"
+ rows={2}
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ </div>
+
+ {/* 날짜 정보 섹션 */}
+ <div className="space-y-4">
+ <h4 className="text-sm font-medium text-muted-foreground">날짜 정보</h4>
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="initialPoContractDate"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>최초 PO/계약 일</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "yyyy년 MM월 dd일")
+ ) : (
+ <span>날짜를 선택하세요</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={field.onChange}
+ disabled={(date) =>
+ date > new Date() || date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="specChangeDate"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>SPEC 변경 일</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "yyyy년 MM월 dd일")
+ ) : (
+ <span>날짜를 선택하세요</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={field.onChange}
+ disabled={(date) =>
+ date > new Date() || date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="poContractModifiedDate"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>PO/계약 수정 일</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "yyyy년 MM월 dd일")
+ ) : (
+ <span>날짜를 선택하세요</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={field.onChange}
+ disabled={(date) =>
+ date > new Date() || date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="confirmationDate"
+ render={({ field }) => (
+ <FormItem className="flex flex-col">
+ <FormLabel>확인 일</FormLabel>
+ <Popover>
+ <PopoverTrigger asChild>
+ <FormControl>
+ <Button
+ variant="outline"
+ className={cn(
+ "w-full pl-3 text-left font-normal",
+ !field.value && "text-muted-foreground"
+ )}
+ >
+ {field.value ? (
+ format(field.value, "yyyy년 MM월 dd일")
+ ) : (
+ <span>날짜를 선택하세요</span>
+ )}
+ <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+ </Button>
+ </FormControl>
+ </PopoverTrigger>
+ <PopoverContent className="w-auto p-0" align="start">
+ <Calendar
+ mode="single"
+ selected={field.value}
+ onSelect={field.onChange}
+ disabled={(date) =>
+ date > new Date() || date < new Date("1900-01-01")
+ }
+ initialFocus
+ />
+ </PopoverContent>
+ </Popover>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ </div>
+
+ <DialogFooter>
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isSubmitting}
+ >
+ 취소
+ </Button>
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? "생성 중..." : "생성"}
+ </Button>
+ </DialogFooter>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ )
+}
diff --git a/lib/pcr/table/detail-table/pcr-detail-column.tsx b/lib/pcr/table/detail-table/pcr-detail-column.tsx new file mode 100644 index 00000000..664f37ef --- /dev/null +++ b/lib/pcr/table/detail-table/pcr-detail-column.tsx @@ -0,0 +1,333 @@ +import { ColumnDef } from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { PcrPrData } from "@/lib/pcr/types"
+import { FileIcon, Download } from "lucide-react"
+import { downloadFile } from "@/lib/file-download"
+
+export function getPcrDetailColumns(): ColumnDef<PcrPrData>[] {
+ return [
+ {
+ accessorKey: "materialNumber",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="자재번호" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("materialNumber") as string
+ return (
+ <div className="font-medium">
+ {value || "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "materialDetails",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="자재내역" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("materialDetails") as string
+ return (
+ <div className="max-w-[200px] truncate" title={value}>
+ {value || "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "quantityBefore",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="수량(변경전)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("quantityBefore") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? value.toLocaleString() : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "quantityAfter",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="수량(변경후)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("quantityAfter") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? value.toLocaleString() : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "weightBefore",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="중량(변경전)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("weightBefore") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "weightAfter",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="중량(변경후)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("weightAfter") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "subcontractorWeightBefore",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="사급중량(변경전)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("subcontractorWeightBefore") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "subcontractorWeightAfter",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="사급중량(변경후)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("subcontractorWeightAfter") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "supplierWeightBefore",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="도급중량(변경전)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("supplierWeightBefore") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "supplierWeightAfter",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="도급중량(변경후)" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("supplierWeightAfter") as number
+ return (
+ <div className="text-right font-mono text-sm">
+ {value ? `${value.toLocaleString()} kg` : "-"}
+ </div>
+ )
+ },
+ },
+ {
+ id: "attachments",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="첨부파일" />
+ ),
+ cell: ({ row }) => {
+ const attachments = row.original.attachments || []
+ const beforeAttachment = attachments.find(att => att.type === 'BEFORE')
+ const afterAttachment = attachments.find(att => att.type === 'AFTER')
+
+ if (!beforeAttachment && !afterAttachment) {
+ return (
+ <div className="text-center text-muted-foreground">
+ <FileIcon className="size-4 mx-auto" />
+ </div>
+ )
+ }
+
+ return (
+ <div className="flex gap-1 justify-center">
+ {/* 변경전 첨부파일 */}
+ {beforeAttachment && (
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={() => {
+ downloadFile(beforeAttachment.filePath, beforeAttachment.fileName)
+ }}
+ title={`변경전: ${beforeAttachment.fileName}`}
+ className="h-6 w-6 p-0"
+ >
+ <Download className="size-3" />
+ </Button>
+ )}
+
+ {/* 변경후 첨부파일 */}
+ {afterAttachment && (
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={() => {
+ downloadFile(afterAttachment.filePath, afterAttachment.fileName)
+ }}
+ title={`변경후: ${afterAttachment.fileName}`}
+ className="h-6 w-6 p-0"
+ >
+ <Download className="size-3" />
+ </Button>
+ )}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "initialPoContractDate",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="최초 PO/계약일" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("initialPoContractDate") as Date
+ if (!value) return "-"
+
+ return (
+ <div className="text-sm">
+ {value.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ })}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "specChangeDate",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="SPEC 변경일" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("specChangeDate") as Date
+ if (!value) return "-"
+
+ return (
+ <div className="text-sm">
+ {value.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ })}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "poContractModifiedDate",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="PO/계약수정일" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("poContractModifiedDate") as Date
+ if (!value) return "-"
+
+ return (
+ <div className="text-sm">
+ {value.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ })}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "confirmationDate",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="확인일" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("confirmationDate") as Date
+ if (!value) return "-"
+
+ return (
+ <div className="text-sm">
+ {value.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ })}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "designManager",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="설계담당자" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("designManager") as string
+ return (
+ <div className="max-w-[120px] truncate" title={value}>
+ {value || "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "poContractNumber",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="PO/계약번호" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("poContractNumber") as string
+ return (
+ <div className="font-medium">
+ {value || "-"}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "createdAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="생성일" />
+ ),
+ cell: ({ row }) => {
+ const value = row.getValue("createdAt") as Date
+ if (!value) return "-"
+
+ return (
+ <div className="text-sm">
+ {value.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ })}
+ </div>
+ )
+ },
+ },
+ ]
+}
diff --git a/lib/pcr/table/detail-table/pcr-detail-table.tsx b/lib/pcr/table/detail-table/pcr-detail-table.tsx new file mode 100644 index 00000000..65a07146 --- /dev/null +++ b/lib/pcr/table/detail-table/pcr-detail-table.tsx @@ -0,0 +1,121 @@ +"use client"
+
+import * as React from "react"
+import { useEffect, useState, useCallback } from "react"
+import { getPcrPrListByPoContractNumber } from "@/lib/pcr/service"
+import { PcrPoData, PcrPrData } from "@/lib/pcr/types"
+import { ClientDataTable } from "@/components/client-data-table/data-table"
+import { getPcrDetailColumns } from "./pcr-detail-column"
+import { PcrDetailToolbarAction } from "./pcr-detail-toolbar-action"
+import { toast } from "sonner"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+
+// 프로퍼티 정의
+interface PcrDetailTablesProps {
+ selectedPcrPo: PcrPoData | null
+ maxHeight?: string | number
+ isPartnersPage?: boolean
+}
+
+export function PcrDetailTables({ selectedPcrPo, maxHeight, isPartnersPage = false }: PcrDetailTablesProps) {
+ // 상태 관리
+ const [isLoading, setIsLoading] = useState(false)
+ const [details, setDetails] = useState<PcrPrData[]>([])
+
+ // 데이터 새로고침 함수
+ const handleRefreshData = useCallback(async () => {
+ if (!selectedPcrPo?.poContractNumber) {
+ setDetails([])
+ return
+ }
+
+ try {
+ setIsLoading(true)
+
+ const result = await getPcrPrListByPoContractNumber(selectedPcrPo.poContractNumber)
+
+ // 데이터 변환
+ const transformedData = result.map(item => ({
+ ...item,
+ // 필요한 추가 필드 변환
+ }))
+
+ setDetails(transformedData)
+ } catch (error) {
+ console.error("PCR_PR 데이터 로드 오류:", error)
+ setDetails([])
+ toast.error("PCR_PR 데이터를 불러오는 중 오류가 발생했습니다")
+ } finally {
+ setIsLoading(false)
+ }
+ }, [selectedPcrPo?.poContractNumber])
+
+ // selectedPcrPo가 변경될 때 데이터 로드
+ useEffect(() => {
+ handleRefreshData()
+ }, [handleRefreshData])
+
+ // 칼럼 정의
+ const columns = React.useMemo(() =>
+ getPcrDetailColumns(),
+ []
+ )
+
+ if (!selectedPcrPo) {
+ return (
+ <div className="flex items-center justify-center h-full text-muted-foreground">
+ PCR_PO를 선택하세요
+ </div>
+ )
+ }
+
+ // 로딩 중인 경우
+ if (isLoading) {
+ return (
+ <div className="p-4 space-y-4">
+ <Skeleton className="h-8 w-1/2" />
+ <Skeleton className="h-24 w-full" />
+ <Skeleton className="h-48 w-full" />
+ </div>
+ )
+ }
+
+ return (
+ <div className="h-full overflow-hidden">
+ {/* 헤더 정보 */}
+ <div className="p-4 bg-muted/50 border-b">
+ <div className="flex items-center justify-between">
+ <div className="space-y-1">
+ <h3 className="text-sm font-medium">
+ PO/계약번호: {selectedPcrPo.poContractNumber}
+ </h3>
+ <p className="text-xs text-muted-foreground">
+ 프로젝트: {selectedPcrPo.project || "N/A"}
+ </p>
+ </div>
+ <div className="flex items-center gap-2">
+ <Badge variant="outline">
+ {details.length}건
+ </Badge>
+ <PcrDetailToolbarAction
+ selectedPcrPo={selectedPcrPo}
+ onRefresh={handleRefreshData}
+ isPartnersPage={isPartnersPage}
+ />
+ </div>
+ </div>
+ </div>
+
+ {/* 테이블 표시 */}
+ <ClientDataTable
+ columns={columns}
+ data={details}
+ maxHeight={maxHeight}
+ emptyStateMessage="PCR_PR 데이터가 없습니다. 새 항목을 생성해보세요."
+ />
+ </div>
+ )
+}
+
+
diff --git a/lib/pcr/table/detail-table/pcr-detail-toolbar-action.tsx b/lib/pcr/table/detail-table/pcr-detail-toolbar-action.tsx new file mode 100644 index 00000000..92829055 --- /dev/null +++ b/lib/pcr/table/detail-table/pcr-detail-toolbar-action.tsx @@ -0,0 +1,79 @@ +"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Plus, Loader2, RefreshCw } from "lucide-react"
+import { CreatePcrPrDialog } from "./create-pcr-pr-dialog"
+import { PcrPoData } from "@/lib/pcr/types"
+
+interface PcrDetailToolbarActionProps {
+ selectedPcrPo: PcrPoData | null
+ onRefresh: () => void
+ isPartnersPage?: boolean
+}
+
+export function PcrDetailToolbarAction({
+ selectedPcrPo,
+ onRefresh,
+ isPartnersPage = false,
+}: PcrDetailToolbarActionProps) {
+ const [createDialogOpen, setCreateDialogOpen] = React.useState(false)
+ const [isRefreshing, setIsRefreshing] = React.useState(false)
+
+ const handleRefresh = async () => {
+ setIsRefreshing(true)
+ try {
+ await onRefresh()
+ } finally {
+ setIsRefreshing(false)
+ }
+ }
+
+ const handleCreateSuccess = () => {
+ onRefresh()
+ }
+
+ return (
+ <div className="flex items-center gap-2">
+ {/* 새로고침 버튼 */}
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleRefresh}
+ disabled={isRefreshing}
+ className="gap-2"
+ >
+ {isRefreshing ? (
+ <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+ ) : (
+ <RefreshCw className="size-4" aria-hidden="true" />
+ )}
+ <span>새로고침</span>
+ </Button>
+
+ {/* PCR_PR 생성 버튼 - Partners 페이지에서는 표시하지 않음 */}
+ {!isPartnersPage && (
+ <>
+ <Button
+ variant="default"
+ size="sm"
+ onClick={() => setCreateDialogOpen(true)}
+ disabled={!selectedPcrPo}
+ className="gap-2"
+ >
+ <Plus className="size-4" />
+ PCR_PR 생성
+ </Button>
+
+ {/* PCR_PR 생성 다이얼로그 */}
+ <CreatePcrPrDialog
+ open={createDialogOpen}
+ onOpenChange={setCreateDialogOpen}
+ selectedPcrPo={selectedPcrPo}
+ onSuccess={handleCreateSuccess}
+ />
+ </>
+ )}
+ </div>
+ )
+}
|