feat(inventory item & valuation): warehouse multi select.

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useBranches } from 'hooks/query';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 
-const BalanceSheetHeaderDimensionsPanelConext = React.createContext();
+const BalanceSheetHeaderDimensionsPanelContext = React.createContext();
 
 /**
  * BL sheet header provider.
@@ -22,11 +22,17 @@ function BalanceSheetHeaderDimensionsProvider({ ...props }) {
   return isBranchesLoading ? (
     <FinancialHeaderLoadingSkeleton />
   ) : (
-    <BalanceSheetHeaderDimensionsPanelConext.Provider value={provider} {...props} />
+    <BalanceSheetHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
   );
 }
 
 const useBalanceSheetHeaderDimensionsPanelContext = () =>
-  React.useContext(BalanceSheetHeaderDimensionsPanelConext);
+  React.useContext(BalanceSheetHeaderDimensionsPanelContext);
 
-export { BalanceSheetHeaderDimensionsProvider, useBalanceSheetHeaderDimensionsPanelContext };
+export {
+  BalanceSheetHeaderDimensionsProvider,
+  useBalanceSheetHeaderDimensionsPanelContext,
+};

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js

@@ -8,6 +8,7 @@ import intl from 'react-intl-universal';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
+import InventoryItemDetailsHeaderDimensionsPanel from './InventoryItemDetailsHeaderDimensionsPanel';
 
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
@@ -32,27 +33,28 @@ function InventoryItemDetailsHeader({
     fromDate: moment().toDate(),
     toDate: moment().toDate(),
     itemsIds: [],
+    warehousesIds: [],
   };
 
   // Filter form initial values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+      warehousesIds: [],
+    },
+    defaultValues,
+  );
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    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);
@@ -61,8 +63,10 @@ function InventoryItemDetailsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
-  
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
   return (
     <FinancialStatementHeader
       isOpen={isFilterDrawerOpen}
@@ -80,6 +84,11 @@ function InventoryItemDetailsHeader({
               title={<T id={'general'} />}
               panel={<InventoryItemDetailsHeaderGeneralPanel />}
             />
+            <Tab
+              id="dimensions"
+              title={'Dimensions'}
+              panel={<InventoryItemDetailsHeaderDimensionsPanel />}
+            />
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { WarehouseMultiSelect, Row, Col } from 'components';
+import {
+  InventoryItemDetailsHeaderDimensionsProvider,
+  useInventoryItemDetailsHeaderDimensionsPanelContext,
+} from './InventoryItemDetailsHeaderDimensionsPanelProvider';
+
+/**
+ * Inventory Item deatil header dismension panel.
+ * @returns
+ */
+export default function InventoryItemDetailsHeaderDimensionsPanel() {
+  return (
+    <InventoryItemDetailsHeaderDimensionsProvider>
+      <InventoryItemDetailsHeaderDimensionsPanelContent />
+    </InventoryItemDetailsHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Inventory Valuation header dismension panel content.
+ * @returns
+ */
+function InventoryItemDetailsHeaderDimensionsPanelContent() {
+  const { warehouses } = useInventoryItemDetailsHeaderDimensionsPanelContext();
+
+  return (
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={intl.get('warehouses_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <WarehouseMultiSelect
+            name={'warehousesIds'}
+            warehouses={warehouses}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+}

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanelProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useWarehouses } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const InventoryItemDetailsHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * Inventory Item details header provider.
+ * @returns
+ */
+function InventoryItemDetailsHeaderDimensionsProvider({ ...props }) {
+  // Fetch warehouses list.
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses();
+
+  // Provider
+  const provider = {
+    warehouses,
+    isWarehouesLoading,
+  };
+
+  return isWarehouesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryItemDetailsHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useInventoryItemDetailsHeaderDimensionsPanelContext = () =>
+  React.useContext(InventoryItemDetailsHeaderDimensionsPanelContext);
+
+export {
+  InventoryItemDetailsHeaderDimensionsProvider,
+  useInventoryItemDetailsHeaderDimensionsPanelContext,
+};

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js

@@ -7,6 +7,7 @@ import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel';
+import InventoryValuationHeaderDimensionsPanel from './InventoryValuationHeaderDimensionsPanel';
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
@@ -36,13 +37,18 @@ function InventoryValuationHeader({
     ...pageFilter,
     asDate: moment().toDate(),
     itemsIds: [],
+    warehousesIds: [],
   };
   // Initial values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    ...defaultValues,
-    asDate: moment(pageFilter.asDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      ...defaultValues,
+      asDate: moment(pageFilter.asDate).toDate(),
+      warehousesIds: [],
+    },
+    defaultValues,
+  );
 
   // Handle the form of header submit.
   const handleSubmit = (values, { setSubmitting }) => {
@@ -78,6 +84,11 @@ function InventoryValuationHeader({
               title={<T id={'general'} />}
               panel={<InventoryValuationHeaderGeneralPanel />}
             />
+            <Tab
+              id="dimensions"
+              title={'Dimensions'}
+              panel={<InventoryValuationHeaderDimensionsPanel />}
+            />
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { WarehouseMultiSelect, Row, Col } from 'components';
+import {
+  InventoryValuationHeaderDimensionsProvider,
+  useInventoryValuationHeaderDimensionsPanelContext,
+} from './InventoryValuationHeaderDimensionsPanelProvider';
+
+/**
+ * Inventory Valuation header dismension panel.
+ * @returns
+ */
+export default function InventoryValuationHeaderDimensionsPanel() {
+  return (
+    <InventoryValuationHeaderDimensionsProvider>
+      <InventoryValuationHeaderDimensionsPanelContent />
+    </InventoryValuationHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Inventory Valuation header dismension panel content.
+ * @returns
+ */
+function InventoryValuationHeaderDimensionsPanelContent() {
+  const { warehouses } = useInventoryValuationHeaderDimensionsPanelContext();
+
+  return (
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={intl.get('warehouses_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <WarehouseMultiSelect
+            name={'warehousesIds'}
+            warehouses={warehouses}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+}

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanelProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useWarehouses } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const InventoryValuationHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * Inventory valuation header provider.
+ * @returns
+ */
+function InventoryValuationHeaderDimensionsProvider({ ...props }) {
+  // Fetch warehouses list.
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses();
+
+  // Provider
+  const provider = {
+    warehouses,
+    isWarehouesLoading,
+  };
+
+  return isWarehouesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryValuationHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useInventoryValuationHeaderDimensionsPanelContext = () =>
+  React.useContext(InventoryValuationHeaderDimensionsPanelContext);
+
+export {
+  InventoryValuationHeaderDimensionsProvider,
+  useInventoryValuationHeaderDimensionsPanelContext,
+};

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useBranches } from 'hooks/query';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 
-const ProfitLossSheetHeaderDimensionsPanelConext = React.createContext();
+const ProfitLossSheetHeaderDimensionsPanelContext = React.createContext();
 
 /**
  * profit loss sheet header provider.
@@ -22,7 +22,7 @@ function ProfitLossSheetHeaderDimensionsProvider({ ...props }) {
   return isBranchesLoading ? (
     <FinancialHeaderLoadingSkeleton />
   ) : (
-    <ProfitLossSheetHeaderDimensionsPanelConext.Provider
+    <ProfitLossSheetHeaderDimensionsPanelContext.Provider
       value={provider}
       {...props}
     />
@@ -30,7 +30,7 @@ function ProfitLossSheetHeaderDimensionsProvider({ ...props }) {
 }
 
 const useProfitLossSheetPanelContext = () =>
-  React.useContext(ProfitLossSheetHeaderDimensionsPanelConext);
+  React.useContext(ProfitLossSheetHeaderDimensionsPanelContext);
 
 export {
   ProfitLossSheetHeaderDimensionsProvider,