chrone: sperate client and server to different repos.

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { DrawerMainTabs } from 'components';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import InvoiceDetailTab from './InvoiceDetailTab';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+
+/**
+ * Invoice view detail.
+ */
+export default function InvoiceDetail() {
+  const { transactions } = useInvoiceDetailDrawerContext();
+
+  return (
+    <div className={clsx(InvoiceDrawerCls.invoice_details)}>
+      <DrawerMainTabs defaultSelectedTabId="details">
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<InvoiceDetailTab />}
+        />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable transactions={transactions} />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -0,0 +1,89 @@
+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 { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+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 { compose } from 'utils';
+
+/**
+ * Invoice details action bar.
+ */
+function InvoiceDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Invoice detail drawer context.
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Handle edit sale invoice.
+  const handleEditInvoice = () => {
+    history.push(`/invoices/${invoiceId}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
+
+  // Handle delete sale invoice.
+  const handleDeleteInvoice = () => {
+    openAlert('invoice-delete', { invoiceId });
+  };
+
+  // Handle print invoices.
+  const handlePrintInvoice = () => {
+    openDialog('invoice-pdf-preview', { invoiceId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_invoice'} />}
+          onClick={handleEditInvoice}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" />}
+          text={<T id={'print'} />}
+          onClick={handlePrintInvoice}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteInvoice}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(InvoiceDetailActionsBar);

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import InvoiceDetail from './InvoiceDetail';
+import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice detail drawer content.
+ */
+export default function InvoiceDetailDrawerContent({
+  // #ownProp
+  invoiceId,
+}) {
+  return (
+    <InvoiceDetailDrawerProvider invoiceId={invoiceId}>
+      <DrawerBody>
+        <InvoiceDetail />
+      </DrawerBody>
+    </InvoiceDetailDrawerProvider>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useTransactionsByReference, useInvoice } from 'hooks/query';
+
+const InvoiceDetailDrawerContext = React.createContext();
+/**
+ * Invoice detail provider.
+ */
+function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: invoiceId,
+      reference_type: 'SaleInvoice',
+    },
+    { enabled: !!invoiceId },
+  );
+
+  // Fetch sale invoice details.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  //provider.
+  const provider = {
+    transactions,
+    invoiceId,
+    invoice,
+  };
+  return (
+    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
+      <DrawerHeaderContent
+        name="invoice-detail-drawer"
+        title={intl.get('invoice_details')}
+      />
+      <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useInvoiceDetailDrawerContext = () =>
+  React.useContext(InvoiceDetailDrawerContext);
+
+export { InvoiceDetailDrawerProvider, useInvoiceDetailDrawerContext };

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, FormatNumber, TotalLine } from 'components';
+import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice details footer.
+ */
+export function InvoiceDetailFooter() {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
+  return (
+    <div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={<T id={'invoice.details.subtotal'} />}
+          value={<FormatNumber value={invoice.balance} />}
+          className={InvoiceDrawerCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.total'} />}
+          value={invoice.formatted_amount}
+          className={InvoiceDrawerCls.total_line_total}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.payment_amount'} />}
+          value={invoice.formatted_payment_amount}
+          className={InvoiceDrawerCls.total_line_payment}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.due_amount'} />}
+          value={invoice.formatted_due_amount}
+          className={InvoiceDrawerCls.total_line_dueAmount}
+        />
+      </TotalLines>
+    </div>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+
+/**
+ * Invoice detail header.
+ */
+export default function InvoiceDetailHeader() {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
+  return (
+    <div className={clsx(InvoiceDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <h3 class="big-number">{invoice.formatted_amount}</h3>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('invoice_no')}
+          children={invoice.invoice_no}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={invoice.customer?.display_name}
+        />
+        <DetailItem
+          label={intl.get('invoice_date')}
+          children={<FormatDate value={invoice.invoice_date} />}
+        />
+        <DetailItem
+          label={intl.get('due_date')}
+          children={<FormatDate value={invoice.due_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('due_amount')}
+          children={invoice.formatted_due_amount}
+        />
+        <DetailItem
+          label={intl.get('reference')}
+          children={defaultTo(invoice.reference_no, '--')}
+        />
+        <DetailItem
+          label={intl.get('invoice.details.created_at')}
+          children={<FormatDate value={invoice.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
+import InvoiceDetailHeader from './InvoiceDetailHeader';
+import InvoiceDetailTable from './InvoiceDetailTable';
+import { InvoiceDetailFooter } from './InvoiceDetailFooter';
+
+import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+
+/**
+ * Invoice readonly details tab panel.
+ */
+export default function InvoiceDetailTab() {
+  return (
+    <div className={clsx(InvoiceDrawerCls.detail_panel)}>
+      <InvoiceDetailActionsBar />
+
+      <Card>
+        <InvoiceDetailHeader />
+        <InvoiceDetailTable />
+        <InvoiceDetailFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+
+import { useInvoiceReadonlyEntriesColumns } from './utils';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
+
+/**
+ * Invoice readonly details entries table columns.
+ */
+export default function InvoiceDetailTable() {
+  const columns = useInvoiceReadonlyEntriesColumns();
+
+  const {
+    invoice: { entries },
+  } = useInvoiceDetailDrawerContext();
+
+  return (
+    <div className={clsx(InvoiceDrawerCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/InvoiceDetailDrawer/index.js

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

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve invoice readonly details table columns.
+ */
+export const useInvoiceReadonlyEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'name',
+        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,
+      },
+    ],
+    [],
+  );