chrone: sperate client and server to different repos.

src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+import { FormattedMessage as T } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';
+
+import withBillsActions from './withBillsActions';
+import withBills from './withBills';
+import { useBillsListContext } from './BillsListProvider';
+import { useRefreshBills } from 'hooks/query/bills';
+import { compose } from 'utils';
+
+/**
+ * Bills actions bar.
+ */
+function BillActionsBar({
+  // #withBillActions
+  setBillsTableState,
+
+  // #withBills
+  billsConditionsRoles,
+}) {
+  const history = useHistory();
+
+  // Bills refresh action.
+  const { refresh } = useRefreshBills();
+
+  // Bills list context.
+  const { billsViews, fields } = useBillsListContext();
+
+  // Handle click a new bill.
+  const handleClickNewBill = () => {
+    history.push('/bills/new');
+  };
+
+  // Handle tab change.
+  const handleTabChange = (view) => {
+    setBillsTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+  // Handle click a refresh bills
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'bills'}
+          views={billsViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_bill'} />}
+          onClick={handleClickNewBill}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: billsConditionsRoles,
+            defaultFieldKey: 'bill_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setBillsTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={billsConditionsRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withBillsActions,
+  withBills(({ billsTableState }) => ({
+    billsConditionsRoles: billsTableState.filterRoles,
+  })),
+)(BillActionsBar);

src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import BillOpenAlert from 'containers/Alerts/Bills/BillOpenAlert';
+import BillDeleteAlert from 'containers/Alerts/Bills/BillDeleteAlert';
+
+export default function BillsAlerts() {
+  return (
+    <div class="bills-alerts">
+      <BillDeleteAlert name={'bill-delete'} />
+      <BillOpenAlert name={'bill-open'} />
+    </div>
+  );
+}

src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'components';
+
+export default function BillsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
+      description={
+        <p>
+          <T id="bill_empty_status_description" />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/bills/new');
+            }}
+          >
+            <T id={'new_bill'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Purchases/Bills/BillsLanding/BillsList.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { DashboardPageContent } from 'components';
+
+import 'style/pages/Bills/List.scss';
+
+import { BillsListProvider } from './BillsListProvider';
+
+import BillsActionsBar from './BillsActionsBar';
+import BillsAlerts from './BillsAlerts';
+import BillsViewsTabs from './BillsViewsTabs';
+import BillsTable from './BillsTable';
+
+import withBills from './withBills';
+import withBillsActions from './withBillsActions';
+
+import { transformTableStateToQuery, compose } from 'utils';
+
+/**
+ * Bills list.
+ */
+function BillsList({
+  // #withBills
+  billsTableState,
+  billsTableStateChanged,
+
+  // #withBillsActions
+  resetBillsTableState,
+}) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      resetBillsTableState();
+    },
+    [resetBillsTableState],
+  );
+
+  return (
+    <BillsListProvider
+      query={transformTableStateToQuery(billsTableState)}
+      tableStateChanged={billsTableStateChanged}
+    >
+      <BillsActionsBar />
+
+      <DashboardPageContent>
+        <BillsViewsTabs />
+        <BillsTable />
+      </DashboardPageContent>
+
+      <BillsAlerts />
+    </BillsListProvider>
+  );
+}
+
+export default compose(
+  withBills(({ billsTableState, billsTableStateChanged }) => ({
+    billsTableState,
+    billsTableStateChanged,
+  })),
+  withBillsActions,
+)(BillsList);

src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js

@@ -0,0 +1,66 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
+
+import { getFieldsFromResourceMeta } from 'utils';
+
+const BillsListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function BillsListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: billsViews, isLoading: isViewsLoading } =
+    useResourceViews('bills');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('bills');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { bills, pagination, filterMeta },
+    isLoading: isBillsLoading,
+    isFetching: isBillsFetching,
+  } = useBills(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(bills) && !isBillsLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    bills,
+    pagination,
+    billsViews,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isBillsLoading,
+    isBillsFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'bills'}
+    >
+      <BillsListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useBillsListContext = () => React.useContext(BillsListContext);
+
+export { BillsListProvider, useBillsListContext };

