feat: add View detail.

src/common/drawers.js

@@ -14,4 +14,6 @@ export const DRAWERS = {
   QUICK_WRITE_VENDOR: 'quick-write-vendor',
   QUICK_CREATE_CUSTOMER: 'quick-create-customer',
   QUICK_CREATE_ITEM: 'quick-create-item',
+  CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
 };

src/components/DrawersContainer.js

@@ -17,6 +17,8 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
 import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
 import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
+import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
+import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -47,6 +49,8 @@ export default function DrawersContainer() {
       <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
     </div>
   );
 }

src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js

@@ -41,6 +41,7 @@ function CreditNoteDeleteAlert({
           message: intl.get('credit_note.alert.success_message'),
           intent: Intent.SUCCESS,
         });
+        closeDrawer('credit-note-detail-drawer');
       })
       .catch(
         ({

src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js

@@ -41,6 +41,7 @@ function VendorCreditDeleteAlert({
           message: intl.get('vendor_credits.alert.success_message'),
           intent: Intent.SUCCESS,
         });
+        closeDrawer('vendor-credit-detail-drawer');
       })
       .catch(
         ({

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import CreditNoteDetailPanel from './CreditNoteDetailPanel';
+import clsx from 'classnames';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit Note view detail.
+ */
+export default function CreditNoteDetail() {
+  return (
+    <div className={clsx(CreditNoteDetailCls.root)}>
+      <DrawerMainTabs>
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<CreditNoteDetailPanel />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note detail actions bar.
+ */
+function CreditNoteDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit credit note.
+  const handleEditCreditNote = () => {
+    history.push(`/credit-notes/${creditNoteId}/edit`);
+    closeDrawer('credit-note-detail-drawer');
+  };
+
+  // Handle delete credit note.
+  const handleDeleteCreditNote = () => {
+    openAlert('credit-note-delete', { creditNoteId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'credit_note.action.edit_credit_note'} />}
+          onClick={handleEditCreditNote}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteCreditNote}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(CreditNoteDetailActionsBar);

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import CreditNoteDetail from './CreditNoteDetail';
+import { CreditNoteDetailDrawerProvider } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail drawer content.
+ */
+export default function CreditNoteDetailDrawerContent({
+  // #ownProp
+  creditNoteId,
+}) {
+  return (
+    <CreditNoteDetailDrawerProvider creditNoteId={creditNoteId}>
+      <DrawerBody>
+        <CreditNoteDetail />
+      </DrawerBody>
+    </CreditNoteDetailDrawerProvider>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine, If } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note details panel footer.
+ */
+export default function CreditNoteDetailDrawerFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <div className={clsx(CreditNoteDetailCls.detail_panel_footer)}>
+      <TotalLines className={clsx(CreditNoteDetailCls.total_lines)}>
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_subtotal'} />}
+          value={<FormatNumber value={creditNote.amount} />}
+          className={CreditNoteDetailCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_total'} />}
+          value={creditNote.amount}
+          className={CreditNoteDetailCls.total_line_total}
+        />
+      </TotalLines>
+    </div>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useCreditNote } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const CreditNoteDetailDrawerContext = React.createContext();
+
+/**
+ * Credit note detail drawer provider.
+ */
+function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+
+  const provider = {
+    creditNote,
+    creditNoteId,
+  };
+
+  return (
+    <DrawerLoading loading={isCreditNoteLoading}>
+      <DrawerHeaderContent
+        name="credit-note-detail-drawer"
+        title={intl.get('credit_note.drawer_credit_note_detail')}
+      />
+      <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useCreditNoteDetailDrawerContext = () =>
+  React.useContext(CreditNoteDetailDrawerContext);
+
+export { CreditNoteDetailDrawerProvider, useCreditNoteDetailDrawerContext };

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note details drawer header.
+ */
+export default function CreditNoteDetailHeader() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <span class="big-number">{creditNote.amount}</span>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credit_note_no')}
+          children={defaultTo(creditNote.credit_note_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={creditNote.customer?.display_name}
+        />
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credit_note_date')}
+          children={<FormatDate value={creditNote.credit_note_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('note')}
+          children={defaultTo(creditNote.note, '-')}
+        />
+
+        <DetailItem
+          label={<T id={'credit_note.drawer.label_create_at'} />}
+          children={<FormatDate value={creditNote.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
+import CreditNoteDetailHeader from './CreditNoteDetailHeader';
+import CreditNoteDetailTable from './CreditNoteDetailTable';
+import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+export default function CreditNoteDetailPanel() {
+  return (
+    <div className={clsx(CreditNoteDetailCls.detail_panel)}>
+      <CreditNoteDetailActionsBar />
+      <Card>
+        <CreditNoteDetailHeader />
+        <CreditNoteDetailTable />
+        <CreditNoteDetailDrawerFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import { useCreditNoteReadOnlyEntriesColumns } from './utils';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note detail table.
+ */
+export default function CreditNoteDetailTable() {
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  // Credit note entries table columns.
+  const columns = useCreditNoteReadOnlyEntriesColumns();
+
+  return (
+    <div className={clsx(CreditNoteDetailCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const CreditNoteDetailDrawerContent = React.lazy(() =>
+  import('./CreditNoteDetailDrawerContent'),
+);
+
+/**
+ * Credit note detail drawer.
+ */
+function CreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { creditNoteId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <CreditNoteDetailDrawerContent creditNoteId={creditNoteId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(CreditNoteDetailDrawer);

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
+
+export const useCreditNoteReadOnlyEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import VendorCreditDetailPanel from './VendorCreditDetailPanel';
+import clsx from 'classnames';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor credit view detail.
+ */
+export default function VendorCreditDetail() {
+  return (
+    <div className={clsx(VendorCreditDetailCls.root)}>
+      <DrawerMainTabs>
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<VendorCreditDetailPanel />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T, Can } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Vendor credit detail actions bar.
+ */
+function VendorCreditDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit credit note.
+  const handleEditVendorCredit = () => {
+    history.push(`/vendor-credits/${vendorCreditId}/edit`);
+    closeDrawer('vendor-credit-detail-drawer');
+  };
+
+  // Handle delete credit note.
+  const handleDeleteVendorCredit = () => {
+    openAlert('vendor-credit-delete', { vendorCreditId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
+          onClick={handleEditVendorCredit}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteVendorCredit}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(VendorCreditDetailActionsBar);

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import VendorCreditDetail from './VendorCreditDetail';
+import { VendorCreditDetailDrawerProvider } from './VendorCreditDetailDrawerProvider';
+
+/**
+ * Vendor credit detail drawer content.
+ */
+export default function VendorCreditDetailDrawerContent({ vendorCreditId }) {
+  return (
+    <VendorCreditDetailDrawerProvider vendorCreditId={vendorCreditId}>
+      <DrawerBody>
+        <VendorCreditDetail />
+      </DrawerBody>
+    </VendorCreditDetailDrawerProvider>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine, If } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor Credit detail panel footer.
+ */
+export default function VendorCreditDetailDrawerFooter() {
+
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <div className={clsx(VendorCreditDetailCls.detail_panel_footer)}>
+      <TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_subtotal'} />}
+          value={<FormatNumber value={vendorCredit.amount} />}
+          className={VendorCreditDetailCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_total'} />}
+          value={vendorCredit.amount}
+          className={VendorCreditDetailCls.total_line_total}
+        />
+      </TotalLines>
+      
+    </div>
+  )
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useVendorCredit } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const VendorCreditDetailDrawerContext = React.createContext();
+
+/**
+ * Vendor credit drawer provider.
+ */
+function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  const provider = {
+    vendorCredit,
+    vendorCreditId,
+  };
+
+  return (
+    <DrawerLoading loading={isVendorCreditLoading}>
+      <DrawerHeaderContent
+        name="vendor-credit-detail-drawer"
+        title={intl.get('vendor_credit.drawer_vendor_credit_detail')}
+      />
+      <VendorCreditDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useVendorCreditDetailDrawerContext = () =>
+  React.useContext(VendorCreditDetailDrawerContext);
+
+export { VendorCreditDetailDrawerProvider, useVendorCreditDetailDrawerContext };

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor credit detail drawer header.
+ */
+export default function VendorCreditDetailHeader() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+  return (
+    <div className={clsx(VendorCreditDetailCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <span class="big-number">{vendorCredit.amount}</span>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
+          children={defaultTo(vendorCredit.vendor_credit_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('vendor_name')}
+          children={vendorCredit.vendor?.display_name}
+        />
+        <DetailItem
+          label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+          children={<FormatDate value={vendorCredit.vendor_credit_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('note')}
+          children={defaultTo(vendorCredit.note, '-')}
+        />
+
+        <DetailItem
+          label={<T id={'vendor_credit.drawer.label_create_at'} />}
+          children={<FormatDate value={vendorCredit.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
+import VendorCreditDetailHeader from './VendorCreditDetailHeader';
+import VendorCreditDetailTable from './VendorCreditDetailTable';
+import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+export default function VendorCreditDetailPanel() {
+  return (
+    <div className={clsx(VendorCreditDetailCls.detail_panel)}>
+      <VendorCreditDetailActionsBar />
+      <Card>
+        <VendorCreditDetailHeader />
+        <VendorCreditDetailTable />
+        <VendorCreditDetailDrawerFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor Credit detail table.
+ */
+export default function VendorCreditDetailTable() {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+
+  // Vendor Credit entries table columns.
+  const columns = useVendorCreditReadonlyEntriesTableColumns();
+
+  return (
+    <div className={clsx(VendorCreditDetailCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const VendorCreditDetailDrawerContent = React.lazy(() =>
+  import('./VendorCreditDetailDrawerContent'),
+);
+
+/**
+ * Vendor Credit detail drawer.
+ */
+function VendorCreditDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { vendorCreditId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <VendorCreditDetailDrawerContent vendorCreditId={vendorCreditId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(VendorCreditDetailDrawer);

src/containers/Drawers/VendorCreditDetailDrawer/utils.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve vendor credit readonly details entries table columns.
+ */
+export const useVendorCreditReadonlyEntriesTableColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        width: 150,
+        className: 'item',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        className: 'description',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: 100,
+        align: 'right',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );

src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js

@@ -11,8 +11,9 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
-import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
@@ -29,6 +30,9 @@ function VendorsCreditNoteDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #withSettings
   creditNoteTableSize,
 }) {
@@ -67,6 +71,10 @@ function VendorsCreditNoteDataTable({
     return <VendorsCreditNoteEmptyStatus />;
   }
 
+  const handleViewDetailVendorCredit = ({ id }) => {
+    openDrawer('vendor-credit-detail-drawer', { vendorCreditId: id });
+  };
+
   // Handle delete credit note.
   const handleDeleteVendorCreditNote = ({ id }) => {
     openAlert('vendor-credit-delete', { vendorCreditId: id });
@@ -77,6 +85,13 @@ function VendorsCreditNoteDataTable({
     history.push(`/vendor-credits/${vendorCredit.id}/edit`);
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('vendor-credit-detail-drawer', {
+      vendorCreditId: cell.row.original.id,
+    });
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -85,7 +100,7 @@ function VendorsCreditNoteDataTable({
         loading={isVendorCreditsLoading}
         headerLoading={isVendorCreditsLoading}
         progressBarLoading={isVendorCreditsFetching}
-        // onFetchData={handleDataTableFetchData}
+        onFetchData={handleDataTableFetchData}
         manualSortBy={true}
         selectionColumn={true}
         noInitialFetch={true}
@@ -95,11 +110,12 @@ function VendorsCreditNoteDataTable({
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
-        // onCellClick={handleCellClick}
+        onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
         size={creditNoteTableSize}
         payload={{
+          onViewDetails: handleViewDetailVendorCredit,
           onDelete: handleDeleteVendorCreditNote,
           onEdit: hanldeEditVendorCreditNote,
         }}
@@ -112,6 +128,7 @@ export default compose(
   withDashboardActions,
   withVendorsCreditNotesActions,
   withAlertsActions,
+  withDrawerActions,
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),

src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js

@@ -11,8 +11,9 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCreditNotesActions from './withCreditNotesActions';
-import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useCreditNoteTableColumns, ActionsMenu } from './components';
 import { useCreditNoteListContext } from './CreditNotesListProvider';
@@ -29,6 +30,9 @@ function CreditNotesDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #withSettings
   creditNoteTableSize,
 }) {
@@ -67,6 +71,10 @@ function CreditNotesDataTable({
     return <CreditNoteEmptyStatus />;
   }
 
+  const handleViewDetailCreditNote = ({ id }) => {
+    openDrawer('credit-note-detail-drawer', { creditNoteId: id });
+  };
+
   // Handle delete credit note.
   const handleDeleteCreditNote = ({ id }) => {
     openAlert('credit-note-delete', { creditNoteId: id });
@@ -77,6 +85,13 @@ function CreditNotesDataTable({
     history.push(`/credit-notes/${creditNote.id}/edit`);
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('credit-note-detail-drawer', {
+      creditNoteId: cell.row.original.id,
+    });
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -94,10 +109,12 @@ function CreditNotesDataTable({
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
         size={creditNoteTableSize}
         payload={{
+          onViewDetails: handleViewDetailCreditNote,
           onDelete: handleDeleteCreditNote,
           onEdit: hanldeEditCreditNote,
         }}
@@ -109,6 +126,7 @@ function CreditNotesDataTable({
 export default compose(
   withDashboardActions,
   withCreditNotesActions,
+  withDrawerActions,
   withAlertsActions,
   withSettings(({ creditNoteSettings }) => ({
     creditNoteTableSize: creditNoteSettings?.tableSize,

src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js

@@ -29,8 +29,7 @@ function CreditNotesList({
     [resetCreditNotesTableState],
   );
 
-  console.log(creditNoteTableState, 'XX');
-  console.log(creditNoteTableStateChanged, 'XX');
+
   return (
     <CreditNotesListProvider
       query={transformTableStateToQuery(creditNoteTableState)}

src/lang/en/index.json

@@ -1524,5 +1524,17 @@
   "vendor_credit_number_settings": "Vendor Credit Number Settings",
   "vendor_credit.auto_increment.auto": "Your vendor credit  numbers are set on auto-increment mode. Are you sure changing this setting?",
   "vendor_credit.auto_increment.manually": "Your vendor credit  numbers are set on manual mode. Are you sure chaning this settings?",
-  "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number"
+  "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
+  "credit_note.drawer_credit_note_detail":"Credit Note details",
+  "credit_note.drawer.label_credit_note_no":"Credit Note #",
+  "credit_note.drawer.label_credit_note_date":"Credit Date",
+  "credit_note.drawer.label_create_at":"Create at",
+  "credit_note.drawer.label_total": "TOTAL",
+  "credit_note.drawer.label_subtotal": "Subtotal",
+  "vendor_credit.drawer_vendor_credit_detail":"Vendor Credit details",
+  "vendor_credit.drawer.label_vendor_credit_no":"Vendor Credit #",
+  "vendor_credit.drawer.label_vendor_credit_date":"Vendor Credit Date",
+  "vendor_credit.drawer.label_create_at":"Create at",
+  "vendor_credit.drawer.label_total": "TOTAL",
+  "vendor_credit.drawer.label_subtotal": "Subtotal"
 }

src/style/components/Drawers/CreditNoteDetails.module.scss

@@ -0,0 +1,68 @@
+.root {
+}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .title {
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+    &_dueAmount {
+      font-weight: 600;
+    }
+  }
+
+  &_note {
+    b {
+      color: #727983;
+    }
+  }
+}

src/style/components/Drawers/VendorCreditDetail.module.scss

@@ -0,0 +1,68 @@
+.root {
+}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .title {
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+    &_dueAmount {
+      font-weight: 600;
+    }
+  }
+
+  &_note {
+    b {
+      color: #727983;
+    }
+  }
+}