diff options
Diffstat (limited to 'lib/rfq-last/table/rfq-table-columns.tsx')
| -rw-r--r-- | lib/rfq-last/table/rfq-table-columns.tsx | 175 |
1 files changed, 146 insertions, 29 deletions
diff --git a/lib/rfq-last/table/rfq-table-columns.tsx b/lib/rfq-last/table/rfq-table-columns.tsx index 1b523adc..5f5efcb4 100644 --- a/lib/rfq-last/table/rfq-table-columns.tsx +++ b/lib/rfq-last/table/rfq-table-columns.tsx @@ -5,7 +5,7 @@ import { type ColumnDef } from "@tanstack/react-table"; import { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { Eye, FileText, Send, Lock, LockOpen } from "lucide-react"; +import { Eye, FileText, Send, Lock, LockOpen,Clock, AlertTriangle, CheckCircle, XCircle, AlertCircle } from "lucide-react"; import { Tooltip, TooltipContent, @@ -15,7 +15,7 @@ import { import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"; import { RfqsLastView } from "@/db/schema"; import { DataTableRowAction } from "@/types/table"; -import { format } from "date-fns"; +import { format, differenceInDays } from "date-fns"; import { ko } from "date-fns/locale"; import { useRouter } from "next/navigation"; @@ -187,15 +187,15 @@ export function getRfqColumns({ // 자재그룹 (자재그룹명) { - accessorKey: "itemName", + accessorKey: "majorItemMaterialDescription", header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="자재그룹 (자재그룹명)" />, cell: ({ row }) => ( <div className="flex flex-col"> <span className="font-mono text-xs text-muted-foreground"> - {row.original.itemCode} + {row.original.majorItemMaterialCategory} </span> - <span className="max-w-[150px] truncate" title={row.original.itemName || ""}> - {row.original.itemName || "-"} + <span className="max-w-[150px] truncate" title={row.original.majorItemMaterialDescription || ""}> + {row.original.majorItemMaterialDescription || "-"} </span> </div> ), @@ -258,15 +258,54 @@ export function getRfqColumns({ const now = new Date(); const dueDate = new Date(date); - const isOverdue = now > dueDate; + const daysLeft = differenceInDays(dueDate, now); + + // 상태별 스타일과 아이콘 설정 + let statusIcon; + let statusText; + let statusClass; + + if (daysLeft < 0) { + // 마감일 지남 + const daysOverdue = Math.abs(daysLeft); + statusIcon = <XCircle className="h-4 w-4" />; + statusText = `${daysOverdue}일 지남`; + statusClass = "text-red-600"; + } else if (daysLeft === 0) { + // 오늘 마감 + statusIcon = <AlertTriangle className="h-4 w-4" />; + statusText = "오늘 마감"; + statusClass = "text-orange-600"; + } else if (daysLeft <= 3) { + // 3일 이내 마감 임박 + statusIcon = <AlertCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-amber-600"; + } else if (daysLeft <= 7) { + // 일주일 이내 + statusIcon = <Clock className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-blue-600"; + } else { + // 여유 있음 + statusIcon = <CheckCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-green-600"; + } return ( - <span className={`text-sm ${isOverdue ? "text-red-600 font-medium" : ""}`}> - {format(dueDate, "yyyy-MM-dd")} - </span> + <div className="flex flex-col gap-1"> + <span className="text-sm text-muted-foreground"> + {format(dueDate, "yyyy-MM-dd")} + </span> + <div className={`flex items-center gap-1 ${statusClass}`}> + {statusIcon} + <span className="text-xs font-medium">{statusText}</span> + </div> + </div> ); }, - size: 100, + size: 120, // 크기를 약간 늘림 }, // 설계담당자 @@ -494,15 +533,15 @@ export function getRfqColumns({ // 자재그룹 (자재그룹명) { - accessorKey: "itemName", + accessorKey: "majorItemMaterialDescription", header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="자재그룹 (자재그룹명)" />, cell: ({ row }) => ( <div className="flex flex-col"> <span className="font-mono text-xs text-muted-foreground"> - {row.original.itemCode} + {row.original.majorItemMaterialCategory} </span> - <span className="max-w-[150px] truncate" title={row.original.itemName || ""}> - {row.original.itemName || "-"} + <span className="max-w-[150px] truncate" title={row.original.majorItemMaterialDescription || ""}> + {row.original.majorItemMaterialDescription || "-"} </span> </div> ), @@ -584,15 +623,54 @@ export function getRfqColumns({ const now = new Date(); const dueDate = new Date(date); - const isOverdue = now > dueDate; + const daysLeft = differenceInDays(dueDate, now); + + // 상태별 스타일과 아이콘 설정 + let statusIcon; + let statusText; + let statusClass; + + if (daysLeft < 0) { + // 마감일 지남 + const daysOverdue = Math.abs(daysLeft); + statusIcon = <XCircle className="h-4 w-4" />; + statusText = `${daysOverdue}일 지남`; + statusClass = "text-red-600"; + } else if (daysLeft === 0) { + // 오늘 마감 + statusIcon = <AlertTriangle className="h-4 w-4" />; + statusText = "오늘 마감"; + statusClass = "text-orange-600"; + } else if (daysLeft <= 3) { + // 3일 이내 마감 임박 + statusIcon = <AlertCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-amber-600"; + } else if (daysLeft <= 7) { + // 일주일 이내 + statusIcon = <Clock className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-blue-600"; + } else { + // 여유 있음 + statusIcon = <CheckCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-green-600"; + } return ( - <span className={`text-sm ${isOverdue ? "text-red-600 font-medium" : ""}`}> - {format(dueDate, "yyyy-MM-dd")} - </span> + <div className="flex flex-col gap-1"> + <span className="text-sm text-muted-foreground"> + {format(dueDate, "yyyy-MM-dd")} + </span> + <div className={`flex items-center gap-1 ${statusClass}`}> + {statusIcon} + <span className="text-xs font-medium">{statusText}</span> + </div> + </div> ); }, - size: 100, + size: 120, // 크기를 약간 늘림 }, // 설계담당자 @@ -812,15 +890,15 @@ export function getRfqColumns({ // 자재그룹 (자재그룹명) { - accessorKey: "itemName", + accessorKey: "majorItemMaterialDescription", header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="자재그룹 (자재그룹명)" />, cell: ({ row }) => ( <div className="flex flex-col"> <span className="font-mono text-xs text-muted-foreground"> - {row.original.itemCode} + {row.original.majorItemMaterialCategory} </span> - <span className="max-w-[150px] truncate" title={row.original.itemName || ""}> - {row.original.itemName || "-"} + <span className="max-w-[150px] truncate" title={row.original.majorItemMaterialDescription || ""}> + {row.original.majorItemMaterialDescription || "-"} </span> </div> ), @@ -902,15 +980,54 @@ export function getRfqColumns({ const now = new Date(); const dueDate = new Date(date); - const isOverdue = now > dueDate; + const daysLeft = differenceInDays(dueDate, now); + + // 상태별 스타일과 아이콘 설정 + let statusIcon; + let statusText; + let statusClass; + + if (daysLeft < 0) { + // 마감일 지남 + const daysOverdue = Math.abs(daysLeft); + statusIcon = <XCircle className="h-4 w-4" />; + statusText = `${daysOverdue}일 지남`; + statusClass = "text-red-600"; + } else if (daysLeft === 0) { + // 오늘 마감 + statusIcon = <AlertTriangle className="h-4 w-4" />; + statusText = "오늘 마감"; + statusClass = "text-orange-600"; + } else if (daysLeft <= 3) { + // 3일 이내 마감 임박 + statusIcon = <AlertCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-amber-600"; + } else if (daysLeft <= 7) { + // 일주일 이내 + statusIcon = <Clock className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-blue-600"; + } else { + // 여유 있음 + statusIcon = <CheckCircle className="h-4 w-4" />; + statusText = `${daysLeft}일 남음`; + statusClass = "text-green-600"; + } return ( - <span className={`text-sm ${isOverdue ? "text-red-600 font-medium" : ""}`}> - {format(dueDate, "yyyy-MM-dd")} - </span> + <div className="flex flex-col gap-1"> + <span className="text-sm text-muted-foreground"> + {format(dueDate, "yyyy-MM-dd")} + </span> + <div className={`flex items-center gap-1 ${statusClass}`}> + {statusIcon} + <span className="text-xs font-medium">{statusText}</span> + </div> + </div> ); }, - size: 100, + size: 120, // 크기를 약간 늘림 }, // 구매담당자 |