diff --git a/packages/server/src/modules/FinancialStatements/common/TableSheetPdf.ts b/packages/server/src/modules/FinancialStatements/common/TableSheetPdf.ts index 92dd02030..1ac130efe 100644 --- a/packages/server/src/modules/FinancialStatements/common/TableSheetPdf.ts +++ b/packages/server/src/modules/FinancialStatements/common/TableSheetPdf.ts @@ -3,29 +3,30 @@ import { ITableColumn, ITableData, ITableRow } from '../types/Table.types'; import { FinancialTableStructure } from './FinancialTableStructure'; import { tableClassNames } from '../utils'; import { Injectable } from '@nestjs/common'; -import { TemplateInjectable } from '../../TemplateInjectable/TemplateInjectable.service'; import { ChromiumlyTenancy } from '../../ChromiumlyTenancy/ChromiumlyTenancy.service'; +import { renderFinancialSheetTemplateHtml } from '@bigcapital/pdf-templates'; @Injectable() export class TableSheetPdf { /** - * @param {TemplateInjectable} templateInjectable - The template injectable service. * @param {ChromiumlyTenancy} chromiumlyTenancy - The chromiumly tenancy service. */ constructor( - private readonly templateInjectable: TemplateInjectable, private readonly chromiumlyTenancy: ChromiumlyTenancy, - ) {} + ) { } /** * Converts the table data into a PDF format. * @param {ITableData} table - The table data to be converted. + * @param {string} organizationName - The organization name. * @param {string} sheetName - The name of the sheet. * @param {string} sheetDate - The date of the sheet. + * @param {string} customCSS - Optional custom CSS to inject. * @returns A promise that resolves with the PDF conversion result. */ public async convertToPdf( table: ITableData, + organizationName: string, sheetName: string, sheetDate: string, customCSS?: string, @@ -33,19 +34,26 @@ export class TableSheetPdf { // Prepare columns and rows for PDF conversion const columns = this.tablePdfColumns(table.columns); const rows = this.tablePdfRows(table.rows); - const landscape = columns.length > 4; - // Generate HTML content from the template - const htmlContent = await this.templateInjectable.render( - 'financial-sheet', - { - table: { rows, columns }, - sheetName, - sheetDate, - customCSS, + // Generate HTML content from the React template + const htmlContent = renderFinancialSheetTemplateHtml({ + organizationName, + sheetName, + sheetDate, + table: { + columns: columns.map((col) => ({ + key: col.key, + label: col.label, + style: (col as any).style, // style may be added during transformation + })), + rows: rows.map((row) => ({ + cells: row.cells, + classNames: (row as any).classNames, + })), }, - ); + customCSS, + }); // Convert the HTML content to PDF return this.chromiumlyTenancy.convertHtmlContent(htmlContent, { margins: { top: 0, bottom: 0, left: 0, right: 0 }, @@ -74,7 +82,6 @@ export class TableSheetPdf { const flatNestedTree = curriedFlatNestedTree(R.__, { nestedPrefix: '', }); - // @ts-ignore return R.compose(tableClassNames, flatNestedTree)(rows); }; diff --git a/packages/server/src/modules/FinancialStatements/modules/APAgingSummary/APAgingSummaryPdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/APAgingSummary/APAgingSummaryPdfInjectable.ts index b5b5955aa..8787e12d0 100644 --- a/packages/server/src/modules/FinancialStatements/modules/APAgingSummary/APAgingSummaryPdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/APAgingSummary/APAgingSummaryPdfInjectable.ts @@ -21,6 +21,7 @@ export class APAgingSummaryPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedAsDate, HtmlTableCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/ARAgingSummary/ARAgingSummaryPdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/ARAgingSummary/ARAgingSummaryPdfInjectable.ts index fd8901c23..5e6cf9c17 100644 --- a/packages/server/src/modules/FinancialStatements/modules/ARAgingSummary/ARAgingSummaryPdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/ARAgingSummary/ARAgingSummaryPdfInjectable.ts @@ -21,6 +21,7 @@ export class ARAgingSummaryPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/BalanceSheet/BalanceSheetPdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/BalanceSheet/BalanceSheetPdfInjectable.ts index d472ba0d1..66404400c 100644 --- a/packages/server/src/modules/FinancialStatements/modules/BalanceSheet/BalanceSheetPdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/BalanceSheet/BalanceSheetPdfInjectable.ts @@ -9,7 +9,7 @@ export class BalanceSheetPdfInjectable { constructor( private readonly balanceSheetTable: BalanceSheetTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Converts the given balance sheet table to pdf. @@ -21,6 +21,7 @@ export class BalanceSheetPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/CashFlowStatement/CashflowTablePdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/CashFlowStatement/CashflowTablePdfInjectable.ts index fbb3457aa..2b8661160 100644 --- a/packages/server/src/modules/FinancialStatements/modules/CashFlowStatement/CashflowTablePdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/CashFlowStatement/CashflowTablePdfInjectable.ts @@ -22,6 +22,7 @@ export class CashflowTablePdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts b/packages/server/src/modules/FinancialStatements/modules/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts index 711b821ab..eaa096514 100644 --- a/packages/server/src/modules/FinancialStatements/modules/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/CustomerBalanceSummary/CustomerBalanceSummaryPdf.ts @@ -21,6 +21,7 @@ export class CustomerBalanceSummaryPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/GeneralLedger/GeneralLedgerPdf.ts b/packages/server/src/modules/FinancialStatements/modules/GeneralLedger/GeneralLedgerPdf.ts index b53c50ccb..f99436327 100644 --- a/packages/server/src/modules/FinancialStatements/modules/GeneralLedger/GeneralLedgerPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/GeneralLedger/GeneralLedgerPdf.ts @@ -21,6 +21,7 @@ export class GeneralLedgerPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/InventoryItemDetails/InventoryItemDetailsTablePdf.ts b/packages/server/src/modules/FinancialStatements/modules/InventoryItemDetails/InventoryItemDetailsTablePdf.ts index da52e73d9..61a3650fb 100644 --- a/packages/server/src/modules/FinancialStatements/modules/InventoryItemDetails/InventoryItemDetailsTablePdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/InventoryItemDetails/InventoryItemDetailsTablePdf.ts @@ -26,6 +26,7 @@ export class InventoryDetailsTablePdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetPdf.ts b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetPdf.ts index cf9e00033..570f69404 100644 --- a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetPdf.ts @@ -22,6 +22,7 @@ export class InventoryValuationSheetPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/JournalSheet/JournalSheetPdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/JournalSheet/JournalSheetPdfInjectable.ts index 23e88f196..d79784d4c 100644 --- a/packages/server/src/modules/FinancialStatements/modules/JournalSheet/JournalSheetPdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/JournalSheet/JournalSheetPdfInjectable.ts @@ -9,7 +9,7 @@ export class JournalSheetPdfInjectable { constructor( private readonly journalSheetTable: JournalSheetTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Converts the given journal sheet table to pdf. @@ -22,6 +22,7 @@ export class JournalSheetPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/ProfitLossSheet/ProfitLossTablePdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/ProfitLossSheet/ProfitLossTablePdfInjectable.ts index 776f1783a..2127a00a7 100644 --- a/packages/server/src/modules/FinancialStatements/modules/ProfitLossSheet/ProfitLossTablePdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/ProfitLossSheet/ProfitLossTablePdfInjectable.ts @@ -21,6 +21,7 @@ export class ProfitLossTablePdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/PurchasesByItems/PurchasesByItemsPdf.ts b/packages/server/src/modules/FinancialStatements/modules/PurchasesByItems/PurchasesByItemsPdf.ts index e26539454..3190f64c4 100644 --- a/packages/server/src/modules/FinancialStatements/modules/PurchasesByItems/PurchasesByItemsPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/PurchasesByItems/PurchasesByItemsPdf.ts @@ -23,6 +23,7 @@ export class PurchasesByItemsPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/SalesByItems/SalesByItemsPdfInjectable.ts b/packages/server/src/modules/FinancialStatements/modules/SalesByItems/SalesByItemsPdfInjectable.ts index eb8dc4845..2c66d8672 100644 --- a/packages/server/src/modules/FinancialStatements/modules/SalesByItems/SalesByItemsPdfInjectable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/SalesByItems/SalesByItemsPdfInjectable.ts @@ -9,7 +9,7 @@ export class SalesByItemsPdfInjectable { constructor( private readonly salesByItemsTable: SalesByItemsTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Retrieves the sales by items sheet in pdf format. @@ -23,6 +23,7 @@ export class SalesByItemsPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts b/packages/server/src/modules/FinancialStatements/modules/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts index f50b30a97..f5a2d31ed 100644 --- a/packages/server/src/modules/FinancialStatements/modules/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/SalesTaxLiabilitySummary/SalesTaxLiabiltiySummaryPdf.ts @@ -8,7 +8,7 @@ export class SalesTaxLiabiltiySummaryPdf { constructor( private readonly salesTaxLiabiltiySummaryTable: SalesTaxLiabilitySummaryTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Converts the given sales tax liability summary table to pdf. @@ -21,6 +21,7 @@ export class SalesTaxLiabiltiySummaryPdf { ); return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, ); diff --git a/packages/server/src/modules/FinancialStatements/modules/TransactionsByCustomer/TransactionsByCustomersPdf.ts b/packages/server/src/modules/FinancialStatements/modules/TransactionsByCustomer/TransactionsByCustomersPdf.ts index 6f647fa6a..a380fdfad 100644 --- a/packages/server/src/modules/FinancialStatements/modules/TransactionsByCustomer/TransactionsByCustomersPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/TransactionsByCustomer/TransactionsByCustomersPdf.ts @@ -6,7 +6,7 @@ export class TransactionsByCustomersPdf { constructor( private readonly transactionsByCustomersTable: TransactionsByCustomersTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Retrieves the transactions by customers in PDF format. @@ -18,6 +18,7 @@ export class TransactionsByCustomersPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, ); diff --git a/packages/server/src/modules/FinancialStatements/modules/TransactionsByVendor/TransactionsByVendorPdf.ts b/packages/server/src/modules/FinancialStatements/modules/TransactionsByVendor/TransactionsByVendorPdf.ts index cfc75a6fe..a16f56960 100644 --- a/packages/server/src/modules/FinancialStatements/modules/TransactionsByVendor/TransactionsByVendorPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/TransactionsByVendor/TransactionsByVendorPdf.ts @@ -9,7 +9,7 @@ export class TransactionsByVendorsPdf { constructor( private readonly transactionsByVendorTable: TransactionsByVendorTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Converts the given balance sheet table to pdf. @@ -21,6 +21,7 @@ export class TransactionsByVendorsPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts b/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts index cf55e5532..2b06ee4cd 100644 --- a/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts +++ b/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheetPdfInjectsable.ts @@ -9,7 +9,7 @@ export class TrialBalanceSheetPdfInjectable { constructor( private readonly trialBalanceSheetTable: TrialBalanceSheetTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Converts the given trial balance sheet table to pdf. @@ -21,6 +21,7 @@ export class TrialBalanceSheetPdfInjectable { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedDateRange, HtmlTableCustomCss, diff --git a/packages/server/src/modules/FinancialStatements/modules/VendorBalanceSummary/VendorBalanceSummaryPdf.ts b/packages/server/src/modules/FinancialStatements/modules/VendorBalanceSummary/VendorBalanceSummaryPdf.ts index d2d58b3dd..55335def9 100644 --- a/packages/server/src/modules/FinancialStatements/modules/VendorBalanceSummary/VendorBalanceSummaryPdf.ts +++ b/packages/server/src/modules/FinancialStatements/modules/VendorBalanceSummary/VendorBalanceSummaryPdf.ts @@ -9,7 +9,7 @@ export class VendorBalanceSummaryPdf { constructor( private readonly vendorBalanceSummaryTable: VendorBalanceSummaryTableInjectable, private readonly tableSheetPdf: TableSheetPdf, - ) {} + ) { } /** * Retrieves the sales by items sheet in pdf format. @@ -23,6 +23,7 @@ export class VendorBalanceSummaryPdf { return this.tableSheetPdf.convertToPdf( table.table, + table.meta.organizationName, table.meta.sheetName, table.meta.formattedAsDate, HtmlTableCustomCss, diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx index 74400ecf0..74923fcbe 100644 --- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx +++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dialogs/BalanceSheetPdfDialog/BalanceSheetPdfDialogContent.tsx @@ -10,7 +10,7 @@ import { useBalanceSheetContext } from '../../BalanceSheetProvider'; export default function BalanceSheetPdfDialogContent() { const { httpQuery } = useBalanceSheetContext(); - const { isLoading, pdfUrl } = useBalanceSheetPdf({ ...httpQuery }); + const { isLoading, isLoaded, pdfUrl } = useBalanceSheetPdf({ ...httpQuery }); return ( @@ -18,8 +18,10 @@ export default function BalanceSheetPdfDialogContent() { @@ -27,8 +29,11 @@ export default function BalanceSheetPdfDialogContent() { diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss index c904e21b7..f2b24bbca 100644 --- a/packages/webapp/src/style/App.scss +++ b/packages/webapp/src/style/App.scss @@ -234,22 +234,12 @@ html[lang^='ar'] { .dialog__header-actions { position: absolute; - right: 50px; + right: 44px; top: 0; z-index: 9999999; - margin: 6px; - - .bp4-button { - border-color: rgba(0, 0, 0, 0.25); - color: rgb(25, 32, 37); - min-height: 30px; - padding-left: 14px; - padding-right: 14px; - - &+.bp4-button { - margin-left: 8px; - } - } + margin: 9px 6px 6px; + display: flex; + gap: 10px; } .bp4-dialog { diff --git a/shared/pdf-templates/src/components/FinancialSheetTemplate.tsx b/shared/pdf-templates/src/components/FinancialSheetTemplate.tsx new file mode 100644 index 000000000..aad8b2154 --- /dev/null +++ b/shared/pdf-templates/src/components/FinancialSheetTemplate.tsx @@ -0,0 +1,96 @@ +import { x } from '@xstyled/emotion'; +import { Box } from '../lib/layout/Box'; + +export interface TableColumn { + key: string; + label: string; + style?: string; +} + +export interface TableCell { + key: string; + value: string; +} + +export interface TableRow { + cells: TableCell[]; + classNames?: string; +} + +export interface FinancialSheetTemplateProps { + organizationName: string; + sheetName?: string; + sheetDate?: string; + table: { + columns: TableColumn[]; + rows: TableRow[]; + }; + customCSS?: string; +} + +export function FinancialSheetTemplate({ + organizationName, + sheetName, + sheetDate, + table, + customCSS, +}: FinancialSheetTemplateProps) { + return ( + + + + + {organizationName} + + {sheetName && {sheetName}} + {sheetDate && {sheetDate}} + + + + + + {table.columns.map((column) => ( + + {column.label} + + ))} + + + + {table.rows.map((row, rowIndex) => ( + + {row.cells.map((cell) => ( + + + + ))} + + ))} + + + + + ); +} diff --git a/shared/pdf-templates/src/index.ts b/shared/pdf-templates/src/index.ts index 5dae8b37c..51bae775e 100644 --- a/shared/pdf-templates/src/index.ts +++ b/shared/pdf-templates/src/index.ts @@ -3,8 +3,10 @@ export * from './components/InvoicePaperTemplate'; export * from './components/EstimatePaperTemplate'; export * from './components/ReceiptPaperTemplate'; export * from './components/PaymentReceivedPaperTemplate'; +export * from './components/FinancialSheetTemplate'; export * from './renders/render-invoice-paper-template'; export * from './renders/render-estimate-paper-template'; export * from './renders/render-receipt-paper-template'; export * from './renders/render-payment-received-paper-template'; +export * from './renders/render-financial-sheet-template'; diff --git a/shared/pdf-templates/src/renders/render-financial-sheet-template.tsx b/shared/pdf-templates/src/renders/render-financial-sheet-template.tsx new file mode 100644 index 000000000..941a1cc54 --- /dev/null +++ b/shared/pdf-templates/src/renders/render-financial-sheet-template.tsx @@ -0,0 +1,14 @@ +import { + FinancialSheetTemplate, + FinancialSheetTemplateProps, +} from '../components/FinancialSheetTemplate'; +import { renderSSR } from './render-ssr'; + +export const renderFinancialSheetTemplateHtml = ( + props: FinancialSheetTemplateProps +) => { + return renderSSR( + + ); +}; +