re-structure to monorepo.

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

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import moment from 'moment';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import InventoryItemDetailsActionsBar from './InventoryItemDetailsActionsBar';
+import InventoryItemDetailsHeader from './InventoryItemDetailsHeader';
+
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+import { InventoryItemDetailsProvider } from './InventoryItemDetailsProvider';
+import {
+  InventoryItemDetailsLoadingBar,
+  InventoryItemDetailsAlerts,
+} from './components';
+
+import { InventoryItemDetailsBody } from './InventoryItemDetailsBody';
+import { useInventoryValuationQuery } from './utils2';
+import { compose } from '@/utils';
+
+/**
+ * inventory item details.
+ */
+function InventoryItemDetails({
+  //#withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
+}) {
+  const { query, setLocationQuery } = useInventoryValuationQuery();
+
+  // Handle filter submit.
+  const handleFilterSubmit = (filter) => {
+    const _filter = {
+      ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
+    setLocationQuery({ ..._filter });
+  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    setLocationQuery({
+      ...query,
+      numberFormat: values,
+    });
+  };
+  // Close the report header once the browser leave the page.
+  useEffect(() => () => toggleFilterDrawer(false), [toggleFilterDrawer]);
+
+  return (
+    <InventoryItemDetailsProvider query={query}>
+      <InventoryItemDetailsActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <InventoryItemDetailsLoadingBar />
+      <InventoryItemDetailsAlerts />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <InventoryItemDetailsHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <InventoryItemDetailsBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </InventoryItemDetailsProvider>
+  );
+}
+
+export default compose(withInventoryItemDetailsActions)(InventoryItemDetails);

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { DashboardActionsBar, Icon, FormattedMessage as T } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import withInventoryItemDetails from './withInventoryItemDetails';
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+
+import { compose, saveInvoke } from '@/utils';
+
+/**
+ * Inventory item details actions bar.
+ */
+function InventoryItemDetailsActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withInventoryItemDetails
+  isFilterDrawerOpen,
+
+  //#withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
+}) {
+  const { isInventoryItemDetailsLoading, inventoryItemDetailsRefetch } =
+    useInventoryItemDetailsContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawer();
+  };
+  //Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    inventoryItemDetailsRefetch();
+  };
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalcReport}
+          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={isInventoryItemDetailsLoading}
+            />
+          }
+          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>
+
+        <NavbarDivider />
+
+        <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(
+  withInventoryItemDetails(({ inventoryItemDetailDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
+  })),
+  withInventoryItemDetailsActions,
+)(InventoryItemDetailsActionsBar);

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { InventoryItemDetailsTable } from './InventoryItemDetailsTable';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Inventory item details body.
+ * @returns {JSX.Element}
+ */
+function InventoryItemDetailsBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isInventoryItemDetailsLoading } = useInventoryItemDetailsContext();
+
+  return (
+    <FinancialReportBody>
+      {isInventoryItemDetailsLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <InventoryItemDetailsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const InventoryItemDetailsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(InventoryItemDetailsBodyJSX);

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx

@@ -0,0 +1,123 @@
+// @ts-nocheck
+import React from 'react';
+import * as Yup from 'yup';
+import moment from 'moment';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from '@/components';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
+import InventoryItemDetailsHeaderDimensionsPanel from './InventoryItemDetailsHeaderDimensionsPanel';
+
+import withInventoryItemDetails from './withInventoryItemDetails';
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+
+import { getInventoryItemDetailsDefaultQuery } from './utils2';
+import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Inventory item details header.
+ */
+function InventoryItemDetailsHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+  // #withInventoryItemDetails
+  isFilterDrawerOpen,
+
+  // #withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
+}) {
+  // Default form values.
+  const defaultValues = getInventoryItemDetailsDefaultQuery();
+
+  // Filter form initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+  });
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+    setSubmitting(false);
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
+
+  return (
+    <InventoryItemDetailsDrawerHeader
+      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={<InventoryItemDetailsHeaderGeneralPanel />}
+            />
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<InventoryItemDetailsHeaderDimensionsPanel />}
+              />
+            )}
+          </Tabs>
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleDrawerClose} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </InventoryItemDetailsDrawerHeader>
+  );
+}
+
+export default compose(
+  withInventoryItemDetails(({ inventoryItemDetailDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
+  })),
+  withInventoryItemDetailsActions,
+)(InventoryItemDetailsHeader);
+
+const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 400px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx

