Merge pull request #716 from bigcapitalhq/add-quantity-column-pdf-templates

feat: Add quantity column to pdf templates
2026-02-19 06:10:31 +00:00 · 2024-10-17 16:01:02 +02:00
parent 44fae36b82 758ebbe261
commit 4d6f65b179
10 changed files with 185 additions and 43 deletions
--- a/packages/server/resources/views/modules/credit-note-standard.pug
+++ b/packages/server/resources/views/modules/credit-note-standard.pug
@@ -108,7 +108,14 @@ block head
    .#{prefix}-table__cell--right {
      text-align: right;
    }
-
+    .#{prefix}-table__cell--item .item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .#{prefix}-table__cell--item .item .item__description{
+      color: #5f6b7c;
+    }
    .#{prefix}-totals {
      display: flex;
      flex-direction: column;
@@ -184,16 +191,19 @@ block content
    thead
      tr
        th(class=`${prefix}-table__header`) #{'Item'}
-        th(class=`${prefix}-table__header`) #{'Description'}
-        th(class=`${prefix}-table__header`) #{'Rate'}
-        th(class=`${prefix}-table__header`) #{'Total'}
+        th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Quantity'}
+        th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Rate'}
+        th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Total'}
    tbody
      each line in lines
        tr(class=`${prefix}-table__row`)
-          td(class=`${prefix}-table__cell`) #{line.item}
-          td(class=`${prefix}-table__cell`) #{line.description}
-          td(class=`${prefix}-table__cell--right`) #{line.rate}
-          td(class=`${prefix}-table__cell--right`) #{line.total}
+          td(class=`${prefix}-table__cell ${prefix}-table__cell--item`) 
+            div.item
+              div.item__label #{line.item}
+              div.item__description #{line.description}
+          td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.quantity}
+          td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.rate}
+          td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

  div(class=`${prefix}-totals`)
    if showSubtotal
--- a/packages/server/resources/views/modules/estimate-regular.pug
+++ b/packages/server/resources/views/modules/estimate-regular.pug
@@ -109,6 +109,14 @@ block head
    .#{prefix}-table__cell:last-of-type {
      padding-right: 0;
    }
+    .#{prefix}-table__cell--item .item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .#{prefix}-table__cell--item .item .item__description{
+      color: #5f6b7c;
+    }
    .#{prefix}-totals {
      display: flex;
      flex-direction: column;
@@ -193,14 +201,17 @@ block content
      thead
        tr
          th(class=`${prefix}-table__header`) Item
-          th(class=`${prefix}-table__header`) Description
+          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Qty
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Rate
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
      tbody
        each line in lines
          tr
-            td(class=`${prefix}-table__cell`) #{line.item}
-            td(class=`${prefix}-table__cell`) #{line.description}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
+              div.item  
+                div.item__label #{line.item}
+                div.item__description #{line.description}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.quantity}
            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.rate}
            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

--- a/packages/server/resources/views/modules/invoice-standard.pug
+++ b/packages/server/resources/views/modules/invoice-standard.pug
@@ -115,6 +115,14 @@ block head
    .#{prefix}-table__cell--right {
      text-align: right;
    }
+    .#{prefix}-table__cell--item .item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .#{prefix}-table__cell--item .item__description {
+      color: #5f6b7c;
+    }
    .#{prefix}-totals {
      display: flex;
      flex-direction: column;
@@ -200,14 +208,17 @@ block content
      thead
        tr
          th(class=`${prefix}-table__header`) #{lineItemLabel}
-          th(class=`${prefix}-table__header`) #{lineDescriptionLabel}
+          th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineQuantityLabel}
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineRateLabel}
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineTotalLabel}
      tbody
        each line in lines
          tr
-            td(class=`${prefix}-table__cell`) #{line.item}
-            td(class=`${prefix}-table__cell`) #{line.description}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
+              div.item
+                div.item__label #{line.item}
+                div.item__description #{line.description}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.quantity}
            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.rate}
            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

--- a/packages/server/resources/views/modules/receipt-regular.pug
+++ b/packages/server/resources/views/modules/receipt-regular.pug
@@ -105,6 +105,14 @@ block head
    .#{prefix}-table__cell--right {
      text-align: right;
    }
+    .#{prefix}-table__cell--item .item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .#{prefix}-table__cell--item .item .item__description{
+      color: #5f6b7c;
+    }
    .#{prefix}-totals {
      display: flex;
      flex-direction: column;
@@ -179,16 +187,19 @@ block content
      thead(class=`${prefix}-table__header`)
        tr
          th(class=`${prefix}-table__header`) Item
-          th(class=`${prefix}-table__header`) Description
+          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Qty
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Rate
          th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
      tbody
        each line in lines
          tr(class=`${prefix}-table__row`)
-            td(class=`${prefix}-table__cell`)= line.item
-            td(class=`${prefix}-table__cell`)= line.description
-            td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.rate
-            td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.total
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
+              div.item
+                div.item__label #{line.item}
+                div.item__description #{line.description}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.quantity}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.rate}
+            td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

    //- Totals Section
    div(class=`${prefix}-totals`)
--- a/packages/server/src/services/Sales/Invoices/constants.ts
+++ b/packages/server/src/services/Sales/Invoices/constants.ts
@@ -194,7 +194,7 @@ export const defaultInvoicePdfTemplateAttributes = {

  // Entries
  lineItemLabel: 'Item',
-  lineDescriptionLabel: 'Description',
+  lineQuantityLabel: 'Qty',
  lineRateLabel: 'Rate',
  lineTotalLabel: 'Total',

--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
+++ b/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}
          />
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
+++ b/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}
          />
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/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' },
            ]}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
+++ b/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 (
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
+++ b/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}
          />