feat (warehouseTransfer): add status in details.

src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailHeader.js

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 
 import {
   FormatDate,
-  T,
   Row,
   Col,
   DetailsMenu,
@@ -13,6 +12,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
+import { WarehouseTransferDetailsStatus } from './utils';
 import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 
 /**
@@ -23,13 +23,26 @@ export default function WarehouseTransferDetailHeader() {
 
   return (
     <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <StatusDetailItem>
+            <WarehouseTransferDetailsStatus
+              warehouseTransfer={warehouseTransfer}
+            />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem label={intl.get('date')}>
               <FormatDate value={warehouseTransfer.formatted_date} />
             </DetailItem>
 
             <DetailItem
-          label={intl.get('warehouse_transfer.drawer.label.transfer_number')}
+              label={intl.get(
+                'warehouse_transfer.drawer.label.transfer_number',
+              )}
               children={defaultTo(warehouseTransfer.transaction_number, '-')}
             />
             <DetailItem
@@ -41,6 +54,15 @@ export default function WarehouseTransferDetailHeader() {
               children={warehouseTransfer.to_warehouse.name}
             />
           </DetailsMenu>
+        </Col>
+      </Row>
     </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;

src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { Intent, Tag } from '@blueprintjs/core';
 
 import {
-  Icon,
   FormattedMessage as T,
   FormatNumberCell,
   Choose,
@@ -18,6 +18,12 @@ export const useWarehouseTransferReadOnlyEntriesColumns = () =>
         className: 'name',
         disableSortBy: true,
       },
+      {
+        Header: intl.get('warehouse_transfer.column.description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
       {
         Header: intl.get('warehouse_transfer.column.transfer_quantity'),
         accessor: 'quantity',
@@ -29,3 +35,37 @@ export const useWarehouseTransferReadOnlyEntriesColumns = () =>
     ],
     [],
   );
+
+/**
+ * Warehouses transfer details status.
+ * @returns {React.JSX}
+ */
+export function WarehouseTransferDetailsStatus({ warehouseTransfer }) {
+  return (
+    <Choose>
+      <Choose.When
+        condition={
+          warehouseTransfer.is_initiated && warehouseTransfer.is_transferred
+        }
+      >
+        <Tag minimal={false} intent={Intent.SUCCESS} round={true}>
+          <T id={'warehouse_transfer.label.initiated'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When
+        condition={
+          warehouseTransfer.is_initiated && !warehouseTransfer.is_transferred
+        }
+      >
+        <Tag minimal={false} intent={Intent.WARNING} round={true}>
+          <T id={'warehouse_transfer.label.transfer_initiated'} />
+        </Tag>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag minimal={false} intent={Intent.NONE} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}

src/lang/en/index.json

@@ -1806,6 +1806,7 @@
   "warehouse_transfer.column.from_warehouse": "From Warehouse",
   "warehouse_transfer.column.to_warehouse": "To Warehouse",
   "warehouse_transfer.column.item_name": "Item Name",
+  "warehouse_transfer.column.description": "Description",
   "warehouse_transfer.column.transfer_quantity": "Transfer Quantity",
   "warehouse_transfer.auto_increment.auto": "Your transfer numbers are set on auto-increment mode. Are you sure changing this setting?",
   "warehouse_transfer.auto_increment.manually": "Your transfer numbers are set on manual mode. Are you sure chaning this settings?",