re-structure to monorepo.

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
+
+import { useAbilityContext } from '@/hooks/utils';
+import { DrawerMainTabs } from '@/components';
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
+import CreditNoteDetailPanel from './CreditNoteDetailPanel';
+import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
+import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
+import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Credit Note view detail.
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetail() {
+  return (
+    <CreditNoteRoot>
+      <CreditNoteDetailActionsBar />
+      <CreditNoteDetailsTabs />
+    </CreditNoteRoot>
+  );
+}
+
+/**
+ * Credit note details tabs.
+ * @returns {React.JSX}
+ */
+function CreditNoteDetailsTabs() {
+  const ability = useAbilityContext();
+
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<CreditNoteDetailPanel />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<CreditNoteGLEntriesTable />}
+      />
+
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundCreditNoteTransactionsTable />}
+        />
+      )}
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileCreditNoteTransactionsTable />}
+        />
+      )}
+    </DrawerMainTabs>
+  );
+}
+
+const CreditNoteRoot = styled.div``;

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import {
+  DrawerActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  If,
+} from '@/components';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+import { CreditNoteMenuItem } from './utils';
+
+/**
+ * Credit note detail actions bar.
+ */
+function CreditNoteDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { creditNoteId, creditNote } = useCreditNoteDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit credit note.
+  const handleEditCreditNote = () => {
+    history.push(`/credit-notes/${creditNoteId}/edit`);
+    closeDrawer('credit-note-detail-drawer');
+  };
+
+  const handleRefundCreditNote = () => {
+    openDialog('refund-credit-note', { creditNoteId });
+  };
+
+  // Handle delete credit note.
+  const handleDeleteCreditNote = () => {
+    openAlert('credit-note-delete', { creditNoteId });
+  };
+
+  const handleReconcileCreditNote = () => {
+    openDialog('reconcile-credit-note', { creditNoteId });
+  };
+
+  // Handle print credit note.
+  const handlePrintCreditNote = () => {
+    openDialog('credit-note-pdf-preview', { creditNoteId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'credit_note.action.edit_credit_note'} />}
+            onClick={handleEditCreditNote}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+          <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-upward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundCreditNote}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={CreditNoteAction.View} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintCreditNote}
+          />
+        </Can>
+        <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCreditNote}
+          />
+        </Can>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <If condition={creditNote.is_published && !creditNote.is_closed}>
+            <NavbarDivider />
+            <CreditNoteMenuItem
+              payload={{
+                onReconcile: handleReconcileCreditNote,
+              }}
+            />
+          </If>
+        </Can>
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(CreditNoteDetailActionsBar);

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  useCreditNote,
+  useRefundCreditNote,
+  useReconcileCreditNote,
+  useReconcileCreditNotes,
+} from '@/hooks/query';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+
+const CreditNoteDetailDrawerContext = React.createContext();
+
+/**
+ * Credit note detail drawer provider.
+ */
+function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
+
+  // Handle fetch refund credit note.
+  const {
+    data: refundCreditNote,
+    isFetching: isRefundCreditNoteFetching,
+    isLoading: isRefundCreditNoteLoading,
+  } = useRefundCreditNote(creditNoteId, {
+    enabled: !!creditNoteId,
+  });
+
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileCreditNotes,
+    isLoading: isReconcileCreditNoteLoading,
+  } = useReconcileCreditNotes(creditNoteId, {
+    enabled: !!creditNoteId,
+  });
+
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNote } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
+  const provider = {
+    creditNote,
+    refundCreditNote,
+    reconcileCreditNote,
+    reconcileCreditNotes,
+
+    isRefundCreditNoteLoading,
+    isRefundCreditNoteFetching,
+    creditNoteId,
+  };
+
+  return (
+    <DrawerLoading
+      loading={
+        isCreditNoteLoading ||
+        isRefundCreditNoteLoading ||
+        isReconcileCreditNoteLoading ||
+        isReconcileCreditLoading
+      }
+    >
+      <DrawerHeaderContent
+        name="credit-note-detail-drawer"
+        title={intl.get('credit_note.drawer.title', {
+          number: creditNote.credit_note_number,
+        })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('credit_note.drawer.subtitle', {
+                value: creditNote.branch?.name,
+              })
+            : null
+        }
+      />
+      <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useCreditNoteDetailDrawerContext = () =>
+  React.useContext(CreditNoteDetailDrawerContext);
+
+export { CreditNoteDetailDrawerProvider, useCreditNoteDetailDrawerContext };

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '@/components';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail footer
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetailFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={creditNote.terms_conditions}>
+          <DetailItem label={<T id={'note'} />} children={creditNote.note} />
+        </If>
+
+        <If condition={creditNote.terms_conditions}>
+          <DetailItem label={<T id={'terms_conditions'} />}>
+            {creditNote.terms_conditions}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { defaultTo } from 'lodash';
+
+import {
+  FormatDate,
+  T,
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  ButtonLink,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  CustomerDrawerLink,
+  ExchangeRateDetailItem,
+} from '@/components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import { CreditNoteDetailsStatus } from './utils';
+
+/**
+ * Credit note details drawer header.
+ */
+export default function CreditNoteDetailHeader() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{creditNote.formatted_amount}</span>
+          </AmountItem>
+
+          <StatusItem>
+            <CreditNoteDetailsStatus creditNote={creditNote} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_date')}
+            >
+              <FormatDate value={creditNote.formatted_credit_note_date} />
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_no')}
+            >
+              {defaultTo(creditNote.credit_note_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={creditNote.customer_id}>
+                {creditNote.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+            <ExchangeRateDetailItem
+              exchangeRate={creditNote?.exchange_rate}
+              toCurrency={creditNote?.currency_code}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credits_remaining')}
+            >
+              <strong>{creditNote.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(creditNote.reference_no, '-')}
+            />
+            <DetailItem
+              label={<T id={'credit_note.drawer.label_created_at'} />}
+              children={<FormatDate value={creditNote.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const StatusItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+
+const AmountItem = styled(DetailItem)`
+  width: 50%;
+`;

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocBox } from '@/components';
+
+import CreditNoteDetailHeader from './CreditNoteDetailHeader';
+import CreditNoteDetailTable from './CreditNoteDetailTable';
+import CreditNoteDetailTableFooter from './CreditNoteDetailTableFooter';
+import CreditNoteDetailFooter from './CreditNoteDetailFooter';
+
+/**
+ * Credit note details panel.
+ */
+export default function CreditNoteDetailPanel() {
+  return (
+    <CommercialDocBox>
+      <CreditNoteDetailHeader />
+      <CreditNoteDetailTable />
+      <CreditNoteDetailTableFooter />
+      <CreditNoteDetailFooter />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { useCreditNoteReadOnlyEntriesColumns } from './utils';
+
+/**
+ * Credit note detail table.
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetailTable() {
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  // Credit note entries table columns.
+  const columns = useCreditNoteReadOnlyEntriesColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      className={'table-constrant'}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  FormatNumber,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note details panel footer.
+ */
+export default function CreditNoteDetailTableFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+
+  return (
+    <CreditNoteDetailsFooterRoot>
+      <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_subtotal'} />}
+          value={<FormatNumber value={creditNote.formatted_amount} />}
+        />
+        <TotalLine
+          title={<T id={'credit_note.drawer.label_total'} />}
+          value={creditNote.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </CreditNoteTotalLines>
+    </CreditNoteDetailsFooterRoot>
+  );
+}
+
+export const CreditNoteDetailsFooterRoot = styled.div``;
+
+export const CreditNoteTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import { Card } from '@/components';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import { useTransactionsByReference } from '@/hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '@/containers/JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Journal entries table.
+ */
+export function CreditNoteGLEntriesTable() {
+  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+  // Credit note GL entries table columns.
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: creditNoteId,
+      reference_type: 'creditNote',
+    },
+    { enabled: !!creditNoteId },
+  );
+
+  return (
+    <Card>
+      <AmountDisplayedBaseCurrencyMessage />
+
+      <JournalEntriesTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+      />
+    </Card>
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell } from '@/components';
+
+import '@/style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import { DataTable, Card } from '@/components';
+
+import { TableStyle } from '@/constants';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import {
+  useReconcileCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from '@/utils';
+
+/**
+ * Reconcile credit transactions table.
+ */
+function RefundCreditNoteTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  // Credit note drawer context.
+  const { reconcileCreditNotes } = useCreditNoteDetailDrawerContext();
+
+  // Reconcile credit transactions table columns.
+  const columns = useReconcileCreditTransactionsTableColumns();
+
+  // Handle delete reconile credit.
+  const handleDeleteReconcileCreditNote = ({ id }) => {
+    openAlert('reconcile-credit-delete', { creditNoteId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={reconcileCreditNotes}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteReconcileCreditNote,
+        }}
+        styleName={TableStyle.Constrant}
+        className={'datatable--refund-transactions'}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable);

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Credit note reconcilation with invoices table columns.
+ */
+export function useReconcileCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_credit_note_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice_number',
+        width: 100,
+        className: 'invoice_number',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { DataTable, Card } from '@/components';
+
+import { TableStyle } from '@/constants';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from '@/utils';
+
+/**
+ * Refund credit note transactions table.
+ */
+function RefundCreditNoteTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundCreditNote } = useCreditNoteDetailDrawerContext();
+
+  // Refund credit transactions table columns.
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund credit.
+  const handleDeleteRefundCreditNote = ({ id }) => {
+    openAlert('refund-credit-delete', { creditNoteId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundCreditNote}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteRefundCreditNote,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable);

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { safeCallback } from '@/utils';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+export function useRefundCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('refund_credit_transactions.column.amount_refunded'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        id: 'from_account',
+        Header: intl.get(
+          'refund_credit_transactions.column.withdrawal_account',
+        ),
+        accessor: ({ from_account }) => from_account.name,
+        width: 100,
+        className: 'from_account',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 100,
+        className: 'reference_no',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/index.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx

@@ -0,0 +1,143 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Tag,
+  Intent,
+} from '@blueprintjs/core';
+import { getColumnWidth } from '@/utils';
+import {
+  Icon,
+  FormattedMessage as T,
+  TextOverviewTooltipCell,
+  FormatNumberCell,
+  Choose,
+} from '@/components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+export const useCreditNoteReadOnlyEntriesColumns = () => {
+  // credit note details drawer context.
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Credit note more actions mneu.
+ * @returns {React.JSX}
+ */
+export function CreditNoteMenuItem({ payload: { onReconcile } }) {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={<T id={'credit_note.action.reconcile_with_invoices'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}
+
+/**
+ * Credit note details status.
+ * @returns {React.JSX}
+ */
+export function CreditNoteDetailsStatus({ creditNote }) {
+  return (
+    <Choose>
+      <Choose.When condition={creditNote.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}