diff options
Diffstat (limited to 'lib/vendor-investigation/table')
| -rw-r--r-- | lib/vendor-investigation/table/contract-dialog.tsx | 85 | ||||
| -rw-r--r-- | lib/vendor-investigation/table/investigation-table.tsx | 56 | ||||
| -rw-r--r-- | lib/vendor-investigation/table/items-dialog.tsx | 73 |
3 files changed, 211 insertions, 3 deletions
diff --git a/lib/vendor-investigation/table/contract-dialog.tsx b/lib/vendor-investigation/table/contract-dialog.tsx new file mode 100644 index 00000000..28e6963b --- /dev/null +++ b/lib/vendor-investigation/table/contract-dialog.tsx @@ -0,0 +1,85 @@ +"use client" + +import * as React from "react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogFooter, +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Avatar } from "@/components/ui/avatar" +import { ScrollArea } from "@/components/ui/scroll-area" +import { ContactItem } from "@/config/vendorInvestigationsColumnsConfig" + +interface ContactsDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + investigationId: number | null + contacts: ContactItem[] +} + +export function ContactsDialog({ + open, + onOpenChange, + investigationId, + contacts, +}: ContactsDialogProps) { + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="sm:max-w-md"> + <DialogHeader> + <DialogTitle>Vendor Contacts</DialogTitle> + <DialogDescription> + {contacts.length > 0 + ? `Showing ${contacts.length} contacts for investigation #${investigationId}` + : `No contacts found for investigation #${investigationId}`} + </DialogDescription> + </DialogHeader> + <ScrollArea className="max-h-[60vh] pr-4"> + {contacts.length > 0 ? ( + <div className="space-y-4"> + {contacts.map((contact, index) => ( + <div + key={index} + className="flex items-start gap-4 p-3 rounded-lg border" + > + <Avatar className="w-10 h-10"> + <span>{contact.contactName?.charAt(0) || "C"}</span> + </Avatar> + <div className="flex-1 space-y-1"> + <p className="font-medium">{contact.contactName || "Unnamed"}</p> + {contact.contactEmail && ( + <p className="text-sm text-muted-foreground"> + {contact.contactEmail} + </p> + )} + {contact.contactPhone && ( + <p className="text-sm text-muted-foreground"> + {contact.contactPhone} + </p> + )} + {contact.contactPosition && ( + <p className="text-sm text-muted-foreground"> + Position: {contact.contactPosition} + </p> + )} + </div> + </div> + ))} + </div> + ) : ( + <div className="text-center py-6 text-muted-foreground"> + No contacts available + </div> + )} + </ScrollArea> + <DialogFooter> + <Button onClick={() => onOpenChange(false)}>Close</Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/vendor-investigation/table/investigation-table.tsx b/lib/vendor-investigation/table/investigation-table.tsx index fa4e2ab8..56aa7962 100644 --- a/lib/vendor-investigation/table/investigation-table.tsx +++ b/lib/vendor-investigation/table/investigation-table.tsx @@ -21,6 +21,8 @@ import { PossibleItem } from "@/config/vendorInvestigationsColumnsConfig" import { UpdateVendorInvestigationSheet } from "./update-investigation-sheet" +import { ItemsDrawer } from "./items-dialog" +import { ContactsDialog } from "./contract-dialog" interface VendorsTableProps { promises: Promise< @@ -71,18 +73,48 @@ export function VendorsInvestigationTable({ promises }: VendorsTableProps) { } as VendorInvestigationsViewWithContacts }) }, [rawResponse.data]) + + console.log(transformedData) const pageCount = rawResponse.pageCount + // Add state for row actions const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorInvestigationsViewWithContacts> | null>(null) + // Add state for contacts dialog + const [contactsDialogOpen, setContactsDialogOpen] = React.useState(false) + const [selectedContacts, setSelectedContacts] = React.useState<ContactItem[]>([]) + const [selectedContactInvestigationId, setSelectedContactInvestigationId] = React.useState<number | null>(null) + + // Add state for items drawer + const [itemsDrawerOpen, setItemsDrawerOpen] = React.useState(false) + const [selectedItems, setSelectedItems] = React.useState<PossibleItem[]>([]) + const [selectedItemInvestigationId, setSelectedItemInvestigationId] = React.useState<number | null>(null) + + // Create handlers for opening the contacts dialog and items drawer + const openContactsModal = React.useCallback((investigationId: number, contacts: ContactItem[]) => { + setSelectedContactInvestigationId(investigationId) + setSelectedContacts(contacts || []) + setContactsDialogOpen(true) + }, []) + + const openItemsDrawer = React.useCallback((investigationId: number, items: PossibleItem[]) => { + setSelectedItemInvestigationId(investigationId) + setSelectedItems(items || []) + setItemsDrawerOpen(true) + }, []) + // Get router const router = useRouter() - // Call getColumns() with router injection + // Call getColumns() with all required functions const columns = React.useMemo( - () => getColumns({ setRowAction }), - [setRowAction, router] + () => getColumns({ + setRowAction, + openContactsModal, + openItemsDrawer + }), + [setRowAction, openContactsModal, openItemsDrawer] ) const filterFields: DataTableFilterField<VendorInvestigationsViewWithContacts>[] = [ @@ -123,11 +155,29 @@ export function VendorsInvestigationTable({ promises }: VendorsTableProps) { <VendorsTableToolbarActions table={table} /> </DataTableAdvancedToolbar> </DataTable> + + {/* Update Investigation Sheet */} <UpdateVendorInvestigationSheet open={rowAction?.type === "update"} onOpenChange={() => setRowAction(null)} investigation={rowAction?.row.original ?? null} /> + + {/* Contacts Dialog */} + <ContactsDialog + open={contactsDialogOpen} + onOpenChange={setContactsDialogOpen} + investigationId={selectedContactInvestigationId} + contacts={selectedContacts} + /> + + {/* Items Drawer */} + <ItemsDrawer + open={itemsDrawerOpen} + onOpenChange={setItemsDrawerOpen} + investigationId={selectedItemInvestigationId} + items={selectedItems} + /> </> ) }
\ No newline at end of file diff --git a/lib/vendor-investigation/table/items-dialog.tsx b/lib/vendor-investigation/table/items-dialog.tsx new file mode 100644 index 00000000..5d010ff4 --- /dev/null +++ b/lib/vendor-investigation/table/items-dialog.tsx @@ -0,0 +1,73 @@ +"use client" + +import * as React from "react" +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetFooter, +} from "@/components/ui/sheet" +import { Button } from "@/components/ui/button" +import { ScrollArea } from "@/components/ui/scroll-area" +import { PossibleItem } from "@/config/vendorInvestigationsColumnsConfig" + +interface ItemsDrawerProps { + open: boolean + onOpenChange: (open: boolean) => void + investigationId: number | null + items: PossibleItem[] +} + +export function ItemsDrawer({ + open, + onOpenChange, + investigationId, + items, +}: ItemsDrawerProps) { + return ( + <Sheet open={open} onOpenChange={onOpenChange}> + <SheetContent className="sm:max-w-md"> + <SheetHeader> + <SheetTitle>Possible Items</SheetTitle> + <SheetDescription> + {items.length > 0 + ? `Showing ${items.length} items for investigation #${investigationId}` + : `No items found for investigation #${investigationId}`} + </SheetDescription> + </SheetHeader> + <ScrollArea className="max-h-[70vh] mt-6 pr-4"> + {items.length > 0 ? ( + <div className="space-y-4"> + {items.map((item, index) => ( + <div + key={index} + className="flex flex-col gap-2 p-3 rounded-lg border" + > + <div className="flex justify-between items-start"> + <h4 className="font-medium">{item.itemName || "Unknown Item"}</h4> + {item.itemName && ( + <span className="text-xs bg-muted px-2 py-1 rounded"> + {item.itemCode} + </span> + )} + </div> + + + </div> + ))} + </div> + ) : ( + <div className="text-center py-6 text-muted-foreground"> + No items available + </div> + )} + </ScrollArea> + <SheetFooter className="mt-4"> + <Button onClick={() => onOpenChange(false)}>Close</Button> + </SheetFooter> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file |