From a89ceffaca7dfbc14db049681dfb627c96775520 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 27 Jan 2022 16:48:55 +0200
Subject: [PATCH] feat(warehouses): add Item quantity for each warehouse.

---
 .../Drawers/ItemDetailDrawer/ItemDetailTab.js |  6 ++++
 .../WarehousesLocations/components.js         | 33 +++++++++++++++++++
 .../WarehousesLocations/index.js              | 24 ++++++++++++++
 src/lang/en/index.json                        |  8 +++--
 4 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/components.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/index.js

diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
index e964d4bd5..a200ba943 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
+++ b/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>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/components.js b/src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/components.js
new file mode 100644
index 000000000..0e866a724
--- /dev/null
+++ b/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,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/index.js b/src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/index.js
new file mode 100644
index 000000000..39978b19c
--- /dev/null
+++ b/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)``;
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index c5d997fc8..1746c370f 100644
--- a/src/lang/en/index.json
+++ b/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"
+}
\ No newline at end of file