From 3511348d04ceed455a4d825ca55aa7a2d6da457b Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 20 Dec 2021 15:31:03 +0200
Subject: [PATCH] feat: add style of bill.
---
.../BillDrawer/BillDetailActionsBar.js | 14 ++-
.../Drawers/BillDrawer/BillDetailHeader.js | 114 +++++++++++-------
.../Drawers/BillDrawer/BillDetailTab.js | 22 ++--
.../Drawers/BillDrawer/BillDetailTable.js | 21 ++--
.../Drawers/BillDrawer/BillDrawerAlerts.js | 13 --
.../Drawers/BillDrawer/BillDrawerContent.js | 3 -
.../Drawers/BillDrawer/BillDrawerDetails.js | 83 +++++++------
.../Drawers/BillDrawer/BillDrawerProvider.js | 20 +--
.../Drawers/BillDrawer/BillGLEntriesTable.js | 49 ++++++++
.../BillPaymentTransactionTable.js | 8 +-
.../BillDrawer/LocatedLandedCostTable.js | 8 +-
src/containers/Drawers/BillDrawer/utils.js | 49 +++++++-
.../Bills/BillsLanding/BillsAlerts.js | 8 ++
.../Bills/BillsLanding/components.js | 2 +-
src/lang/en/index.json | 3 +-
15 files changed, 265 insertions(+), 152 deletions(-)
delete mode 100644 src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
create mode 100644 src/containers/Drawers/BillDrawer/BillGLEntriesTable.js
diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index d57e2f4c4..ab58d45a1 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -16,7 +16,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import { Can, If, Icon, FormattedMessage as T } from 'components';
+import {
+ Can,
+ If,
+ Icon,
+ DrawerActionsBar,
+ FormattedMessage as T,
+} from 'components';
import {
BillAction,
PaymentMadeAction,
@@ -56,7 +62,7 @@ function BillDetailActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/src/containers/Drawers/BillDrawer/BillDetailHeader.js b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
index 30baef9eb..f002ac457 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -1,12 +1,21 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import {
+ FormatDate,
+ DetailsMenu,
+ DetailItem,
+ ButtonLink,
+ Row,
+ Col,
+ CommercialDocHeader,
+ CommercialDocTopHeader,
+} from 'components';
import { useBillDrawerContext } from './BillDrawerProvider';
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { BillDetailsStatus } from './utils';
/**
* Bill detail header.
@@ -15,44 +24,65 @@ export default function BillDetailHeader() {
const { bill } = useBillDrawerContext();
return (
-
-
- {bill.formatted_amount}}
- />
-
- }
- />
-
- }
- />
-
-
-
-
-
- }
- />
-
-
+
+
+
+
+ {bill.formatted_amount}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {bill.vendor?.display_name}
+
+
+ {defaultTo(bill.bill_number, '-')}
+
+
+
+
+
+
+ {bill.formatted_due_amount}
+
+
+ }
+ />
+
+
+
+
);
}
+
+const StatusDetailItem = styled(DetailItem)`
+ width: 50%;
+ text-align: right;
+ position: relative;
+ top: -5px;
+`;
+
+const AmountDetailItem = styled(DetailItem)`
+ width: 50%;
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillDetailTab.js b/src/containers/Drawers/BillDrawer/BillDetailTab.js
index 32466efd4..86fcd6571 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailTab.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailTab.js
@@ -1,14 +1,10 @@
import React from 'react';
-import clsx from 'classnames';
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
-import BillDetailActionsBar from './BillDetailActionsBar';
import BillDetailHeader from './BillDetailHeader';
import BillDetailTable from './BillDetailTable';
-import { BillDetailFooter } from './BillDetailFooter'
-
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { BillDetailFooter } from './BillDetailFooter';
/**
@@ -16,14 +12,10 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
*/
export default function BillDetailTab() {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/containers/Drawers/BillDrawer/BillDetailTable.js b/src/containers/Drawers/BillDrawer/BillDetailTable.js
index 6ef30dd9d..cc8f0932f 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailTable.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailTable.js
@@ -1,26 +1,25 @@
import React from 'react';
-import clsx from 'classnames';
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
import { useBillDrawerContext } from './BillDrawerProvider';
import { useBillReadonlyEntriesTableColumns } from './utils';
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import { TableStyle } from '../../../common';
export default function BillDetailTable() {
- const { bill: { entries } } = useBillDrawerContext();
+ const {
+ bill: { entries },
+ } = useBillDrawerContext();
// Retrieve bill readonly entries table columns.
const columns = useBillReadonlyEntriesTableColumns();
return (
-
-
-
+
);
}
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js b/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
deleted file mode 100644
index bc8ca4660..000000000
--- a/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import BillLocatedLandedCostDeleteAlert from 'containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert';
-
-/**
- * Bill drawer alert.
- */
-export default function BillDrawerAlerts() {
- return (
-
-
-
- );
-}
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerContent.js b/src/containers/Drawers/BillDrawer/BillDrawerContent.js
index e2df6d6c4..8b142d8c0 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerContent.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerContent.js
@@ -1,10 +1,8 @@
import React from 'react';
import { DrawerBody } from 'components';
-
import { BillDrawerProvider } from './BillDrawerProvider';
import BillDrawerDetails from './BillDrawerDetails';
-import BillDrawerAlerts from './BillDrawerAlerts';
/**
* Bill drawer content.
@@ -17,7 +15,6 @@ export default function BillDrawerContent({
-
);
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 987cd77fb..5042ed12a 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -1,53 +1,60 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
import { DrawerMainTabs } from 'components';
import BillDetailTab from './BillDetailTab';
import LocatedLandedCostTable from './LocatedLandedCostTable';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import BillGLEntriesTable from './BillGLEntriesTable';
import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable';
-import { useBillDrawerContext } from './BillDrawerProvider';
-
-import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+import BillDetailActionsBar from './BillDetailActionsBar';
/**
- * Bill view details.
+ * Bill details tabs.
*/
-export default function BillDrawerDetails() {
- const {
- data: { transactions },
- } = useBillDrawerContext();
-
+function BillDetailsTabs() {
return (
-
-
- }
- />
- }
- />
- }
- />
- }
- />
-
-
+
+ }
+ />
+ }
+ />
+
+ }
+ />
+ }
+ />
+
);
}
+
+/**
+ * Bill view detail.
+ */
+export default function BillDetails() {
+ return (
+
+
+
+
+ );
+}
+
+export const BillDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
index bef541bb0..0de9a928c 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
@@ -1,11 +1,7 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DrawerLoading } from 'components';
-import {
- useBill,
- useTransactionsByReference,
- useBillLocatedLandedCost,
-} from 'hooks/query';
+import { useBill, useBillLocatedLandedCost } from 'hooks/query';
const BillDrawerContext = React.createContext();
@@ -18,15 +14,6 @@ function BillDrawerProvider({ billId, ...props }) {
enabled: !!billId,
});
- // Handle fetch transaction by reference.
- const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
- {
- reference_id: billId,
- reference_type: 'Bill',
- },
- { enabled: !!billId },
- );
-
// Handle fetch bill located landed cost transaction.
const { isLoading: isLandedCostLoading, data: transactions } =
useBillLocatedLandedCost(billId, {
@@ -35,13 +22,12 @@ function BillDrawerProvider({ billId, ...props }) {
//provider.
const provider = {
- transactions,
billId,
- data,
+ transactions,
bill,
};
- const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
+ const loading = isLandedCostLoading || isBillLoading;
return (
diff --git a/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js b/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js
new file mode 100644
index 000000000..593f41a59
--- /dev/null
+++ b/src/containers/Drawers/BillDrawer/BillGLEntriesTable.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import JournalEntriesTable, {
+ AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Bill GL entries table.
+ * @returns {React.JSX}
+ */
+export default function BillGLEntriesTable() {
+ const { billId } = useBillDrawerContext();
+
+ // Handle fetch transaction by reference.
+ const {
+ data: { transactions },
+ isLoading: isTransactionLoading,
+ } = useTransactionsByReference(
+ {
+ reference_id: billId,
+ reference_type: 'Bill',
+ },
+ { enabled: !!billId },
+ );
+
+ return (
+
+
+
+
+ );
+}
+
+const BilleGLEntriesRoot = styled(Card)``;
+
+const BillGLEntriesDatatable = styled(JournalEntriesTable)`
+ .table .tbody .tr:last-child .td {
+ border-bottom: 0;
+ }
+`;
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
index e0caa4957..8ef93e23b 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -2,12 +2,13 @@ import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable, Card } from 'components';
-import 'style/pages/PaymentTransactions/List.scss';
-
import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
import { useBillDrawerContext } from '../BillDrawerProvider';
import { useBillPaymentTransactions } from 'hooks/query';
+import { TableStyle } from '../../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -59,12 +60,13 @@ function BillPaymentTransactionTable({
loading={isPaymentTransactionsLoading}
headerLoading={isPaymentTransactionsLoading}
progressBarLoading={isPaymentTransactionFetching}
+ TableLoadingRenderer={TableSkeletonRows}
+ styleName={TableStyle.Constrant}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeleteBillPaymentTransactons,
onEdit: handleEditBillPaymentTransactions,
}}
- className={'payment-transactions'}
/>
);
diff --git a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
index 32c01de71..fa536fa92 100644
--- a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
+++ b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
@@ -5,12 +5,13 @@ import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
import { useLocatedLandedCostColumns, ActionsMenu } from './components';
import { useBillDrawerContext } from './BillDrawerProvider';
-import '../../../style/pages/AllocateLandedCost/List.scss';
-
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { TableStyle } from '../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
import { compose } from 'utils';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
@@ -75,11 +76,12 @@ function LocatedLandedCostTable({
columns={columns}
data={transactions}
ContextMenu={ActionsMenu}
+ TableLoadingRenderer={TableSkeletonRows}
+ styleName={TableStyle.Constrant}
payload={{
onDelete: handleDeleteTransaction,
onFromTranscationClick: handleFromTransactionClick,
}}
- className={'datatable--landed-cost-transactions'}
/>
diff --git a/src/containers/Drawers/BillDrawer/utils.js b/src/containers/Drawers/BillDrawer/utils.js
index 32894150b..5f0febb19 100644
--- a/src/containers/Drawers/BillDrawer/utils.js
+++ b/src/containers/Drawers/BillDrawer/utils.js
@@ -1,7 +1,13 @@
import React from 'react';
import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent, Tag } from '@blueprintjs/core';
-import { FormatNumberCell } from '../../../components';
+import {
+ FormatNumberCell,
+ FormattedMessage as T,
+ Choose,
+} from '../../../components';
/**
* Retrieve bill readonly details entries table columns.
@@ -49,3 +55,44 @@ export const useBillReadonlyEntriesTableColumns = () =>
],
[],
);
+
+/**
+ * Bill details status.
+ * @returns {React.JSX}
+ */
+export function BillDetailsStatus({ bill }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Overdue
+
+
+
+
+ Due
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const StatusTag = styled(Tag)`
+ min-width: 65px;
+ text-align: center;
+`;
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
index 698277a17..93a04fefa 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
@@ -7,7 +7,15 @@ const BillDeleteAlert = React.lazy(() =>
import('containers/Alerts/Bills/BillDeleteAlert'),
);
+const BillLocatedLandedCostDeleteAlert = React.lazy(() =>
+ import('containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert'),
+);
+
export default [
{ name: 'bill-delete', component: BillDeleteAlert },
{ name: 'bill-open', component: BillOpenAlert },
+ {
+ name: 'bill-located-cost-delete',
+ component: BillLocatedLandedCostDeleteAlert,
+ },
];
diff --git a/src/containers/Purchases/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index e9752fe03..289815252 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -57,7 +57,7 @@ export function ActionsMenu({
}
- text={intl.get('mark_as_opened')}
+ text={intl.get('mark_as_open')}
onClick={safeCallback(onOpen, original)}
/>
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index b81c5c8dd..0f1e7f262 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -714,7 +714,6 @@
"mark_as_delivered": "Mark as delivered",
"deliver": "Deliver",
"mark_as_closed": "Mark as closed",
- "mark_as_open": "Mark as open",
"save_close": "Save & Close",
"save_open": "Save & Open",
"close_and_new": "Close and new",
@@ -758,6 +757,7 @@
"inventory_adjustments": "Inventory adjustments",
"make_adjustment": "Make an adjustment",
"adjustment_type": "Adjustment type",
+ "mark_as_open":"Make as Open",
"decrement": "Decrement",
"new_quantity": "New quantity",
"reason": "Reason",
@@ -1219,6 +1219,7 @@
"bill.details.subtotal": "Subtotal",
"bill.details.payment_amount": "Payment amount",
"bill.details.due_amount": "Due amount",
+ "bill.drawer.bill_details":"Bill details ({billNumber})",
"expense.details.subtotal": "Subtotal",
"expense.details.total": "Total",
"manual_journal.details.subtotal": "Subtotal",