re-structure to monorepo.

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

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import { Card } from '@/components';
+
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import { useTransactionsByReference } from '@/hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '@/containers/JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Journal entries vendor credit transactions table.
+ */
+export function VendorCreditGLEntriesTable() {
+  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: vendorCreditId,
+      reference_type: 'vendorCredit',
+    },
+    { enabled: !!vendorCreditId },
+  );
+
+  return (
+    <Card>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+      />
+    </Card>
+  );
+}

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/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/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.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 { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import {
+  useReconcileVendorCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+import { compose } from '@/utils';
+
+/**
+ * Reconcile vendor credit transactions table.
+ */
+function ReconcileVendorCreditTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const columns = useReconcileVendorCreditTransactionsTableColumns();
+
+  const { reconcileVendorCredits } = useVendorCreditDetailDrawerContext();
+
+  // Handle delete reconile credit.
+  const handleDeleteReconcileVendorCredit = ({ id }) => {
+    openAlert('reconcile-vendor-delete', { vendorCreditId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={reconcileVendorCredits}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteReconcileVendorCredit,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(
+  ReconcileVendorCreditTransactionsTable,
+);

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.tsx

@@ -0,0 +1,53 @@
+// @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 { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+export function useReconcileVendorCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: 'bill_reference_no',
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import { DataTable, Card } from '@/components';
+
+import { TableStyle } from '@/constants';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from '@/utils';
+
+/**
+ * Refund vendor transactions table.
+ */
+function RefundVendorCreditTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundVendorCredit } = useVendorCreditDetailDrawerContext();
+
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund vendor credit.
+  const handleDeleteRefundVendorCredit = ({ id }) => {
+    openAlert('refund-vendor-delete', { vendorCreditId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundVendorCredit}
+        ContextMenu={ActionsMenu}
+        styleName={TableStyle.Constrant}
+        payload={{
+          onDelete: handleDeleteRefundVendorCredit,
+        }}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundVendorCreditTransactionsTable);

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.tsx

@@ -0,0 +1,61 @@
+// @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 { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <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_vendor_credit.column.amount'),
+        accessor: 'formtted_amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        Header: intl.get('refund_vendor_credit.column.withdrawal_account'),
+        accessor: ({ deposit_account }) => deposit_account.name,
+        width: 100,
+        className: 'deposit_account',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 100,
+        className: 'reference_no',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.tsx

@@ -0,0 +1,66 @@
+// @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 VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
+import VendorCreditDetailPanel from './VendorCreditDetailPanel';
+import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
+import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
+import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Vendor credit view detail.
+ *
+ */
+export default function VendorCreditDetail() {
+  return (
+    <VendorCreditRoot>
+      <VendorCreditDetailActionsBar />
+      <VendorCreditDetailsTabs />
+    </VendorCreditRoot>
+  );
+}
+
+/**
+ * Vendor Credit details tabs.
+ * @returns {React.JSX}
+ */
+function VendorCreditDetailsTabs() {
+  const ability = useAbilityContext();
+
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<VendorCreditDetailPanel />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<VendorCreditGLEntriesTable />}
+      />
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundVendorCreditTransactionsTable />}
+        />
+      )}
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
+      )}
+    </DrawerMainTabs>
+  );
+}
+
+const VendorCreditRoot = styled.div``;

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditMenuItem } from './utils';
+import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  DashboardActionsBar,
+  Can,
+} from '@/components';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendor credit detail actions bar.
+ */
+function VendorCreditDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { vendorCreditId, vendorCredit } = 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 });
+  };
+
+  const handleRefundVendorCredit = () => {
+    openDialog('refund-vendor-credit', { vendorCreditId });
+  };
+
+  const handleReconcileVendorCredit = () => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
+            onClick={handleEditVendorCredit}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundVendorCredit}
+            />
+          </If>
+        </Can>
+        <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+          <NavbarDivider />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteVendorCredit}
+          />
+        </Can>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <NavbarDivider />
+            <VendorCreditMenuItem
+              payload={{
+                onReconcile: handleReconcileVendorCredit,
+              }}
+            />
+          </If>
+        </Can>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(VendorCreditDetailActionsBar);

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.tsx

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

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from '@/components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+/**
+ * Vendor Credit detail panel footer.
+ */
+export default function VendorCreditDetailDrawerFooter() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <VendorCreditFooterRoot>
+      <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_subtotal'} />}
+          value={<FormatNumber value={vendorCredit.formatted_amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'vendor_credit.drawer.label_total'} />}
+          value={vendorCredit.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </VendorCreditTotalLines>
+    </VendorCreditFooterRoot>
+  );
+}
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  useVendorCredit,
+  useRefundVendorCredit,
+  useReconcileVendorCredits,
+} from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+const VendorCreditDetailDrawerContext = React.createContext();
+
+/**
+ * Vendor credit drawer provider.
+ */
+function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Handle fetch refund credit note.
+  const {
+    data: refundVendorCredit,
+    isFetching: isRefundVendorCreditFetching,
+    isLoading: isRefundVendorCreditLoading,
+  } = useRefundVendorCredit(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileVendorCredits,
+    isFetching: isReconcileVendorCreditFetching,
+    isLoading: isReconcileVendorCreditLoading,
+  } = useReconcileVendorCredits(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
+  const provider = {
+    vendorCredit,
+    refundVendorCredit,
+    reconcileVendorCredits,
+    isRefundVendorCreditLoading,
+    isRefundVendorCreditFetching,
+    vendorCreditId,
+  };
+
+  return (
+    <DrawerLoading
+      loading={
+        isVendorCreditLoading ||
+        isRefundVendorCreditLoading ||
+        isReconcileVendorCreditLoading
+      }
+    >
+      <DrawerHeaderContent
+        name="vendor-credit-detail-drawer"
+        title={intl.get('vendor_credit.drawer_vendor_credit_detail', {
+          vendorNumber: vendorCredit.vendor_credit_number,
+        })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('vendor_credit.drawer.subtitle', {
+                value: vendorCredit.branch?.name,
+              })
+            : null
+        }
+      />
+      <VendorCreditDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useVendorCreditDetailDrawerContext = () =>
+  React.useContext(VendorCreditDetailDrawerContext);
+
+export { VendorCreditDetailDrawerProvider, useVendorCreditDetailDrawerContext };

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '@/components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+export function VendorCreditDetailFooter() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'150px'}>
+        <If condition={vendorCredit.note}>
+          <DetailItem label={<T id={'note'} />} children={vendorCredit.note} />
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx

@@ -0,0 +1,97 @@
+// @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,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  VendorDrawerLink,
+  ExchangeRateDetailItem,
+} from '@/components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditDetailsStatus } from './utils';
+
+/**
+ * Vendor credit detail drawer header.
+ */
+export default function VendorCreditDetailHeader() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountItem label={intl.get('amount')}>
+            <span class="big-number">{vendorCredit.formatted_amount}</span>
+          </AmountItem>
+          <StatusItem>
+            <VendorCreditDetailsStatus vendorCredit={vendorCredit} />
+          </StatusItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+            >
+              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+            </DetailItem>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
+            >
+              {defaultTo(vendorCredit.vendor_credit_number, '-')}
+            </DetailItem>
+
+            <DetailItem label={intl.get('vendor_name')}>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
+                {vendorCredit.vendor?.display_name}
+              </VendorDrawerLink>
+            </DetailItem>
+            <ExchangeRateDetailItem
+              exchangeRate={vendorCredit?.exchange_rate}
+              toCurrency={vendorCredit?.currency_code}
+            />
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+            >
+              <strong>{vendorCredit.formatted_credits_remaining}</strong>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(vendorCredit.reference_no, '-')}
+            />
+            <DetailItem
+              label={<T id={'vendor_credit.drawer.label_created_at'} />}
+              children={<FormatDate value={vendorCredit.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/VendorCreditDetailDrawer/VendorCreditDetailPanel.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocBox } from '@/components';
+
+import VendorCreditDetailHeader from './VendorCreditDetailHeader';
+import VendorCreditDetailTable from './VendorCreditDetailTable';
+import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+import { VendorCreditDetailFooter } from './VendorCreditDetailFooter';
+
+/**
+ * Vendor credit details panel.
+ * @returns {React.JSX}
+ */
+export default function VendorCreditDetailPanel() {
+  return (
+    <CommercialDocBox>
+      <VendorCreditDetailHeader />
+      <VendorCreditDetailTable />
+      <VendorCreditDetailDrawerFooter />
+      <VendorCreditDetailFooter />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
+
+import { TableStyle } from '@/constants';
+
+/**
+ * Vendor Credit detail table.
+ */
+export default function VendorCreditDetailTable() {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+
+  // Vendor Credit entries table columns.
+  const columns = useVendorCreditReadonlyEntriesTableColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,144 @@
+// @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 { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+/**
+ * Retrieve vendor credit readonly details entries table columns.
+ */
+export const useVendorCreditReadonlyEntriesTableColumns = () => {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'item',
+        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,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Vendor note more actions menu.
+ * @returns {React.JSX}
+ */
+export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
+
+/**
+ * Vendor Credit details status.
+ * @returns {React.JSX}
+ */
+export function VendorCreditDetailsStatus({ vendorCredit }) {
+  return (
+    <Choose>
+      <Choose.When condition={vendorCredit.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={vendorCredit.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}