feat: optimize style of sale receipt details.

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js

@@ -1,35 +1,45 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
 import { DrawerMainTabs } from 'components';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import ReceiptDetailTab from './ReceiptDetailTab';
-import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
-
-import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
+import ReceiptDetailActionBar from './ReceiptDetailActionBar';
+import { ReceiptDetailsGLEntriesPanel } from './ReceiptDetailsGLEntriesPanel';
 
 /**
  * Receipt view detail.
+ * @returns {React.JSX}
  */
 export default function ReceiptDetail() {
-  const { transactions } = useReceiptDetailDrawerContext();
-
   return (
-    <div className={clsx(ReceiptDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<ReceiptDetailTab />}
-        />
-        <Tab
-          title={intl.get('journal_entries')}
-          id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={transactions} />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <ReceiptDetailsRoot>
+      <ReceiptDetailActionBar />
+      <ReceiptDetailsTabs />
+    </ReceiptDetailsRoot>
   );
 }
+
+/**
+ * Receipt details tabs bar.
+ * @returns {React.JSX}
+ */
+function ReceiptDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<ReceiptDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<ReceiptDetailsGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const ReceiptDetailsRoot = styled.div``;