QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-22 15:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat: Add quantity column to pdf templates
This commit is contained in:
Ahmed Bouhuolia
2024-10-17 16:01:02 +02:00
committed by GitHub
parent 44fae36b82 758ebbe261
commit 4d6f65b179
10 changed files with 185 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/server/resources/views/modules/credit-note-standard.pug
View File

@@ -108,7 +108,14 @@ block head
.#{prefix}-table__cell--right { .#{prefix}-table__cell--right {
text-align: 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 { .#{prefix}-totals {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -184,16 +191,19 @@ block content
thead thead
tr tr
th(class=`${prefix}-table__header`) #{'Item'} th(class=`${prefix}-table__header`) #{'Item'}
th(class=`${prefix}-table__header`) #{'Description'} th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Quantity'}
th(class=`${prefix}-table__header`) #{'Rate'} th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Rate'}
th(class=`${prefix}-table__header`) #{'Total'} th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{'Total'}
tbody tbody
each line in lines each line in lines
tr(class=`${prefix}-table__row`) tr(class=`${prefix}-table__row`)
td(class=`${prefix}-table__cell`) #{line.item} td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
td(class=`${prefix}-table__cell`) #{line.description} div.item
td(class=`${prefix}-table__cell--right`) #{line.rate} div.item__label #{line.item}
td(class=`${prefix}-table__cell--right`) #{line.total} 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`) div(class=`${prefix}-totals`)
if showSubtotal if showSubtotal

17
packages/server/resources/views/modules/estimate-regular.pug
View File

@@ -109,6 +109,14 @@ block head
.#{prefix}-table__cell:last-of-type { .#{prefix}-table__cell:last-of-type {
padding-right: 0; 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 { .#{prefix}-totals {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -193,14 +201,17 @@ block content
thead thead
tr tr
th(class=`${prefix}-table__header`) Item 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`) Rate
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
tbody tbody
each line in lines each line in lines
tr tr
td(class=`${prefix}-table__cell`) #{line.item} td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
td(class=`${prefix}-table__cell`) #{line.description} 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.rate}
td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total} td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

17
packages/server/resources/views/modules/invoice-standard.pug
View File

@@ -115,6 +115,14 @@ block head
.#{prefix}-table__cell--right { .#{prefix}-table__cell--right {
text-align: 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 { .#{prefix}-totals {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -200,14 +208,17 @@ block content
thead thead
tr tr
th(class=`${prefix}-table__header`) #{lineItemLabel} 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`) #{lineRateLabel}
th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineTotalLabel} th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineTotalLabel}
tbody tbody
each line in lines each line in lines
tr tr
td(class=`${prefix}-table__cell`) #{line.item} td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
td(class=`${prefix}-table__cell`) #{line.description} 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.rate}
td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total} td(class=`${prefix}-table__cell ${prefix}-table__cell--right`) #{line.total}

21
packages/server/resources/views/modules/receipt-regular.pug
View File

@@ -105,6 +105,14 @@ block head
.#{prefix}-table__cell--right { .#{prefix}-table__cell--right {
text-align: 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 { .#{prefix}-totals {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -179,16 +187,19 @@ block content
thead(class=`${prefix}-table__header`) thead(class=`${prefix}-table__header`)
tr tr
th(class=`${prefix}-table__header`) Item 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`) Rate
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
tbody tbody
each line in lines each line in lines
tr(class=`${prefix}-table__row`) tr(class=`${prefix}-table__row`)
td(class=`${prefix}-table__cell`)= line.item td(class=`${prefix}-table__cell ${prefix}-table__cell--item`)
td(class=`${prefix}-table__cell`)= line.description div.item
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.rate div.item__label #{line.item}
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.total 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 //- Totals Section
div(class=`${prefix}-totals`) div(class=`${prefix}-totals`)

2
packages/server/src/services/Sales/Invoices/constants.ts
View File

@@ -194,7 +194,7 @@ export const defaultInvoicePdfTemplateAttributes = {
// Entries // Entries
lineItemLabel: 'Item', lineItemLabel: 'Item',
lineDescriptionLabel: 'Description', lineQuantityLabel: 'Qty',
lineRateLabel: 'Rate', lineRateLabel: 'Rate',
lineTotalLabel: 'Total', lineTotalLabel: 'Total',

34
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
View File

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

36
packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
View File

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

25
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
View File

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

9
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
View File

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

37
packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
View File

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