chrone: sperate client and server to different repos.

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { safeCallback, compose } from 'utils';
+
+function BillDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const { billId } = useBillDrawerContext();
+
+  // Handle edit bill.
+  const onEditBill = () => {
+    history.push(`/bills/${billId}/edit`);
+    closeDrawer('bill-drawer');
+  };
+
+  // Handle delete bill.
+  const onDeleteBill = () => {
+    openAlert('bill-delete', { billId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_bill'} />}
+          onClick={safeCallback(onEditBill)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteBill)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(BillDetailActionsBar);

src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+
+/**
+ * Bill read-only details footer.
+ */
+export function BillDetailFooter() {
+  const { bill } = useBillDrawerContext();
+
+  return (
+    <div className={clsx(BillDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={<T id={'bill.details.subtotal'} />}
+          value={<FormatNumber value={bill.amount} />}
+          className={BillDrawerCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'bill.details.total'} />}
+          value={bill.formatted_amount}
+          className={BillDrawerCls.total_line_total}
+        />
+        <TotalLine
+          title={<T id={'bill.details.payment_amount'} />}
+          value={bill.formatted_payment_amount}
+          className={BillDrawerCls.total_line_payment}
+        />
+        <TotalLine
+          title={<T id={'bill.details.due_amount'} />}
+          value={bill.formatted_due_amount}
+          className={BillDrawerCls.total_line_dueAmount}
+        />
+      </TotalLines>
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
+
+import { useBillDrawerContext } from './BillDrawerProvider';
+import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+
+/**
+ * Bill detail header.
+ */
+export default function BillDetailHeader() {
+  const { bill } = useBillDrawerContext();
+
+  return (
+    <div className={clsx(BillDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem
+          label={intl.get('amount')}
+          children={<h3 class="big-number">{bill.formatted_amount}</h3>}
+        />
+        <DetailItem
+          label={intl.get('bill.details.bill_number')}
+          children={defaultTo(bill.bill_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('bill_date')}
+          children={<FormatDate value={bill.bill_date} />}
+        />
+        <DetailItem
+          label={intl.get('vendor_name')}
+          children={bill.vendor?.display_name}
+        />
+        <DetailItem
+          label={intl.get('due_date')}
+          children={<FormatDate value={bill.due_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('due_amount')}
+          children={bill.formatted_due_amount}
+        />
+        <DetailItem
+          label={intl.get('reference')}
+          children={defaultTo(bill.reference_no, '--')}
+        />
+        <DetailItem
+          label={intl.get('bill.details.created_at')}
+          children={<FormatDate value={bill.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDetailTab.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } 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';
+
+
+/**
+ * Bill detail panel tab.
+ */
+export default function BillDetailTab() {
+  return (
+    <div className={clsx(BillDrawerCls.detail_panel)}>
+      <BillDetailActionsBar />
+
+      <Card>
+        <BillDetailHeader />
+        <BillDetailTable />
+        <BillDetailFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDetailTable.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+
+import { useBillDrawerContext } from './BillDrawerProvider';
+import { useBillReadonlyEntriesTableColumns } from './utils';
+
+import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+
+export default function BillDetailTable() {
+  const { bill: { entries } } = useBillDrawerContext();
+
+  // Retrieve bill readonly entries table columns.
+  const columns = useBillReadonlyEntriesTableColumns();
+
+  return (
+    <div className={clsx(BillDrawerCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDrawerAlerts.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import BillLocatedLandedCostDeleteAlert from 'containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert';
+
+/**
+ * Bill drawer alert.
+ */
+export default function BillDrawerAlerts() {
+  return (
+    <div class="bills-alerts">
+      <BillLocatedLandedCostDeleteAlert name="bill-located-cost-delete" />
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDrawerContent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import { BillDrawerProvider } from './BillDrawerProvider';
+import BillDrawerDetails from './BillDrawerDetails';
+// import BillDrawerAlerts from './BillDrawerAlerts';
+
+/**
+ * Bill drawer content.
+ */
+export default function BillDrawerContent({
+  // #ownProp
+  billId,
+}) {
+  return (
+    <BillDrawerProvider billId={billId}>
+      <DrawerBody>
+        <BillDrawerDetails />
+      </DrawerBody>
+    </BillDrawerProvider>
+  );
+}

src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { DrawerMainTabs } from 'components';
+
+import BillDetailTab from './BillDetailTab';
+import LocatedLandedCostTable from './LocatedLandedCostTable';
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
+
+/**
+ * Bill view details.
+ */
+export default function BillDrawerDetails() {
+  const {
+    data: { transactions },
+  } = useBillDrawerContext();
+
+  return (
+    <div className={clsx(BillDrawerCls.root)}>
+      <DrawerMainTabs defaultSelectedTabId="details">
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<BillDetailTab />}
+        />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable transactions={transactions} />}
+        />
+        <Tab
+          title={intl.get('located_landed_cost')}
+          id={'landed_cost'}
+          panel={<LocatedLandedCostTable />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import {
+  useBill,
+  useTransactionsByReference,
+  useBillLocatedLandedCost,
+} from 'hooks/query';
+
+const BillDrawerContext = React.createContext();
+
+/**
+ * Bill drawer provider.
+ */
+function BillDrawerProvider({ billId, ...props }) {
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    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, {
+      enabled: !!billId,
+    });
+
+  //provider.
+  const provider = {
+    transactions,
+    billId,
+    data,
+    bill,
+  };
+
+  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
+
+  return (
+    <DrawerLoading loading={loading}>
+      <DrawerHeaderContent
+        name="bill-drawer"
+        title={intl.get('bill_details')}
+      />
+      <BillDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useBillDrawerContext = () => React.useContext(BillDrawerContext);
+
+export { BillDrawerProvider, useBillDrawerContext };

src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
+
+import { useLocatedLandedCostColumns, ActionsMenu } from './components';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import Icon from 'components/Icon';
+
+/**
+ * Located landed cost table.
+ */
+function LocatedLandedCostTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDialogActions
+  openDialog,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  const columns = useLocatedLandedCostColumns();
+  const { transactions, billId } = useBillDrawerContext();
+
+  // Handle the transaction delete action.
+  const handleDeleteTransaction = ({ id }) => {
+    openAlert('bill-located-cost-delete', { BillId: id });
+  };
+
+  // Handle allocate landed cost button click.
+  const handleAllocateCostClick = () => {
+    openDialog('allocate-landed-cost', { billId });
+  };
+
+  // Handle from transaction link click.
+  const handleFromTransactionClick = (original) => {
+    const { from_transaction_type, from_transaction_id } = original;
+
+    switch (from_transaction_type) {
+      case 'Expense':
+        openDrawer('expense-drawer', { expenseId: from_transaction_id });
+        break;
+
+      case 'Bill':
+      default:
+        openDrawer('bill-drawer', { billId: from_transaction_id });
+        break;
+    }
+  };
+
+  return (
+    <div>
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="receipt-24" />}
+            text={'Allocate landed cost'}
+            onClick={handleAllocateCostClick}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+
+      <Card>
+        <DataTable
+          columns={columns}
+          data={transactions}
+          ContextMenu={ActionsMenu}
+          payload={{
+            onDelete: handleDeleteTransaction,
+            onFromTranscationClick: handleFromTransactionClick,
+          }}
+          className={'datatable--landed-cost-transactions'}
+        />
+      </Card>
+    </div>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withDrawerActions,
+)(LocatedLandedCostTable);

src/containers/Drawers/BillDrawer/components.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+import { Icon } from 'components';
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ row: { original }, payload: { onDelete } }) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * From transaction table cell.
+ */
+export function FromTransactionCell({
+  row: { original },
+  payload: { onFromTranscationClick }
+}) {
+  // Handle the link click
+  const handleAnchorClick = () => {
+    onFromTranscationClick && onFromTranscationClick(original);
+  };
+
+  return (
+    <a href="#" onClick={handleAnchorClick}>
+      {original.from_transaction_type} → {original.from_transaction_id}
+    </a>
+  );
+}
+
+/**
+ * Retrieve bill located landed cost table columns.
+ */
+export function useLocatedLandedCostColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('name'),
+        accessor: 'description',
+        width: 150,
+        className: 'name',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 100,
+        className: 'amount',
+      },
+      {
+        id: 'from_transaction',
+        Header: intl.get('From transaction'),
+        Cell: FromTransactionCell,
+        width: 100,
+        className: 'from-transaction',
+      },
+      {
+        Header: intl.get('allocation_method'),
+        accessor: 'allocation_method_formatted',
+        width: 100,
+        className: 'allocation-method',
+      },
+    ],
+    [],
+  );
+}

src/containers/Drawers/BillDrawer/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const BillDrawerContent = React.lazy(() => import('./BillDrawerContent'));
+
+/**
+ * Bill drawer.
+ */
+function BillDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { billId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <BillDrawerContent billId={billId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(BillDrawer);

src/containers/Drawers/BillDrawer/utils.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve bill readonly details entries table columns.
+ */
+export const useBillReadonlyEntriesTableColumns = () =>
+React.useMemo(
+  () => [
+    {
+      Header: intl.get('product_and_service'),
+      accessor: 'item.name',
+      width: 150,
+      className: 'item',
+      disableSortBy: true
+    },
+    {
+      Header: intl.get('description'),
+      accessor: 'description',
+      className: 'description',
+      disableSortBy: true
+    },
+    {
+      Header: intl.get('quantity'),
+      accessor: 'quantity',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true
+    },
+    {
+      Header: intl.get('rate'),
+      accessor: 'rate',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true
+    },
+    {
+      Header: intl.get('amount'),
+      accessor: 'amount',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true
+    },
+  ],
+  [],
+);