1 files changed, 103 insertions, 22 deletions

diff --git a/lib/po/table/po-table.tsx b/lib/po/table/po-table.tsx
index 49fbdda4..9175037b 100644
--- a/lib/po/table/po-table.tsx
+++ b/lib/po/table/po-table.tsx
@@ -15,9 +15,11 @@ import { toast } from "sonner"
 
 import { getPOs, requestSignatures } from "../service"
 import { getColumns } from "./po-table-columns"
-import { ContractDetail } from "@/db/schema/contract"
+import { ContractDetail, ContractDetailParsed, Envelope } from "@/db/schema/contract"
 import { PoTableToolbarActions } from "./po-table-toolbar-actions"
 import { SignatureRequestModal } from "./sign-request-dialog"
+import { EsignStatusDialog } from "./esign-dialog"
+import { ItemsDialog } from "./item-dialog"
 
 interface ItemsTableProps {
   promises: Promise<
@@ -36,40 +38,106 @@ interface SigningParty {
   vendorContactId?: number;
 }
 
+export function transformContractData(data: ContractDetail[]): ContractDetailParsed[] {
+  return data.map((contract) => {
+    let parsedEnvelopes: Envelope[] = [];
+    let parsedItems = [];
+    
+    try {
+      // Check if envelopes is a string that needs parsing
+      if (typeof contract.envelopes === "string") {
+        parsedEnvelopes = JSON.parse(contract.envelopes);
+      } else if (Array.isArray(contract.envelopes)) {
+        // If it's already an array, use it directly
+        parsedEnvelopes = contract.envelopes as unknown as Envelope[];
+      }
+      
+      // Check if items is a string that needs parsing
+      if (typeof contract.items === "string") {
+        parsedItems = JSON.parse(contract.items);
+      } else if (Array.isArray(contract.items)) {
+        // If it's already an array, use it directly
+        parsedItems = contract.items;
+      }
+    } catch (err) {
+      console.error("Error parsing JSON", err);
+    }
+
+    // Return a new object with all properties from the original contract
+    // but replace envelopes and items with their parsed versions
+    return {
+      ...contract,
+      envelopes: parsedEnvelopes,
+      items: parsedItems
+    } as ContractDetailParsed;
+  });
+}
 export function PoListsTable({ promises }: ItemsTableProps) {
   const { featureFlags } = useFeatureFlags()
-  
-  const [{ data, pageCount }] = 
-    React.use(promises)
-    
-  const [rowAction, setRowAction] = 
-    React.useState<DataTableRowAction<ContractDetail> | null>(null)
-    
+
+  const [rawData, setRawData] = React.useState<{
+    data: ContractDetail[];
+    pageCount: number;
+  }>({ data: [], pageCount: 0 });
+
+  // Add state for transformed data
+  const [transformedData, setTransformedData] = React.useState<{
+    data: ContractDetailParsed[];
+    pageCount: number;
+  }>({ data: [], pageCount: 0 });
+
+  console.log(rawData)
+  console.log(transformedData)
+
+  // Load raw data from promises
+  React.useEffect(() => {
+    promises.then(([result]) => {
+      console.log(result.data)
+
+      setRawData(result);
+      // Transform the data
+      setTransformedData({
+        data: transformContractData(result.data),
+        pageCount: result.pageCount
+      });
+    });
+  }, [promises]);
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<ContractDetailParsed> | null>(null)
+
   // State for signature request modal
   const [signatureModalOpen, setSignatureModalOpen] = React.useState(false)
-  const [selectedContract, setSelectedContract] = React.useState<ContractDetail | null>(null)
-  
+  const [signatureDetailOpen, setSignatureDetailOpen] = React.useState(false)
+  const [itemsOpen, setItemsOpen] = React.useState(false)
+  const [selectedContract, setSelectedContract] = React.useState<ContractDetailParsed | null>(null)
+
   // Handle row actions
   React.useEffect(() => {
     if (!rowAction) return
-    
+
     if (rowAction.type === "signature") {
       // Open signature request modal with the selected contract
       setSelectedContract(rowAction.row.original)
       setSignatureModalOpen(true)
       setRowAction(null)
     } else if (rowAction.type === "items") {
-      // Existing handler for "items" action type
-      // Your existing code here
+      setSelectedContract(rowAction.row.original)
+      setItemsOpen(true)
       setRowAction(null)
+    } else if (rowAction.type === "esign-detail") {
+      setSignatureDetailOpen(true)
+      setSelectedContract(rowAction.row.original)
+      console.log("E-sign details for contract:", rowAction.row.original);
+      setRowAction(null);
     }
   }, [rowAction])
-  
+
   const columns = React.useMemo(
     () => getColumns({ setRowAction }),
     [setRowAction]
   )
-  
+
   // Updated handler to work with multiple signers
   const handleSignatureRequest = async (
     values: { signers: SigningParty[] },
@@ -80,7 +148,7 @@ export function PoListsTable({ promises }: ItemsTableProps) {
         contractId,
         signers: values.signers
       });
-      
+
       // Handle the result
       if (result.success) {
         toast.success(result.message || "Signature requests sent successfully");
@@ -93,11 +161,11 @@ export function PoListsTable({ promises }: ItemsTableProps) {
     }
   }
 
-  const filterFields: DataTableFilterField<ContractDetail>[] = [
+  const filterFields: DataTableFilterField<ContractDetailParsed>[] = [
     // Your existing filter fields
   ]
 
-  const advancedFilterFields: DataTableAdvancedFilterField<ContractDetail>[] = [
+  const advancedFilterFields: DataTableAdvancedFilterField<ContractDetailParsed>[] = [
     {
       id: "contractNo",
       label: "Contract No",
@@ -119,11 +187,11 @@ export function PoListsTable({ promises }: ItemsTableProps) {
       type: "date",
     },
   ]
-  
+
   const { table } = useDataTable({
-    data,
+    data: transformedData.data, // Use the transformed data
     columns,
-    pageCount,
+    pageCount: transformedData.pageCount,
     filterFields,
     enablePinning: true,
     enableAdvancedFilter: true,
@@ -149,7 +217,20 @@ export function PoListsTable({ promises }: ItemsTableProps) {
           <PoTableToolbarActions table={table} />
         </DataTableAdvancedToolbar>
       </DataTable>
-      
+
+      <EsignStatusDialog
+        open={signatureDetailOpen}
+        onOpenChange={setSignatureDetailOpen}
+        po={selectedContract}
+      />
+
+      <ItemsDialog
+        open={itemsOpen}
+        onOpenChange={setItemsOpen}
+        po={selectedContract}
+      />
+
+
       {/* Enhanced Dual Signature Request Modal */}
       {selectedContract && (
         <SignatureRequestModal