feat(warehouseTransfer): add create & delete transfer & details.

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-// import {} from 'hooks/query';
+import { useWarehouseTransfer } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const WarehouseTransferDetailDrawerContext = React.createContext();
@@ -9,17 +9,22 @@ const WarehouseTransferDetailDrawerContext = React.createContext();
  * Warehouse transfer detail drawer provider.
  */
 function WarehouseTransferDetailDrawerProvider({
-  warehouseTransferId,
+  warehouseTransferId = 5,
   ...props
 }) {
+  // Handle fetch invoice detail.
+  const { data: warehouseTransfer, isLoading: isWarehouseTransferLoading } =
+    useWarehouseTransfer(warehouseTransferId, {
+      enabled: !!warehouseTransferId,
+    });
+
   const provider = {
+    warehouseTransfer,
     warehouseTransferId,
   };
 
   return (
-    <DrawerLoading
-    // loading={}
-    >
+    <DrawerLoading loading={isWarehouseTransferLoading}>
       <DrawerHeaderContent
         name="warehouse-transfer-detail-drawer"
         title={intl.get('warehouse_transfer.drawer.title', {

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailHeader.js

@@ -16,44 +16,31 @@ import {
 import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 
 /**
- * Warehouse transfer details drawer header
+ * Warehouse transfer details drawer header.
  */
 export default function WarehouseTransferDetailHeader() {
+  const { warehouseTransfer } = useWarehouseDetailDrawerContext();
+
   return (
     <CommercialDocHeader>
-      <CommercialDocTopHeader>
-        <DetailsMenu>
-          <AmountItem label={intl.get('amount')}>
-            <span class="big-number">'$10'</span>
-          </AmountItem>
-        </DetailsMenu>
-      </CommercialDocTopHeader>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <DetailItem label={intl.get('date')}>
-          {/* <FormatDate value={} /> */}
+          <FormatDate value={warehouseTransfer.date} />
         </DetailItem>
 
         <DetailItem
           label={intl.get('warehouse_transfer.drawer.label.transfer_number')}
-          // children={}
+          children={defaultTo(warehouseTransfer.transaction_number, '-')}
         />
         <DetailItem
           label={intl.get('warehouse_transfer.drawer.label.from_warehouse')}
-          // children={}
+          children={warehouseTransfer.from_warehouse.name}
         />
         <DetailItem
           label={intl.get('warehouse_transfer.drawer.label.to_warehouse')}
-          // children={}
-        />
-        <DetailItem
-          label={intl.get('reason')}
-          // children={defaultTo(, '-')}
+          children={warehouseTransfer.to_warehouse.name}
         />
       </DetailsMenu>
     </CommercialDocHeader>
   );
 }
-
-const AmountItem = styled(DetailItem)`
-  width: 50%;
-`;

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailTable.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { CommercialDocEntriesTable } from 'components';
 import { TableStyle } from '../../../common';
 import { useWarehouseTransferReadOnlyEntriesColumns } from './utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 
 /**
  * Warehouse transfer detail table.
@@ -12,10 +13,14 @@ export default function WarehouseTransferDetailTable() {
   // Warehouse transfer entries table columns.
   const columns = useWarehouseTransferReadOnlyEntriesColumns();
 
+  const {
+    warehouseTransfer: { entries },
+  } = useWarehouseDetailDrawerContext();
+
   return (
     <CommercialDocEntriesTable
       columns={columns}
-      data={[]}
+      data={entries}
       styleName={TableStyle.Constrant}
     />
   );