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

refactoring : paper template.

Browse Source
This commit is contained in:
elforjani3
2021-02-22 20:45:17 +02:00
parent 41691049d0
commit dab43faff2
13 changed files with 268 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
client/src/containers/Drawers/PaperTemplate.js
View File

@@ -1,123 +0,0 @@
import React from 'react';
import { Icon } from 'components';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaperTemplate({ labels: propLabels }) {
const labels = {
name: 'Estimate',
billedTo: 'Billed to',
date: 'Estimate date',
refNo: 'Estimate No.',
billedFrom: 'Billed from',
amount: 'Estimate amount',
dueDate: 'Due date',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{labels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {labels.billedTo} </span>
<p className={'info-paragraph'}>Joe Biden</p>
</div>
<div className="template__content__info">
<span> {labels.date} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {labels.refNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {labels.amount} </span>
<p className={'info-paragraph-amount'}>6,000 LYD</p>
</div>
<div className="template__content__info">
<span> {labels.billedFrom} </span>
<p className={'info-paragraph'}>Donald Trump</p>
</div>
<div className="template__content__info">
<span> {labels.dueDate} </span>
<p className={'info-paragraph'}>25/03/2022</p>
</div>
</div>
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell ">Description</span>
<span className="template__table__rows--cell">Rate</span>
<span className="template__table__rows--cell">Qty</span>
<span className="template__table__rows--cell">Total</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla commodo magnanon dolor excepteur nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
</div>
<div className="template__terms">
<div className="template__terms__title">
<h4>Conditions and terms</h4>
</div>
<ul>
<li>Est excepteur laboris do sit dolore sit exercitation non.</li>
<li>Lorem duis aliqua minim elit cillum.</li>
<li>Dolor ad quis Lorem ut mollit consectetur.</li>
</ul>
</div>
</div>
</div>
);
}

27
client/src/containers/Drawers/PaperTemplate/PaperTemplate.js Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import PaperTemplateHeader from './PaperTemplateHeader';
import PaperTemplateTable from './PaperTemplateTable';
import PaperTemplateFooter from './PaperTemplateFooter';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaperTemplate({ labels: propLabels }) {
const labels = {
name: 'Estimate',
billedTo: 'Billed to',
date: 'Estimate date',
refNo: 'Estimate No.',
billedFrom: 'Billed from',
amount: 'Estimate amount',
dueDate: 'Due date',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<PaperTemplateHeader defaultLabels={labels} />
<PaperTemplateTable />
<PaperTemplateFooter />
</div>
</div>
);
}

16
client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
export default function PaperTemplateFooter() {
return (
<div className="template__terms">
<div className="template__terms__title">
<h4>Conditions and terms</h4>
</div>
<ul>
<li>Est excepteur laboris do sit dolore sit exercitation non.</li>
<li>Lorem duis aliqua minim elit cillum.</li>
<li>Dolor ad quis Lorem ut mollit consectetur.</li>
</ul>
</div>
);
}

44
client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { Icon } from 'components';
export default function PaperTemplateHeader({ defaultLabels }) {
return (
<>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Joe Biden</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.date} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.refNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amount} </span>
<p className={'info-paragraph-amount'}>6,000 LYD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}>Donald Trump</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.dueDate} </span>
<p className={'info-paragraph'}>25/03/2022</p>
</div>
</div>
</>
);
}

55
client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
export default function DrawerTemplateTable() {
return (
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell ">Description</span>
<span className="template__table__rows--cell">Rate</span>
<span className="template__table__rows--cell">Qty</span>
<span className="template__table__rows--cell">Total</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla commodo magnanon dolor excepteur nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
</div>
);
}

102
client/src/containers/Drawers/PaymentPaperTemplate.js
View File

@@ -1,102 +0,0 @@
import React from 'react';
import { Icon } from 'components';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaymentPaperTemplate({ labels: propLabels }) {
const labels = {
title: 'Payment receive',
billedTo: 'Billed to',
paymentDate: 'Payment date',
paymentNo: 'Payment No.',
billedFrom: 'Billed from',
referenceNo: 'Reference No',
amountReceived: 'Amount received',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{labels.title}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {labels.billedTo} </span>
<p className={'info-paragraph'}>Step Currency</p>
</div>
<div className="template__content__info">
<span> {labels.paymentDate} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {labels.paymentNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {labels.amountReceived} </span>
<p className={'info-paragraph-amount'}>60,000 USD</p>
</div>
<div className="template__content__info">
<span> {labels.billedFrom} </span>
<p className={'info-paragraph'}> Klay Thompson</p>
</div>
<div className="template__content__info">
<span> {labels.referenceNo} </span>
<p className={'info-paragraph'}></p>
</div>
</div>
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive ">
Invoice number
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice date
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice amount
</span>
<span className="template__table__rows--cell-payment-receive ">
Payment amount
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-1
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-2{' '}
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
</div>
</div>
</div>
);
}

26
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaymentPaperTemplate({ labels: propLabels }) {
const labels = {
title: 'Payment receive',
billedTo: 'Billed to',
paymentDate: 'Payment date',
paymentNo: 'Payment No.',
billedFrom: 'Billed from',
referenceNo: 'Reference No',
amountReceived: 'Amount received',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<PaymentPaperTemplateHeader defaultLabels={labels} />
<PaymentPaperTemplateTable />
</div>
</div>
);
}

43
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import { Icon } from 'components';
export default function PaymentPaperTemplateHeader({ defaultLabels }) {
return (
<>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.title}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Step Currency</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentDate} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amountReceived} </span>
<p className={'info-paragraph-amount'}>60,000 USD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}> Klay Thompson</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.referenceNo} </span>
<p className={'info-paragraph'}></p>
</div>
</div>
</>
);
}

51
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
export default function PaymentPaperTemplateTable() {
return (
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive ">
Invoice number
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice date
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice amount
</span>
<span className="template__table__rows--cell-payment-receive ">
Payment amount
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-1
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-2
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
</div>
);
}

5
client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -18,10 +18,11 @@ function EstimateDrawer({
const handleDrawerClose = () => {
closeDrawer(name);
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate />
<PaperTemplate />
</DrawerTemplate>
);
}

2
client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';

2
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate';
import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';

2
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';