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

feat: optimize branding templates customiing

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-14 19:32:16 +02:00
parent 28319c2cdc
commit d690c6a3fe
13 changed files with 209 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import React from 'react';
import { PaperTemplate } from './PaperTemplate';
import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
import { Group, Stack } from '@/components';
interface PapaerLine {
@@ -223,8 +223,8 @@ export function InvoicePaperTemplate({
columns={[
{ label: lineItemLabel, accessor: 'item' },
{ label: lineDescriptionLabel, accessor: 'description' },
{ label: lineRateLabel, accessor: 'rate' },
{ label: lineTotalLabel, accessor: 'total' },
{ label: lineRateLabel, accessor: 'rate', align: 'right' },
{ label: lineTotalLabel, accessor: 'total', align: 'right' },
]}
data={lines}
/>
@@ -233,6 +233,7 @@ export function InvoicePaperTemplate({
<PaperTemplate.TotalLine
label={subtotalLabel}
amount={subtotal}
border={PaperTemplateTotalBorder.Gray}
/>
)}
{showDiscount && (
@@ -253,7 +254,12 @@ export function InvoicePaperTemplate({
</>
)}
{showTotal && (
<PaperTemplate.TotalLine label={totalLabel} amount={total} />
<PaperTemplate.TotalLine
label={totalLabel}
amount={total}
border={PaperTemplateTotalBorder.Dark}
style={{ fontWeight: 500 }}
/>
)}
{showPaymentMade && (
<PaperTemplate.TotalLine
@@ -265,6 +271,8 @@ export function InvoicePaperTemplate({
<PaperTemplate.TotalLine
label={balanceDueLabel}
amount={balanceDue}
border={PaperTemplateTotalBorder.Dark}
style={{ fontWeight: 500 }}
/>
)}
</PaperTemplate.Totals>

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

@@ -10,6 +10,7 @@ export interface PaperTemplateProps {
showCompanyLogo?: boolean;
companyLogo?: string;
companyName?: string;
bigtitle?: string;
@@ -44,7 +45,11 @@ export function PaperTemplate({
}
interface PaperTemplateTableProps {
columns: Array<{ accessor: string; label: string }>;
columns: Array<{
accessor: string;
label: string;
align?: 'left' | 'center' | 'right';
}>;
data: Array<Record<string, any>>;
}
@@ -54,7 +59,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
<thead>
<tr>
{columns.map((col, index) => (
<th key={index}>{col.label}</th>
<th key={index} align={col.align}>
{col.label}
</th>
))}
</tr>
</thead>
@@ -63,7 +70,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
{data.map((_data: any) => (
<tr>
{columns.map((column, index) => (
<td key={index}>{get(_data, column.accessor)}</td>
<td align={column.align} key={index}>
{get(_data, column.accessor)}
</td>
))}
</tr>
))}
@@ -72,18 +81,34 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
);
};
export enum PaperTemplateTotalBorder {
Gray = 'gray',
Dark = 'dark',
}
PaperTemplate.Totals = ({ children }: { children: React.ReactNode }) => {
return <div className={styles.totals}>{children}</div>;
return <div className={clsx(styles.totals)}>{children}</div>;
};
PaperTemplate.TotalLine = ({
label,
amount,
border,
style,
}: {
label: string;
amount: string;
border?: PaperTemplateTotalBorder;
style?: any;
}) => {
return (
<div className={clsx(styles.totalsItem, styles.totalBottomGrayBordered)}>
<div
className={clsx(styles.totalsItem, {
[styles.totalBottomBordered]: border === PaperTemplateTotalBorder.Dark,
[styles.totalBottomGrayBordered]:
border === PaperTemplateTotalBorder.Gray,
})}
style={style}
>
<div className={styles.totalsItemLabel}>{label}</div>
<div className={styles.totalsItemAmount}>{amount}</div>
</div>