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: wip styling invoice customize

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-08 20:13:27 +02:00
parent f5e9485a12
commit c5c0342c7b
7 changed files with 117 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss
View File

@@ -1,5 +1,6 @@
.root {
flex: 1;
background: #fff;
}
.mainFields{
@@ -16,4 +17,8 @@
padding: 10px 16px;
border-top: 1px solid #d9d9d9;
flex-flow: row-reverse;
}
.showCompanyLogoField:global(.bp4-large){
font-size: 14px;
}

3
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.showCompanyLogoField{
font-size: 14px;
}

62
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
View File

@@ -1,4 +1,5 @@
import { Box, FFormGroup, FSwitch, Stack } from '@/components';
// @ts-nocheck
import { FFormGroup, FSwitch, Stack } from '@/components';
import { FColorInput } from './FColorField';
import styles from './InvoiceCustomizeFields.module.scss';
import { Classes } from '@blueprintjs/core';
@@ -6,39 +7,48 @@ import { Classes } from '@blueprintjs/core';
export function InvoiceCustomizeGeneralField() {
return (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack>
<h2>General Branding</h2>
<Stack spacing={0}>
<h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
<p className={Classes.TEXT_MUTED}>
Set your invoice details to be automatically applied every time
you
create a new invoice.
</p>
</Stack>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput name={'primaryColor'} />
</FFormGroup>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput name={'secondaryColor'} />
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
inline
className={styles.fieldGroup}
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup name={'showLogo'} label={'Logo'}>
<FSwitch
name={'showLogo'}
label={'Display company logo in the paper'}
large
/>
</FFormGroup>
<FFormGroup name={'showLogo'} label={'Logo'}>
<FSwitch
name={'showLogo'}
label={'Display company logo in the paper'}
className={styles.showCompanyLogoField}
large
/>
</FFormGroup>
</Stack>
</Stack>
);
}

4
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss
View File

@@ -5,7 +5,7 @@
box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
display: flex;
flex: 0 0 auto;
min-height: 40px;
min-height: 55px;
padding: 5px 5px 5px 20px;
position: relative;
background-color: #fff;
@@ -14,6 +14,6 @@
.title{
margin: 0;
font-size: 19px;
font-size: 20px;
font-weight: 500;
}

2
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx
View File

@@ -3,7 +3,7 @@ import { PaperTemplate } from './PaperTemplate';
export function InvoiceCustomizePreviewContent() {
return (
<Box style={{ padding: 20, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
<Box style={{ padding: 24, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
<PaperTemplate />
</Box>
);

60
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss
View File

@@ -2,16 +2,19 @@
.root {
border-radius: 5px;
background-color: #fff;
box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.15);
padding: 22px;
color: #000;
box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
padding: 22px 30px;
position: relative;
}
.bigTitle{
font-size: 60px;
margin: 0;
LINE-HEIGHT: 1;
MARGIN-BOTTOM: 20px;
line-height: 1;
margin-bottom: 20px;
font-weight: 500;
color: #333;
}
.details {
@@ -22,11 +25,12 @@
}
.detail {
display: flex;
flex-direction: row;
gap: 10px;
flex-direction: row;
gap: 12px;
}
.detailLabel {
min-width: 120px;
color: #333;
}
.addressRoot{
@@ -42,7 +46,7 @@
flex: 1;
}
.table :global {
.table {
margin-top: 40px;
width: 100%;
border-collapse: collapse;
@@ -51,6 +55,18 @@
thead th{
font-weight: 400;
border-bottom: 1px solid #000;
padding: 5px 10px;
&.rate,
&.total{
text-align: right;
}
&:first-of-type{
padding-left: 0;
}
&:last-of-type{
padding-right: 0;
}
}
tbody{
@@ -59,8 +75,20 @@
}
td{
border: 1px solid #F6F6F6;
padding: 10px 0;
border-bottom: 1px solid #F6F6F6;
padding: 12px 10px;
&:first-of-type{
padding-left: 0;
}
&:last-of-type{
padding-right: 0;
}
&.rate,
&.total{
text-align: right;
}
}
}
}
@@ -78,6 +106,13 @@
.totalsItemLabel{
min-width: 160px;
}
.totalsItemAmount{
flex: 1 1 auto;
text-align: right;
}
.totalBottomBordered {
border-bottom: 1px solid #000;
}
.logoWrap{
height: 120px;
@@ -85,21 +120,24 @@
position: absolute;
right: 20px;
top: 20px;
border-radius: 5px;
overflow: hidden;
img{
max-width: 100%;
}
}
.footer{
}
.paragraph{
margin-bottom: 20px;
font-size: 12px;
}
.paragraphLabel{
color: #333333;
margin-bottom: 2px;
color: #666;
}

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

@@ -1,3 +1,4 @@
import clsx from 'classnames';
import styles from './PaperTemplate.module.scss';
export function PaperTemplate() {
@@ -7,7 +8,10 @@ export function PaperTemplate() {
<h1 className={styles.bigTitle}>Invoice</h1>
<div className={styles.logoWrap}>
<img alt="" src="https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png" />
<img
alt=""
src="https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png"
/>
</div>
</div>
@@ -30,7 +34,7 @@ export function PaperTemplate() {
<div className={styles.addressRoot}>
<div className={styles.addressBillTo}>
Bigcapital Technology, Inc. <br />
<strong>Bigcapital Technology, Inc.</strong> <br />
131 Continental Dr Suite 305 Newark,
<br />
Delaware 19713
@@ -43,7 +47,7 @@ export function PaperTemplate() {
</div>
<div className={styles.addressFrom}>
Billed To <br />
<strong>Billed To</strong> <br />
Bigcapital Technology, Inc. <br />
131 Continental Dr Suite 305 Newark,
<br />
@@ -62,17 +66,17 @@ export function PaperTemplate() {
<tr>
<th>Item</th>
<th>Description</th>
<th>Rate</th>
<th>Total</th>
<th className={styles.rate}>Rate</th>
<th className={styles.total}>Total</th>
</tr>
</thead>
<tbody>
<tbody className={styles.tableBody}>
<tr>
<td>Simply dummy text</td>
<td>Simply dummy text of the printing and typesetting</td>
<td>1 X $100,00</td>
<td>$100,00</td>
<td className={styles.rate}>1 X $100,00</td>
<td className={styles.total}>$100,00</td>
</tr>
</tbody>
</table>
@@ -81,37 +85,37 @@ export function PaperTemplate() {
<div className={styles.totals}>
<div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sub Total</div>
<div>630.00</div>
<div className={styles.totalsItemAmount}>630.00</div>
</div>
<div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Discount</div>
<div>0.00</div>
<div className={styles.totalsItemAmount}>0.00</div>
</div>
<div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sample Tax1 (4.70%)</div>
<div>11.75</div>
<div className={styles.totalsItemAmount}>11.75</div>
</div>
<div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sample Tax2 (7.00%)</div>
<div>21.00</div>
<div className={styles.totalsItemAmount}>21.00</div>
</div>
<div className={styles.totalsItem}>
<div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
<div className={styles.totalsItemLabel}>Total</div>
<div>$662.75</div>
<div className={styles.totalsItemAmount}>$662.75</div>
</div>
<div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Payment Made</div>
<div>100.00</div>
<div className={styles.totalsItemAmount}>100.00</div>
</div>
<div className={styles.totalsItem}>
<div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
<div className={styles.totalsItemLabel}>Balance Due</div>
<div className={styles.totalsItemLabel}>$562.75</div>
<div className={styles.totalsItemAmount}>$562.75</div>
</div>
</div>
</div>