From eeb16f4362af547ac5b2668ed57c616bd1a66389 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 30 Nov 2021 21:04:36 +0200
Subject: [PATCH] feat: add create & edit & delete in credit note.

---
 src/common/tables.js                          |   2 +
 .../CreditNotes/CreditNoteDeleteAlert.js      |  26 ++-
 .../InviteUserDialog/InviteUserFormContent.js |   2 +-
 .../VendorCreditNoteFloatingActions.js        |   2 +
 .../VendorsCreditNoteDataTable.js             |   2 +-
 .../CreditNoteFloatingActions.js              |  70 ++++++--
 .../CreditNoteForm/CreditNoteForm.js          |  91 +++++++---
 .../CreditNoteForm/CreditNoteForm.schema.js   |  86 +++++----
 .../CreditNoteForm/CreditNoteFormFooter.js    |   4 +-
 .../CreditNoteFormHeaderFields.js             |  12 +-
 .../CreditNoteForm/CreditNoteFormProvider.js  |  37 ++--
 .../Sales/CreditNotes/CreditNoteForm/utils.js |  57 ++++--
 .../CreditNotesActionsBar.js                  |  41 ++++-
 .../CreditNotesDataTable.js                   |  32 ++--
 .../CreditNotesEmptyStatus.js                 |   9 +-
 .../CreditNotesLanding/CreditNotesList.js     |  15 +-
 .../CreditNotesListProvider.js                |  55 +++++-
 .../CreditNotesLanding/CreditNotesViewTabs.js |  15 +-
 .../CreditNotesLanding/components.js          |  32 ++--
 .../withCreditNotesActions.js                 |   9 +-
 src/hooks/query/creditNote.js                 | 168 ++++++++++++++++++
 src/hooks/query/index.js                      |   7 +-
 src/hooks/query/invoices.js                   |   1 +
 src/lang/en/index.json                        |  81 +++++----
 src/routes/dashboard.js                       |  10 +-
 src/store/CreditNotes/creditNotes.actions.js  |   4 +-
 src/store/CreditNotes/creditNotes.reducer.js  |   2 +-
 src/store/CreditNotes/creditNotes.selector.js |   3 +-
 src/store/CreditNotes/creditNotes.type.js     |   4 +-
 29 files changed, 644 insertions(+), 235 deletions(-)
 create mode 100644 src/hooks/query/creditNote.js

diff --git a/src/common/tables.js b/src/common/tables.js
index 9acd9bd5c..59d6ca127 100644
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -14,6 +14,8 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
+  CREDIT_NOTES: 'credit_notes',
+  VENDOR_CREDITS: 'vendor_credits',
 };
 
 export const TABLE_SIZE = {
diff --git a/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
index 28d6a3bc8..f7cc492c9 100644
--- a/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
+++ b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
@@ -8,6 +8,7 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { useDeleteCreditNote } from 'hooks/query';
 import { compose } from 'utils';
 
 /**
@@ -26,11 +27,32 @@ function CreditNoteDeleteAlert({
   // #withDrawerActions
   closeDrawer,
 }) {
+  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
+    useDeleteCreditNote();
+
   // handle cancel delete credit note alert.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
-  const handleConfirmCreditNoteDelete = () => {};
+  const handleConfirmCreditNoteDelete = () => {
+    deleteCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
 
   return (
     <Alert
@@ -41,7 +63,7 @@ function CreditNoteDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelDeleteAlert}
       onConfirm={handleConfirmCreditNoteDelete}
-      // loading={isLoading}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
index c66fe492f..9e10bf849 100644
--- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
+++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
@@ -24,7 +24,7 @@ function InviteUserFormContent({
   const handleClose = () => {
     closeDialog(dialogName);
   };
-  console.log(roles, 'XX');
+
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
index 3affd700e..d831d0666 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -66,6 +66,7 @@ export default function VendorCreditNoteFloatingActions() {
   // Handle submit button click.
   const handleSubmitBtnClick = (event) => {
     setSubmitPayload({ redirect: true });
+    submitForm();
   };
 
   const handleClearBtnClick = (event) => {
@@ -80,6 +81,7 @@ export default function VendorCreditNoteFloatingActions() {
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
+          onClick={handleSubmitBtnClick}
           text={<T id={'save'} />}
         />
 
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
index 7cf8d381e..7532610d2 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -48,7 +48,7 @@ function VendorsCreditNoteDataTable({
 
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths(TABLES.CREDIT_NOTE);
+    useMemorizedColumnsWidths(TABLES.VENDOR_CREDITS);
 
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = React.useCallback(
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
index 398680493..727643a7b 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
@@ -26,32 +26,76 @@ export default function CreditNoteFloatingActions() {
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
   // Credit note form context.
-  const { setSubmitPayload } = useCreditNoteFormContext();
+  const { setSubmitPayload, isNewMode } = useCreditNoteFormContext();
+
+  // 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 });
+    submitForm();
+  };
+
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Deliver ----------- */}
+      {/* ----------- Save  ----------- */}
       <ButtonGroup>
         <Button
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
-          text={<T id={'save_and_deliver'} />}
+          onClick={handleSubmitBtnClick}
+          text={<T id={'save'} />}
         />
