diff options
Diffstat (limited to 'lib/tbe-last/table/tbe-last-table.tsx')
| -rw-r--r-- | lib/tbe-last/table/tbe-last-table.tsx | 279 |
1 files changed, 38 insertions, 241 deletions
diff --git a/lib/tbe-last/table/tbe-last-table.tsx b/lib/tbe-last/table/tbe-last-table.tsx index 64707e4e..a9328bdf 100644 --- a/lib/tbe-last/table/tbe-last-table.tsx +++ b/lib/tbe-last/table/tbe-last-table.tsx @@ -4,7 +4,7 @@ import * as React from "react" import { useRouter } from "next/navigation" -import { type DataTableFilterField } from "@/types/table" +import { type DataTableAdvancedFilterField } from "@/types/table" 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" @@ -14,24 +14,12 @@ import { getAllTBELast, getTBESessionDetail } from "@/lib/tbe-last/service" import { Button } from "@/components/ui/button" import { Download, RefreshCw } from "lucide-react" import { exportTableToExcel } from "@/lib/export" -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, - DialogDescription -} from "@/components/ui/dialog" -import { - Sheet, - SheetContent, - SheetHeader, - SheetTitle, - SheetDescription -} from "@/components/ui/sheet" -import { Badge } from "@/components/ui/badge" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import { ScrollArea } from "@/components/ui/scroll-area" -import { formatDate } from "@/lib/utils" + +// Import Dialogs and Sheets +import { SessionDetailDialog } from "./session-detail-dialog" +import { DocumentsSheet } from "./documents-sheet" +import { PrItemsDialog } from "./pr-items-dialog" +import { EvaluationDialog } from "./evaluation-dialog" interface TbeLastTableProps { promises: Promise<[ @@ -43,6 +31,8 @@ export function TbeLastTable({ promises }: TbeLastTableProps) { const router = useRouter() const [{ data, pageCount }] = React.use(promises) + console.log(data,"data") + // Dialog states const [sessionDetailOpen, setSessionDetailOpen] = React.useState(false) const [documentsOpen, setDocumentsOpen] = React.useState(false) @@ -90,6 +80,8 @@ export function TbeLastTable({ promises }: TbeLastTableProps) { const handleOpenEvaluation = React.useCallback((session: TbeLastView) => { setSelectedSession(session) setEvaluationOpen(true) + loadSessionDetail(session.rfqId) + }, []) const handleRefresh = React.useCallback(() => { @@ -109,7 +101,7 @@ export function TbeLastTable({ promises }: TbeLastTableProps) { ) // Filter fields - const filterFields: DataTableFilterField<TbeLastView>[] = [ + const filterFields: DataTableAdvancedFilterField<TbeLastView>[] = [ { id: "sessionStatus", label: "Status", @@ -144,7 +136,7 @@ export function TbeLastTable({ promises }: TbeLastTableProps) { enableAdvancedFilter: true, initialState: { sorting: [{ id: "createdAt", desc: true }], - columnPinning: { right: ["documents", "comments"] }, + columnPinning: { right: ["documents"] }, }, getRowId: (originalRow) => String(originalRow.tbeSessionId), shallow: false, @@ -188,232 +180,37 @@ export function TbeLastTable({ promises }: TbeLastTableProps) { </DataTable> {/* Session Detail Dialog */} - <Dialog open={sessionDetailOpen} onOpenChange={setSessionDetailOpen}> - <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto"> - <DialogHeader> - <DialogTitle>TBE Session Detail</DialogTitle> - <DialogDescription> - {sessionDetail?.session?.sessionCode} - {sessionDetail?.session?.vendorName} - </DialogDescription> - </DialogHeader> - {isLoadingDetail ? ( - <div className="p-8 text-center">Loading...</div> - ) : sessionDetail ? ( - <div className="space-y-4"> - {/* Session info */} - <div className="grid grid-cols-2 gap-4"> - <div> - <p className="text-sm font-medium">RFQ Code</p> - <p className="text-sm text-muted-foreground">{sessionDetail.session.rfqCode}</p> - </div> - <div> - <p className="text-sm font-medium">Status</p> - <Badge>{sessionDetail.session.sessionStatus}</Badge> - </div> - <div> - <p className="text-sm font-medium">Project</p> - <p className="text-sm text-muted-foreground"> - {sessionDetail.session.projectCode} - {sessionDetail.session.projectName} - </p> - </div> - <div> - <p className="text-sm font-medium">Package</p> - <p className="text-sm text-muted-foreground"> - {sessionDetail.session.packageNo} - {sessionDetail.session.packageName} - </p> - </div> - </div> - - {/* PR Items */} - {sessionDetail.prItems?.length > 0 && ( - <div> - <h3 className="font-medium mb-2">PR Items</h3> - <div className="border rounded-lg"> - <table className="w-full text-sm"> - <thead> - <tr className="border-b"> - <th className="text-left p-2">PR No</th> - <th className="text-left p-2">Material Code</th> - <th className="text-left p-2">Description</th> - <th className="text-left p-2">Qty</th> - <th className="text-left p-2">Delivery</th> - </tr> - </thead> - <tbody> - {sessionDetail.prItems.map((item: any) => ( - <tr key={item.id} className="border-b"> - <td className="p-2">{item.prNo}</td> - <td className="p-2">{item.materialCode}</td> - <td className="p-2">{item.materialDescription}</td> - <td className="p-2">{item.quantity} {item.uom}</td> - <td className="p-2"> - {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"} - </td> - </tr> - ))} - </tbody> - </table> - </div> - </div> - )} - </div> - ) : null} - </DialogContent> - </Dialog> + <SessionDetailDialog + open={sessionDetailOpen} + onOpenChange={setSessionDetailOpen} + sessionDetail={sessionDetail} + isLoading={isLoadingDetail} + /> {/* Documents Sheet */} - <Sheet open={documentsOpen} onOpenChange={setDocumentsOpen}> - <SheetContent className="w-[600px] sm:w-[800px]"> - <SheetHeader> - <SheetTitle>Documents & Comments</SheetTitle> - <SheetDescription> - Review documents and PDFTron comments - </SheetDescription> - </SheetHeader> - - {isLoadingDetail ? ( - <div className="p-8 text-center">Loading...</div> - ) : sessionDetail?.documents ? ( - <Tabs defaultValue="buyer" className="mt-4"> - <TabsList className="grid w-full grid-cols-2"> - <TabsTrigger value="buyer">Buyer Documents</TabsTrigger> - <TabsTrigger value="vendor">Vendor Documents</TabsTrigger> - </TabsList> - - <TabsContent value="buyer"> - <ScrollArea className="h-[calc(100vh-200px)]"> - <div className="space-y-2"> - {sessionDetail.documents - .filter((doc: any) => doc.documentSource === "buyer") - .map((doc: any) => ( - <div key={doc.documentId} className="border rounded-lg p-3"> - <div className="flex items-start justify-between"> - <div className="flex-1"> - <p className="font-medium text-sm">{doc.documentName}</p> - <p className="text-xs text-muted-foreground"> - Type: {doc.documentType} | Status: {doc.reviewStatus} - </p> - </div> - <div className="flex items-center gap-2"> - {doc.comments.totalCount > 0 && ( - <Badge variant={doc.comments.openCount > 0 ? "destructive" : "secondary"}> - {doc.comments.openCount}/{doc.comments.totalCount} comments - </Badge> - )} - <Button size="sm" variant="outline"> - View in PDFTron - </Button> - </div> - </div> - </div> - ))} - </div> - </ScrollArea> - </TabsContent> - - <TabsContent value="vendor"> - <ScrollArea className="h-[calc(100vh-200px)]"> - <div className="space-y-2"> - {sessionDetail.documents - .filter((doc: any) => doc.documentSource === "vendor") - .map((doc: any) => ( - <div key={doc.documentId} className="border rounded-lg p-3"> - <div className="flex items-start justify-between"> - <div className="flex-1"> - <p className="font-medium text-sm">{doc.documentName}</p> - <p className="text-xs text-muted-foreground"> - Type: {doc.documentType} | Status: {doc.reviewStatus} - </p> - {doc.submittedAt && ( - <p className="text-xs text-muted-foreground"> - Submitted: {formatDate(doc.submittedAt, "KR")} - </p> - )} - </div> - <div className="flex items-center gap-2"> - <Button size="sm" variant="outline"> - Download - </Button> - <Button size="sm" variant="outline"> - Review - </Button> - </div> - </div> - </div> - ))} - </div> - </ScrollArea> - </TabsContent> - </Tabs> - ) : null} - </SheetContent> - </Sheet> + <DocumentsSheet + open={documentsOpen} + onOpenChange={setDocumentsOpen} + sessionDetail={sessionDetail} + isLoading={isLoadingDetail} + /> {/* PR Items Dialog */} - <Dialog open={prItemsOpen} onOpenChange={setPrItemsOpen}> - <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto"> - <DialogHeader> - <DialogTitle>PR Items</DialogTitle> - <DialogDescription> - Purchase Request items for this RFQ - </DialogDescription> - </DialogHeader> - {sessionDetail?.prItems && ( - <div className="border rounded-lg"> - <table className="w-full text-sm"> - <thead> - <tr className="border-b bg-muted/50"> - <th className="text-left p-2">PR No</th> - <th className="text-left p-2">Material Code</th> - <th className="text-left p-2">Description</th> - <th className="text-left p-2">Size</th> - <th className="text-left p-2">Qty</th> - <th className="text-left p-2">Unit</th> - <th className="text-left p-2">Delivery</th> - <th className="text-left p-2">Major</th> - </tr> - </thead> - <tbody> - {sessionDetail.prItems.map((item: any) => ( - <tr key={item.id} className="border-b hover:bg-muted/20"> - <td className="p-2">{item.prNo}</td> - <td className="p-2">{item.materialCode}</td> - <td className="p-2">{item.materialDescription}</td> - <td className="p-2">{item.size || "-"}</td> - <td className="p-2 text-right">{item.quantity}</td> - <td className="p-2">{item.uom}</td> - <td className="p-2"> - {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"} - </td> - <td className="p-2 text-center"> - {item.majorYn && <Badge variant="default">Major</Badge>} - </td> - </tr> - ))} - </tbody> - </table> - </div> - )} - </DialogContent> - </Dialog> + <PrItemsDialog + open={prItemsOpen} + onOpenChange={setPrItemsOpen} + sessionDetail={sessionDetail} + isLoading={isLoadingDetail} + /> {/* Evaluation Dialog */} - <Dialog open={evaluationOpen} onOpenChange={setEvaluationOpen}> - <DialogContent> - <DialogHeader> - <DialogTitle>TBE Evaluation</DialogTitle> - <DialogDescription> - Enter evaluation result for {selectedSession?.sessionCode} - </DialogDescription> - </DialogHeader> - <div className="space-y-4 mt-4"> - {/* Evaluation form would go here */} - <p className="text-sm text-muted-foreground"> - Evaluation form to be implemented... - </p> - </div> - </DialogContent> - </Dialog> + <EvaluationDialog + open={evaluationOpen} + onOpenChange={setEvaluationOpen} + selectedSession={selectedSession} + sessionDetail={sessionDetail} + + /> </> ) }
\ No newline at end of file |