QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-22 07:40:32 +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 { .root {
flex: 1; flex: 1;
background: #fff;
} }
.mainFields{ .mainFields{
@@ -17,3 +18,7 @@
border-top: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9;
flex-flow: row-reverse; 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 { FColorInput } from './FColorField';
import styles from './InvoiceCustomizeFields.module.scss'; import styles from './InvoiceCustomizeFields.module.scss';
import { Classes } from '@blueprintjs/core'; import { Classes } from '@blueprintjs/core';
@@ -6,39 +7,48 @@ import { Classes } from '@blueprintjs/core';
export function InvoiceCustomizeGeneralField() { export function InvoiceCustomizeGeneralField() {
return ( return (
<Stack style={{ padding: 20, flex: '1 1 auto' }}> <Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack> <Stack spacing={0}>
<h2>General Branding</h2> <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
<p className={Classes.TEXT_MUTED}> <p className={Classes.TEXT_MUTED}>
Set your invoice details to be automatically applied every time
you Set your invoice details to be automatically applied every time
you
create a new invoice. create a new invoice.
</p> </p>
</Stack> </Stack>
<FFormGroup <Stack spacing={0}>
name={'primaryColor'} <FFormGroup
label={'Primary Color'} name={'primaryColor'}
inline label={'Primary Color'}
className={styles.fieldGroup} inline
> className={styles.fieldGroup}
<FColorInput name={'primaryColor'} /> >
</FFormGroup> <FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup <FFormGroup
name={'secondaryColor'} name={'secondaryColor'}
label={'Secondary Color'} label={'Secondary Color'}
inline inline
className={styles.fieldGroup} className={styles.fieldGroup}
> >
<FColorInput name={'secondaryColor'} /> <FColorInput
</FFormGroup> name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
/>
</FFormGroup>
<FFormGroup name={'showLogo'} label={'Logo'}> <FFormGroup name={'showLogo'} label={'Logo'}>
<FSwitch <FSwitch
name={'showLogo'} name={'showLogo'}
label={'Display company logo in the paper'} label={'Display company logo in the paper'}
large className={styles.showCompanyLogoField}
/> large
</FFormGroup> />
</FFormGroup>
</Stack>
</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); box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
min-height: 40px; min-height: 55px;
padding: 5px 5px 5px 20px; padding: 5px 5px 5px 20px;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
@@ -14,6 +14,6 @@
.title{ .title{
margin: 0; margin: 0;
font-size: 19px; font-size: 20px;
font-weight: 500; 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() { export function InvoiceCustomizePreviewContent() {
return ( return (
<Box style={{ padding: 20, backgroundColor: '#F5F5F5', overflow: 'auto' }}> <Box style={{ padding: 24, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
<PaperTemplate /> <PaperTemplate />
</Box> </Box>
); );

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

@@ -2,16 +2,19 @@
.root { .root {
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: #fff;
box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.15); color: #000;
padding: 22px; box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
padding: 22px 30px;
position: relative; position: relative;
} }
.bigTitle{ .bigTitle{
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
LINE-HEIGHT: 1; line-height: 1;
MARGIN-BOTTOM: 20px; margin-bottom: 20px;
font-weight: 500;
color: #333;
} }
.details { .details {
@@ -22,11 +25,12 @@
} }
.detail { .detail {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 12px;
} }
.detailLabel { .detailLabel {
min-width: 120px; min-width: 120px;
color: #333;
} }
.addressRoot{ .addressRoot{
@@ -42,7 +46,7 @@
flex: 1; flex: 1;
} }
.table :global { .table {
margin-top: 40px; margin-top: 40px;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@@ -51,6 +55,18 @@
thead th{ thead th{
font-weight: 400; font-weight: 400;
border-bottom: 1px solid #000; 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{ tbody{
@@ -59,8 +75,20 @@
} }
td{ td{
border: 1px solid #F6F6F6; border-bottom: 1px solid #F6F6F6;
padding: 10px 0; 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{ .totalsItemLabel{
min-width: 160px; min-width: 160px;
} }
.totalsItemAmount{
flex: 1 1 auto;
text-align: right;
}
.totalBottomBordered {
border-bottom: 1px solid #000;
}
.logoWrap{ .logoWrap{
height: 120px; height: 120px;
@@ -85,21 +120,24 @@
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;
border-radius: 5px;
overflow: hidden;
img{ img{
max-width: 100%; max-width: 100%;
} }
} }
.footer{ .footer{
} }
.paragraph{ .paragraph{
margin-bottom: 20px; margin-bottom: 20px;
font-size: 12px;
} }
.paragraphLabel{ .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'; import styles from './PaperTemplate.module.scss';
export function PaperTemplate() { export function PaperTemplate() {
@@ -7,7 +8,10 @@ export function PaperTemplate() {
<h1 className={styles.bigTitle}>Invoice</h1> <h1 className={styles.bigTitle}>Invoice</h1>
<div className={styles.logoWrap}> <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>
</div> </div>
@@ -30,7 +34,7 @@ export function PaperTemplate() {
<div className={styles.addressRoot}> <div className={styles.addressRoot}>
<div className={styles.addressBillTo}> <div className={styles.addressBillTo}>
Bigcapital Technology, Inc. <br /> <strong>Bigcapital Technology, Inc.</strong> <br />
131 Continental Dr Suite 305 Newark, 131 Continental Dr Suite 305 Newark,
<br /> <br />
Delaware 19713 Delaware 19713
@@ -43,7 +47,7 @@ export function PaperTemplate() {
</div> </div>
<div className={styles.addressFrom}> <div className={styles.addressFrom}>
Billed To <br /> <strong>Billed To</strong> <br />
Bigcapital Technology, Inc. <br /> Bigcapital Technology, Inc. <br />
131 Continental Dr Suite 305 Newark, 131 Continental Dr Suite 305 Newark,
<br /> <br />
@@ -62,17 +66,17 @@ export function PaperTemplate() {
<tr> <tr>
<th>Item</th> <th>Item</th>
<th>Description</th> <th>Description</th>
<th>Rate</th> <th className={styles.rate}>Rate</th>
<th>Total</th> <th className={styles.total}>Total</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className={styles.tableBody}>
<tr> <tr>
<td>Simply dummy text</td> <td>Simply dummy text</td>
<td>Simply dummy text of the printing and typesetting</td> <td>Simply dummy text of the printing and typesetting</td>
<td>1 X $100,00</td> <td className={styles.rate}>1 X $100,00</td>
<td>$100,00</td> <td className={styles.total}>$100,00</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -81,37 +85,37 @@ export function PaperTemplate() {
<div className={styles.totals}> <div className={styles.totals}>
<div className={styles.totalsItem}> <div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sub Total</div> <div className={styles.totalsItemLabel}>Sub Total</div>
<div>630.00</div> <div className={styles.totalsItemAmount}>630.00</div>
</div> </div>
<div className={styles.totalsItem}> <div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Discount</div> <div className={styles.totalsItemLabel}>Discount</div>
<div>0.00</div> <div className={styles.totalsItemAmount}>0.00</div>
</div> </div>
<div className={styles.totalsItem}> <div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sample Tax1 (4.70%)</div> <div className={styles.totalsItemLabel}>Sample Tax1 (4.70%)</div>
<div>11.75</div> <div className={styles.totalsItemAmount}>11.75</div>
</div> </div>
<div className={styles.totalsItem}> <div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Sample Tax2 (7.00%)</div> <div className={styles.totalsItemLabel}>Sample Tax2 (7.00%)</div>
<div>21.00</div> <div className={styles.totalsItemAmount}>21.00</div>
</div> </div>
<div className={styles.totalsItem}> <div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
<div className={styles.totalsItemLabel}>Total</div> <div className={styles.totalsItemLabel}>Total</div>
<div>$662.75</div> <div className={styles.totalsItemAmount}>$662.75</div>
</div> </div>
<div className={styles.totalsItem}> <div className={styles.totalsItem}>
<div className={styles.totalsItemLabel}>Payment Made</div> <div className={styles.totalsItemLabel}>Payment Made</div>
<div>100.00</div> <div className={styles.totalsItemAmount}>100.00</div>
</div> </div>
<div className={styles.totalsItem}> <div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
<div className={styles.totalsItemLabel}>Balance Due</div> <div className={styles.totalsItemLabel}>Balance Due</div>
<div className={styles.totalsItemLabel}>$562.75</div> <div className={styles.totalsItemAmount}>$562.75</div>
</div> </div>
</div> </div>
</div> </div>