+
         <Popover
           content={
             <Menu>
-              <MenuItem text={<T id={'deliver_and_new'} />} />
-              <MenuItem text={<T id={'deliver_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 +114,20 @@ export default function CreditNoteFloatingActions() {
         <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,18 +140,17 @@ export default function CreditNoteFloatingActions() {
           />
         </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
         className={'ml1'}
+        disabled={isSubmitting}
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
index 503ce1000..9fe97db87 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
@@ -7,8 +7,8 @@ import { sumBy, omit, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  getCreateCreditNoteFormSchema,
-  getEditCreditNoteFormSchema,
+  CreateCreditNoteFormSchema,
+  EditCreditNoteFormSchema,
 } from './CreditNoteForm.schema';
 
 import CreditNoteFormHeader from './CreditNoteFormHeader';
@@ -17,9 +17,21 @@ import CreditNoteFormFooter from './CreditNoteFormFooter';
 import CreditNoteFloatingActions from './CreditNoteFloatingActions';
 
 import { AppToaster } from 'components';
-import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
+
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
-import { transformToEditForm, defaultCreditNote } from './utils';
+import {
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+  defaultCreditNote,
+} from './utils';
+
+import {
+  compose,
+  orderingLinesIndexes,
+  transactionNumber,
+  safeSumBy,
+} from 'utils';
 
 import withSettings from 'containers/Settings/withSettings';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -36,33 +48,35 @@ function CreditNoteForm({
   const history = useHistory();
 
   // Credit note form context.
-  const { invoice } = useCreditNoteFormContext();
+  const {
+    isNewMode,
+    submitPayload,
+    creditNote,
+    createCreditNoteMutate,
+    editCreditNoteMutate,
+  } = useCreditNoteFormContext();
 
   // Initial values.
   const initialValues = React.useMemo(
     () => ({
-      ...(!isEmpty(invoice)
-        ? { ...transformToEditForm(invoice), currency_code: base_currency }
+      ...(!isEmpty(creditNote)
+        ? { ...transformToEditForm(creditNote), currency_code: base_currency }
         : {
             ...defaultCreditNote,
             entries: orderingLinesIndexes(defaultCreditNote.entries),
-            currency_code: base_currency,
           }),
     }),
     [],
   );
 
-  // Handle form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
-    setSubmitting(true);
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');
 
-    const entries = values.entries.filter(
-      (item) => item.item_id && item.quantity,
-    );
-
-    const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
-
-    // Throw danger toaster in case total quantity equals zero.
     if (totalQuantity === 0) {
       AppToaster.show({
         message: intl.get('quantity_cannot_be_zero_or_empty'),
@@ -71,24 +85,45 @@ function CreditNoteForm({
       setSubmitting(false);
       return;
     }
-    // Transformes the values of the form to request.
     const form = {
-      // ...transformValueToRequest(values),
+      ...transformFormValuesToRequest(values),
     };
-
     // Handle the request success.
-    const onSuccess = () => {};
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'credit_note.success_message'
+            : 'credit_note.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/credit-notes');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
     // Handle the request error.
     const onError = ({
       response: {
         data: { errors },
       },
-    }) => {};
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createCreditNoteMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editCreditNoteMutate([creditNote.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
   };
 
-  const CreateCreditNoteFormSchema = getCreateCreditNoteFormSchema();
-  const EditCreditNoteFormSchema = getEditCreditNoteFormSchema();
-
   return (
     <div
       className={classNames(
@@ -99,10 +134,10 @@ function CreditNoteForm({
     >
       <Formik
         validationSchema={
-          true ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
         }
         initialValues={initialValues}
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
       >
         <Form>
           <CreditNoteFormHeader />
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
index 69aa5ee38..dad38888e 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
@@ -3,49 +3,45 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 import { isBlank } from 'utils';
 
-const getSchema = () => Yup.object().shape({
-  customer_id: Yup.string()
-    .label(intl.get('customer_name_'))
-    .required(),
-  invoice_date: Yup.date()
-    .required()
-    .label(intl.get('invoice_date_')),
-  invoice_no: Yup.string()
-    .max(DATATYPES_LENGTH.STRING)
-    .label(intl.get('invoice_no_')),
-  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
-  delivered: Yup.boolean(),
-  invoice_message: Yup.string()
-    .trim()
-    .min(1)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('note')),
-  terms_conditions: Yup.string()
-    .trim()
-    .min(1)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('note')),
-  entries: Yup.array().of(
-    Yup.object().shape({
-      quantity: Yup.number()
-        .nullable()
-        .max(DATATYPES_LENGTH.INT_10)
-        .when(['rate'], {
-          is: (rate) => rate,
-          then: Yup.number().required(),
-        }),
-      rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
-      item_id: Yup.number()
-        .nullable()
-        .when(['quantity', 'rate'], {
-          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
-          then: Yup.number().required(),
-        }),
-      discount: Yup.number().nullable().min(0).max(100),
-      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
-    }),
-  ),
-});
+const getSchema = () =>
+  Yup.object().shape({
+    customer_id: Yup.string().label(intl.get('customer_name_')).required(),
+    credit_note_date: Yup.date().required().label(intl.get('invoice_date_')),
+    credit_note_number: Yup.string()
+      .max(DATATYPES_LENGTH.STRING)
+      .label(intl.get('invoice_no_')),
+    reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    terms_conditions: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number()
+          .nullable()
+          .max(DATATYPES_LENGTH.INT_10)
+          .when(['rate'], {
+            is: (rate) => rate,
+            then: Yup.number().required(),
+          }),
+        rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
+            then: Yup.number().required(),
+          }),
+        discount: Yup.number().nullable().min(0).max(100),
+        description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+      }),
+    ),
+  });
 
-export const getCreateCreditNoteFormSchema = getSchema;
-export const getEditCreditNoteFormSchema = getSchema;
\ No newline at end of file
+export const CreateCreditNoteFormSchema = getSchema;
+export const EditCreditNoteFormSchema = getSchema;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
index 9f4b1af1b..1bf8cd89c 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
@@ -20,11 +20,11 @@ export default function CreditNoteFormFooter() {
         <Row>
           <Col md={8}>
             {/* --------- Customer notes --------- */}
-            <FastField name={'invoice_message'}>
+            <FastField name={'note'}>
               {({ field, meta: { error, touched } }) => (
                 <FormGroup
                   label={<T id={'credit_note.label_customer_note'} />}
-                  className={'form-group--customer_notes'}
+                  className={'form-group--note'}
                   intent={inputIntent({ error, touched })}
                 >
                   <TextArea growVertically={true} {...field} />
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
index 23b8350b6..d17d28e8c 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
@@ -65,7 +65,7 @@ function CreditNoteFormHeaderFields() {
         )}
       </FastField>
       {/* ----------- Credit note date ----------- */}
-      <FastField name={'invoice_date'}>
+      <FastField name={'credit_note_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'credit_note.label_credit_note_date'} />}
@@ -73,13 +73,13 @@ function CreditNoteFormHeaderFields() {
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--credit_note_date', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_date" />}
+            helperText={<ErrorMessage name="credit_note_date" />}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               value={tansformDateValue(value)}
               onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('invoice_date', formattedDate);
+                form.setFieldValue('credit_note_date', formattedDate);
               })}
               popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
               inputProps={{
@@ -90,15 +90,15 @@ function CreditNoteFormHeaderFields() {
         )}
       </FastField>
       {/* ----------- Credit note # ----------- */}
-      <Field name={'invoice_no'}>
+      <Field name={'credit_note_number'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'credit_note.label_credit_note'} />}
             labelInfo={<FieldRequiredHint />}
             inline={true}
-            className={classNames('form-group--invoice-no', CLASSES.FILL)}
+            className={classNames('form-group--credit_note_number', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_no" />}
+            helperText={<ErrorMessage name="credit_note_number" />}
           >
             <InputGroup minimal={true} {...field} />
           </FormGroup>
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
index c4dae1103..0c33c8868 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
@@ -4,7 +4,13 @@ import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { transformToEditForm } from './utils';
 
-import { useInvoice, useItems, useCustomers } from 'hooks/query';
+import {
+  useCreditNote,
+  useCreateCreditNote,
+  useEditCreditNote,
+  useItems,
+  useCustomers,
+} from 'hooks/query';
 
 const CreditNoteFormContext = React.createContext();
 
@@ -12,14 +18,6 @@ const CreditNoteFormContext = React.createContext();
  * Credit note data provider.
  */
 function CreditNoteFormProvider({ creditNoteId, ...props }) {
-  const { state } = useLocation();
-  const invoiceId = state?.action;
-
-  // Fetches the invoice by the given id.
-  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
-    enabled: !!invoiceId,
-  });
-
   // Handle fetch customers data table or list
   const {
     data: { customers },
@@ -34,9 +32,17 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     page_size: 10000,
   });
 
-  // const newCreditNote =
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );
 
   // Create and edit credit note mutations.
+  const { mutateAsync: createCreditNoteMutate } = useCreateCreditNote();
+  const { mutateAsync: editCreditNoteMutate } = useEditCreditNote();
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
@@ -46,23 +52,24 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
 
   // Provider payload.
   const provider = {
-    invoice,
     items,
     customers,
-    invoiceId,
+    creditNote,
     submitPayload,
+    isNewMode,
 
     isItemsLoading,
     isCustomersLoading,
 
+    createCreditNoteMutate,
+    editCreditNoteMutate,
     setSubmitPayload,
-    isNewMode,
   };
 
   return (
     <DashboardInsider
-      loading={isInvoiceLoading || isItemsLoading || isCustomersLoading}
-      name={'credit-note-form'}
+      loading={isItemsLoading || isCustomersLoading || isCreditNoteLoading}
+      name={'credit-notes-form'}
     >
       <CreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
index 2b48c8497..d2992cf9d 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
@@ -1,18 +1,14 @@
 import React from 'react';
+import * as R from 'ramda';
 import moment from 'moment';
-import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
-import { Intent } from '@blueprintjs/core';
-import { omit } from 'lodash';
 
 import {
-  compose,
+  defaultFastFieldShouldUpdate,
   transformToForm,
   repeatValue,
-  transactionNumber,
-  defaultFastFieldShouldUpdate,
+  orderingLinesIndexes,
 } from 'utils';
-import { AppToaster } from 'components';
+
 import {
   updateItemsEntriesTotal,
   ensureEntriesHaveEmptyLine,
@@ -34,11 +30,11 @@ export const defaultCreditNoteEntry = {
 // Default credit note object.
 export const defaultCreditNote = {
   customer_id: '',
-  invoice_date: moment(new Date()).format('YYYY-MM-DD'),
-  invoice_no: '',
-  invoice_no_manually: false,
-  reference_no: '',
-  invoice_message: '',
+  credit_note_date: moment(new Date()).format('YYYY-MM-DD'),
+  credit_note_number: '',
+  credit_note_no_manually: false,
+  // reference_no: '',
+  note: '',
   terms_conditions: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };
@@ -56,7 +52,7 @@ export function transformToEditForm(creditNote) {
       Math.max(MIN_LINES_NUMBER - creditNote.entries.length, 0),
     ),
   ];
-  const entries = compose(
+  const entries = R.compose(
     ensureEntriesHaveEmptyLine(defaultCreditNoteEntry),
     updateItemsEntriesTotal,
   )(initialEntries);
@@ -67,6 +63,39 @@ export function transformToEditForm(creditNote) {
   };
 }
 
+/**
+ * Transformes credit note entries to submit request.
+ */
+export const transformEntriesToSubmit = (entries) => {
+  const transformCreditNoteEntry = R.compose(
+    R.omit(['amount']),
+    R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
+  );
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
+};
+
+/**
+ * Filters the givne non-zero entries.
+ */
+ export const filterNonZeroEntries = (entries) => {
+  return entries.filter((item) => item.item_id && item.quantity);
+};
+
+/**
+ * Transformes form values to request body.
+ */
+ export const transformFormValuesToRequest = (values) => {
+  const entries = filterNonZeroEntries(values.entries);
+
+  return {
+    ...values,
+    entries: transformEntriesToSubmit(entries),
+  };
+};
+
 /**
  * Determines customer name field when should update.
  */
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
index 5db492fa8..be363cfc4 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
@@ -16,9 +16,10 @@ import {
   DashboardFilterButton,
   DashboardRowsHeightButton,
 } from 'components';
-
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
+import { useCreditNoteListContext } from './CreditNotesListProvider';
+
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -45,20 +46,26 @@ function CreditNotesActionsBar({
   const history = useHistory();
 
   // credit note list context.
-
-  // credit note refresh action.
+  const { CreditNotesView, fields, refresh } = useCreditNoteListContext();
 
   // Handle view tab change.
   const handleTabChange = (view) => {
     setCreditNotesTableState({ viewSlug: view ? view.slug : null });
   };
 
+  // Handle click a new Credit.
+  const handleClickNewCreateNote = () => {
+    history.push('/credit-notes/new');
+  };
+
   // Handle click a refresh credit note.
-  const handleRefreshBtnClick = () => {};
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('creditNote', 'tableSize', size);
+    addSetting('creditNotes', 'tableSize', size);
   };
 
   return (
@@ -66,11 +73,31 @@ function CreditNotesActionsBar({
       <NavbarGroup>
         <DashboardActionViewsList
           allMenuItem={true}
-          resourceName={'credit_note'}
-          views={[]}
+          resourceName={'credit_notes'}
+          views={CreditNotesView}
           onChange={handleTabChange}
         />
         <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'credit_note.label.new_credit_note'} />}
+          onClick={handleClickNewCreateNote}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: creditNoteFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCreditNotesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={creditNoteFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
 
         <Button
           className={Classes.MINIMAL}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
index d41dba267..2c45e0e31 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -14,7 +14,7 @@ import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { useCreditNoteTableColumns } from './components';
+import { useCreditNoteTableColumns, ActionsMenu } from './components';
 import { useCreditNoteListContext } from './CreditNotesListProvider';
 
 import { compose } from 'utils';
@@ -35,13 +35,20 @@ function CreditNotesDataTable({
   const history = useHistory();
 
   // Credit note list context.
+  const {
+    creditNotes,
+    pagination,
+    isEmptyStatus,
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+  } = useCreditNoteListContext();
 
   // Credit note table columns.
   const columns = useCreditNoteTableColumns();
 
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths(TABLES.CREDIT_NOTE);
+    useMemorizedColumnsWidths(TABLES.CREDIT_NOTES);
 
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = React.useCallback(
@@ -55,9 +62,14 @@ function CreditNotesDataTable({
     [setCreditNotesTableState],
   );
 
+  // Display create note empty status instead of the table.
+  if (isEmptyStatus) {
+    return <CreditNoteEmptyStatus />;
+  }
+
   // Handle delete credit note.
   const handleDeleteCreditNote = ({ id }) => {
-    openAlert('sale-credit-note-delete', { creditNoteId: id });
+    openAlert('credit-note-delete', { creditNoteId: id });
   };
 
   // Handle edit credit note.
@@ -69,19 +81,19 @@ function CreditNotesDataTable({
     <DashboardContentTable>
       <DataTable
         columns={columns}
-        data={[]}
-        // loading={}
-        // headerLoading={}
-        // progressBarLoading={}
+        data={creditNotes}
+        loading={isCreditNotesLoading}
+        headerLoading={isCreditNotesLoading}
+        progressBarLoading={isCreditNotesFetching}
         onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
         selectionColumn={true}
         noInitialFetch={true}
         sticky={true}
-        autoResetSortBy={false}
-        autoResetPage={false}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
         size={creditNoteTableSize}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
index a0a62a706..6e50c4cdf 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
@@ -5,6 +5,7 @@ import { EmptyStatus } from 'components';
 import { FormattedMessage as T } from 'components';
 
 export default function CreditNotesEmptyStatus() {
+  const history = useHistory();
   return (
     <EmptyStatus
       title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
@@ -15,8 +16,12 @@ export default function CreditNotesEmptyStatus() {
       }
       action={
         <>
-          <Button intent={Intent.PRIMARY} large={true}>
-            <T id={'credit_note.new_credit_note'} />
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => history.push('/credit-notes/new')}
+          >
+            <T id={'credit_note.label.new_credit_note'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
index e8063ed17..65358b6c0 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
@@ -22,12 +22,15 @@ function CreditNotesList({
   resetCreditNotesTableState,
 }) {
   // Resets the credit note table state once the page unmount.
-  // React.useEffect(
-  //   () => () => {
-  //     resetCreditNotesTableState();
-  //   },
-  //   [resetCreditNotesTableState],
-  // );
+  React.useEffect(
+    () => () => {
+      resetCreditNotesTableState();
+    },
+    [resetCreditNotesTableState],
+  );
+
+  console.log(creditNoteTableState, 'XX');
+  console.log(creditNoteTableStateChanged, 'XX');
   return (
     <CreditNotesListProvider
       query={transformTableStateToQuery(creditNoteTableState)}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
index 3b7515fe1..07a778892 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
@@ -2,6 +2,13 @@ import React from 'react';
 import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useCreditNotes,
+  useRefreshCreditNotes,
+} from 'hooks/query';
+
 import { getFieldsFromResourceMeta } from 'utils';
 
 const CreditNoteListContext = React.createContext();
@@ -10,13 +17,53 @@ const CreditNoteListContext = React.createContext();
  * Credit note data provider.
  */
 function CreditNotesListProvider({ query, tableStateChanged, ...props }) {
+  // Credit notes refresh action.
+  const { refresh } = useRefreshCreditNotes();
+
+  // Fetch create notes resource views and fields.
+  const { data: CreditNotesView, isLoading: isViewsLoading } =
+    useResourceViews('credit_notes');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('credit_notes');
+
+  // Fetch credit note list.
+  const {
+    data: { creditNotes, pagination, filterMeta },
+    isFetching: isCreditNotesFetching,
+    isLoading: isCreditNotesLoading,
+  } = useCreditNotes(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.S
+  const isEmptyStatus = isEmpty(creditNotes) && !isCreditNotesLoading && !tableStateChanged;
+
   // Provider payload.
-  const provider = {};
+  const provider = {
+    creditNotes,
+    pagination,
+
+    CreditNotesView,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
 
   return (
     <DashboardInsider
-      // loading={}
-      name={'credit-note-list'}
+      loading={isViewsLoading || isResourceLoading}
+      name={'credit-notes-list'}
     >
       <CreditNoteListContext.Provider value={provider} {...props} />
     </DashboardInsider>
@@ -25,4 +72,4 @@ function CreditNotesListProvider({ query, tableStateChanged, ...props }) {
 
 const useCreditNoteListContext = () => React.useContext(CreditNoteListContext);
 
-export { CreditNotesListProvider , useCreditNoteListContext };
+export { CreditNotesListProvider, useCreditNoteListContext };
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
index 457f052cf..5ef16b4e9 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
@@ -20,11 +20,9 @@ function CreditNotesViewTabs({
   setCreditNotesTableState,
 }) {
   // Credit note list context.
+  const { CreditNotesView } = useCreditNoteListContext();
 
-  // Handle click a new view tab.
-  const handleClickNewView = () => {};
-
-  // const tabs = transfromViewsToTabs(creditNoteCurrentView);
+  const tabs = transfromViewsToTabs(CreditNotesView);
 
   // Handle tab change.
   const handleTabsChange = (viewSlug) => {
@@ -33,7 +31,14 @@ function CreditNotesViewTabs({
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
-      <NavbarGroup align={Alignment.LEFT}></NavbarGroup>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={creditNoteCurrentView}
+          resourceName={'credit_notes'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
     </Navbar>
   );
 }
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 95a75927c..0a8405b2b 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -22,15 +22,7 @@ import {
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
 export function ActionsMenu({
-  payload: {
-    onEdit,
-    onDeliver,
-    onDelete,
-    onDrawer,
-    onQuick,
-    onViewDetails,
-    onPrint,
-  },
+  payload: { onEdit, onDelete, onViewDetails },
   row: { original },
 }) {
   return (
@@ -38,15 +30,16 @@ export function ActionsMenu({
       <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('credit_note.label_edit_credit_note')}
+        text={intl.get('credit_note.action.edit_credit_note')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
-        text={intl.get('credit_note.label_delete_credit_note')}
+        text={intl.get('credit_note.action.delete_credit_note')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}
@@ -62,12 +55,12 @@ export function useCreditNoteTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'date',
-        Header: intl.get('date'),
-        accessor: 'date',
+        id: 'credit_note_date',
+        Header: intl.get('credit_note.column.credit_date'),
+        accessor: 'credit_note_date',
         Cell: FormatDateCell,
         width: 110,
-        className: 'date',
+        className: 'credit_note_date',
         clickable: true,
         textOverview: true,
       },
@@ -81,17 +74,18 @@ export function useCreditNoteTableColumns() {
         textOverview: true,
       },
       {
-        id: 'credit_note',
-        Header: intl.get('credit_note.label_credit_note_no'),
-        accessor: 'credit_note',
+        id: 'credit_note_number',
+        Header: intl.get('credit_note.column.credit_note_no'),
+        accessor: 'credit_note_number',
         width: 100,
-        className: 'credit_note',
+        className: 'credit_note_number',
         clickable: true,
         textOverview: true,
       },
       {
         id: 'amount',
         Header: intl.get('amount'),
+        accessor: 'amount',
         // accessor: 'formatted_amount',
         width: 120,
         align: 'right',
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
index d48eb3f7b..994a498f4 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
@@ -4,9 +4,10 @@ import {
   resetCreditNotesTableState,
 } from '../../../../store/CreditNotes/creditNotes.actions';
 
-const mapDispatchToProps = (dispatch) => ({
-  setCreditNoteTableState: (state) => dispatch(setCreditNotesTableState(state)),
-  resetCreditNoteTableState: () => dispatch(resetCreditNotesTableState()),
+const mapDipatchToProps = (dispatch) => ({
+  setCreditNotesTableState: (queries) =>
+    dispatch(setCreditNotesTableState(queries)),
+  resetCreditNotesTableState: () => dispatch(resetCreditNotesTableState()),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDipatchToProps);
diff --git a/src/hooks/query/creditNote.js b/src/hooks/query/creditNote.js
new file mode 100644
index 000000000..e107005fd
--- /dev/null
+++ b/src/hooks/query/creditNote.js
@@ -0,0 +1,168 @@
+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 credit note.
+  queryClient.invalidateQueries(t.CREDIT_NOTES);
+  queryClient.invalidateQueries(t.CREDIT_NOTE);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate customers.
+  queryClient.invalidateQueries([t.CUSTOMER]);
+  queryClient.invalidateQueries(t.CUSTOMERS);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Create a new credit note.
+ */
+export function useCreateCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('sales/credit_notes', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edit the given credit note.
+ */
+export function useEditCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/credit_notes/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given credit note.
+ */
+export function useDeleteCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`sales/credit_notes/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate vendor credit query.
+      queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+    },
+    ...props,
+  });
+}
+
+const transformInvoices = (res) => ({
+  creditNotes: res.data.credit_notes,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve credit notes list with pagination meta.
+ */
+export function useCreditNotes(query, props) {
+
+
+  return useRequestQuery(
+    [t.CREDIT_NOTES, query],
+    { method: 'get', url: 'sales/credit_notes', params: query },
+    {
+      select: transformInvoices,
+      defaultData: {
+        creditNotes: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+// export function useCreditNotes(query, props) {
+//   return useRequestQuery(
+//     [t.CREDIT_NOTES],
+//     {
+//       method: 'get',
+//       url: 'sales/credit_notes',
+//       params: query,
+//     },
+//     {
+//       select: transformVendorCreditsResponse,
+//       defaultData: {
+//         credit_notes: {},
+//         pagination: {
+//           page: 1,
+//           page_size: 12,
+//           total: 0,
+//         },
+//         filterMeta: {},
+//       },
+//       ...props,
+//     },
+//   );
+// }
+
+/**
+ * Retrieve credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.CREDIT_NOTE, id],
+    { method: 'get', url: `sales/credit_notes/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.credit_note,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshCreditNotes() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CREDIT_NOTES);
+    },
+  };
+}
diff --git a/src/hooks/query/index.js b/src/hooks/query/index.js
index 16adb004d..b1dcf9d13 100644
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -28,6 +28,7 @@ export * from './UniversalSearch/UniversalSearch';
 export * from './GenericResource';
 export * from './jobs';
 export * from './misc';
-export * from './cashflowAccounts'
-export * from './roles'
-export * from './vendorCredit'
+export * from './cashflowAccounts';
+export * from './roles';
+export * from './creditNote';
+export * from './vendorCredit';
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index aabe2fa07..a999764f7 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -102,6 +102,7 @@ const transformInvoices = (res) => ({
  * Retrieve sale invoices list with pagination meta.
  */
 export function useInvoices(query, props) {
+
   return useRequestQuery(
     [t.SALE_INVOICES, query],
     { method: 'get', url: 'sales/invoices', params: query },
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index bc1ab9c4c..17677d624 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1467,51 +1467,54 @@
   "sms_notification.payment_details.type": "Payment receive thank you.",
   "sms_notification.receipt_details.type": "Sale receipt details",
   "personal": "Personal",
-  "list.create":"Create {value}",
-  "roles.label":"Roles",
-  "roles.column.name":"Name",
-  "roles.column.description":"Description",
-  "roles.edit_roles":"Edit Roles",
-  "roles.delete_roles":"Delete Roles",
-  "roles.label.role_name":"Role Name",
-  "roles.label.role_name_":"Role name",
-  "roles.error.role_is_predefined":"Role is predefined, you cannot delete predefined roles.",
-  "roles.error.you_cannot_change_your_own_role":"You cannot change your own role.",
-  "sidebar.transactions_locaking":"Transactions Locaking",
-  "transactions_locking.dialog.label":"Transactions locking",
-  "roles.permission_schema.success_message":"The role has been created successfully.",
-  "roles.permission_schema.upload_message":"The given role has been updated successfully.",
-  "roles.permission_schema.delete.alert_message":"The given role has been deleted successfully.",
-  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?",
-  "users.column.role_name":"Role Name",
-  "roles.error.you_cannot_edit_predefined_roles":"You cannot edit predefined roles.",
-  "roles.error.you_cannot_delete_predefined_roles":"You cannot delete predefined roles.",
-  "roles.error.the_submit_role_has_invalid_permissions":"The submit role has invalid permissions.",
-  "roles.error.you_cannot_delete_role_that_associated_to_users":"You cannot delete role that associated to users",
+  "list.create": "Create {value}",
+  "roles.label": "Roles",
+  "roles.column.name": "Name",
+  "roles.column.description": "Description",
+  "roles.edit_roles": "Edit Roles",
+  "roles.delete_roles": "Delete Roles",
+  "roles.label.role_name": "Role Name",
+  "roles.label.role_name_": "Role name",
+  "roles.error.role_is_predefined": "Role is predefined, you cannot delete predefined roles.",
+  "roles.error.you_cannot_change_your_own_role": "You cannot change your own role.",
+  "sidebar.transactions_locaking": "Transactions Locaking",
+  "transactions_locking.dialog.label": "Transactions locking",
+  "roles.permission_schema.success_message": "The role has been created successfully.",
+  "roles.permission_schema.upload_message": "The given role has been updated successfully.",
+  "roles.permission_schema.delete.alert_message": "The given role has been deleted successfully.",
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it": "Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?",
+  "users.column.role_name": "Role Name",
+  "roles.error.you_cannot_edit_predefined_roles": "You cannot edit predefined roles.",
+  "roles.error.you_cannot_delete_predefined_roles": "You cannot delete predefined roles.",
+  "roles.error.the_submit_role_has_invalid_permissions": "The submit role has invalid permissions.",
+  "roles.error.you_cannot_delete_role_that_associated_to_users": "You cannot delete role that associated to users",
   "sidebar_credit_note": "Credit Notes",
-  "credit_note.label_list": "Credit Note List",
-  "credit_note.new_credit_note": "New Credit Note",
-  "credit_note.edit_credit_note": "Edit Credit Note",
-  "credit_note.label_credit_note_no": "Credit Note #",
+  "credit_note.label_create_note_list": "Credit Note List",
+  "credit_note.label.new_credit_note": "New Credit Note",
+  "credit_note.label.edit_credit_note": "Edit Credit Note",
+  "credit_note.action.edit_credit_note": "Edit Credit note",
+  "credit_note.action.delete_credit_note": "Delete Credit note",
+  "credit_note.column.credit_note_no": "Credit Note #",
+  "credit_note.column.credit_date": "Credit Date",
   "credit_note.empty_status_description": "Record sales transactions from customers who make no or partial payment and help you keep track of accounts receivable with a customer.",
   "credit_note.label_credit_note_date": "Credit Note date",
   "credit_note.label_credit_note": "Credit Note #",
   "credit_note.label_credit_note_details": "Credit Note details",
   "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?",
-  
-  "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.",
+  "credit_note.alert.success_message": "The credit note has been deleted successfully",
+  "credit_note.success_message": "The credit note has been created successfully.",
+  "credit_note.edit_success_message": "The credit note has been edited successfully.",
+  "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 ?"
 }
\ No newline at end of file
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index ece09cac1..d1e25dc84 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -640,7 +640,7 @@ export const getDashboardRoutes = () => [
     ),
     name: 'credit-note-edit',
     breadcrumb: intl.get('edit'),
-    pageTitle: intl.get('credit_note.edit_credit_note'),
+    pageTitle: intl.get('credit_note.label.edit_credit_note'),
     backLink: true,
     sidebarExpand: false,
     defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
@@ -654,10 +654,10 @@ export const getDashboardRoutes = () => [
       ),
     ),
     name: 'credit-note-new',
-    breadcrumb: intl.get('credit_note.new_credit_note'),
+    breadcrumb: intl.get('credit_note.label.new_credit_note'),
     backLink: true,
     sidebarExpand: false,
-    pageTitle: intl.get('credit_note.new_credit_note'),
+    pageTitle: intl.get('credit_note.label.new_credit_note'),
     defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
@@ -668,8 +668,8 @@ export const getDashboardRoutes = () => [
         '../containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList'
       ),
     ),
-    breadcrumb: intl.get('credit_note.label_list'),
-    pageTitle: intl.get('credit_note.label_list'),
+    breadcrumb: intl.get('credit_note.label_create_note_list'),
+    pageTitle: intl.get('credit_note.label_create_note_list'),
     defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
diff --git a/src/store/CreditNotes/creditNotes.actions.js b/src/store/CreditNotes/creditNotes.actions.js
index 9f64e36ab..3215979ba 100644
--- a/src/store/CreditNotes/creditNotes.actions.js
+++ b/src/store/CreditNotes/creditNotes.actions.js
@@ -2,13 +2,13 @@ import t from 'store/types';
 
 export const setCreditNotesTableState = (queries) => {
   return {
-    type: t.CREDIT_NOTE_TABLE_STATE_SET,
+    type: t.CREDIT_NOTES_TABLE_STATE_SET,
     payload: { queries },
   };
 };
 
 export const resetCreditNotesTableState = () => {
   return {
-    type: t.CREDIT_NOTE_TABLE_STATE_RESET,
+    type: t.CREDIT_NOTES_TABLE_STATE_RESET,
   };
 };
diff --git a/src/store/CreditNotes/creditNotes.reducer.js b/src/store/CreditNotes/creditNotes.reducer.js
index 3da7db673..58c3c1340 100644
--- a/src/store/CreditNotes/creditNotes.reducer.js
+++ b/src/store/CreditNotes/creditNotes.reducer.js
@@ -15,7 +15,7 @@ const initialState = {
   tableState: defaultTableQuery,
 };
 
-const STORAGE_KEY = 'bigcapital:CreditNotes';
+const STORAGE_KEY = 'bigcapital:creditNotes';
 
 const CONFIG = {
   key: STORAGE_KEY,
diff --git a/src/store/CreditNotes/creditNotes.selector.js b/src/store/CreditNotes/creditNotes.selector.js
index 76d2d4515..54bedeedf 100644
--- a/src/store/CreditNotes/creditNotes.selector.js
+++ b/src/store/CreditNotes/creditNotes.selector.js
@@ -3,8 +3,7 @@ import { paginationLocationQuery } from 'store/selectors';
 import { createDeepEqualSelector } from 'utils';
 import { defaultTableQuery } from './creditNotes.reducer';
 
-const creditNotesTableStateSelector = (state) =>
-  state.creditNotes?.tableState;
+const creditNotesTableStateSelector = (state) => state.creditNotes.tableState;
 
 /**
  * Retrieve credit note table state.
diff --git a/src/store/CreditNotes/creditNotes.type.js b/src/store/CreditNotes/creditNotes.type.js
index f37eb4f0b..8fee4fcfc 100644
--- a/src/store/CreditNotes/creditNotes.type.js
+++ b/src/store/CreditNotes/creditNotes.type.js
@@ -1,4 +1,4 @@
 export default {
-  CREDIT_NOTE_TABLE_STATE_SET: 'CREDIT_NOTE/TABLES_STATE_SET',
-  CREDIT_NOTE_TABLE_STATE_RESET: 'CREDIT_NOTE/TABLE_STATE/RESET',
+  CREDIT_NOTES_TABLE_STATE_SET: 'CREDIT_NOTE/TABLE_STATE_SET',
+  CREDIT_NOTES_TABLE_STATE_RESET: 'CREDIT_NOTE/TABLE_STATE_RESET',
 };