chrone: sperate client and server to different repos.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import moment from 'moment';
+import { defaultTo } from 'lodash';
+
+import { DetailItem, DetailsMenu, Money } from 'components';
+import { FormattedMessage as T } from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+
+/**
+ * Expense drawer content.
+ */
+export default function ExpenseDrawerHeader() {
+  const {
+    expense: {
+      total_amount,
+      payment_date,
+      currency_code,
+      reference_no,
+      description,
+      published_at,
+    },
+  } = useExpenseDrawerContext();
+
+  return (
+    <div className={'expense-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
+          <h3 class="big-number">
+            <Money amount={total_amount} currency={currency_code} />
+          </h3>
+        </DetailItem>
+
+        <DetailItem name={'date'} label={<T id={'date'} />}>
+          {moment(payment_date).format('YYYY MMM DD')}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {currency_code}
+        </DetailItem>
+
+        <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference_no, '-')}
+        </DetailItem>
+
+        <DetailItem label={<T id={'published_at'} />}>
+          {moment(published_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={<T id={'description'} />}>
+          {defaultTo(description, '—')}
+        </DetailItem>
+        <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}