feat(item): add item warehouse locations.

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FormatNumberCell, FormattedMessage as T } from '../../../../components';
 
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
 
 /**
  * Warehouse locations columns
@@ -12,12 +11,21 @@ export const useWarehouseLocationsColumns = () => {
     () => [
       {
         id: 'warehouse_name',
+        accessor: 'warehouse_name',
         Header: intl.get('warehouse_locations.column.warehouse_name'),
         width: 120,
       },
+      {
+        id: 'warehouse_code',
+        accessor: 'warehouse_code',
+        Header: intl.get('warehouse_locations.column.warehouse_code'),
+        width: 100,
+      },
       {
         id: 'quantity',
+        accessor: 'quantity_on_hand_formatted',
         Header: intl.get('warehouse_locations.column.quantity'),
+        Cell: FormatNumberCell,
         align: 'right',
         width: 100,
       },

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

@@ -2,10 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { DataTable, CommercialDocEntriesTable, Card } from 'components';
-
-import { useWarehouseLocationsColumns } from './components';
-
 import { TableStyle } from '../../../../common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useWarehouseLocationsColumns } from './components';
+import { useItemWarehouseLocation } from 'hooks/query';
 
 /**
  * Warehouses locations table columns.
@@ -14,9 +16,25 @@ export default function WarehouseLocationsTable() {
   // Warehouses locations table columns.
   const columns = useWarehouseLocationsColumns();
 
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isItemWarehousesLoading,
+    isFetching: isItemWarehousesFetching,
+    data: itemWarehouses,
+  } = useItemWarehouseLocation(itemId, { enabled: !!itemId });
+  console.log(itemWarehouses, 'XXX');
   return (
     <WarehouseLocationsGLEntriesRoot>
-      <DataTable columns={columns} data={[]} styleName={TableStyle.Constrant} />
+      <DataTable
+        columns={columns}
+        data={itemWarehouses}
+        headerLoading={isItemWarehousesLoading}
+        progressBarLoading={isItemWarehousesFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        styleName={TableStyle.Constrant}
+      />
     </WarehouseLocationsGLEntriesRoot>
   );
 }