feat: view details.

client/src/components/DrawersContainer.js

@@ -7,6 +7,10 @@ import AccountDrawer from 'containers/Drawers/AccountDrawer';
 import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
 import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer';
 import BillDrawer from 'containers/Drawers/BillDrawer';
+import InvoiceDetailDrawer from 'containers/Drawers/InvoiceDetailDrawer';
+import ReceiptDetailDrawer from 'containers/Drawers/ReceiptDetailDrawer';
+import PaymentReceiveDetailDrawer from 'containers/Drawers/PaymentReceiveDetailDrawer';
+import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer';
 
 export default function DrawersContainer() {
   return (
@@ -19,6 +23,10 @@ export default function DrawersContainer() {
       <ManualJournalDrawer name={'journal-drawer'} />
       <ExpenseDrawer name={'expense-drawer'} />
       <BillDrawer name={'bill-drawer'} />
+      <InvoiceDetailDrawer name={'invoice-detail-drawer'} />
+      <ReceiptDetailDrawer name={'receipt-detail-drawer'} />
+      <PaymentReceiveDetailDrawer name={'payment-receive-detail-drawer'} />
+      <PaymentMadeDetailDrawer name={'payment-made-detail-drawer'} />
     </div>
   );
 }

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
 import {
   CreateItemCategoryFormSchema,
   EditItemCategoryFormSchema,
-} from './ItemCategoryForm.schema';
+} from './itemCategoryForm.schema';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import ItemCategoryFormContent from './ItemCategoryFormContent'

client/src/containers/Drawers/BillDrawer/BillDrawerContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import 'style/components/Drawers/BillDrawer.scss';
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';

