feat: add create & edit & delete in vendor credit.

2026-02-18 05:40:31 +00:00 · 2021-11-30 16:34:13 +02:00
parent 119d0b2839
commit 15fa1729a2
24 changed files with 584 additions and 158 deletions
--- a/src/common/resourcesTypes.js
+++ b/src/common/resourcesTypes.js
@@ -12,5 +12,5 @@ export const RESOURCES_TYPES = {
  MANUAL_JOURNAL: 'manual_journal',
  ACCOUNT: 'account',
  CREDIT_NOTE: 'credit_note',
-  VENDOR_CREDIT_NOTE:'vendor_credit_note'
+  VENDOR_CREDIT:'vendor_credit'
 };
--- a/src/config/sidebarMenu.js
+++ b/src/config/sidebarMenu.js
@@ -259,8 +259,8 @@ export default [
        },
      },
      {
-        text: <T id={'sidebar_credit_note'} />,
-        href: '/vendors-credit-notes',
+        text: <T id={'sidebar_vendor_credits'} />,
+        href: '/vendor-credits',
      },
      {
        text: <T id={'payment_mades'} />,
@@ -306,6 +306,14 @@ export default [
          ability: BillAction.Create,
        },
      },
+      {
+        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
+        href: '/vendor-credits/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
+      },
      {
        text: <T id={'new_payment_made'} />,
        href: '/payment-mades/new',
--- a/src/containers/Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert.js
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert.js
@@ -8,17 +8,18 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';

+import { useDeleteVendorCredit } from 'hooks/query';
 import { compose } from 'utils';

 /**
- * Vendor Credit note delete alert.
+ * Vendor Credit delete alert.
 */
-function VendorCreditNoteDeleteAlert({
+function VendorCreditDeleteAlert({
  name,

  // #withAlertStoreConnect
  isOpen,
-  payload: { vendorCrditNoteId },
+  payload: { vendorCreditId },

  // #withAlertActions
  closeAlert,
@@ -26,11 +27,32 @@ function VendorCreditNoteDeleteAlert({
  // #withDrawerActions
  closeDrawer,
 }) {
+  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
+    useDeleteVendorCredit();
+
  // handle cancel delete credit note alert.
  const handleCancelDeleteAlert = () => {
    closeAlert(name);
  };
-  const handleConfirmCreditNoteDelete = () => {};
+  const handleConfirmCreditDelete = () => {
+    deleteVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credits.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };

  return (
    <Alert
@@ -40,11 +62,13 @@ function VendorCreditNoteDeleteAlert({
      intent={Intent.DANGER}
      isOpen={isOpen}
      onCancel={handleCancelDeleteAlert}
-      onConfirm={handleConfirmCreditNoteDelete}
-      // loading={isLoading}
+      onConfirm={handleConfirmCreditDelete}
+      loading={isLoading}
    >
      <p>
-        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+        <FormattedHTMLMessage
+          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
+        />
      </p>
    </Alert>
  );
@@ -54,4 +78,4 @@ export default compose(
  withAlertStoreConnect(),
  withAlertActions,
  withDrawerActions,
-)(VendorCreditNoteDeleteAlert);
+)(VendorCreditDeleteAlert);
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -26,32 +26,74 @@ export default function VendorCreditNoteFloatingActions() {
  const { resetForm, submitForm, isSubmitting } = useFormikContext();

  // Credit note form context.
-  const { setSubmitPayload } = useVendorCreditNoteFormContext();
+  const { setSubmitPayload, isNewMode } = useVendorCreditNoteFormContext();
+
+  // Handle submit, save and anothe new button click.
+  const handleSubmitAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as save & continue editing button click.
+  const handleSubmitSaveContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: true });
+    submitForm();
+  };
+
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, status: false });
+    submitForm();
+  };
+
+  // handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: false });
+    submitForm();
+  };

  // Handle cancel button click.
  const handleCancelBtnClick = (event) => {
    history.goBack();
  };

+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ redirect: true });
+  };
+
  const handleClearBtnClick = (event) => {
    resetForm();
  };

  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Open ----------- */}
+      {/* ----------- Save  ----------- */}
      <ButtonGroup>
        <Button
          disabled={isSubmitting}
          loading={isSubmitting}
          intent={Intent.PRIMARY}
