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

feat: item payment transactions.

Browse Source
This commit is contained in:
elforjani13
2021-11-15 21:45:24 +02:00
parent bd282acae4
commit 0ad5a9ed03
9 changed files with 431 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
View File

@@ -2,6 +2,8 @@ import React from 'react';
import ItemDetailActionsBar from './ItemDetailActionsBar';
import ItemDetailHeader from './ItemDetailHeader';
import { ItemPaymentTransactions } from './ItemPaymentTransactions';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { Card } from 'components';
@@ -12,7 +14,7 @@ export default function ItemDetail() {
return (
<div className="item-drawer">
<ItemDetailActionsBar />
<ItemPaymentTransactions />
<Card>
<ItemDetailHeader />
</Card>

78
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js Normal file
View File

@@ -0,0 +1,78 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { DataTable, Card, FormatDateCell } from '../../../../components';
/**
* Bill payment transactions data table.
*/
export default function BillPaymentTransactions() {
const columns = React.useMemo(
() => [
{
id: 'bill_date',
Header: intl.get('date'),
accessor: 'bill_date',
Cell: FormatDateCell,
width: 110,
className: 'bill_date',
},
{
id: 'bill_number',
Header: intl.get('bill_number'),
accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
width: 100,
className: 'bill_number',
},
{
id: 'vendor',
Header: intl.get('vendor_name'),
accessor: 'vendor.display_name',
width: 180,
className: 'vendor',
},
{
id: 'reference_no',
Header: intl.get('reference_no'),
accessor: 'reference_no',
width: 90,
className: 'reference_no',
},
{
id: 'qunatity',
Header: 'Quantity Purchase',
},
{
id: 'rate',
Header: 'Rate',
},
{
id: 'total',
Header: intl.get('total'),
},
{
id: 'status',
Header: intl.get('status'),
// accessor: (row) => statusAccessor(row),
width: 160,
className: 'status',
},
],
[],
);
return (
<div className="payment-transactions">
<Card>
<DataTable
columns={columns}
data={[]}
// loading={}
// headerLoading={}
// progressBarLoading={}
/>
</Card>
</div>
);
}

73
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js Normal file
View File

@@ -0,0 +1,73 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { DataTable, Card, FormatDateCell } from '../../../../components';
/**
* Esimtate payment transactions datatable.
*/
export default function EstimatePaymentTransactions() {
const columns = React.useMemo(
() => [
{
id: 'estimate_date',
Header: intl.get('date'),
accessor: 'estimate_date',
Cell: FormatDateCell,
width: 110,
className: 'estimate_date',
textOverview: true,
},
{
id: 'estimate_number',
Header: intl.get('estimate_no'),
accessor: 'estimate_number',
width: 100,
className: 'estimate_number',
textOverview: true,
},
{
id: 'reference',
Header: intl.get('reference_no'),
accessor: 'reference',
width: 140,
className: 'reference',
},
{
id: 'customer_id',
Header: intl.get('customer_name'),
accessor: 'customer.display_name',
width: 140,
className: 'customer_id',
},
{
id: 'qunatity',
Header: 'Quantity Sold',
},
{
id: 'rate',
Header: 'Rate',
},
{
id: 'total',
Header: intl.get('total'),
},
],
[],
);
return (
<div className="payment-transactions">
<Card>
<DataTable
columns={columns}
data={[]}
// loading={}
// headerLoading={}
// progressBarLoading={}
/>
</Card>
</div>
);
}

83
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { DataTable, Card, FormatDateCell } from '../../../../components';
/**
* Invoice payment transactions datatable.
*/
export default function InvoicePaymentTransactionsTable() {
const columns = React.useMemo(
() => [
{
id: 'invoice_date',
Header: intl.get('date'),
accessor: 'invoice_date',
Cell: FormatDateCell,
width: 110,
className: 'invoice_date',
textOverview: true,
},
{
id: 'invoice_no',
Header: intl.get('invoice_no__'),
accessor: 'invoice_no',
width: 100,
className: 'invoice_no',
textOverview: true,
},
{
id: 'customer',
Header: intl.get('customer_name'),
accessor: 'customer.display_name',
width: 180,
className: 'customer_id',
clickable: true,
textOverview: true,
},
{
id: 'reference_no',
Header: intl.get('reference_no'),
accessor: 'reference_no',
width: 90,
className: 'reference_no',
textOverview: true,
},
{
id: 'qunatity',
Header: 'Quantity Sold',
},
{
id: 'rate',
Header: 'Rate',
},
{
id: 'total',
Header: intl.get('total'),
},
{
id: 'status',
Header: intl.get('status'),
// accessor: (row) => statusAccessor(row),
width: 160,
className: 'status',
},
],
[],
);
return (
<div className="payment-transactions">
<Card>
<DataTable
columns={columns}
data={[]}
// loading={}
// headerLoading={}
// progressBarLoading={}
/>
</Card>
</div>
);
}

83
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { DataTable, Card, FormatDateCell } from '../../../../components';
/**
* Receipt payment transactions datatable.
*/
export default function ReceiptPaymentTransactions() {
const columns = React.useMemo(
() => [
{
id: 'receipt_date',
Header: intl.get('date'),
accessor: 'receipt_date',
Cell: FormatDateCell,
width: 110,
className: 'receipt_date',
textOverview: true,
},
{
id: 'receipt_number',
Header: intl.get('receipt_no'),
accessor: 'receipt_number',
width: 140,
className: 'receipt_number',
clickable: true,
textOverview: true,
},
{
id: 'customer',
Header: intl.get('customer_name'),
accessor: 'customer.display_name',
width: 140,
className: 'customer_id',
textOverview: true,
},
{
id: 'reference_no',
Header: intl.get('reference_no'),
accessor: 'reference_no',
width: 140,
className: 'reference_no',
textOverview: true,
},
{
id: 'status',
Header: intl.get('status'),
// accessor: StatusAccessor,
width: 140,
className: 'status',
},
{
id: 'qunatity',
Header: 'Quantity Sold',
},
{
id: 'rate',
Header: 'Rate',
},
{
id: 'total',
Header: intl.get('total'),
},
],
[],
);
return (
<div className="payment-transactions">
<Card>
<DataTable
columns={columns}
data={[]}
// loading={}
// headerLoading={}
// progressBarLoading={}
/>
</Card>
</div>
);
}

40
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import { DrawerMainTabs } from 'components';
import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
import ItemSwitchMenuItem from './utils';
export const ItemPaymentTransactions = () => {
return (
<DrawerMainTabs>
<Tab
id={'invoice'}
title={'Invoice'}
panel={<InvoicePaymentTransactionsTable />}
/>
<Tab
id={'estiamte'}
title={'Estimate'}
panel={<EstimatePaymentTransactionsTable />}
/>
<Tab
id={'receipt'}
title={'Receipt'}
panel={<ReceiptPaymentTransactionsTable />}
/>
<Tab
id={'bill'}
title={'Bill'}
panel={<BillPaymentTransactionsTable />}
/>
</DrawerMainTabs>
);
};
{
/* <ItemSwitchMenuItem onChange={handleSwitch} /> */
}

59
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js Normal file
View File

@@ -0,0 +1,59 @@
import React from 'react';
import intl from 'react-intl-universal';
import {
Popover,
Menu,
Position,
Button,
MenuItem,
Classes,
NavbarGroup,
PopoverInteractionKind,
} from '@blueprintjs/core';
import { Icon } from '../../../../components';
import { curry } from 'lodash/fp';
import { Select } from '@blueprintjs/select';
function ItemSwitchMenuItem({ onChange }) {
const Transaction = [
{ name: 'Invoice' },
{ name: 'Estimate' },
{ name: 'Bill' },
{ name: 'Receipt' },
];
const handleSwitchMenutItem = (item) => {
onChange && onChange(item);
};
const content = (
<Menu>
{Transaction.map((item) => (
<MenuItem
onClick={() => handleSwitchMenutItem(item.name)}
text={item.name}
/>
))}
</Menu>
);
return (
<Popover
content={content}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
offset: { offset: '0, 4' },
}}
minimal={true}
>
<Button
minimal={true}
text="Select Service"
rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
/>
</Popover>
);
}
export default ItemSwitchMenuItem;

7
src/containers/Drawers/ItemDetailDrawer/index.js
View File

@@ -19,7 +19,12 @@ function ItemDetailDrawer({
payload: { itemId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '700px', maxWidth: '900px' }}
size={'65%'}
>
<DrawerSuspense>
<ItemDetailDrawerContent itemId={itemId} />
</DrawerSuspense>