client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -3,15 +3,21 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import LocatedLandedCostTable from './LocatedLandedCostTable';
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 
 /**
  * Bill view details.
  */
 export default function BillDrawerDetails() {
   return (
-    <div className="bill-drawer">
+    <div className="view-detail-drawer">
-      <Tabs animate={true} large={true} selectedTabId="landed_cost">
+      <Tabs animate={true} large={true} defaultSelectedTabId="landed_cost">
         <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable />}
+        />
         <Tab
           title={intl.get('located_landed_cost')}
           id={'landed_cost'}

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Invoice view detail.
+ */
+export default function InvoiceDetail() {
+  return (
+    <div className="view-detail-drawer">
+      <Tabs
+        animate={true}
+        large={true}
+        defaultSelectedTabId="journal_entries"
+        renderActiveTabPanelOnly={false}
+      >
+        <Tab title={intl.get('details')} disabled={true} />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable journal={[]} />}
+        />
+      </Tabs>
+    </div>
+  );
+}

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import InvoiceDetail from './InvoiceDetail';
+import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice detail drawer content.
+ */
+export default function InvoiceDetailDrawerContent({
+  // #ownProp
+  invoice,
+}) {
+  return (
+    <InvoiceDetailDrawerProvider invoiceId={invoice}>
+      <InvoiceDetail />
+    </InvoiceDetailDrawerProvider>
+  );
+}

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const InvoiceDetailDrawerContext = React.createContext();
+/**
+ * Invoice detail provider.
+ */
+function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
+  //provider.
+  const provider = {};
+  return (
+    <DashboardInsider>
+      <DrawerHeaderContent
+        name="invoice-detail-drawer"
+        title={intl.get('invoice_details')}
+      />
+      <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInvoiceDetailDrawerContext = () =>
+  React.useContext(InvoiceDetailDrawerContext);
+
+export { InvoiceDetailDrawerProvider, useInvoiceDetailDrawerContext };

client/src/containers/Drawers/InvoiceDetailDrawer/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const InvoiceDetailDrawerContent = React.lazy(() =>
+  import('./InvoiceDetailDrawerContent'),
+);
+
+/**
+ * Invoice Detail drawer.
+ */
+function InvoiceDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { invoiceId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <InvoiceDetailDrawerContent invoice={invoiceId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(InvoiceDetailDrawer);

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import PaymentMadeDetails from './PaymentMadeDetails';
+import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made detail content.
+ */
+export default function PaymentMadeDetailContent({
+  // #ownProp
+  paymentMade,
+}) {
+  return (
+    <PaymentMadeDetailProvider paymentMadeId={paymentMade}>
+      <PaymentMadeDetails />
+    </PaymentMadeDetailProvider>
+  );
+}

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const PaymentMadeDetailContext = React.createContext();
+
+function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  //provider.
+  const provider = {};
+  return (
+    <DashboardInsider>
+      <DrawerHeaderContent
+        name="payment-made-detail-drawer"
+        title={intl.get('payment_made_details')}
+      />
+      <PaymentMadeDetailContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadeDetailContext = () =>
+  React.useContext(PaymentMadeDetailContext);
+export { PaymentMadeDetailProvider, usePaymentMadeDetailContext };

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * payment made view detail.
+ */
+export default function PaymentMadeDetails() {
+  return (
+    <div className="view-detail-drawer">
+      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable journal={[]} />}
+        />
+      </Tabs>
+    </div>
+  );
+}

client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const PaymentMadeDetailContent = React.lazy(() =>
+  import('./PaymentMadeDetailContent'),
+);
+
+/**
+ * Payment made detail drawer.
+ */
+function PaymentMadeDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { paymentMadeId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <PaymentMadeDetailContent paymentMade={paymentMadeId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(PaymentMadeDetailDrawer);

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * payment receive view detail.
+ */
+export default function PaymentReceiveDetail() {
+  return (
+    <div className="view-detail-drawer">
+      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable journal={[]} />}
+        />
+      </Tabs>
+    </div>
+  );
+}

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import PaymentReceiveDetail from './PaymentReceiveDetail';
+import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail content.
+ */
+export default function PaymentReceiveDetailContent({
+  // #ownProp
+  paymentReceive,
+}) {
+  return (
+    <PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
+      <PaymentReceiveDetail />
+    </PaymentReceiveDetailProvider>
+  );
+}

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const PaymentReceiveDetailContext = React.createContext();
+/**
+ * Payment receive detail provider.
+ */
+function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  //provider.
+  const provider = {};
+
+  return (
+    <DashboardInsider>
+      <DrawerHeaderContent
+        name="payment-receive-detail-drawer"
+        title={intl.get('payment_receive_details')}
+      />
+      <PaymentReceiveDetailContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentReceiveDetailContext = () =>
+  React.useContext(PaymentReceiveDetailContext);
+
+export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext };

client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const PaymentReceiveDetailContent = React.lazy(() =>
+  import('./PaymentReceiveDetailContent'),
+);
+
+/**
+ * Payment receive detail drawer
+ */
+function PaymentReceiveDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { paymentReceiveId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(PaymentReceiveDetailDrawer);

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Receipt view detail.
+ */
+export default function ReceiptDetail() {
+  return (
+    <div className="view-detail-drawer">
+      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
+        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTable journal={[]} />}
+        />
+      </Tabs>
+    </div>
+  );
+}

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import ReceiptDetail from './ReceiptDetail';
+import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
+
+/**
+ * Receipt detail drawer content.
+ */
+export default function ReceiptDetailDrawerContent({
+  // #ownProp
+  receipt,
+}) {
+  return (
+    <ReceiptDetailDrawerProvider receiptId={receipt}>
+      <ReceiptDetail />
+    </ReceiptDetailDrawerProvider>
+  );
+}

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const ReceiptDetailDrawerContext = React.createContext();
+
+/**
+ * Receipt detail provider.
+ */
+function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
+  //provider.
+  const provider = {};
+
+  return (
+    <DashboardInsider>
+      <DrawerHeaderContent
+        name="receipt-detail-drawer"
+        title={intl.get('receipt_details')}
+      />
+      <ReceiptDetailDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useReceiptDetailDrawerContext = () =>
+  React.useContext(ReceiptDetailDrawerContext);
+
+export { ReceiptDetailDrawerProvider, useReceiptDetailDrawerContext };

client/src/containers/Drawers/ReceiptDetailDrawer/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const ReceiptDetailDrawerContent = React.lazy(() =>
+  import('./ReceiptDetailDrawerContent'),
+);
+
+/**
+ * Receipt Detail drawer.
+ */
+function ReceiptDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { receiptId },
+}) {
+  return (
+    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+      <DrawerSuspense>
+        <ReceiptDetailDrawerContent receipt={receiptId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(ReceiptDetailDrawer);

client/src/containers/JournalEntriesTable/JournalEntriesTable.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+/**
+ * Journal entries table.
+ */
+export default function JournalEntriesTable({ journal }) {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        // accessor: (r) => moment(new Date()).format('YYYY MMM DD'),
+        width: 150,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 150,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contact',
+        width: 150,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        width: 100,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        width: 100,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={journal}
+        className={'datatable--journal-entries'}
+      />
+    </Card>
+  );
+}

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -12,6 +12,7 @@ import withPaymentMadeActions from './withPaymentMadeActions';
 import withPaymentMade from './withPaymentMade';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 
@@ -27,6 +28,9 @@ function PaymentMadesTable({
 
   // #withAlerts
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   // Payment mades table columns.
   const columns = usePaymentMadesTableColumns();
@@ -53,6 +57,11 @@ function PaymentMadesTable({
     openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
   };
 
+  // Handle view detail  payment made.
+  const handleViewDetailPaymentMade = ({ id }) => {
+    openDrawer('payment-receive-detail-drawer', { paymentMadeId: id });
+  };
+
   // Handle datatable fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -89,6 +98,7 @@ function PaymentMadesTable({
       payload={{
         onEdit: handleEditPaymentMade,
         onDelete: handleDeletePaymentMade,
+        onViewDetails: handleViewDetailPaymentMade,
       }}
     />
   );
@@ -98,6 +108,7 @@ export default compose(
   withPaymentMadeActions,
   withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
   withAlertsActions,
+  withDrawerActions,
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),

client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js

@@ -26,15 +26,14 @@ export function AmountAccessor(row) {
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDelete },
+  payload: { onEdit, onDelete, onViewDetails },
 }) {
-  
-
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -70,8 +69,6 @@ export function ActionsCell(props) {
  * Retrieve payment mades table columns.
  */
 export function usePaymentMadesTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -79,6 +79,12 @@ function InvoicesDataTable({
   const handleQuickPaymentReceive = ({ id }) => {
     openDialog('quick-payment-receive', { invoiceId: id });
   };
+
+  // Handle view detail invoice.
+  const handleViewDetailInvoice = ({ id }) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: id });
+  };
+
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -123,6 +129,7 @@ function InvoicesDataTable({
         onEdit: handleEditInvoice,
         onDrawer: handleDrawerInvoice,
         onQuick: handleQuickPaymentReceive,
+        onViewDetails: handleViewDetailInvoice,
         baseCurrency,
       }}
     />

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -95,7 +95,7 @@ export const handleDeleteErrors = (errors) => {
 };
 
 export function ActionsMenu({
-  payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
+  payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick, onViewDetails },
   row: { original },
 }) {
   return (
@@ -103,6 +103,7 @@ export function ActionsMenu({
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -62,6 +62,11 @@ function PaymentReceivesDataTable({
     openDrawer('payment-receive-drawer', { paymentReceiveId: id });
   };
 
+  // Handle view detail  payment receive..
+  const handleViewDetailPaymentReceive = ({ id }) => {
+    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
+  };
+
   // Handle datatable fetch once the table's state changing.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -103,6 +108,7 @@ function PaymentReceivesDataTable({
         onDelete: handleDeletePaymentReceive,
         onEdit: handleEditPaymentReceive,
         onDrawer: handleDrawerPaymentReceive,
+        onViewDetails: handleViewDetailPaymentReceive,
       }}
     />
   );

client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -19,15 +19,14 @@ import { safeCallback } from 'utils';
  */
 export function ActionsMenu({
   row: { original: paymentReceive },
-  payload: { onEdit, onDelete, onDrawer },
+  payload: { onEdit, onDelete, onDrawer, onViewDetails },
 }) {
-  
-
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, paymentReceive)}
       />
       <MenuDivider />
       <MenuItem
@@ -82,8 +81,6 @@ export function ActionsCell(props) {
  * Retrieve payment receives columns.
  */
 export function usePaymentReceivesColumns() {
-  
-
   return React.useMemo(
     () => [
       {
@@ -128,7 +125,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'reference_no',
         width: 140,
         className: 'reference_no',
-      }
+      },
     ],
     [],
   );

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js

@@ -60,14 +60,19 @@ function ReceiptsDataTable({
     openAlert('receipt-delete', { receiptId: receipt.id });
   };
 
+  // Handle drawer receipts.
+  const handleDrawerReceipt = ({ id }) => {
+    openDrawer('receipt-drawer', { receiptId: id });
+  };
+
   // Handles receipt close action.
   const handleCloseReceipt = (receipt) => {
     openAlert('receipt-close', { receiptId: receipt.id });
   };
 
-  // Handle drawer receipts.
+  // Handle view detail receipt.
-  const handleDrawerReceipt = ({ id }) => {
+  const handleViewDetailReceipt = ({ id }) => {
-    openDrawer('receipt-drawer', { receiptId: id });
+    openDrawer('receipt-detail-drawer', { receiptId: id });
   };
 
   // Handles the datable fetch data once the state changing.
@@ -112,6 +117,7 @@ function ReceiptsDataTable({
         onDelete: handleDeleteReceipt,
         onClose: handleCloseReceipt,
         onDrawer: handleDrawerReceipt,
+        onViewDetails: handleViewDetailReceipt,
         baseCurrency,
       }}
     />

client/src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -16,16 +16,15 @@ import { Choose, Money, Icon, If } from 'components';
 import moment from 'moment';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onClose, onDrawer },
+  payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails },
   row: { original: receipt },
 }) {
-  
-
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, receipt)}
       />
       <MenuDivider />
       <MenuItem
@@ -94,8 +93,6 @@ export function StatusAccessor(receipt) {
  * Retrieve receipts table columns.
  */
 export function useReceiptsTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {

client/src/lang/en/index.json

@@ -1166,5 +1166,11 @@
   "From transaction": "From transaction",
   "Landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
-  "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?"
+  "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "journal_entries":"Journal entries",
+  "contact":"Contact",
+  "invoice_details":"Invoice details",
+  "receipt_details":"Receipt details",
+  "payment_receive_details":"Payment receive details",
+  "payment_made_details":"Payment made details"
 }

client/src/style/components/Drawers/ViewDetail/ViewDetail.scss

@@ -1,10 +1,10 @@
-@import '../../Base.scss';
+@import '../../../Base.scss';
 
-.bill-drawer {
+.view-detail-drawer {
   .bp3-tabs {
     .bp3-tab-list {
       position: relative;
-      background-color: #FFF;
+      background-color: #fff;
 
       &:before {
         content: '';
@@ -31,10 +31,10 @@
       }
     }
 
-    .bp3-tab-panel{
+    .bp3-tab-panel {
       margin-top: 0;
 
-      .card{
+      .card {
         margin: 15px;
       }
     }
@@ -42,7 +42,6 @@
 
   .datatable--landed-cost-transactions {
     .table {
-
       .tbody,
       .tbody-inner {
         height: auto;
@@ -55,7 +54,7 @@
         .tr .td {
           padding: 0.6rem;
 
-          &.amount{
+          &.amount {
             font-weight: 600;
           }
         }