-          text={<T id={'save_open'} />}
+          text={<T id={'save'} />}
        />
+
        <Popover
          content={
            <Menu>
-              <MenuItem text={<T id={'open_and_new'} />} />
-              <MenuItem text={<T id={'open_continue_editing'} />} />
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitSaveContinueEditingBtnClick}
+              />
            </Menu>
          }
          minimal={true}
@@ -70,13 +112,20 @@ export default function VendorCreditNoteFloatingActions() {
        <Button
          disabled={isSubmitting}
          className={'ml1'}
+          onClick={handleSubmitDraftBtnClick}
          text={<T id={'save_as_draft'} />}
        />
        <Popover
          content={
            <Menu>
-              <MenuItem text={<T id={'save_and_new'} />} />
-              <MenuItem text={<T id={'save_continue_editing'} />} />
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitDraftAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitDraftContinueEditingBtnClick}
+              />
            </Menu>
          }
          minimal={true}
@@ -89,14 +138,12 @@ export default function VendorCreditNoteFloatingActions() {
          />
        </Popover>
      </ButtonGroup>
-      {/* ----------- Save and New ----------- */}
-
      {/* ----------- Clear & Reset----------- */}
      <Button
        className={'ml1'}
        disabled={isSubmitting}
        onClick={handleClearBtnClick}
-        // text={ ? <T id={'reset'} /> : <T id={'clear'} />}
+        text={isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
      />
      {/* ----------- Cancel ----------- */}
      <Button
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
+import { Button, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import { sumBy, omit, isEmpty } from 'lodash';
 import classNames from 'classnames';
@@ -36,27 +36,35 @@ function VendorCreditNoteForm({
  organization: { base_currency },
 }) {
  const history = useHistory();
+
  // Vendor Credit note form context.
-  const { bill } = useVendorCreditNoteFormContext();
+  const {
+    isNewMode,
+    submitPayload,
+    vendorCredit,
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+  } = useVendorCreditNoteFormContext();

  // Initial values.
  const initialValues = React.useMemo(
    () => ({
-      ...(!isEmpty(bill)
+      ...(!isEmpty(vendorCredit)
        ? {
-            ...transformToEditForm(bill),
-            currency_code: base_currency,
+            ...transformToEditForm(vendorCredit),
          }
        : {
            ...defaultVendorsCreditNote,
-            currency_code: base_currency,
          }),
    }),
-    [],
+    [vendorCredit, base_currency],
  );

-  // Handle form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
    const entries = filterNonZeroEntries(values.entries);
    const totalQuantity = safeSumBy(entries, 'quantity');

@@ -68,18 +76,43 @@ function VendorCreditNoteForm({
      setSubmitting(false);
      return;
    }
-
-    const form = {};
-
+    const form = {
+      ...transformFormValuesToRequest(values),
+    };
    // Handle the request success.
-    const onSuccess = (response) => {};
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'vendor_credits.success_message'
+            : 'vendor_credits.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);

+      if (submitPayload.redirect) {
+        history.push('/vendor-credits');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
    // Handle the request error.
    const onError = ({
      response: {
        data: { errors },
      },
-    }) => {};
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createVendorCreditMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editVendorCreditMutate([vendorCredit.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
  };

  return (
@@ -92,15 +125,16 @@ function VendorCreditNoteForm({
    >
      <Formik
        validationSchema={
-          true ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
        }
        initialValues={initialValues}
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
      >
        <Form>
          <VendorCreditNoteFormHeader />
          <VendorCreditNoteItemsEntriesEditor />
          <VendorCreditNoteFormFooter />
+
          <VendorCreditNoteFloatingActions />
        </Form>
      </Formik>
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
@@ -5,9 +5,8 @@ import { isBlank } from 'utils';

 const getSchema = Yup.object().shape({
  vendor_id: Yup.number().required().label(intl.get('vendor_name_')),
-  bill_date: Yup.date().required().label(intl.get('bill_date_')),
-  due_date: Yup.date().required().label(intl.get('due_date_')),
-  bill_number: Yup.string()
+  vendor_credit_date: Yup.date().required().label(intl.get('bill_date_')),
+  vendor_credit_number: Yup.string()
    .max(DATATYPES_LENGTH.STRING)
    .label(intl.get('bill_number_')),
  reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
@@ -16,7 +15,6 @@ const getSchema = Yup.object().shape({
    .min(1)
    .max(DATATYPES_LENGTH.TEXT)
    .label(intl.get('note')),
-  open: Yup.boolean(),
  entries: Yup.array().of(
    Yup.object().shape({
      quantity: Yup.number()
@@ -33,7 +31,6 @@ const getSchema = Yup.object().shape({
          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
          then: Yup.number().required(),
        }),
-      total: Yup.number().nullable(),
      discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),
      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
    }),
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
@@ -63,22 +63,25 @@ function VendorCreditNoteFormHeaderFields() {
        )}
      </FastField>

-      {/* ------- Credit note date ------- */}
-      <FastField name={'bill_date'}>
+      {/* ------- Vendor Credit date ------- */}
+      <FastField name={'vendor_credit_date'}>
        {({ form, field: { value }, meta: { error, touched } }) => (
          <FormGroup
            label={<T id={'credit_note.label_credit_note_date'} />}
            inline={true}
            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--credit_note_date', CLASSES.FILL)}
+            className={classNames(
+              'form-group--vendor_credit_date',
+              CLASSES.FILL,
+            )}
            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_date" />}
+            helperText={<ErrorMessage name="vendor_credit_date" />}
          >
            <DateInput
              {...momentFormatter('YYYY/MM/DD')}
              value={tansformDateValue(value)}
              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('bill_date', formattedDate);
+                form.setFieldValue('vendor_credit_date', formattedDate);
              })}
              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
              inputProps={{
@@ -89,22 +92,22 @@ function VendorCreditNoteFormHeaderFields() {
        )}
      </FastField>

-      {/* ----------- Credit note # ----------- */}
-      <FastField name={'bill_number'}>
+      {/* ----------- Vendor Credit No # ----------- */}
+      <FastField name={'vendor_credit_number'}>
        {({ field, meta: { error, touched } }) => (
          <FormGroup
            label={<T id={'credit_note.label_credit_note'} />}
            inline={true}
-            className={('form-group--bill_number', CLASSES.FILL)}
+            className={('form-group--vendor_credit_number', CLASSES.FILL)}
            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_number" />}
+            helperText={<ErrorMessage name="vendor_credit_number" />}
          >
            <InputGroup minimal={true} {...field} />
          </FormGroup>
        )}
      </FastField>
      {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
+      {/* <FastField name={'reference_no'}>
        {({ field, meta: { error, touched } }) => (
          <FormGroup
            label={<T id={'reference_no'} />}
@@ -116,7 +119,7 @@ function VendorCreditNoteFormHeaderFields() {
            <InputGroup minimal={true} {...field} />
          </FormGroup>
        )}
-      </FastField>
+      </FastField> */}
    </div>
  );
 }
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
@@ -14,7 +14,7 @@ export default function VendorCreditNoteFormPage() {
  const idAsInteger = parseInt(id, 10);

  return (
-    <VendorCreditNoteFormProvider creditNoteId={idAsInteger}>
+    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
      <VendorCreditNoteForm />
    </VendorCreditNoteFormProvider>
  );
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
@@ -1,25 +1,20 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
-import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { transformToEditForm } from './utils';

-import { useBill, useItems, useVendors } from 'hooks/query';
+import {
+  useCreateVendorCredit,
+  useEditVendorCredit,
+  useVendorCredit,
+  useItems,
+  useVendors,
+} from 'hooks/query';

 const VendorCreditNoteFormContext = React.createContext();

 /**
 * Vendor Credit note data provider.
 */
-function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
-  const { state } = useLocation();
-  const billId = state?.action;
-
-  // Fetches the bill by the given id.
-  const { data: bill, isLoading: isBillLoading } = useBill(billId, {
-    enabled: !!billId,
-  });
-
+function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
  // Handle fetching the items table based on the given query.
  const {
    data: { items },
@@ -34,28 +29,41 @@ function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
    isLoading: isVendorsLoading,
  } = useVendors({ page_size: 10000 });

+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
  // Form submit payload.
  const [submitPayload, setSubmitPayload] = React.useState();

+  // Create and edit vendor credit mutations.
+  const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
+  const { mutateAsync: editVendorCreditMutate } = useEditVendorCredit();
+
  // Determines whether the form in new mode.
-  const isNewMode = !creditNoteId;
+  const isNewMode = !vendorCreditId;

  // Provider payload.
  const provider = {
-    bill,
    items,
    vendors,
-    billId,
+    vendorCredit,
    submitPayload,
-
-    setSubmitPayload,
    isNewMode,
+
+    isVendorCreditLoading,
+
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+    setSubmitPayload,
  };

  return (
    <DashboardInsider
-      loading={isBillLoading || isItemsLoading || isVendorsLoading}
-      name={'vendor-credit-note-form'}
+      loading={isItemsLoading || isVendorsLoading || isVendorCreditLoading}
+      name={'vendor-credits-form'}
    >
      <VendorCreditNoteFormContext.Provider value={provider} {...props} />
    </DashboardInsider>
@@ -65,4 +73,4 @@ function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
 const useVendorCreditNoteFormContext = () =>
  React.useContext(VendorCreditNoteFormContext);

-export { VendorCreditNoteFormProvider , useVendorCreditNoteFormContext };
+export { VendorCreditNoteFormProvider, useVendorCreditNoteFormContext };
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 import moment from 'moment';
-import intl from 'react-intl-universal';
-import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+
 import {
  defaultFastFieldShouldUpdate,
  transformToForm,
@@ -14,7 +12,6 @@ import {
  updateItemsEntriesTotal,
  ensureEntriesHaveEmptyLine,
 } from 'containers/Entries/utils';
-import { isLandedCostDisabled } from '../../../Entries/utils';

 export const MIN_LINES_NUMBER = 4;

@@ -32,11 +29,10 @@ export const defaultCreditNoteEntry = {
 // Default Vendors Credit Note.
 export const defaultVendorsCreditNote = {
  vendor_id: '',
-  bill_number: '',
-  bill_date: moment(new Date()).format('YYYY-MM-DD'),
-  reference_no: '',
+  vendor_credit_number: '',
+  vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
+  // reference_no: '',
  note: '',
-  open: '',
  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };

@@ -64,16 +60,18 @@ export const transformToEditForm = (creditNote) => {
  };
 };

-
 /**
 * Transformes credit note entries to submit request.
 */
- export const transformEntriesToSubmit = (entries) => {
+export const transformEntriesToSubmit = (entries) => {
  const transformCreditNoteEntry = R.compose(
    R.omit(['amount']),
    R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
  );
-  return R.compose(orderingLinesIndexes, R.map(transformCreditNoteEntry))(entries);
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
 };

 /**
@@ -86,21 +84,19 @@ export const filterNonZeroEntries = (entries) => {
 /**
 * Transformes form values to request body.
 */
- export const transformFormValuesToRequest = (values) => {
+export const transformFormValuesToRequest = (values) => {
  const entries = filterNonZeroEntries(values.entries);

  return {
    ...values,
    entries: transformEntriesToSubmit(entries),
-    open: false,
  };
 };

-
 /**
 * Detarmines vendors fast field should update
 */
- export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
  return (
    newProps.vendors !== oldProps.vendors ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
@@ -110,9 +106,9 @@ export const filterNonZeroEntries = (entries) => {
 /**
 * Detarmines entries fast field should update.
 */
- export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
  return (
    newProps.items !== oldProps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
-};
+};
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
@@ -18,6 +18,8 @@ import {
 } from 'components';
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';

+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
 import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -30,6 +32,7 @@ import { compose } from 'utils';
 */
 function VendorsCreditNoteActionsBar({
  // #withVendorsCreditNotes
+  vendorCreditFilterRoles,

  // #withVendorsCreditNotesActions
  setVendorsCreditNoteTableState,
@@ -42,9 +45,14 @@ function VendorsCreditNoteActionsBar({
 }) {
  const history = useHistory();

-  // credit note list context.
+  // vendor credit list context.
+  const { VendorCreditsViews, fields, refresh } =
+    useVendorsCreditNoteListContext();

-  // credit note refresh action.
+  // Handle click a new Vendor.
+  const handleClickNewVendorCredit = () => {
+    history.push('/vendor-credits/new');
+  };

  // Handle view tab change.
  const handleTabChange = (view) => {
@@ -52,11 +60,13 @@ function VendorsCreditNoteActionsBar({
  };

  // Handle click a refresh credit note.
-  const handleRefreshBtnClick = () => {};
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };

  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
-    addSetting('vendorsCreditNote', 'tableSize', size);
+    addSetting('vendorCredits', 'tableSize', size);
  };

  return (
@@ -64,11 +74,33 @@ function VendorsCreditNoteActionsBar({
      <NavbarGroup>
        <DashboardActionViewsList
          allMenuItem={true}
-          resourceName={'credit_note'}
-          views={[]}
+          resourceName={'vendor_credit'}
+          views={VendorCreditsViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
          onChange={handleTabChange}
        />
        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'vendor_credits.action.new_vendor_credit'} />}
+          onClick={handleClickNewVendorCredit}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: vendorCreditFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setVendorsCreditNoteTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={vendorCreditFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
@@ -106,7 +138,7 @@ export default compose(
  withVendorsCreditNotesActions,
  withSettingsActions,
  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
-    creditNoteFilterRoles: vendorsCreditNoteTableState.filterRoles,
+    vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
  })),
  withSettings(({ vendorsCreditNoteSetting }) => ({
    creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -14,7 +14,7 @@ import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';

-import { useVendorsCreditNoteTableColumns } from './components';
+import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';

 import { compose } from 'utils';
@@ -34,7 +34,14 @@ function VendorsCreditNoteDataTable({
 }) {
  const history = useHistory();

-  // Credit note list context.
+  // Vendor credits context.
+  const {
+    vendorCredits,
+    pagination,
+    isEmptyStatus,
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+  } = useVendorsCreditNoteListContext();

  // Credit note table columns.
  const columns = useVendorsCreditNoteTableColumns();
@@ -56,40 +63,39 @@ function VendorsCreditNoteDataTable({
  );

  // Display create note empty status instead of the table.
-  // if (isEmptyStatus) {
-  //   return <VendorsCreditNoteEmptyStatus />;
-  // }
+  if (isEmptyStatus) {
+    return <VendorsCreditNoteEmptyStatus />;
+  }

  // Handle delete credit note.
  const handleDeleteVendorCreditNote = ({ id }) => {
-    openAlert('vendor-credit-note-delete', { creditNoteId: id });
+    openAlert('vendor-credit-delete', { vendorCreditId: id });
  };

  // Handle edit credit note.
-  const hanldeEditVendorCreditNote = (creditNote) => {
-    history.push(`/vendor-credit-notes/${creditNote.id}/edit`);
+  const hanldeEditVendorCreditNote = (vendorCredit) => {
+    history.push(`/vendor-credits/${vendorCredit.id}/edit`);
  };

  return (
    <DashboardContentTable>
      <DataTable
        columns={columns}
-        data={[]}
-        // loading={}
-        // headerLoading={}
-        // progressBarLoading={}
-        onFetchData={handleDataTableFetchData}
+        data={vendorCredits}
+        loading={isVendorCreditsLoading}
+        headerLoading={isVendorCreditsLoading}
+        progressBarLoading={isVendorCreditsFetching}
+        // onFetchData={handleDataTableFetchData}
        manualSortBy={true}
        selectionColumn={true}
        noInitialFetch={true}
        sticky={true}
        pagination={true}
-        manualPagination={true}
-        // pagesCount={}
-        autoResetSortBy={false}
-        autoResetPage={false}
+        pagesCount={pagination.pagesCount}
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        // onCellClick={handleCellClick}
        initialColumnsWidths={initialColumnsWidths}
        onColumnResizing={handleColumnResizing}
        size={creditNoteTableSize}
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
@@ -5,6 +5,7 @@ import { EmptyStatus } from 'components';
 import { FormattedMessage as T } from 'components';

 export default function VendorsCreditNoteEmptyStatus() {
+  const history = useHistory();
  return (
    <EmptyStatus
      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
@@ -15,8 +16,12 @@ export default function VendorsCreditNoteEmptyStatus() {
      }
      action={
        <>
-          <Button intent={Intent.PRIMARY} large={true}>
-            'Vendors Credit Note'
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => history.push('/vendor-credits/new')}
+          >
+            <T id={'vendor_credits.action.new_vendor_credit'} />
          </Button>

          <Button intent={Intent.NONE} large={true}>
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
@@ -2,19 +2,69 @@ import React from 'react';
 import { isEmpty } from 'lodash';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useVendorCredits,
+  useRefreshVendorCredits,
+} from 'hooks/query';
+
 import { getFieldsFromResourceMeta } from 'utils';

 const VendorsCreditNoteListContext = React.createContext();
+
 /**
 * Vendors Credit note data provider.
 */
 function VendorsCreditNoteListProvider({ query, tableStateChanged, ...props }) {
+  // Vendor Credits refresh action.
+  const { refresh } = useRefreshVendorCredits();
+
+  // Fetch accounts resource views and fields.
+  const { data: VendorCreditsViews, isLoading: isViewsLoading } =
+    useResourceViews('vendor_credits');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('vendor_credits');
+
+  // Fetch vendor credits list.
+  const {
+    data: { vendorCredits, pagination, filterMeta },
+    isLoading: isVendorCreditsLoading,
+    isFetching: isVendorCreditsFetching,
+  } = useVendorCredits(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(vendorCredits) && !isVendorCreditsLoading && !tableStateChanged;
+
  // Provider payload.
-  const provider = {};
+  const provider = {
+    vendorCredits,
+    pagination,
+    VendorCreditsViews,
+    refresh,
+
+    
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
  return (
    <DashboardInsider
-      // loading={}
-      name={'vendors-credit-note-list'}
+      loading={isViewsLoading || isResourceLoading}
+      name={'vendor-credits'}
    >
      <VendorsCreditNoteListContext.Provider value={provider} {...props} />
    </DashboardInsider>
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
@@ -14,26 +14,30 @@ import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider
 */
 function VendorsCreditNoteViewTabs({
  // #withVendorsCreditNotes
-  creditNoteCurrentView,
+  vendorCreditCurrentView,

  // #withVendorsCreditNotesActions
  setVendorsCreditNoteTableState,
 }) {
-  // Credit note list context.
-
-  // Handle click a new view tab.
-  const handleClickNewView = () => {};
-
-  // const tabs = transfromViewsToTabs(creditNoteCurrentView);
+  // vendor credit list context.
+  const { VendorCreditsViews } = useVendorsCreditNoteListContext();

  // Handle tab change.
  const handleTabsChange = (viewSlug) => {
-    setVendorsCreditNoteTableState({ viewSlug });
+    setVendorsCreditNoteTableState({ viewSlug: viewSlug || null });
  };

+  const tabs = transfromViewsToTabs(VendorCreditsViews);
  return (
    <Navbar className={'navbar--dashboard-views'}>
-      <NavbarGroup align={Alignment.LEFT}></NavbarGroup>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={vendorCreditCurrentView}
+          resourceName={'vendor_credits'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
    </Navbar>
  );
 }
@@ -41,6 +45,6 @@ function VendorsCreditNoteViewTabs({
 export default compose(
  withVendorsCreditNotesActions,
  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
-    creditNoteCurrentView: vendorsCreditNoteTableState.viewSlug,
+    vendorCreditCurrentView: vendorsCreditNoteTableState.viewSlug,
  })),
 )(VendorsCreditNoteViewTabs);
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -21,6 +21,36 @@ import {
 } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';

+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('vendor_credits.action.edit_vendor_credit')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('vendor_credits.action.delete_vendor_credit')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
 /**
 * Retrieve vendors credit note table columns.
 */
@@ -28,12 +58,12 @@ export function useVendorsCreditNoteTableColumns() {
  return React.useMemo(
    () => [
      {
-        id: 'date',
+        id: 'vendor_credit_date',
        Header: intl.get('date'),
-        accessor: 'date',
+        accessor: 'vendor_credit_date',
        Cell: FormatDateCell,
        width: 110,
-        className: 'date',
+        className: 'vendor_credit_date',
        clickable: true,
        textOverview: true,
      },
@@ -47,11 +77,11 @@ export function useVendorsCreditNoteTableColumns() {
        textOverview: true,
      },
      {
-        id: 'credit_note',
-        Header: intl.get('credit_note.label_credit_note_no'),
-        accessor: 'credit_note',
+        id: 'vendor_credit_number',
+        Header: intl.get('vendor_credits.column.vendor_credit_no'),
+        accessor: 'vendor_credit_number',
        width: 100,
-        className: 'credit_note',
+        className: 'vendor_credit_number',
        clickable: true,
        textOverview: true,
      },
@@ -59,6 +89,7 @@ export function useVendorsCreditNoteTableColumns() {
        id: 'amount',
        Header: intl.get('amount'),
        // accessor: 'formatted_amount',
+        accessor: 'amount',
        width: 120,
        align: 'right',
        clickable: true,
--- a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
+++ b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
@@ -1,7 +1,7 @@
 import React from 'react';

-const VendorCreditNoteDeleteAlert = React.lazy(() =>
-  import('../../Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert'),
+const VendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/VendorCreditDeleteAlert'),
 );

 /**
@@ -9,7 +9,7 @@ const VendorCreditNoteDeleteAlert = React.lazy(() =>
 */
 export default [
  {
-    name: 'vendor-credit-note-delete',
-    component: VendorCreditNoteDeleteAlert,
+    name: 'vendor-credit-delete',
+    component: VendorCreditDeleteAlert,
  },
 ];
--- a/src/containers/Settings/withSettings.js
+++ b/src/containers/Settings/withSettings.js
@@ -19,8 +19,8 @@ export default (mapState) => {
      cashflowSettings: state.settings.data.cashflowAccounts,
      cashflowTransactionsSettings: state.settings.data.cashflowTransactions,
      cashflowSetting: state.settings.data.cashflow,
-      creditNoteSettings: state.settings.data.salesCreditNotes,
-      vendorsCreditNoteSetting:state.settings.data.vendorsCreditNotes
+      creditNoteSettings: state.settings.data.creditNotes,
+      vendorsCreditNoteSetting: state.settings.data.vendorCredits,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -30,3 +30,4 @@ export * from './jobs';
 export * from './misc';
 export * from './cashflowAccounts'
 export * from './roles'
+export * from './vendorCredit'
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -108,6 +108,16 @@ const ROLES = {
  ROLES_PERMISSIONS_SCHEMA: 'ROLES_PERMISSIONS_SCHEMA',
 };

+const CREDIT_NOTES = {
+  CREDIT_NOTE: 'CREDIT_NOTE',
+  CREDIT_NOTES: 'CREDIT_NOTES',
+};
+
+const VENDOR_CREDIT_NOTES = {
+  VENDOR_CREDITS: 'VENDOR_CREDITS',
+  VENDOR_CREDIT: 'VENDOR_CREDIT',
+};
+
 const SETTING = {
  SETTING: 'SETTING',
  SETTING_INVOICES: 'SETTING_INVOICES',
@@ -184,4 +194,6 @@ export default {
  ...CONTACTS,
  ...CASH_FLOW_ACCOUNTS,
  ...ROLES,
+  ...CREDIT_NOTES,
+  ...VENDOR_CREDIT_NOTES,
 };
--- a/src/hooks/query/vendorCredit.js
+++ b/src/hooks/query/vendorCredit.js
@@ -0,0 +1,149 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate vendor credit.
+  queryClient.invalidateQueries(t.VENDOR_CREDITS);
+  queryClient.invalidateQueries(t.VENDOR_CREDIT);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate vendors.
+  queryClient.invalidateQueries([t.VENDORS]);
+  queryClient.invalidateQueries(t.VENDOR);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Create a new vendor credit.
+ */
+export function useCreateVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('purchases/vendor-credit', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edit the given vendor credit.
+ */
+export function useEditVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`purchases/vendor-credit/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given vendor credit.
+ */
+export function useDeleteVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+const transformVendorCreditsResponse = (response) => ({
+  vendorCredits: response.data.vendor_credits,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve vendor credit notes list with pagination meta.
+ */
+export function useVendorCredits(query, props) {
+  return useRequestQuery(
+    [t.VENDOR_CREDITS],
+    {
+      method: 'get',
+      url: 'purchases/vendor-credit',
+      params: query,
+    },
+    {
+      select: transformVendorCreditsResponse,
+      defaultData: {
+        vendorCredits: [],
+        pagination: {
+          page: 1,
+          page_size: 12,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve vendor credit detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.VENDOR_CREDIT, id],
+    { method: 'get', url: `purchases/vendor-credit/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshVendorCredits() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.VENDOR_CREDITS);
+    },
+  };
+}
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1500,5 +1500,18 @@
  "credit_note.label_customer_note": "Customer notes",
  "credit_note.label_edit_credit_note": "Edit Credit note",
  "credit_note.label_delete_credit_note": "Delete Credit note",
-  "credit_note.once_delete_this_credit_note": "Once you delete this credit note, you won't be able to restore it later. Are you sure you want to delete this credit note?"
+  "credit_note.once_delete_this_credit_note": "Once you delete this credit note, you won't be able to restore it later. Are you sure you want to delete this credit note?",
+  
+  "sidebar_vendor_credits":"Vendor Credits",
+  "vendor_credits.lable_vendor_credit_list":"Vendor Credit List",
+  "vendor_credits.label.new_vendor_credit":"New Vendor Credit",
+  "vendor_credits.label.edit_vendor_credit":"Edit Vendor Credit",
+  "vendor_credits.column.vendor_credit_no":"Vendor Credit #",
+  "vendor_credits.action.new_vendor_credit":"New Vendor Credit",
+  "vendor_credits.action.edit_vendor_credit":"Edit Vendot Credit",
+  "vendor_credits.action.delete_vendor_credit":"Delete Vendot Credit",
+  "vendor_credits.success_message":"The vendor credit has been created successfully",
+  "vendor_credits.edit_success_message":"The vendor credit has been edited successfully.",
+  "vendor_credits.alert.success_message":"The given vendor credit has been deleted successfully.",
+  "vendor_credits.note.once_delete_this_vendor_credit_note": "Once you delete this vendor credit , you won't be able to restore it later. Are you sure you want to delete this vendor credit ?"
 }
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -759,45 +759,45 @@ export const getDashboardRoutes = () => [
  },
  //  Purchases Credit note.
  {
-    path: `/vendors-credit-notes/:id/edit`,
+    path: `/vendor-credits/:id/edit`,
    component: lazy(() =>
      import(
        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
      ),
    ),
-    name: 'vendor-credit-note-edit',
+    name: 'vendor-credits-edit',
    breadcrumb: intl.get('edit'),
-    pageTitle: intl.get('credit_note.edit_credit_note'),
+    pageTitle: intl.get('vendor_credits.label.edit_vendor_credit'),
    backLink: true,
    sidebarExpand: false,
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
  },
  {
-    path: '/vendors-credit-notes/new',
+    path: '/vendor-credits/new',
    component: lazy(() =>
      import(
        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
      ),
    ),
-    name: 'vendor-credit-note-new',
+    name: 'vendor-credits-new',
    backLink: true,
    sidebarExpand: false,
-    breadcrumb: intl.get('credit_note.new_credit_note'),
-    pageTitle: intl.get('credit_note.new_credit_note'),
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    breadcrumb: intl.get('vendor_credits.label.new_vendor_credit'),
+    pageTitle: intl.get('vendor_credits.label.new_vendor_credit'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
  },
  {
-    path: '/vendors-credit-notes',
+    path: '/vendor-credits',
    component: lazy(() =>
      import(
        '../containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList'
      ),
    ),
-    breadcrumb: intl.get('credit_note.label_list'),
-    pageTitle: intl.get('credit_note.label_list'),
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    breadcrumb: intl.get('vendor_credits.lable_vendor_credit_list'),
+    pageTitle: intl.get('vendor_credits.lable_vendor_credit_list'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
  },

--- a/src/store/settings/settings.reducer.js
+++ b/src/store/settings/settings.reducer.js
@@ -52,6 +52,12 @@ const initialState = {
    cashflowTransactions: {
      tableSize: 'medium',
    },
+    creditNotes: {
+      tableSize: 'medium',
+    },
+    vendorCredits: {
+      tableSize: 'medium',
+    },
  },
 };