src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import DataTable from 'components/DataTable';
+
+import { TABLES } from 'common/tables';
+import { DashboardContentTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import BillsEmptyStatus from './BillsEmptyStatus';
+
+import withBills from './withBills';
+import withBillActions from './withBillsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useBillsTableColumns, ActionsMenu } from './components';
+import { useBillsListContext } from './BillsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import { compose } from 'utils';
+
+/**
+ * Bills transactions datatable.
+ */
+function BillsDataTable({
+  // #withBillsActions
+  setBillsTableState,
+
+  // #withBills
+  billsTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDialogActions
+  openDialog,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Bills list context.
+  const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
+    useBillsListContext();
+
+  const history = useHistory();
+
+  // Bills table columns.
+  const columns = useBillsTableColumns();
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setBillsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setBillsTableState],
+  );
+
+  // Handle bill edit action.
+  const handleEditBill = (bill) => {
+    history.push(`/bills/${bill.id}/edit`);
+  };
+
+  // Handle bill delete action.
+  const handleDeleteBill = (bill) => {
+    openAlert('bill-delete', { billId: bill.id });
+  };
+
+  // Handle bill open action.
+  const handleOpenBill = (bill) => {
+    openAlert('bill-open', { billId: bill.id });
+  };
+
+  // Handle quick payment made action.
+  const handleQuickPaymentMade = ({ id }) => {
+    openDialog('quick-payment-made', { billId: id });
+  };
+
+  // handle allocate landed cost.
+  const handleAllocateLandedCost = ({ id }) => {
+    openDialog('allocate-landed-cost', { billId: id });
+  };
+
+  // Handle view detail bill.
+  const handleViewDetailBill = ({ id }) => {
+    openDrawer('bill-drawer', { billId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('bill-drawer', { billId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.BILLS);
+
+  if (isEmptyStatus) {
+    return <BillsEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={bills}
+        loading={isBillsLoading}
+        headerLoading={isBillsLoading}
+        progressBarLoading={isBillsFetching}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onDelete: handleDeleteBill,
+          onEdit: handleEditBill,
+          onOpen: handleOpenBill,
+          onQuick: handleQuickPaymentMade,
+          onAllocateLandedCost: handleAllocateLandedCost,
+          onViewDetails: handleViewDetailBill,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withBills(({ billsTableState }) => ({ billsTableState })),
+  withBillActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+)(BillsDataTable);

src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import { useBillsListContext } from './BillsListProvider';
+import withBillActions from './withBillsActions';
+import withBills from './withBills';
+
+import { compose, transfromViewsToTabs } from 'utils';
+
+/**
+ * Bills view tabs.
+ */
+function BillViewTabs({
+  // #withBillActions
+  setBillsTableState,
+
+  // #withBills
+  billsCurrentView,
+}) {
+  // Bills list context.
+  const { billsViews } = useBillsListContext();
+
+  // Handle tab chaging.
+  const handleTabsChange = (viewSlug) => {
+    setBillsTableState({
+      viewSlug: viewSlug || null,
+    });
+  };
+
+  const tabs = transfromViewsToTabs(billsViews);
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={billsCurrentView}
+          resourceName={'bills'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withBills(({ billsTableState }) => ({
+    billsCurrentView: billsTableState.viewSlug,
+  })),
+)(BillViewTabs);

src/containers/Purchases/Bills/BillsLanding/components.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import {
+  Intent,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Tag,
+  ProgressBar,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Icon,
+  If,
+  Choose,
+  Money,
+} from 'components';
+import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: {
+    onEdit,
+    onOpen,
+    onDelete,
+    onQuick,
+    onViewDetails,
+    onAllocateLandedCost,
+  },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_bill')}
+        onClick={safeCallback(onEdit, original)}
+      />
+
+      <If condition={!original.is_open}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('mark_as_opened')}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
+      <If condition={original.is_open && !original.is_fully_paid}>
+        <MenuItem
+          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          text={intl.get('add_payment')}
+          onClick={safeCallback(onQuick, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon="receipt-24" iconSize={16} />}
+        text={intl.get('allocate_landed_coast')}
+        onClick={safeCallback(onAllocateLandedCost, original)}
+      />
+      <MenuItem
+        text={intl.get('delete_bill')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(bill) {
+  return !isBlank(bill.amount) ? (
+    <Money amount={bill.amount} currency={bill.currency_code} />
+  ) : (
+    ''
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(bill) {
+  return (
+    <div className={'status-accessor'}>
+      <Choose>
+        <Choose.When condition={bill.is_fully_paid && bill.is_open}>
+          <span className={'fully-paid-icon'}>
+            <Icon icon="small-tick" iconSize={18} />
+          </span>
+          <span class="fully-paid-text">
+            <T id={'paid'} />
+          </span>
+        </Choose.When>
+        <Choose.When condition={bill.is_open}>
+          <Choose>
+            <Choose.When condition={bill.is_overdue}>
+              <span className={'overdue-status'}>
+                {intl.get('overdue_by', { overdue: bill.overdue_days })}
+              </span>
+            </Choose.When>
+            <Choose.Otherwise>
+              <span className={'due-status'}>
+                {intl.get('due_in', { due: bill.remaining_days })}
+              </span>
+            </Choose.Otherwise>
+          </Choose>
+          <If condition={bill.is_partially_paid}>
+            <span className="partial-paid">
+              {intl.get('day_partially_paid', {
+                due: formattedAmount(bill.due_amount, bill.currency_code),
+              })}
+            </span>
+            <ProgressBar
+              animate={false}
+              stripes={false}
+              intent={Intent.PRIMARY}
+              value={calculateStatus(bill.payment_amount, bill.amount)}
+            />
+          </If>
+        </Choose.When>
+        <Choose.Otherwise>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+}
+
+/**
+ * Retrieve bills table columns.
+ */
+export function useBillsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('bill_date'),
+        accessor: 'bill_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'bill_date',
+        clickable: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 180,
+        className: 'vendor',
+        clickable: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+        clickable: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 120,
+        className: 'amount',
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'due_date',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Purchases/Bills/BillsLanding/withBills.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  getBillsTableStateFactory,
+  billsTableStateChangedFactory,
+} from 'store/Bills/bills.selectors';
+
+export default (mapState) => {
+  const getBillsTableState = getBillsTableStateFactory();
+  const billsTableStateChanged = billsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      billsTableState: getBillsTableState(state, props),
+      billsTableStateChanged: billsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Purchases/Bills/BillsLanding/withBillsActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setBillsTableState,
+  resetBillsTableState,
+} from 'store/Bills/bills.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+  resetBillsTableState: () => dispatch(resetBillsTableState()),
+});
+
+export default connect(null, mapDispatchToProps);