@@ -0,0 +1,67 @@
+// @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 {
+  InventoryItemDetailsHeaderDimensionsProvider,
+  useInventoryItemDetailsHeaderDimensionsPanelContext,
+} from './InventoryItemDetailsHeaderDimensionsPanelProvider';
+
+/**
+ * Inventory Item deatil header dismension panel.
+ * @returns {JSX.Element}
+ */
+export default function InventoryItemDetailsHeaderDimensionsPanel() {
+  return (
+    <InventoryItemDetailsHeaderDimensionsProvider>
+      <InventoryItemDetailsHeaderDimensionsPanelContent />
+    </InventoryItemDetailsHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Inventory Valuation header dismension panel content.
+ * @returns {JSX.Element}
+ */
+function InventoryItemDetailsHeaderDimensionsPanelContent() {
+  const { warehouses, branches } =
+    useInventoryItemDetailsHeaderDimensionsPanelContext();
+
+  // 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/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanelProvider.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React from 'react';
+
+import { useWarehouses, useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { Features } from '@/constants';
+
+const InventoryItemDetailsHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * Inventory Item details header provider.
+ * @returns
+ */
+function InventoryItemDetailsHeaderDimensionsProvider({ ...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 isBranchesFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the warehouses list.
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
+    null,
+    { enabled: isWarehouseFeatureCan },
+  );
+
+  // Fetches the branches list.
+  const { data: branches, isLoading: isBranchesLoading } = useBranches(null, {
+    enabled: isBranchesFeatureCan,
+  });
+
+  // Provider
+  const provider = {
+    warehouses,
+    branches,
+    isWarehouesLoading,
+    isBranchesLoading,
+  };
+
+  return isWarehouesLoading || isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryItemDetailsHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useInventoryItemDetailsHeaderDimensionsPanelContext = () =>
+  React.useContext(InventoryItemDetailsHeaderDimensionsPanelContext);
+
+export {
+  InventoryItemDetailsHeaderDimensionsProvider,
+  useInventoryItemDetailsHeaderDimensionsPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import {
+  ItemsMultiSelect,
+  Row,
+  Col,
+  FormattedMessage as T,
+} from '@/components';
+import classNames from 'classnames';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+
+import {
+  InventoryItemDetailsHeaderGeneralProvider,
+  useInventoryItemDetailsHeaderGeneralContext,
+} from './InventoryItemDetailsHeaderGeneralProvider';
+
+/**
+ * Inventory item details header - General panel.
+ */
+export default function InventoryItemDetailsHeaderGeneralPanel() {
+  return (
+    <InventoryItemDetailsHeaderGeneralProvider>
+      <InventoryItemDetailsHeaderGeneralPanelContent />
+    </InventoryItemDetailsHeaderGeneralProvider>
+  );
+}
+
+/**
+ * Inventory item details header - General panel - Content.
+ */
+function InventoryItemDetailsHeaderGeneralPanelContent() {
+  const { items } = useInventoryItemDetailsHeaderGeneralContext();
+
+  return (
+    <div>
+      <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <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/InventoryItemDetails/InventoryItemDetailsHeaderGeneralProvider.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import { useItems } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const InventoryItemDetailsHeaderGeneralContext = React.createContext();
+
+/**
+ * Inventory item details provider.
+ */
+function InventoryItemDetailsHeaderGeneralProvider({ ...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,
+  });
+
+  const provider = {
+    isItemsFetching,
+    isItemsLoading,
+    items,
+  };
+  // Loading state.
+  const loading = isItemsLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryItemDetailsHeaderGeneralContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+const useInventoryItemDetailsHeaderGeneralContext = () =>
+  React.useContext(InventoryItemDetailsHeaderGeneralContext);
+
+export {
+  InventoryItemDetailsHeaderGeneralProvider,
+  useInventoryItemDetailsHeaderGeneralContext,
+};

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useInventoryItemDetailsReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const InventoryItemDetailsContext = React.createContext();
+
+/**
+ * Inventory item details provider.
+ */
+function InventoryItemDetailsProvider({ query, ...props }) {
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
+  // Fetching inventory item details report based on the givne query.
+  const {
+    data: inventoryItemDetails,
+    isFetching: isInventoryItemDetailsFetching,
+    isLoading: isInventoryItemDetailsLoading,
+    refetch: inventoryItemDetailsRefetch,
+  } = useInventoryItemDetailsReport(requestQuery, { keepPreviousData: true });
+
+  const provider = {
+    inventoryItemDetails,
+    isInventoryItemDetailsFetching,
+    isInventoryItemDetailsLoading,
+    inventoryItemDetailsRefetch,
+
+    query,
+  };
+
+  return (
+    <FinancialReportPage name={'inventory-item-details'}>
+      <InventoryItemDetailsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+const useInventoryItemDetailsContext = () =>
+  React.useContext(InventoryItemDetailsContext);
+
+export { InventoryItemDetailsProvider, useInventoryItemDetailsContext };

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { ReportDataTable, FinancialSheet } from '@/components';
+import { useInventoryItemDetailsColumns } from './components';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+import { TableStyle } from '@/constants';
+
+/**
+ * Inventory item detail table.
+ */
+export function InventoryItemDetailsTable({
+  // #ownProps
+  companyName,
+}) {
+  const {
+    inventoryItemDetails: { tableRows },
+    isInventoryItemDetailsLoading,
+    query,
+  } = useInventoryItemDetailsContext();
+
+  const columns = useInventoryItemDetailsColumns();
+
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('inventory_item_details')}
+      loading={isInventoryItemDetailsLoading}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      fullWidth={true}
+    >
+      <InventoryItemDetailsDataTable
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const InventoryItemDetailsDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        padding-top: 0.3rem;
+        padding-bottom: 0.3rem;
+      }
+
+      .tr:not(.no-results) .td:not(:first-of-type) {
+        border-left: 1px solid #ececec;
+      }
+
+      .tr:last-child .td {
+        border-bottom: 1px solid #ddd;
+      }
+
+      .tr.row_type {
+        &--ITEM {
+          .td {
+            &.transaction_type {
+              border-left-color: transparent;
+            }
+
+            &.date {
+              .cell-inner {
+                white-space: nowrap;
+                position: relative;
+              }
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+
+        &--ITEM,
+        &--OPENING_ENTRY,
+        &--CLOSING_ENTRY {
+          font-weight: 500;
+        }
+
+        &--ITEM {
+          &.is-expanded {
+            .td.value .cell-inner {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If, FormattedMessage as T } from '@/components';
+
+import { dynamicColumns } from './utils';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+
+/**
+ * Retrieve inventory item details columns.
+ */
+export const useInventoryItemDetailsColumns = () => {
+  const {
+    inventoryItemDetails: { columns, tableRows },
+  } = useInventoryItemDetailsContext();
+
+  return React.useMemo(
+    () => dynamicColumns(columns, tableRows),
+    [columns, tableRows],
+  );
+};
+
+/**
+ * inventory item details  loading bar.
+ */
+export function InventoryItemDetailsLoadingBar() {
+  const { isInventoryItemDetailsFetching } = useInventoryItemDetailsContext();
+
+  return (
+    <If condition={isInventoryItemDetailsFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * inventory item details alerts
+ */
+export function InventoryItemDetailsAlerts() {
+  const {
+    inventoryItemDetails,
+    isInventoryItemDetailsLoading,
+    inventoryItemDetailsRefetch,
+  } = useInventoryItemDetailsContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    inventoryItemDetailsRefetch();
+  };
+
+  // Can't display any error if the report is loading
+  if (isInventoryItemDetailsLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
+      <div className="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          <T id={'refresh'} />
+        </Button>
+      </div>
+    </If>
+  );
+}

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

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import * as R from 'ramda';
+
+import { getColumnWidth } from '@/utils';
+import { Align } from '@/constants';
+
+const itemNameOrDateColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+}));
+
+const numericColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+  align: Align.Right,
+}));
+
+/**
+ *  columns mapper.
+ */
+const columnsMapper = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+  textOverview: true,
+}));
+
+/**
+ * Inventory item details columns.
+ */
+export const dynamicColumns = (columns, data) => {
+  const mapper = (column, index) => {
+    return R.compose(
+      R.cond([
+        [R.pathEq(['key'], 'date'), itemNameOrDateColumn(data, index)],
+        [R.pathEq(['key'], 'running_quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'profit_margin'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'running_value'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'rate'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'total'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'value'), numericColumn(data, index)],
+        [R.T, columnsMapper(data, index)],
+      ]),
+    )(column);
+  };
+  return columns.map(mapper);
+};

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/utils2.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 inventory item details default query.
+ */
+export const getInventoryItemDetailsDefaultQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    warehousesIds: [],
+    branchesIds: [],
+  };
+};
+
+/**
+ * Parses inventory item details browser location query.
+ */
+const parseInventoryItemDetailsQuery = (locationQuery) => {
+  const defaultQuery = getInventoryItemDetailsDefaultQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+
+  return {
+    ...transformed,
+
+    // Ensures the branches/warehouses ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+    warehousesIds: castArray(transformed.warehousesIds),
+  };
+};
+
+/**
+ * State setter/getter of inventory valuation browser 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(
+    () => parseInventoryItemDetailsQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/withInventoryItemDetails.tsx

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

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/withInventoryItemDetailsActions.tsx

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