Primary table

.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 
 *storybook.log
+
+.cursor

package.json

@@ -17,14 +17,15 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@mui/x-date-pickers": "^8.0.0",
-    "material-react-table": "^3.2.1"
+    "material-react-table": "^3.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "pdfmake": "^0.2.18"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -53,7 +54,9 @@
     "typescript-eslint": "^8.26.1",
     "vite": "^6.3.1",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.1",
+    "@types/pdfmake": "^0.2.11"
+
   },
   "eslintConfig": {
     "extends": [

src/components/smart_report_mrt/handleDownloadPdf.ts

@@ -0,0 +1,20 @@
+import { getPdfMakeDocDefinition } from "../../pdf/getPdfMakeDocDefinition";
+import { downloadPdf } from "../../pdf/generatePdf";
+import { 
+  headerSettings, 
+  tableData, 
+  sampleContent
+} from "../../pdf/staticpdfContent";
+
+export const handleDownloadPdf = async () => {
+    const docDefinition = await getPdfMakeDocDefinition(
+      {
+        content: sampleContent,
+      },
+      headerSettings,
+      tableData // Include the ledger data from staticpdfContent
+    );
+
+    // Download the PDF
+    downloadPdf(docDefinition, 'document.pdf');
+  };

src/components/smart_report_mrt/smart_report_mrt.tsx

@@ -1,10 +1,10 @@
 import TableViewIcon from '@mui/icons-material/TableView';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { Button } from "@mui/material";
 import { MaterialReactTable, MaterialReactTableProps, MRT_RowData } from "material-react-table";
 import { useState } from "react";
-import "./smart_report_mrt.css";
-
+import { handleDownloadPdf } from "./handleDownloadPdf";
 /*
   TODO: (Responsive Card View)
   - Add a field `showInCardView` to the column definition. Default to false.
@@ -29,16 +29,22 @@ export const SmartReportMRT = <T extends MRT_RowData>(props: MaterialReactTableP
       muiTableBodyCellProps = {({ cell }) => ({
         'data-label': cell.column.columnDef.header,
       })}
-      renderTopToolbar = {() => (
-        <div className="top-toolbar">
-          <Button 
-            onClick={() => setForceTableView(!forceTableView)}
-            startIcon={forceTableView ? <ViewModuleIcon /> : <TableViewIcon />}
-          >
-            {forceTableView ? 'Switch to Card View' : null}
-          </Button>
-        </div>
-      )}
+      renderTopToolbar = {() => [
+        <Button 
+          key="viewToggle"
+          onClick={() => setForceTableView(!forceTableView)}
+          startIcon={forceTableView ? <ViewModuleIcon /> : <TableViewIcon />}
+        >
+          {forceTableView ? 'Switch to Card View' : null}
+        </Button>,
+        <Button 
+          key="downloadPdf"
+          onClick={handleDownloadPdf}
+          startIcon={<PictureAsPdfIcon />}
+        >
+          Download PDF
+        </Button>
+      ]}
 
       {...props}
     />

src/pdf/generatePdf.ts

@@ -0,0 +1,9 @@
+import * as pdfMake from 'pdfmake/build/pdfmake';
+import * as pdfFonts from 'pdfmake/build/vfs_fonts';
+import { TDocumentDefinitions } from 'pdfmake/interfaces';
+
+(pdfMake as any).vfs = (pdfFonts as any).vfs;
+
+export const openPdf = (docDefinition: TDocumentDefinitions) => pdfMake.createPdf(docDefinition).open();
+
+export const downloadPdf = (docDefinition: TDocumentDefinitions, filename: 'document.pdf') => pdfMake.createPdf(docDefinition).download(filename);

src/pdf/getPdfMakeDocDefinition.ts

@@ -0,0 +1,118 @@
+import { Content, TDocumentDefinitions, ImageDefinition } from 'pdfmake/interfaces';
+import { getHeaderDefinition } from './headers/getHeaderDefinition';
+import { HeaderSettings } from './types/PdfMake';
+import { generatePrimaryTable, TableData } from './outstanding/primaryTable';
+
+export const getPdfMakeDocDefinition = async (
+  inputDocDefinition: Omit<TDocumentDefinitions, 'header'>,
+  headerSettings?: HeaderSettings,
+  tableData?: TableData[]
+) => {
+  let docDefinition: TDocumentDefinitions = {
+    pageMargins: [20, 10, 20, 20],
+    ...inputDocDefinition,
+  };
+
+  if (headerSettings) {
+    // Get header images and styles
+    const { images, styles } = await getHeaderDefinition(headerSettings);
+
+    // Add images to document definition
+    docDefinition.images = {
+      ...(docDefinition.images || {}),
+      ...(images as Record<string, string | ImageDefinition>),
+    };
+
+    // Add styles to document definition
+    docDefinition.styles = {
+      ...(docDefinition.styles || {}),
+      ...styles,
+      ledgerTitle: {
+        alignment: 'center',
+        bold: true,
+        fontSize: 14,
+      },
+      ledgerSubtitle: {
+        alignment: 'center',
+        bold: true,
+        fontSize: 10
+      },
+      ledgerRightStrings: {
+        alignment: 'right',
+        fontSize: 8,
+      },
+      supplierRightStrings: {
+        alignment: 'right',
+        fontSize: 8,
+        fillColor: '#eeeeee'
+      },
+      ledgerTotals: {
+        alignment: 'left',
+        fontSize: 8
+      },
+      ledgerCell: {
+        fontSize: 8,
+        alignment: 'left',
+        margin: [0, 2, 0, 2]
+      },
+      ledgerHeader: {
+        fontSize: 10,
+        bold: true,
+        alignment: 'left',
+        fillColor: '#eeeeee',
+        margin: [0, 2, 0, 2],
+      },
+      tableCellSummable:{
+        alignment: 'right',
+        fontSize: 8,
+        margin: [0, 2, 0, 2]
+      }
+    };
+
+    // Get existing content as array
+    const existingContent = Array.isArray(docDefinition.content)
+      ? docDefinition.content
+      : docDefinition.content
+      ? [docDefinition.content]
+      : [];
+
+    // Create an array for content
+    const contentArray: Content[] = [];
+
+    // Add primary table with repeating header if data is provided
+    if (tableData && tableData.length > 0) {
+      // Always include the header content on at least the first page
+      const { content: headerContent } = await getHeaderDefinition(headerSettings);
+
+      // Generate the table with repeating headers only if headerOnEveryPage is true
+      const table = await generatePrimaryTable({ 
+        data: tableData,
+        headerSettings,
+      });
+
+      // If header should not repeat on every page, add it separately before the table
+      if (!headerSettings.headerOnEveryPage) {
+        contentArray.push(
+          headerContent as Content,
+          { text: '', margin: [0, 10, 0, 0] } as Content
+        );
+      }
+
+      contentArray.push(table);
+    } else {
+      // If no table data, add the header content separately
+      const { content } = await getHeaderDefinition(headerSettings);
+      contentArray.push(
+        content as Content,
+        { text: '', margin: [0, 10, 0, 0] } as Content
+      );
+    }
+
+    // Add the existing content
+    contentArray.push(...existingContent);
+
+    docDefinition.content = contentArray;
+  }
+
+  return docDefinition;
+};

src/pdf/headers/getHeaderDefinition.ts

@@ -0,0 +1,11 @@
+import { HeaderSettings } from "../types/PdfMake";
+import { getHeaderRegularDocDef } from "./templates/headerRegularPdfMake";
+
+export const headerTemplates = {
+  regular: getHeaderRegularDocDef
+}
+
+export const getHeaderDefinition = (headerSettings: HeaderSettings) => {
+  const { template } = headerSettings;
+  return headerTemplates[template](headerSettings);
+}

src/pdf/headers/templates/headerRegularPdfMake.ts

@@ -0,0 +1,87 @@
+import { HeaderSettings } from '../../types/PdfMake';
+import { StyleDictionary, ImageDefinition } from 'pdfmake/interfaces';
+import { checkImageValidGetDef } from '../../utils/fetchValidImageURL';
+
+// Main function to assemble the header
+export const getHeaderRegularDocDef = async ({
+  headerContent,
+  headerRightStrings,
+}: HeaderSettings) => {
+  // Get validated image if available
+  const logoSection = headerContent.image
+    ? await checkImageValidGetDef({
+        url: headerContent.image.url,
+        ...(headerContent.image.headers && { headers: headerContent.image.headers }),
+      } as ImageDefinition)
+    : undefined;
+
+  const styles: StyleDictionary = {
+    headerContent: {
+      alignment: 'left',
+      margin: [0, 0, 0, 5],
+      fontSize: 10,
+      bold: false,
+    },
+    headerImage: {
+      alignment: 'center',
+      margin: [10, 10, 0, 0],
+    },
+    headerRightStrings: {
+      margin: [0, 0, 10, 5],
+      alignment: 'right',
+      fontSize: 10,
+      bold: false,
+    },
+    headerTopSection: {
+      alignment: 'center',
+      color: 'red',
+      fontSize: 8,
+      bold: true,
+      margin: [0, 0, 0, 0],
+    },
+  };
+
+  // Set up images dictionary with the validated URL
+  const images = logoSection?.image || {};
+
+  const docDef = {
+    images, // Use the image dictionary with headerLogo key
+    content: [
+      // Add top section above the table if it exists
+      ...(headerContent.topSection ? [{ stack: headerContent.topSection }] : []),
+      {
+        table: {
+          widths: ['20%', '40%', '40%'],
+          body: [
+            [
+              ...(logoSection?.imageDef && images.headerLogo
+                ? [
+                    {
+                      image: 'headerLogo', // Reference the image key
+                      fit: [100, 100],
+                      margin: [0, 0, 0, 0],
+                      style: 'headerImage',
+                    },
+                  ]
+                : [{ text: '' }]),
+              headerContent.content ? { stack: headerContent.content } : { text: '' },
+              headerRightStrings ? { stack: headerRightStrings } : { text: '' },
+            ],
+          ],
+        },
+        layout: 'noBorders',
+      },
+      {
+        table: {
+          headerRows: 1,
+          widths: ['*'],
+          body: [[''], ['']],
+        },
+        layout: 'headerLineOnly',
+      },
+    ],
+    styles,
+  };
+
+  return docDef;
+};