feat(warehouses): add Item quantity for each warehouse.

src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js

@@ -3,6 +3,7 @@ import { Tab } from '@blueprintjs/core';
 import { DrawerMainTabs, FormattedMessage as T } from 'components';
 import { ItemPaymentTransactions } from './ItemPaymentTransactions';
 import ItemDetailHeader from './ItemDetailHeader';
+import WarehousesLocationsTable from './WarehousesLocations';
 
 
 export default function ItemDetailTab() {
@@ -18,6 +19,11 @@ export default function ItemDetailTab() {
         title={<T id={'transactions'} />}
         panel={<ItemPaymentTransactions />}
       />
+      <Tab
+        id={'warehouses'}
+        title={<T id={'warehouse_locations.label'} />}
+        panel={<WarehousesLocationsTable />}
+      />
     </DrawerMainTabs>
   );
 }

src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/components.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+
+/**
+ * Warehouse locations columns
+ */
+export const useWarehouseLocationsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'warehouse_name',
+        Header: intl.get('warehouse_locations.column.warehouse_name'),
+        width: 120,
+      },
+      {
+        id: 'quantity',
+        Header: intl.get('warehouse_locations.column.quantity'),
+        align: 'right',
+        width: 100,
+      },
+      {
+        id: 'available_for_sale',
+        Header: intl.get('warehouse_locations.column.available_for_sale'),
+        align: 'right',
+        width: 100,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { DataTable, CommercialDocEntriesTable, Card } from 'components';
+
+import { useWarehouseLocationsColumns } from './components';
+
+import { TableStyle } from '../../../../common';
+
+/**
+ * Warehouses locations table columns.
+ */
+export default function WarehouseLocationsTable() {
+  // Warehouses locations table columns.
+  const columns = useWarehouseLocationsColumns();
+
+  return (
+    <WarehouseLocationsGLEntriesRoot>
+      <DataTable columns={columns} data={[]} styleName={TableStyle.Constrant} />
+    </WarehouseLocationsGLEntriesRoot>
+  );
+}
+
+const WarehouseLocationsGLEntriesRoot = styled(Card)``;

src/lang/en/index.json

@@ -1782,5 +1782,9 @@
   "warehouse.dialog.label.warehouse_address_2":"Address 2",
   "warehouse.dialog.label.city":"City",
   "warehouse.dialog.label.country":"Country",
-  "warehouse.dialog.label.phone_number":"Phone Number"
-}
+  "warehouse.dialog.label.phone_number":"Phone Number",
+  "warehouse_locations.label":"Warehouses Locations",
+  "warehouse_locations.column.warehouse_name":"Warehouse name",
+  "warehouse_locations.column.quantity":"Quantity",
+  "warehouse_locations.column.available_for_sale":"Available for sale"
+}