feat: add view detail cash flow transaction.

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { defaultTo } from 'lodash';
+import {
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+  FormattedMessage as T,
+} from 'components';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+
+/**
+ * Cashlflow transaction drawer detail Header.
+ */
+export default function CashflowTransactionDrawerHeader() {
+  const {
+    cashflowTransaction: {
+      amount,
+      transaction_type,
+      transaction_number,
+      reference_no,
+      date,
+      description,
+    },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className={'cashflow-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'total'} label={<T id={'total'} />}>
+          <h3 class="amount">{amount}</h3>
+        </DetailItem>
+
+        <DetailItem
+          name={'transaction_type'}
+          label={<T id={'cash_flow_drawer.label_transaction_type'} />}
+        >
+          {transaction_type}
+        </DetailItem>
+
+        <DetailItem
+          name={'transaction_number'}
+          label={<T id={'cash_flow.drawer.label_transaction_no'} />}
+        >
+          {transaction_number}
+        </DetailItem>
+        <DetailItem
+          label={<T id={'date'} />}
+          children={<FormatDate value={date} />}
+        />
+        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference_no, '-')}
+        </DetailItem>
+      </DetailsMenu>
+
+      <div class="cashflow-drawer__content-description">
+        <b class="title">
+          <T id={'description'} />
+        </b>
+        : {defaultTo(description, '—')}
+      </div>
+    </div>
+  );
+}