re-structure to monorepo.

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React, { useEffect, useState, useCallback } from 'react';
+import moment from 'moment';
+
+import { DashboardPageContent } from '@/components';
+import InventoryValuationActionsBar from './InventoryValuationActionsBar';
+import InventoryValuationHeader from './InventoryValuationHeader';
+
+import { InventoryValuationProvider } from './InventoryValuationProvider';
+import { InventoryValuationBody } from './InventoryValuationBody';
+import { InventoryValuationLoadingBar } from './components';
+import { useInventoryValuationQuery } from './utils';
+import { compose } from '@/utils';
+
+import withInventoryValuationActions from './withInventoryValuationActions';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Inventory valuation.
+ */
+function InventoryValuation({
+  // #withInventoryValuationActions
+  toggleInventoryValuationFilterDrawer,
+}) {
+  const { query, setLocationQuery } = useInventoryValuationQuery();
+
+  // Handle filter form submit.
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const newFilter = {
+        ...filter,
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+      };
+      setLocationQuery(newFilter);
+    },
+    [setLocationQuery],
+  );
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setLocationQuery({
+      ...query,
+      numberFormat,
+    });
+  };
+  // Hide the filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleInventoryValuationFilterDrawer(false);
+    },
+    [toggleInventoryValuationFilterDrawer],
+  );
+
+  return (
+    <InventoryValuationProvider query={query}>
+      <InventoryValuationActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <InventoryValuationLoadingBar />
+
+      <DashboardPageContent>
+        <InventoryValuationHeader
+          pageFilter={query}
+          onSubmitFilter={handleFilterSubmit}
+        />
+        <InventoryValuationBody />
+      </DashboardPageContent>
+    </InventoryValuationProvider>
+  );
+}
+
+export default compose(
+  withInventoryValuationActions,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(InventoryValuation);

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { DashboardActionsBar, Icon, FormattedMessage as T } from '@/components';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import withInventoryValuation from './withInventoryValuation';
+import withInventoryValuationActions from './withInventoryValuationActions';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
+
+import { compose, saveInvoke } from '@/utils';
+
+function InventoryValuationActionsBar({
+  // #withInventoryValuation
+  isFilterDrawerOpen,
+
+  // #withInventoryValuationActions
+  toggleInventoryValuationFilterDrawer,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { refetchSheet, isLoading } = useInventoryValuationContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleInventoryValuationFilterDrawer();
+  };
+
+  // Handle re-calc button click.
+  const handleRecalculateReport = () => {
+    refetchSheet();
+  };
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    saveInvoke(onNumberFormatSubmit, numberFormat);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalculateReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            isFilterDrawerOpen ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withInventoryValuation(({ inventoryValuationDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryValuationDrawerFilter,
+  })),
+  withInventoryValuationActions,
+)(InventoryValuationActionsBar);

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import InventoryValuationTable from './InventoryValuationTable';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Inventory valuation body.
+ * @returns {JSX.Element}
+ */
+function InventoryValuationBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useInventoryValuationContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <InventoryValuationTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const InventoryValuationBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(InventoryValuationBodyJSX);

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import * as Yup from 'yup';
+import moment from 'moment';
+import styled from 'styled-components';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from '@/components';
+
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
+import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel';
+import InventoryValuationHeaderDimensionsPanel from './InventoryValuationHeaderDimensionsPanel';
+import withInventoryValuation from './withInventoryValuation';
+import withInventoryValuationActions from './withInventoryValuationActions';
+
+import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * inventory valuation header.
+ */
+function InventoryValuationHeader({
+  // #ownProps
+  pageFilter,
+  onSubmitFilter,
+
+  // #withInventoryValuation
+  isFilterDrawerOpen,
+
+  // #withInventoryValuationActions
+  toggleInventoryValuationFilterDrawer,
+}) {
+  // Form validation schema.
+  const validationSchema = Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+  });
+
+  // Default values.
+  const defaultValues = {
+    ...pageFilter,
+    asDate: moment().toDate(),
+    itemsIds: [],
+    warehousesIds: [],
+  };
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
+
+  // Handle the form of header submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleInventoryValuationFilterDrawer(false);
+    setSubmitting(false);
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleInventoryValuationFilterDrawer(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleInventoryValuationFilterDrawer(false);
+  };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
+
+  return (
+    <InventoryValuationDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<InventoryValuationHeaderGeneralPanel />}
+            />
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<InventoryValuationHeaderDimensionsPanel />}
+              />
+            )}
+          </Tabs>
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleCancelClick} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </InventoryValuationDrawerHeader>
+  );
+}
+
+export default compose(
+  withInventoryValuation(({ inventoryValuationDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryValuationDrawerFilter,
+  })),
+  withInventoryValuationActions,
+)(InventoryValuationHeader);
+
+const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import {
+  BranchMultiSelect,
+  WarehouseMultiSelect,
+  Row,
+  Col,
+} from '@/components';
+import {
+  InventoryValuationHeaderDimensionsProvider,
+  useInventoryValuationHeaderDimensionsPanelContext,
+} from './InventoryValuationHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Inventory Valuation header dismension panel.
+ * @returns {JSX.Element}
+ */
+export default function InventoryValuationHeaderDimensionsPanel() {
+  return (
+    <InventoryValuationHeaderDimensionsProvider>
+      <InventoryValuationHeaderDimensionsPanelContent />
+    </InventoryValuationHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Inventory Valuation header dismension panel content.
+ * @returns {JSX.Element}
+ */
+function InventoryValuationHeaderDimensionsPanelContent() {
+  const { warehouses, branches } =
+    useInventoryValuationHeaderDimensionsPanelContext();
+
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
+
+  return (
+    <Row>
+      <Col xs={4}>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
+        {isWarehousesFeatureCan && (
+          <FormGroup
+            label={intl.get('warehouses_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <WarehouseMultiSelect
+              name={'warehousesIds'}
+              warehouses={warehouses}
+            />
+          </FormGroup>
+        )}
+      </Col>
+    </Row>
+  );
+}

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanelProvider.tsx

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { useWarehouses, useBranches } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const InventoryValuationHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * Inventory valuation header provider.
+ * @returns
+ */
+function InventoryValuationHeaderDimensionsProvider({ ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Detarmines whether the warehouses feature is accessiable.
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+
+  // Detarmines whether the branches feature is accessiable.
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the warehouses list.
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
+    null,
+    { enabled: isWarehouseFeatureCan, keepPreviousData: true },
+  );
+
+  // Fetches the branches list.
+  const { data: branches, isLoading: isBranchLoading } = useBranches(null, {
+    enabled: isBranchFeatureCan,
+    keepPreviousData: true,
+  });
+
+  // Provider
+  const provider = {
+    warehouses,
+    branches,
+    isWarehouesLoading,
+    isBranchLoading,
+  };
+
+  return isWarehouesLoading || isBranchLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryValuationHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useInventoryValuationHeaderDimensionsPanelContext = () =>
+  React.useContext(InventoryValuationHeaderDimensionsPanelContext);
+
+export {
+  InventoryValuationHeaderDimensionsProvider,
+  useInventoryValuationHeaderDimensionsPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import {
+  FormattedMessage as T,
+  ItemsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
+import { filterInventoryValuationOptions } from '../constants';
+
+import {
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from '@/utils';
+import {
+  InventoryValuationGeneralPanelProvider,
+  useInventoryValuationGeneralPanelContext,
+} from './InventoryValuationHeaderGeneralPanelProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+
+/**
+ * Inventory valuation - Drawer Header - General panel.
+ */
+export default function InventoryValuationHeaderGeneralPanel() {
+  return (
+    <InventoryValuationGeneralPanelProvider>
+      <InventoryValuationHeaderGeneralPanelContent />
+    </InventoryValuationGeneralPanelProvider>
+  );
+}
+
+/**
+ * Inventory valuation - Drawer Header - General panel - Content.
+ */
+function InventoryValuationHeaderGeneralPanelContent() {
+  const { items } = useInventoryValuationGeneralPanelContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={4}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={inputIntent({ error })}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterInventoryValuationOptions}
+            label={<T id={'items.label_filter_items'} />}
+            initialSelectedItem={'all-items'}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({ form: { setFieldValue } }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  onItemSelect={(items) => {
+                    const itemsIds = items.map((item) => item.id);
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from 'react';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { useItems } from '@/hooks/query';
+
+const InventoryValuationGeneralPanelContext = React.createContext();
+
+function InventoryValuationGeneralPanelProvider({ query, ...props }) {
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+    page_size: 10000,
+  });
+
+  // Provider data.
+  const provider = {
+    items,
+    isItemsFetching,
+    isItemsLoading,
+  };
+
+  const loading = isItemsLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryValuationGeneralPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useInventoryValuationGeneralPanelContext = () =>
+  React.useContext(InventoryValuationGeneralPanelContext);
+
+export {
+  InventoryValuationGeneralPanelProvider,
+  useInventoryValuationGeneralPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useInventoryValuation } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const InventoryValuationContext = React.createContext();
+
+/**
+ * Inventory valuation sheet provider.
+ */
+function InventoryValuationProvider({ query, ...props }) {
+  // Transformes the filter form query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
+  const {
+    data: inventoryValuation,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useInventoryValuation(requestQuery, {
+    keepPreviousData: true,
+  });
+
+  // Provider data.
+  const provider = {
+    inventoryValuation,
+    isLoading,
+    isFetching,
+    refetchSheet: refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'inventory-valuation'}>
+      <InventoryValuationContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useInventoryValuationContext = () =>
+  React.useContext(InventoryValuationContext);
+
+export { InventoryValuationProvider, useInventoryValuationContext };

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+import { tableRowTypesToClassnames } from '@/utils';
+
+import { useInventoryValuationContext } from './InventoryValuationProvider';
+import { useInventoryValuationTableColumns } from './components';
+
+/**
+ * inventory valuation data table.
+ */
+export default function InventoryValuationTable({
+  //#ownProps
+  companyName,
+}) {
+  // inventory valuation context.
+  const {
+    inventoryValuation: { tableRows },
+    isLoading,
+  } = useInventoryValuationContext();
+
+  // inventory valuation table columns.
+  const columns = useInventoryValuationTableColumns();
+
+  return (
+    <InventoryValuationSheet
+      companyName={companyName}
+      sheetType={intl.get('inventory_valuation')}
+      asDate={new Date()}
+      loading={isLoading}
+    >
+      <InventoryValuationDataTable
+        columns={columns}
+        data={tableRows}
+        expandable={true}
+        expandToggleColumn={1}
+        expandColumnSpace={1}
+        sticky={true}
+        rowClassNames={tableRowTypesToClassnames}
+        styleName={TableStyle.Constrant}
+        noResults={intl.get(
+          'there_were_no_inventory_transactions_during_the_selected_date_range',
+        )}
+      />
+    </InventoryValuationSheet>
+  );
+}
+
+const InventoryValuationSheet = styled(FinancialSheet)`
+  min-width: 850px;
+`;
+
+const InventoryValuationDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+      .tr.row_type--total .td {
+        border-top: 1px solid #bbb;
+        font-weight: 500;
+        border-bottom: 3px double #000;
+      }
+    }
+  }
+`;

packages/webapp/src/containers/FinancialStatements/InventoryValuation/components.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+
+import { If } from '@/components';
+import { Align } from '@/constants';
+import { getColumnWidth } from '@/utils';
+import { CellTextSpan } from '@/components/Datatable/Cells';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve inventory valuation table columns.
+ */
+export const useInventoryValuationTableColumns = () => {
+  // inventory valuation context
+  const {
+    inventoryValuation: { tableRows },
+  } = useInventoryValuationContext();
+
+  return useMemo(
+    () => [
+      {
+        Header: intl.get('item_name'),
+        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
+        className: 'name',
+        width: 240,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity_formatted',
+        Cell: CellTextSpan,
+        className: 'quantity_formatted',
+        width: getColumnWidth(tableRows, `quantity_formatted`, {
+          minWidth: 120,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('asset_value'),
+        accessor: 'valuation_formatted',
+        Cell: CellTextSpan,
+        className: 'valuation',
+        width: getColumnWidth(tableRows, `valuation_formatted`, {
+          minWidth: 120,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('average'),
+        accessor: 'average_formatted',
+        Cell: CellTextSpan,
+        className: 'average_formatted',
+        width: getColumnWidth(tableRows, `average_formatted`, {
+          minWidth: 120,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+    ],
+    [tableRows],
+  );
+};
+
+/**
+ * inventory valuation progress loading bar.
+ */
+export function InventoryValuationLoadingBar() {
+  const { isFetching } = useInventoryValuationContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import { castArray } from 'lodash';
+
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
+
+/**
+ * Retrieves the inventory valuation sheet default query.
+ */
+export const getInventoryValuationQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+
+    branchesIds: [],
+    warehousesIds: [],
+  };
+};
+
+/**
+ * Parses inventory valiation location query to report query.
+ */
+const parseInventoryValuationQuery = (locationQuery) => {
+  const defaultQuery = getInventoryValuationQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches/warehouses ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+    warehousesIds: castArray(transformed.warehousesIds),
+  };
+};
+
+/**
+ * Retrieves the inventory valuation sheet location query.
+ */
+export const useInventoryValuationQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseInventoryValuationQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};

packages/webapp/src/containers/FinancialStatements/InventoryValuation/withInventoryValuation.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { getInventoryValuationFilterDrawer } from '@/store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      inventoryValuationDrawerFilter: getInventoryValuationFilterDrawer(state),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/FinancialStatements/InventoryValuation/withInventoryValuationActions.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { toggleInventoryValuationFilterDrawer } from '@/store/financialStatement/financialStatements.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  toggleInventoryValuationFilterDrawer: (toggle) =>
+    dispatch(toggleInventoryValuationFilterDrawer(toggle)),
+});
+
+export default connect(null, mapDispatchToProps);