From af9f4c45fc0e14adb85801393825e5c8d864f76e Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 23 Dec 2021 17:58:26 +0200
Subject: [PATCH] feat: add inventory adjustment entries.

---
 .../InventoryAdjustmentDetail.js              | 40 ++++++++++++++----
 ...InventoryAdjustmentDetailGLEntriesPanel.js | 42 +++++++++++++++++++
 .../InventoryAdjustmentDetailTab.js           | 16 +++++++
 .../InventoryAdjustmentDetailDrawer/index.js  |  7 +++-
 4 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js
 create mode 100644 src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js

diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
index d9bf4b236..3586a45b0 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
@@ -1,26 +1,48 @@
 import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { Card } from 'components';
-
+import { DrawerMainTabs } from 'components';
+import InventoryAdjustmentDetailTab from './InventoryAdjustmentDetailTab';
 import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
-import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
-import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
+import InventoryAdjustmentDetailGLEntriesPanel from './InventoryAdjustmentDetailGLEntriesPanel';
 
 /**
  * Inventory adjustment detail
+ * @returns {React.JSX}
  */
 export default function InventoryAdjustmentDetail() {
   return (
     <InventoryAdjustmentDetailsRoot>
       <InventoryAdjustmentDetailActionsBar />
-
-      <Card>
-        <InventoryAdjustmentDetailHeader />
-        <InventoryAdjustmentDetailTable />
-      </Card>
+      <InventoryAdjustmentDetailTabs />
     </InventoryAdjustmentDetailsRoot>
   );
 }
 
+/**
+ * Invenoty adjusment details tabs.
+ * @returns {React.JSX}
+ */
+function InventoryAdjustmentDetailTabs() {
+  return (
+    <DrawerMainTabs
+      renderActiveTabPanelOnly={true}
+      defaultSelectedTabId="details"
+    >
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<InventoryAdjustmentDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<InventoryAdjustmentDetailGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
 const InventoryAdjustmentDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js
new file mode 100644
index 000000000..e3866fadb
--- /dev/null
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Inentory adjustmet detail GL entries panel.
+ * @returns {React.JSX}
+ */
+export default function InventoryAdjustmentDetailGLEntriesPanel() {
+  const { inventoryId } = useInventoryAdjustmentDrawerContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: inventoryId,
+      reference_type: 'inventoryAdjustment',
+    },
+    { enabled: !!inventoryId },
+  );
+
+  return (
+    <InventoryAdjustmentGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </InventoryAdjustmentGLEntriesRoot>
+  );
+}
+
+const InventoryAdjustmentGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js
new file mode 100644
index 000000000..c677ae86e
--- /dev/null
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CommercialDocBox } from 'components';
+
+import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
+import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
+
+export default function InventoryAdjustmentDetailTab() {
+  return (
+    <CommercialDocBox>
+      <InventoryAdjustmentDetailHeader />
+      <InventoryAdjustmentDetailTable />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
index fd9b0a12d..f614bc782 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.js
@@ -19,7 +19,12 @@ function InventoryAdjustmentDetailDrawer({
   payload: { inventoryId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <InventoryAdjustmentDrawerContent inventoryId={inventoryId} />
       </DrawerSuspense>