chrone: sperate client and server to different repos.

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { defaultTo } from 'lodash';
+
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made - detail panel - header.
+ */
+export default function PaymentMadeDetailHeader() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <h3 class="big-number" children={paymentMade.formatted_amount} />
+        </DetailItem>
+        <DetailItem
+          label={intl.get('payment_made.details.payment_number')}
+          children={defaultTo(paymentMade.payment_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={paymentMade.vendor?.display_name}
+        />
+        <DetailItem
+          label={intl.get('payment_account')}
+          children={paymentMade.payment_account?.name}
+        />
+        <DetailItem
+          label={intl.get('payment_date')}
+          children={<FormatDate value={paymentMade.payment_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
+        <DetailItem
+          label={intl.get('description')}
+          children={defaultTo(paymentMade.statement, '-')}
+        />
+        <DetailItem
+          label={intl.get('created_at')}
+          children={<FormatDate value={paymentMade.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}