feat: bill detail.

client/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -0,0 +1,77 @@
+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 = () => {
+    return billId
+      ? (history.push(`/bills/${billId}/edit`), closeDrawer('bill-drawer'))
+      : null;
+  };
+
+  // Handle delete bill.
+  const onDeleteBill = () => {
+    return billId
+      ? (openAlert('bill-delete', { billId }), closeDrawer('bill-drawer'))
+      : null;
+  };
+
+  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);

client/src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable, Card, DetailsMenu, DetailItem } from 'components';
+
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+/**
+ * Bill detail header.
+ */
+export default function BillDetailHeader() {
+  const {
+    bill: {
+      vendor,
+      bill_number,
+      formatted_amount,
+      formatted_bill_date,
+      formatted_due_amount,
+      formatted_due_date,
+      formatted_payment_amount,
+    },
+  } = useBillDrawerContext();
+
+  return (
+    <DetailsMenu>
+      <Card>
+        <div className="details-menu--vertical">
+          <DetailItem label={intl.get('amount')}>{formatted_amount}</DetailItem>
+          <DetailItem label={intl.get('bill_number')}>{bill_number}</DetailItem>
+          <DetailItem label={intl.get('bill_date')}>
+            {formatted_bill_date}
+          </DetailItem>
+          <DetailItem label={intl.get('vendor_name')}>
+            {vendor?.display_name}
+          </DetailItem>
+          <DetailItem label={intl.get('due_amount')}>
+            {formatted_due_amount}
+          </DetailItem>
+          <DetailItem label={intl.get('due_date')}>
+            {formatted_due_date}
+          </DetailItem>
+        </div>
+      </Card>
+    </DetailsMenu>
+  );
+}

client/src/containers/Drawers/BillDrawer/BillDetailTab.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import BillDetailActionsBar from './BillDetailActionsBar';
+import BillDetailHeader from './BillDetailHeader';
+import BillDetailTable from './BillDetailTable';
+
+export default function BillDetailTab() {
+  return (
+    <div>
+      <BillDetailActionsBar />
+      <BillDetailHeader />
+      <BillDetailTable />
+    </div>
+  );
+}

client/src/containers/Drawers/BillDrawer/BillDetailTable.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import intl from 'react-intl-universal';
+
+import { DataTable, Card } from 'components';
+
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+export default function BillDetailTable() {
+  const {
+    bill: { entries },
+  } = useBillDrawerContext();
+
+  const columns = React.useMemo(() => [
+    {
+      Header: intl.get('product_and_service'),
+      accessor: 'item.name',
+      width: 150,
+    },
+    {
+      Header: intl.get('description'),
+      accessor: 'description',
+    },
+    {
+      Header: intl.get('quantity'),
+      accessor: 'quantity',
+      width: 100,
+    },
+    {
+      Header: intl.get('rate'),
+      accessor: 'rate',
+      width: 100,
+    },
+    {
+      Header: intl.get('amount'),
+      accessor: 'amount',
+      width: 100,
+    },
+  ]);
+
+  return (
+    <Card>
+      <DataTable columns={columns} data={entries} />
+    </Card>
+  );
+}

client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { useBillDrawerContext } from './BillDrawerProvider';
@@ -17,7 +18,11 @@ export default function BillDrawerDetails() {
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
-        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<BillDetailTab />}
+        />
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
@@ -32,5 +37,3 @@ export default function BillDrawerDetails() {
     </div>
   );
 }
-
-// 42 / fon-w 600

client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
-import { useBillLocatedLandedCost } from 'hooks/query';
+import {
-import { useTransactionsByReference } from 'hooks/query';
+  useBill,
+  useTransactionsByReference,
+  useBillLocatedLandedCost,
+} from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
 
@@ -10,7 +13,11 @@ 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(
     {
@@ -31,10 +38,13 @@ function BillDrawerProvider({ billId, ...props }) {
     transactions,
     billId,
     data,
+    bill,
   };
 
   return (
-    <DashboardInsider loading={isLandedCostLoading || isTransactionLoading}>
+    <DashboardInsider
+      loading={isLandedCostLoading || isTransactionLoading || isBillLoading}
+    >
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}