feat: Add qty column to preview pdf templates:

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx

@@ -1,3 +1,4 @@
+import { Classes, Text } from '@blueprintjs/core';
 import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
@@ -67,6 +68,12 @@ export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
   creditNoteNumebr?: string;
   creditNoteNumberLabel?: string;
   showCreditNoteNumber?: boolean;
+
+  // Entries
+  lineItemLabel?: string;
+  lineQuantityLabel?: string;
+  lineRateLabel?: string;
+  lineTotalLabel?: string;
 }
 
 export function CreditNotePaperTemplate({
@@ -127,6 +134,12 @@ export function CreditNotePaperTemplate({
   creditNoteDate = 'September 3, 2024',
   showCreditNoteDate = true,
   creditNoteDateLabel = 'Credit Note Date',
+
+  // Entries
+  lineItemLabel = 'Item',
+  lineQuantityLabel = 'Qty',
+  lineRateLabel = 'Rate',
+  lineTotalLabel = 'Total',
 }: CreditNotePaperTemplateProps) {
   return (
     <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
@@ -172,10 +185,23 @@ export function CreditNotePaperTemplate({
         <Stack spacing={0}>
           <PaperTemplate.Table
             columns={[
-              { label: 'Item', accessor: 'item' },
-              { label: 'Description', accessor: 'description' },
-              { label: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total', align: 'right' },
+              {
+                label: lineItemLabel,
+                accessor: (data) => (
+                  <Stack spacing={2}>
+                    <Text>{data.item}</Text>
+                    <Text
+                      className={Classes.TEXT_MUTED}
+                      style={{ fontSize: 12 }}
+                    >
+                      {data.description}
+                    </Text>
+                  </Stack>
+                ),
+              },
+              { label: lineQuantityLabel, accessor: 'quantity' },
+              { label: lineRateLabel, accessor: 'rate', align: 'right' },
+              { label: lineTotalLabel, accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx

@@ -1,3 +1,4 @@
+import { Classes, Text } from '@blueprintjs/core';
 import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
@@ -69,6 +70,13 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
     quantity: string;
     total: string;
   }>;
+
+  // Lines
+  lineItemLabel?: string,
+  lineQuantityLabel?: string,
+  lineRateLabel?: string,
+  lineTotalLabel?: string,
+
 }
 
 export function EstimatePaperTemplate({
@@ -134,6 +142,13 @@ export function EstimatePaperTemplate({
   expirationDateLabel = 'Expiration Date',
   showExpirationDate = true,
   expirationDate = 'September 3, 2024',
+
+  // Entries
+  lineItemLabel = 'Item',
+  lineQuantityLabel = 'Qty',
+  lineRateLabel = 'Rate',
+  lineTotalLabel = 'Total',
+
 }: EstimatePaperTemplateProps) {
   return (
     <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
@@ -183,10 +198,23 @@ export function EstimatePaperTemplate({
         <Stack spacing={0}>
           <PaperTemplate.Table
             columns={[
-              { label: 'Item', accessor: 'item' },
-              { label: 'Description', accessor: 'description' },
-              { label: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total', align: 'right' },
+              {
+                label: lineItemLabel,
+                accessor: (data) => (
+                  <Stack spacing={2}>
+                    <Text>{data.item}</Text>
+                    <Text
+                      className={Classes.TEXT_MUTED}
+                      style={{ fontSize: 12 }}
+                    >
+                      {data.description}
+                    </Text>
+                  </Stack>
+                ),
+              },
+              { label: lineQuantityLabel, accessor: 'quantity' },
+              { label: lineRateLabel, accessor: 'rate', align: 'right' },
+              { label: lineTotalLabel, accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Classes, Text } from '@blueprintjs/core';
 import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
 import { Box, Group, Stack } from '@/components';
 import {
@@ -9,6 +9,7 @@ import {
   DefaultPdfTemplateAddressBilledTo,
   DefaultPdfTemplateAddressBilledFrom,
 } from '@/constants/PdfTemplates';
+
 interface PapaerLine {
   item?: string;
   description?: string;
@@ -55,7 +56,7 @@ export interface InvoicePaperTemplateProps {
 
   // Entries
   lineItemLabel?: string;
-  lineDescriptionLabel?: string;
+  lineQuantityLabel?: string;
   lineRateLabel?: string;
   lineTotalLabel?: string;
 
@@ -129,7 +130,7 @@ export function InvoicePaperTemplate({
 
   // Entries
   lineItemLabel = 'Item',
-  lineDescriptionLabel = 'Description',
+  lineQuantityLabel = 'Qty',
   lineRateLabel = 'Rate',
   lineTotalLabel = 'Total',
 
@@ -214,7 +215,6 @@ export function InvoicePaperTemplate({
               <Box dangerouslySetInnerHTML={{ __html: companyAddress }} />
             </PaperTemplate.Address>
           )}
-
           {showCustomerAddress && (
             <PaperTemplate.Address>
               <strong>{billedToLabel}</strong>
@@ -226,8 +226,21 @@ export function InvoicePaperTemplate({
         <Stack spacing={0}>
           <PaperTemplate.Table
             columns={[
-              { label: lineItemLabel, accessor: 'item' },
-              { label: lineDescriptionLabel, accessor: 'description' },
+              {
+                label: lineItemLabel,
+                accessor: (data) => (
+                  <Stack spacing={2}>
+                    <Text>{data.item}</Text>
+                    <Text
+                      className={Classes.TEXT_MUTED}
+                      style={{ fontSize: 12 }}
+                    >
+                      {data.description}
+                    </Text>
+                  </Stack>
+                ),
+              },
+              { label: lineQuantityLabel, accessor: 'quantity' },
               { label: lineRateLabel, accessor: 'rate', align: 'right' },
               { label: lineTotalLabel, accessor: 'total', align: 'right' },
             ]}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'classnames';
-import { get } from 'lodash';
+import { get, isFunction } from 'lodash';
 import { Box, Group, GroupProps } from '@/components';
 import styles from './InvoicePaperTemplate.module.scss';
 
@@ -26,8 +26,9 @@ export function PaperTemplate({
 
 interface PaperTemplateTableProps {
   columns: Array<{
-    accessor: string;
+    accessor: string | ((data: Record<string, any>) => JSX.Element);
     label: string;
+    value?: JSX.Element;
     align?: 'left' | 'center' | 'right';
   }>;
   data: Array<Record<string, any>>;
@@ -71,7 +72,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
           <tr>
             {columns.map((column, index) => (
               <td align={column.align} key={index}>
-                {get(_data, column.accessor)}
+                {isFunction(column?.accessor)
+                  ? column?.accessor(_data)
+                  : get(_data, column.accessor)}
               </td>
             ))}
           </tr>
@@ -115,9 +118,9 @@ PaperTemplate.TotalLine = ({
   );
 };
 
-PaperTemplate.MutedText = () => {};
+PaperTemplate.MutedText = () => { };
 
-PaperTemplate.Text = () => {};
+PaperTemplate.Text = () => { };
 
 PaperTemplate.AddressesGroup = (props: GroupProps) => {
   return (

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx

@@ -1,3 +1,4 @@
+import { Classes, Text } from '@blueprintjs/core';
 import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
@@ -67,6 +68,12 @@ export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
   receiptNumebr?: string;
   receiptNumberLabel?: string;
   showReceiptNumber?: boolean;
+
+  // Entries
+  lineItemLabel?: string;
+  lineQuantityLabel?: string;
+  lineRateLabel?: string;
+  lineTotalLabel?: string;
 }
 
 export function ReceiptPaperTemplate({
@@ -115,13 +122,22 @@ export function ReceiptPaperTemplate({
       total: '$1000.00',
     },
   ],
+
+  // Receipt Number
   showReceiptNumber = true,
   receiptNumberLabel = 'Receipt Number',
   receiptNumebr = '346D3D40-0001',
 
+  // Receipt Date
   receiptDate = 'September 3, 2024',
   showReceiptDate = true,
   receiptDateLabel = 'Receipt Date',
+
+  // Entries
+  lineItemLabel = 'Item',
+  lineQuantityLabel = 'Qty',
+  lineRateLabel = 'Rate',
+  lineTotalLabel = 'Total',
 }: ReceiptPaperTemplateProps) {
   return (
     <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
@@ -167,10 +183,23 @@ export function ReceiptPaperTemplate({
         <Stack spacing={0}>
           <PaperTemplate.Table
             columns={[
-              { label: 'Item', accessor: 'item' },
-              { label: 'Description', accessor: 'description' },
-              { label: 'Rate', accessor: 'rate', align: 'right' },
-              { label: 'Total', accessor: 'total', align: 'right' },
+              {
+                label: lineItemLabel,
+                accessor: (data) => (
+                  <Stack spacing={2}>
+                    <Text>{data.item}</Text>
+                    <Text
+                      className={Classes.TEXT_MUTED}
+                      style={{ fontSize: 12 }}
+                    >
+                      {data.description}
+                    </Text>
+                  </Stack>
+                ),
+              },
+              { label: lineQuantityLabel, accessor: 'quantity' },
+              { label: lineRateLabel, accessor: 'rate', align: 'right' },
+              { label: lineTotalLabel, accessor: 'total', align: 'right' },
             ]}
             data={lines}
           />