diff --git a/src/components/TotalLines/TotalLines.module.scss b/src/components/TotalLines/TotalLines.module.scss
deleted file mode 100644
index 5c92246b5..000000000
--- a/src/components/TotalLines/TotalLines.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
- display: flex;
- border-bottom: 1px solid #d2dde2;
-
- :global .amount,
- :global .title{
- padding: 8px;
- }
-}
\ No newline at end of file
diff --git a/src/components/TotalLines/index.js b/src/components/TotalLines/index.js
index 793f70c0d..1b2d88fc6 100644
--- a/src/components/TotalLines/index.js
+++ b/src/components/TotalLines/index.js
@@ -1,23 +1,93 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import TotalLinesCls from './TotalLines.module.scss';
+export const TotalLineBorderStyle = {
+ SingleDark: 'SingleDark',
+ DoubleDark: 'DoubleDark',
+};
-export function TotalLines({ children, className }) {
+export const TotalLineTextStyle = {
+ Regular: 'Regular',
+ Bold: 'Bold',
+};
+
+export function TotalLines({
+ children,
+ amountColWidth,
+ labelColWidth,
+ className,
+}) {
return (
-
+
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
index 713bc1888..738f510dc 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
@@ -5,6 +5,10 @@ import {
DetailItem,
FormatDate,
FormattedMessage as T,
+ Row,
+ Col,
+ CommercialDocTopHeader,
+ CommercialDocHeader,
} from 'components';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -24,40 +28,49 @@ export default function CashflowTransactionDrawerHeader() {
} = useCashflowTransactionDrawerContext();
return (
-
-
- }>
- {formatted_amount}
-
+
+
+
+ }>
+ {formatted_amount}
+
+
+
- }
- >
- {transaction_type}
-
+
+
+
+ }
+ >
+ {transaction_type}
+
- }
- >
- {transaction_number}
-
- }
- children={}
- />
- }>
- {defaultTo(reference_no, '-')}
-
-
+ }
+ >
+ {transaction_number}
+
-
+
}>
+
+
+
+
}>
+ {defaultTo(reference_no, '-')}
+
+
+
+
+
+ {/*
: {defaultTo(description, '—')}
-
-
+
*/}
+
);
}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
index 96b2f7b87..caa496bdf 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { DataTable, If, FormattedMessage as T } from 'components';
+import { CommercialDocEntriesTable } from 'components';
import { useCashflowTransactionColumns } from './utils';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -14,9 +14,5 @@ export default function CashflowTransactionDrawerTable() {
cashflowTransaction: { transactions },
} = useCashflowTransactionDrawerContext();
- return (
-
-
-
- );
+ return ;
}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
index 143abcfd5..bb12bccc3 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
@@ -1,11 +1,15 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+ T,
+ TotalLines,
+ TotalLine,
+ FormatNumber,
+ TotalLineBorderStyle,
+ TotalLineTextStyle,
+} from 'components';
import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
/**
* Credit note details panel footer.
@@ -14,19 +18,25 @@ export default function CreditNoteDetailDrawerFooter() {
const { creditNote } = useCreditNoteDetailDrawerContext();
return (
-
-
+
+
}
value={}
- className={CreditNoteDetailCls.total_line_subtotal}
/>
}
value={creditNote.formatted_amount}
- className={CreditNoteDetailCls.total_line_total}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
-
-
+
+
);
}
+
+export const CreditNoteDetailsFooterRoot = styled.div``;
+
+export const CreditNoteTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
index ce19197db..e29f36c41 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
@@ -4,7 +4,7 @@ import { CommercialDocBox } from 'components';
import CreditNoteDetailHeader from './CreditNoteDetailHeader';
import CreditNoteDetailTable from './CreditNoteDetailTable';
-// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
/**
* Credit note details panel.
@@ -14,7 +14,7 @@ export default function CreditNoteDetailPanel() {
- {/* */}
+
);
}
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
index d473b4bef..cc5b2f01a 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
@@ -1,11 +1,15 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+ T,
+ TotalLines,
+ TotalLine,
+ TotalLineBorderStyle,
+ TotalLineTextStyle,
+ FormatNumber,
+} from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
/**
* Estimate details panel footer content.
@@ -14,27 +18,26 @@ export default function EstimateDetailFooter() {
const { estimate } = useEstimateDetailDrawerContext();
return (
-
-
+
+
}
value={}
- className={EstimateDetailsCls.total_line_subtotal}
+ borderStyle={TotalLineBorderStyle.SingleDark}
/>
}
value={estimate.formatted_amount}
- className={EstimateDetailsCls.total_line_total}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
-
-
-
-
-
-
+
+
);
}
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
index 97eec5a7f..65093a190 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
@@ -8,15 +8,17 @@ import {
Intent,
NavbarDivider,
} from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
+
import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import { compose } from 'utils';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { compose } from 'utils';
+
/**
* Expense drawer action bar.
*/
@@ -28,6 +30,8 @@ function ExpenseDrawerActionBar({
closeDrawer,
}) {
const history = useHistory();
+
+ // Expense drawer context.
const { expense } = useExpenseDrawerContext();
// Handle the expense edit action.
@@ -42,7 +46,7 @@ function ExpenseDrawerActionBar({
};
return (
-
+
-
+
);
}
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
index 810533ade..5a5795a1a 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
@@ -2,8 +2,6 @@ import React from 'react';
import { DrawerBody } from 'components';
-import 'style/components/Drawers/ExpenseDrawer.scss';
-
import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
import ExpenseDrawerDetails from './ExpenseDrawerDetails';
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
index 859d4c96d..c6e6b13e2 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
@@ -1,4 +1,5 @@
import React from 'react';
+import styled from 'styled-components';
import { Card } from 'components';
@@ -12,7 +13,7 @@ import ExpenseDrawerFooter from './ExpenseDrawerFooter';
*/
export default function ExpenseDrawerDetails() {
return (
-
+
@@ -22,6 +23,8 @@ export default function ExpenseDrawerDetails() {
-
+
);
}
+
+const ExpenseDetailsRoot = styled.div``;
\ No newline at end of file
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index 8fddabe15..45a317ac6 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
@@ -2,7 +2,7 @@ import React from 'react';
import moment from 'moment';
import { defaultTo } from 'lodash';
-import { DetailItem, DetailsMenu, Money } from 'components';
+import { Row, Col, DetailItem, DetailsMenu, Money } from 'components';
import { FormattedMessage as T } from 'components';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
@@ -29,30 +29,38 @@ export default function ExpenseDrawerHeader() {
-
- }>
- {moment(payment_date).format('YYYY MMM DD')}
-
-
- }>
- {currency_code}
-
-
- }>
- {defaultTo(reference_no, '-')}
-
-
- }>
- {moment(published_at).format('YYYY MMM DD')}
-
-
- }>
- {defaultTo(description, '—')}
-
- }>2021 Aug 24
-
+
+
+
+ }>
+ {moment(payment_date).format('YYYY MMM DD')}
+
+
+ }>
+ {currency_code}
+
+
+ }>
+ {defaultTo(reference_no, '-')}
+
+
+ }>
+ {moment(published_at).format('YYYY MMM DD')}
+
+
+
+
+
+
+ }>
+ {defaultTo(description, '—')}
+
+ }>2021 Aug 24
+
+
+
);
}
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
index 8a46ef316..54b171f5c 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
@@ -1,18 +1,27 @@
import React from 'react';
-import { DataTable } from 'components';
+
+import { CommercialDocEntriesTable } from 'components';
+
import { useExpenseReadEntriesColumns } from './utils';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { TableStyle } from '../../../common';
+
/**
* Expense details table.
*/
export default function ExpenseDrawerTable() {
+ // Expense readonly entries columns.
const columns = useExpenseReadEntriesColumns();
+
+ // Expense drawer context.
const { expense } = useExpenseDrawerContext();
return (
-
-
-
+
);
}
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
index 9c7e6b6c6..d9bf4b236 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
@@ -1,5 +1,5 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
import { Card } from 'components';
@@ -7,20 +7,20 @@ import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActi
import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
-
/**
* Inventory adjustment detail
*/
export default function InventoryAdjustmentDetail() {
return (
-
+
-
+
);
}
+
+const InventoryAdjustmentDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
index a2fac2adb..160af535c 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
@@ -1,13 +1,11 @@
import React from 'react';
-
import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
import {
InventoryAdjustmentAction,
AbilitySubject,
@@ -34,7 +32,7 @@ function InventoryAdjustmentDetailActionsBar({
I={InventoryAdjustmentAction.Delete}
a={AbilitySubject.InventoryAdjustment}
>
-
+
-
+
);
}
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
index 91e23344d..d807d9f09 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
@@ -14,43 +14,37 @@ import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdju
* Inventory detail header.
*/
export default function InventoryAdjustmentDetailHeader() {
- const {
- inventoryAdjustment: {
- date,
- type,
- adjustment_account,
- inventory_direction,
- description,
- reference_no,
- reason,
- published_at,
- created_at,
- },
- } = useInventoryAdjustmentDrawerContext();
+ const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
return (
-
+
- {moment(date).format('YYYY MMM DD')}
+ {moment(inventoryAdjustment.date).format('YYYY MMM DD')}
- {type}
+
+
+ {inventoryAdjustment.type}
+
+
- {adjustment_account.name}
+ {inventoryAdjustment.adjustment_account.name}
+
- {defaultTo(reference_no, '-')}
+ {defaultTo(inventoryAdjustment.reference_no, '-')}
+
- {moment(published_at).format('YYYY MMM DD')}
+ {moment(inventoryAdjustment.published_at).format('YYYY MMM DD')}
-
-
+
- {defaultTo(reason, '—')}
+ {defaultTo(inventoryAdjustment.reason, '—')}
+
- {moment(created_at).format('YYYY MMM DD')}
+ {moment(inventoryAdjustment.created_at).format('YYYY MMM DD')}
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
index 45b72d638..d52d856ff 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
@@ -1,30 +1,24 @@
import React from 'react';
-import clsx from 'classnames';
-
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
import { useInventoryAdjustmentEntriesColumns } from './utils';
import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
-
/**
* Inventory adjustment detail entries table.
*/
export default function InventoryAdjustmentDetailTable() {
+ // Inventory adjustment entries columns.
const columns = useInventoryAdjustmentEntriesColumns();
- const {
- inventoryAdjustment: { entries },
- } = useInventoryAdjustmentDrawerContext();
+ // Inventory adjustment details drawer context.
+ const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
return (
-
-
-
+
);
}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
index a0cf545cc..2243d1b26 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
@@ -1,7 +1,14 @@
import React from 'react';
import styled from 'styled-components';
-import { T, TotalLines, FormatNumber, TotalLine } from 'components';
+import {
+ T,
+ TotalLines,
+ FormatNumber,
+ TotalLine,
+ TotalLineBorderStyle,
+ TotalLineTextStyle,
+} from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
@@ -12,54 +19,34 @@ export function InvoiceDetailFooter() {
return (
-
-
+ }
value={}
+ borderStyle={TotalLineBorderStyle.SingleDark}
/>
- }
value={invoice.formatted_amount}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
}
value={invoice.formatted_payment_amount}
/>
- }
value={invoice.formatted_due_amount}
+ textStyle={TotalLineTextStyle.Bold}
/>
-
+
);
}
-const SubTotalLine = styled(TotalLine)`
- border-bottom: 1px solid #000;
-`;
+const InvoiceDetailsFooterRoot = styled.div``;
-const InvoiceTotalLine = styled(TotalLine)`
- border-bottom: 3px double #000;
- font-weight: 600;
-`;
-
-const DueAmountLine = styled(TotalLine)`
- font-weight: 600;
-`;
-
-const InvoiceDetailsFooterRoot = styled.div`
- display: flex;
-
- .total_lines {
- margin-left: auto;
- }
- .total_lines_line {
- .amount,
- .title {
- width: 180px;
- }
- .amount {
- text-align: right;
- }
- }
+const InvoiceTotalLines = styled(TotalLines)`
+ margin-left: auto;
`;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
index 9b6737ee8..6fabdf886 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
@@ -11,6 +11,7 @@ import { TableStyle } from '../../../common';
* Invoice readonly details entries table columns.
*/
export default function InvoiceDetailTable() {
+ // Invoice readonly entries table columns.
const columns = useInvoiceReadonlyEntriesColumns();
// Invoice details drawer context.
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
index 007edf042..a4d435107 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
@@ -8,9 +8,8 @@ import {
Intent,
NavbarDivider,
} from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -47,7 +46,7 @@ function ManualJournalDrawerActionBar({
};
return (
-
+
-
+
);
}
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
index 67794ea93..7ebad798a 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
@@ -1,4 +1,5 @@
import React from 'react';
+import styled from 'styled-components';
import { Card } from 'components';
@@ -7,17 +8,13 @@ import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
import ManualJournalDrawerTable from './ManualJournalDrawerTable';
import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
-import { useManualJournalDrawerContext } from 'containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider';
-
/**
* Manual journal view details.
*/
export default function ManualJournalDrawerDetails() {
- const { manualJournal } = useManualJournalDrawerContext();
-
return (
-
-
+
+
@@ -26,6 +23,9 @@ export default function ManualJournalDrawerDetails() {
-
+
);
}
+
+
+const ManualJournalDetailsRoot = styled.div``;
\ No newline at end of file
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
index e9b4315f7..209133387 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
@@ -1,6 +1,12 @@
import React from 'react';
import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import {
+ Row,
+ Col,
+ DetailsMenu,
+ DetailItem,
+ FormattedMessage as T,
+} from 'components';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
/**
@@ -22,26 +28,32 @@ export default function ManualJournalDrawerHeader() {
}>
- {formatted_amount}
-
-
- }>
- {journal_type}
-
-
- }>
- {journal_number}
-
-
- }>
- {defaultTo(reference, '-')}
-
-
- }>
- {currency_code}
+ {formatted_amount}
+
+
+
+ }>
+ {journal_type}
+
+
+ }>
+ {journal_number}
+
+
+ }>
+ {defaultTo(reference, '-')}
+
+
+ }>
+ {currency_code}
+
+
+
+
+
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
index 5ae255d15..19bada867 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
@@ -1,27 +1,23 @@
import React from 'react';
-import { DataTable, If } from 'components';
+import { CommercialDocEntriesTable } from 'components';
import { useManualJournalEntriesColumns } from './utils';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import { TableStyle } from '../../../common';
+
/**
* Manual journal drawer table.
*/
export default function ManualJournalDrawerTable() {
const columns = useManualJournalEntriesColumns();
- const {
- manualJournal: { entries, description },
- } = useManualJournalDrawerContext();
+ const { manualJournal } = useManualJournalDrawerContext();
return (
-
-
-
-
-
- Description: {description}
-
-
-
+
);
}
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
index 88bf62cad..45876042b 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
@@ -1,31 +1,46 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { FormatNumber, T, TotalLine, TotalLines } from 'components';
+import {
+ FormatNumber,
+ TotalLineTextStyle,
+ TotalLineBorderStyle,
+ T,
+ TotalLine,
+ TotalLines,
+} from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
-import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
-
/**
* Payment receive detail footer.
+ * @returns {React.JSX}
*/
export default function PaymentReceiveDetailFooter() {
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
-
-
+
+
}
value={}
- className={PaymentDrawerCls.total_line_subtotal}
/>
}
value={paymentReceive.formatted_amount}
- className={PaymentDrawerCls.total_line_total}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
-
-
+
+
);
}
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
index 564bf5e42..a9105e610 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
@@ -46,8 +46,7 @@
border-bottom: 1px solid #000;
}
&_total {
- border-bottom: 3px double #000;
- font-weight: 600;
+
}
}
}
\ No newline at end of file
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index b66d086f9..4d78f8d74 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -59,11 +59,11 @@ function ReceiptDetailActionBar({
const onPrintReceipt = () => {
openDialog('receipt-pdf-preview', { receiptId });
};
-
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-receipt-via-sms', { receiptId });
};
+
return (
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
index 29fc0d98d..88d384b77 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
@@ -1,8 +1,6 @@
import React from 'react';
import { DrawerBody } from 'components';
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
import ReceiptDetail from './ReceiptDetail';
import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
index 0a1f95d79..d721337af 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
@@ -1,13 +1,16 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { T, TotalLines, TotalLine } from 'components';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import {
+ T,
+ TotalLines,
+ TotalLine,
+ TotalLineBorderStyle,
+ TotalLineTextStyle,
+ FormatNumber,
+} from 'components';
import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
/**
* Receipts read-only details footer.
*/
@@ -15,29 +18,34 @@ export function ReceiptDetailFooter() {
const { receipt } = useReceiptDetailDrawerContext();
return (
-
-
+
+
}
value={}
- className={ReceiptDrawerCls.total_line_subtotal}
/>
}
value={receipt.formatted_amount}
- className={ReceiptDrawerCls.total_line_total}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
}
value={receipt.formatted_amount}
- className={ReceiptDrawerCls.total_line_payment}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
/>
}
value={'0'}
- className={ReceiptDrawerCls.total_line_dueAmount}
/>
-
-
+
+
);
}
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
index 6e0579c0b..e2e601b44 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
@@ -1,12 +1,16 @@
import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+ T,
+ TotalLines,
+ TotalLine,
+ TotalLineBorderStyle,
+ TotalLineTextStyle,
+} from 'components';
import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
import { FormatNumber } from '../../../components';
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
-
/**
* Vendor Credit detail panel footer.
*/
@@ -14,19 +18,26 @@ export default function VendorCreditDetailDrawerFooter() {
const { vendorCredit } = useVendorCreditDetailDrawerContext();
return (
-
-
+
+
}
value={}
- className={VendorCreditDetailCls.total_line_subtotal}
+ borderStyle={TotalLineBorderStyle.SingleDark}
/>
}
value={vendorCredit.formatted_amount}
- className={VendorCreditDetailCls.total_line_total}
+ borderStyle={TotalLineBorderStyle.DoubleDark}
+ textStyle={TotalLineTextStyle.Bold}
/>
-
-
+
+
);
}
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+ margin-left: auto;
+`;
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
index 92b371cc6..f158d0fff 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
@@ -6,12 +6,16 @@ import VendorCreditDetailHeader from './VendorCreditDetailHeader';
import VendorCreditDetailTable from './VendorCreditDetailTable';
import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+/**
+ * Vendor credit details panel.
+ * @returns {React.JSX}
+ */
export default function VendorCreditDetailPanel() {
return (
- {/* */}
+
);
}
diff --git a/src/containers/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index 14f77d23b..fa4dfd11a 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -110,11 +110,11 @@ export function TotalAmountAccessor(row) {
*/
export function PublishAccessor(row) {
return row.is_published ? (
-
+
) : (
-
+
);
diff --git a/src/containers/InventoryAdjustments/components.js b/src/containers/InventoryAdjustments/components.js
index 49e74316f..c42409926 100644
--- a/src/containers/InventoryAdjustments/components.js
+++ b/src/containers/InventoryAdjustments/components.js
@@ -26,11 +26,11 @@ import {
*/
export const PublishAccessor = (r) => {
return r.is_published ? (
-
+
) : (
-
+
);
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
index 75b7921df..5335c2adc 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -4,8 +4,6 @@ import styled from 'styled-components';
import { castArray } from 'lodash';
import { FastField, useFormikContext } from 'formik';
-import { whenRtl, whenLtr } from 'utils/styled-components';
-import { Icon, Hint, If, Choose } from 'components';
import { useRolesFormContext } from './RolesFormProvider';
const RoleLabelCheckbox = ({ subject, label, description }) => (
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 8a063e69d..2f5570c46 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -21,6 +21,10 @@ import {
AbilitySubject,
} from '../../../../common/abilityOption';
+/**
+ * Receipts table row actions menu.
+ * @returns {React.JSX}
+ */
export function ActionsMenu({
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
row: { original: receipt },
@@ -88,13 +92,13 @@ export function StatusAccessor(receipt) {
return (
-
+
-
+
diff --git a/src/containers/TransactionsLocking/components.js b/src/containers/TransactionsLocking/components.js
index e87026981..d0285ce48 100644
--- a/src/containers/TransactionsLocking/components.js
+++ b/src/containers/TransactionsLocking/components.js
@@ -328,7 +328,7 @@ const TransactionLockingWrapp = styled.div`
display: flex;
align-items: center;
border-radius: 6px;
- border: 1px solid #d1dee2;
+ border: 1px solid #c4d2d7;
padding: 16px 18px;
margin-bottom: 25px;
background: #fff;
diff --git a/src/style/components/Drawers/EstimateDetails.module.scss b/src/style/components/Drawers/EstimateDetails.module.scss
index 862a42e72..86ef8d448 100644
--- a/src/style/components/Drawers/EstimateDetails.module.scss
+++ b/src/style/components/Drawers/EstimateDetails.module.scss
@@ -49,15 +49,14 @@
.total_line{
&_subtotal {
- border-bottom: 1px solid #000;
+
}
&_total {
- border-bottom: 3px double #000;
- font-weight: 600;
+
}
&_dueAmount {
- font-weight: 600;
+
}
}
diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
index 9624e7d53..ad61859e8 100644
--- a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
+++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
@@ -27,39 +27,7 @@
}
}
.bigcapital-datatable {
- .table {
- border: 1px solid #d1dee2;
- min-width: auto;
-
- .tbody,
- .tbody-inner {
- height: auto;
- scrollbar-width: none;
- &::-webkit-scrollbar {
- display: none;
- }
- }
- .tbody {
- .tr .td {
- padding: 0.4rem;
- margin-left: -1px;
- border-left: 1px solid #ececec;
- }
-
- .bp3-form-group {
- margin-bottom: 0;
-
- &:not(.bp3-intent-danger) .bp3-input {
- border: 1px solid #d0dfe2;
-
- &:focus {
- box-shadow: 0 0 0 1px #116cd0;
- border-color: #116cd0;
- }
- }
- }
- }
- }
+
}
.credit-remaining {