re-structure to monorepo.

packages/webapp/src/hooks/dashboard/index.tsx

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export * from './useKeywordShortcuts';

packages/webapp/src/hooks/dashboard/useKeywordShortcuts.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+import keyboardShortcuts from '@/constants/keyboardShortcutsOptions';
+import { useAbilitiesFilter } from '../utils/useAbilityContext';
+
+/**
+ * Retrieve the filtered keyword shortcuts.
+ */
+export const useKeywordShortcuts = () => {
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return React.useMemo(
+    () => abilitiesFilter(keyboardShortcuts),
+    [abilitiesFilter],
+  );
+};

packages/webapp/src/hooks/index.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+import { useRef, useEffect, useMemo } from 'react';
+import { useLocation, useHistory } from 'react-router';
+import useAutofocus from './useAutofocus';
+import { useLocalStorage } from './utils/useLocalStorage';
+
+export * from './utils';
+export * from './useQueryString';
+
+export function useIsValuePassed(value, compatatorValue) {
+  const cache = useRef([value]);
+
+  useEffect(() => {
+    if (cache.current.indexOf(value) === -1) {
+      cache.current.push(value);
+    }
+  }, [value]);
+
+  return cache.current.indexOf(compatatorValue) !== -1;
+}
+
+const isCurrentFocus = (autoFocus, columnId, rowIndex) => {
+  let _columnId;
+  let _rowIndex;
+
+  if (Array.isArray(autoFocus)) {
+    _columnId = autoFocus[0];
+    _rowIndex = autoFocus[1] || 0;
+  }
+  _rowIndex = parseInt(_rowIndex, 10);
+
+  return columnId === _columnId && _rowIndex === rowIndex;
+};
+
+export function useCellAutoFocus(ref, autoFocus, columnId, rowIndex) {
+  const focus = useMemo(
+    () => isCurrentFocus(autoFocus, columnId, rowIndex),
+    [autoFocus, columnId, rowIndex],
+  );
+  useEffect(() => {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [ref, focus]);
+
+  return ref;
+}
+
+export { useAutofocus };
+
+export function useMemorizedColumnsWidths(tableName) {
+  const [get, save] = useLocalStorage(`${tableName}.columns_widths`, {});
+
+  const handleColumnResizing = (current, columnWidth, columnsResizing) => {
+    save(columnsResizing.columnWidths);
+  };
+  return [get, save, handleColumnResizing];
+}

packages/webapp/src/hooks/query/GenericResource/index.tsx

@@ -0,0 +1,143 @@
+// @ts-nocheck
+import { useRequestQuery } from '../../useQueryRequest';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+
+/**
+ *
+ * @param {string} type
+ * @param {string} searchKeyword
+ * @param {*} query
+ * @returns
+ */
+export function useResourceData(type, query, props) {
+  const url = getResourceUrlFromType(type);
+
+  return useRequestQuery(
+    ['UNIVERSAL_SEARCH', type, query],
+    { method: 'get', url, params: query },
+    {
+      select: transformResourceData(type),
+      defaultData: {
+        items: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the resource url by the given resource type.
+ * @param {string} type
+ * @returns {string}
+ */
+function getResourceUrlFromType(type) {
+  const config = {
+    [RESOURCES_TYPES.INVOICE]: '/sales/invoices',
+    [RESOURCES_TYPES.ESTIMATE]: '/sales/estimates',
+    [RESOURCES_TYPES.ITEM]: '/items',
+    [RESOURCES_TYPES.RECEIPT]: '/sales/receipts',
+    [RESOURCES_TYPES.BILL]: '/purchases/bills',
+    [RESOURCES_TYPES.PAYMENT_RECEIVE]: '/sales/payment_receives',
+    [RESOURCES_TYPES.PAYMENT_MADE]: '/purchases/bill_payments',
+    [RESOURCES_TYPES.CUSTOMER]: '/customers',
+    [RESOURCES_TYPES.VENDOR]: '/vendors',
+    [RESOURCES_TYPES.MANUAL_JOURNAL]: '/manual-journals',
+    [RESOURCES_TYPES.ACCOUNT]: '/accounts',
+    [RESOURCES_TYPES.CREDIT_NOTE]: '/sales/credit_notes',
+    [RESOURCES_TYPES.VENDOR_CREDIT]: '/purchases/vendor-credit',
+  };
+  return config[type] || '';
+}
+
+/**
+ * Transformes invoices to resource data.
+ */
+const transformInvoices = (response) => ({
+  items: response.data.sales_invoices,
+});
+
+/**
+ * Transformes items to resource data.
+ */
+const transformItems = (response) => ({
+  items: response.data.items,
+});
+
+/**
+ * Transformes payment receives to resource data.
+ */
+const transformPaymentReceives = (response) => ({
+  items: response.data.payment_receives,
+});
+
+/**
+ * Transformes customers to resoruce data.
+ */
+const transformCustomers = (response) => ({
+  items: response.data.customers,
+});
+
+/**
+ * Transformes customers to resoruce data.
+ */
+const transformVendors = (response) => ({
+  items: response.data.vendors,
+});
+
+const transformPaymentMades = (response) => ({
+  items: response.data.bill_payments,
+});
+
+const transformSaleReceipts = (response) => ({
+  items: response.data.data,
+});
+
+const transformBills = (response) => ({
+  items: response.data.bills,
+});
+
+const transformManualJournals = (response) => ({
+  items: response.data.manual_journals,
+});
+
+const transformsEstimates = (response) => ({
+  items: response.data.sales_estimates,
+});
+
+const transformAccounts = (response) => ({
+  items: response.data.accounts,
+});
+
+const transformCreditNotes = (response) => ({
+  items: response.data.credit_notes,
+});
+
+const transformVendorCredits = (response) => ({
+  items: response.data.vendor_credits,
+});
+
+/**
+ * Detarmines the transformer based on the given resource type.
+ * @param {string} type - Resource type.
+ */
+const transformResourceData = (type) => (response) => {
+  const pairs = {
+    [RESOURCES_TYPES.ESTIMATE]: transformsEstimates,
+    [RESOURCES_TYPES.INVOICE]: transformInvoices,
+    [RESOURCES_TYPES.RECEIPT]: transformSaleReceipts,
+    [RESOURCES_TYPES.ITEM]: transformItems,
+    [RESOURCES_TYPES.PAYMENT_RECEIVE]: transformPaymentReceives,
+    [RESOURCES_TYPES.PAYMENT_MADE]: transformPaymentMades,
+    [RESOURCES_TYPES.CUSTOMER]: transformCustomers,
+    [RESOURCES_TYPES.VENDOR]: transformVendors,
+    [RESOURCES_TYPES.BILL]: transformBills,
+    [RESOURCES_TYPES.MANUAL_JOURNAL]: transformManualJournals,
+    [RESOURCES_TYPES.ACCOUNT]: transformAccounts,
+    [RESOURCES_TYPES.CREDIT_NOTE]: transformCreditNotes,
+    [RESOURCES_TYPES.VENDOR_CREDIT]: transformVendorCredits,
+  };
+  return {
+    ...pairs[type](response),
+    _type: type,
+  };
+};

packages/webapp/src/hooks/query/UniversalSearch/UniversalSearch.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import { getUniversalSearchBind } from '@/containers/UniversalSearch/utils';
+import { useResourceData } from '../GenericResource';
+
+/**
+ * Transformes the resource data to search entries based on
+ * the given resource type.
+ * @param {string} type
+ * @param {any} resource
+ * @returns
+ */
+function transfromResourceDataToSearch(resource) {
+  const selectItem = getUniversalSearchBind(resource._type, 'itemSelect');
+
+  return resource.items
+    .map((item) => ({
+      ...selectItem ? selectItem(item) : {}, 
+      _type: resource._type,
+    }));
+}
+
+/**
+ *
+ * @param {*} type
+ * @param {*} searchKeyword
+ * @returns
+ */
+export function useUniversalSearch(type, searchKeyword, props) {
+  const { data, ...restProps } = useResourceData(
+    type,
+    {
+      search_keyword: searchKeyword,
+    },
+    props,
+  );
+  const searchData = transfromResourceDataToSearch(data);
+
+  return {
+    data: searchData,
+    ...restProps,
+  };
+}

packages/webapp/src/hooks/query/accounts.tsx

@@ -0,0 +1,176 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Transform the account.
+const transformAccount = (response) => {
+  return response.data.account;
+};
+
+const commonInvalidateQueries = (query) => {
+  // Invalidate accounts.
+  query.invalidateQueries(t.ACCOUNTS);
+  query.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate cashflow accounts.
+  query.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+
+  // Invalidate financial reports.
+  query.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Retrieve accounts list.
+ */
+export function useAccounts(query, props) {
+  return useRequestQuery(
+    [t.ACCOUNTS, query],
+    { method: 'get', url: 'accounts', params: query },
+    {
+      select: (res) => res.data.accounts,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the given account details.
+ * @param {number} id - Account id.
+ */
+export function useAccount(id, props) {
+  return useRequestQuery(
+    [t.ACCOUNT, id],
+    { method: 'get', url: `accounts/${id}` },
+    {
+      select: transformAccount,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve accounts types list.
+ */
+export function useAccountsTypes(props) {
+  return useRequestQuery(
+    [t.ACCOUNTS_TYPES],
+    { method: 'get', url: 'account_types' },
+    {
+      select: (res) => res.data.account_types,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Creates account.
+ */
+export function useCreateAccount(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('accounts', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(client);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given account.
+ */
+export function useEditAccount(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`accounts/${id}`, values),
+    {
+      onSuccess: () => {
+        // Common invalidate queries.
+        commonInvalidateQueries(client);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits the given account.
+ */
+export function useDeleteAccount(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`accounts/${id}`), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(client);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Actiavte the give account.
+ */
+export function useActivateAccount(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`accounts/${id}/activate`), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(client);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Inactivate the given account.
+ */
+export function useInactivateAccount(props) {
+  const query = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`accounts/${id}/inactivate`), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(query);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve account transactions.
+ */
+export function useAccountTransactions(id, props) {
+  return useRequestQuery(
+    [t.ACCOUNT_TRANSACTION, id],
+    { method: 'get', url: `accounts/transactions?account_id=${id}` },
+    {
+      select: (res) => res.data.transactions,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useRefreshAccounts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.ACCOUNTS);
+    },
+  };
+}

packages/webapp/src/hooks/query/authentication.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import { useMutation } from 'react-query';
+import useApiRequest from '../useRequest';
+import { setCookie } from '../../utils';
+
+/**
+ * Saves the response data to cookies.
+ */
+function setAuthLoginCookies(data) {
+  setCookie('token', data.token);
+  setCookie('authenticated_user_id', data.user.id);
+  setCookie('organization_id', data.tenant.organization_id);
+  setCookie('tenant_id', data.tenant.id);
+
+  if (data?.tenant?.metadata?.language)
+    setCookie('locale', data.tenant.metadata.language);
+}
+
+/**
+ * Authentication login.
+ */
+export const useAuthLogin = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('auth/login', values), {
+    select: (res) => res.data,
+    onSuccess: (data) => {
+      // Set authentication cookies.
+      setAuthLoginCookies(data.data);
+
+      // Reboot the application.
+      window.location.reload();
+    },
+    ...props,
+  });
+};
+
+/**
+ * Authentication register.
+ */
+export const useAuthRegister = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('auth/register', values),
+    props,
+  );
+};
+
+/**
+ * Authentication send reset password.
+ */
+export const useAuthSendResetPassword = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (email) => apiRequest.post('auth/send_reset_password', email),
+    props,
+  );
+};
+
+/**
+ * Authentication reset password.
+ */
+export const useAuthResetPassword = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([token, values]) => apiRequest.post(`auth/reset/${token}`, values),
+    props,
+  );
+};

packages/webapp/src/hooks/query/base.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+// Query client config.
+export const queryConfig = {
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: true,
+      staleTime: 30000,
+    },
+  },
+};

packages/webapp/src/hooks/query/bills.tsx

@@ -0,0 +1,210 @@
+// @ts-nocheck
+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 bills.
+  queryClient.invalidateQueries(t.BILLS);
+
+  // 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 landed cost.
+  queryClient.invalidateQueries(t.LANDED_COST);
+  queryClient.invalidateQueries(t.LANDED_COST_TRANSACTION);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDITS);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate items associated bills transactions.
+  queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
+
+  // Invalidate item warehouses.
+  queryClient.invalidateQueries(t.ITEM_WAREHOUSES_LOCATION);
+};
+
+/**
+ * Creates a new sale invoice.
+ */
+export function useCreateBill(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('purchases/bills', values), {
+    onSuccess: (res, values) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given sale invoice.
+ */
+export function useEditBill(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`purchases/bills/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate bill query.
+        queryClient.invalidateQueries([t.BILL, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Marks the given bill as open.
+ */
+export function useOpenBill(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`purchases/bills/${id}/open`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate bill query.
+      queryClient.invalidateQueries([t.BILL, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useDeleteBill(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`purchases/bills/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate bill query.
+      queryClient.invalidateQueries([t.BILL, id]);
+    },
+    ...props,
+  });
+}
+
+const transformBillsResponse = (response) => ({
+  bills: response.data.bills,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve sale invoices list with pagination meta.
+ */
+export function useBills(query, props) {
+  return useRequestQuery(
+    [t.BILLS, query],
+    {
+      method: 'get',
+      url: 'purchases/bills',
+      params: query,
+    },
+    {
+      select: transformBillsResponse,
+      defaultData: {
+        bills: [],
+        pagination: {
+          page: 1,
+          page_size: 12,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve bill details of the given bill id.
+ * @param {number} id - Bill id.
+ */
+export function useBill(id, props) {
+  return useRequestQuery(
+    [t.BILL, id],
+    { method: 'get', url: `/purchases/bills/${id}` },
+    {
+      select: (res) => res.data.bill,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the due bills of the given vendor id.
+ * @param {number} vendorId -
+ */
+export function useDueBills(vendorId, props) {
+  return useRequestQuery(
+    [t.BILLS, t.BILLS_DUE, vendorId],
+    {
+      method: 'get',
+      url: 'purchases/bills/due',
+      params: { vendor_id: vendorId },
+    },
+    {
+      select: (res) => res.data.bills,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useRefreshBills() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.BILLS);
+    },
+  };
+}
+
+export function useBillPaymentTransactions(id, props) {
+  return useRequestQuery(
+    [t.BILLS_PAYMENT_TRANSACTIONS, id],
+    {
+      method: 'get',
+      url: `purchases/bills/${id}/payment-transactions`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/branches.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate warehouses.
+  queryClient.invalidateQueries(t.BRANCHES);
+  queryClient.invalidateQueries(t.BRANCH);
+
+  queryClient.invalidateQueries(t.DASHBOARD_META);
+
+};
+
+/**
+ * Create a new branch.
+ */
+export function useCreateBranch(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('branches', values), {
+    onSuccess: (res, values) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given branch.
+ */
+export function useEditBranch(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`branches/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific branch.
+        queryClient.invalidateQueries([t.BRANCH, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given branch.
+ */
+export function useDeleteBranch(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`branches/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific branch.
+      queryClient.invalidateQueries([t.BRANCH, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve Branches list.
+ */
+export function useBranches(query, props) {
+  return useRequestQuery(
+    [t.BRANCHES, query],
+    { method: 'get', url: 'branches', params: query },
+    {
+      select: (res) => res.data.branches,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the branch details.
+ * @param {number}
+ */
+export function useBranch(id, props, requestProps) {
+  return useRequestQuery(
+    [t.BRANCH, id],
+    { method: 'get', url: `branches/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.branch,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Activate the given branches.
+ */
+export function useActivateBranches(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`branches/activate`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Mark primary the given branch.
+ */
+export function useMarkBranchAsPrimary(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`branches/${id}/mark-primary`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific inventory adjustment.
+      queryClient.invalidateQueries([t.BRANCH, id]);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}

packages/webapp/src/hooks/query/cashflowAccounts.tsx

@@ -0,0 +1,168 @@
+// @ts-nocheck
+import { useMutation, useQueryClient, useInfiniteQuery } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate account transactions.
+  queryClient.invalidateQueries(t.ACCOUNT_TRANSACTION);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+
+  // Invalidate the cashflow transactions.
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTION);
+};
+
+/**
+ * Retrieve accounts list.
+ */
+export function useCashflowAccounts(query, props) {
+  return useRequestQuery(
+    [t.CASH_FLOW_ACCOUNTS, query],
+    { method: 'get', url: 'cashflow/accounts', params: query },
+    {
+      select: (res) => res.data.cashflow_accounts,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create Money in owner contribution .
+ */
+export function useCreateCashflowTransaction(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('cashflow/transactions', values),
+    {
+      onSuccess: () => {
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve account transactions list.
+ */
+export function useCashflowTransaction(id, props) {
+  return useRequestQuery(
+    [t.CASH_FLOW_TRANSACTIONS, id],
+    { method: 'get', url: `cashflow/transactions/${id}` },
+    {
+      select: (res) => res.data.cashflow_transaction,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useDeleteCashflowTransaction(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`cashflow/transactions/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve account transactions infinity scrolling.
+ * @param {number} accountId
+ * @param {*} axios
+ * @returns
+ */
+export function useAccountTransactionsInfinity(
+  accountId,
+  query,
+  axios,
+  infinityProps,
+) {
+  const apiRequest = useApiRequest();
+
+  return useInfiniteQuery(
+    [t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY, accountId],
+    async ({ pageParam = 1 }) => {
+      const response = await apiRequest.http({
+        ...axios,
+        method: 'get',
+        url: `/api/financial_statements/cashflow-account-transactions`,
+        params: { page: pageParam, ...query },
+      });
+      return response.data;
+    },
+    {
+      getPreviousPageParam: (firstPage) => firstPage.pagination.page - 1,
+      getNextPageParam: (lastPage) => {
+        const { pagination } = lastPage;
+
+        return pagination.total > pagination.page_size * pagination.page
+          ? lastPage.pagination.page + 1
+          : undefined;
+      },
+      ...infinityProps,
+    },
+  );
+}
+
+/**
+ * Refresh cashflow transactions infinity.
+ */
+export function useRefreshCashflowTransactionsInfinity() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+    },
+  };
+}
+
+/**
+ * Refresh cashflow accounts.
+ */
+export function useRefreshCashflowAccounts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+    },
+  };
+}
+
+/**
+ * Refresh the cshflow account transactions.
+ */
+export function useRefreshCashflowTransactions() {
+  const query = useQueryClient();
+
+  return {
+    refresh: () => {
+      query.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+    },
+  };
+}

packages/webapp/src/hooks/query/contacts.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import useApiRequest from '../useRequest';
+import { useQueryTenant } from '../useQueryRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate vendors.
+  queryClient.invalidateQueries(t.VENDORS);
+  // Invalidate customers.
+  queryClient.invalidateQueries(t.CUSTOMERS);
+};
+
+/**
+ * Retrieve the contact duplicate.
+ */
+export function useContact(id, props) {
+  const apiRequest = useApiRequest();
+
+  return useQueryTenant(
+    ['CONTACT', id],
+    () => apiRequest.get(`contacts/${id}`),
+    {
+      select: (res) => res.data.customer,
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the auto-complete contacts.
+ */
+export function useAutoCompleteContacts(props) {
+  const apiRequest = useApiRequest();
+
+  return useQueryTenant(
+    ['CONTACTS', 'AUTO-COMPLETE'],
+    () => apiRequest.get('contacts/auto-complete'),
+    {
+      select: (res) => res.data.contacts,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Activate the given Contact.
+ */
+export function useActivateContact(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`contacts/${id}/activate`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific contact.
+      queryClient.invalidateQueries([t.CONTACT, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Inactivate the given contact.
+ */
+export function useInactivateContact(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`contacts/${id}/inactivate`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific item.
+      queryClient.invalidateQueries([t.CONTACT, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}

packages/webapp/src/hooks/query/creditNote.tsx

@@ -0,0 +1,352 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../utils';
+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 settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_CREDIT_NOTES]);
+
+  // Invalidate refund credit
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE_TRANSACTION);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate invoices.
+  queryClient.invalidateQueries(t.SALE_INVOICES);
+  queryClient.invalidateQueries(t.SALE_INVOICE);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // 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 transformCreditNotes = (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: transformCreditNotes,
+      defaultData: {
+        creditNotes: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          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);
+    },
+  };
+}
+
+/**
+ * Create Round creidt note
+ */
+export function useCreateRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/credit_notes/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund credit note.
+ */
+export function useDeleteRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/credit_notes/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE, id],
+    { method: 'get', url: `sales/credit_notes/${id}/refund`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Mark the given credit note as opened.
+ */
+export function useOpenCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/credit_notes/${id}/open`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific
+      queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve reconcile credit note of the given id.
+ * @param {number} id
+ *
+ */
+export function useReconcileCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_CREDIT_NOTE, id],
+    {
+      method: 'get',
+      url: `sales/credit_notes/${id}/apply-to-invoices`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create Reconcile credit note.
+ */
+export function useCreateReconcileCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/credit_notes/${id}/apply-to-invoices`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile credit notes.
+ */
+export function useReconcileCreditNotes(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_CREDIT_NOTES, id],
+    {
+      method: 'get',
+      url: `sales/credit_notes/${id}/applied-invoices`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given reconcile credit note.
+ */
+export function useDeleteReconcileCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/credit_notes/applied-to-invoices/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE_TRANSACTION, id],
+    { method: 'get', url: `sales/credit_notes/refunds/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the credit note pdf document data,
+ */
+export function usePdfCreditNote(creditNoteId) {
+  return useRequestPdf(`sales/credit_notes/${creditNoteId}`);
+}

packages/webapp/src/hooks/query/currencies.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+/**
+ * Create a new currency.
+ */
+export function useCreateCurrency(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('currencies', values), {
+    onSuccess: () => {
+      // Invalidate currencies.
+      queryClient.invalidateQueries(t.CURRENCIES);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given currency code.
+ */
+export function useEditCurrency(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([currencyCode, values]) =>
+      apiRequest.post(`currencies/${currencyCode}`, values),
+    {
+      onSuccess: () => {
+        // Invalidate currencies.
+        queryClient.invalidateQueries(t.CURRENCIES);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given currency.
+ */
+export function useDeleteCurrency(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (currencyCode) => apiRequest.delete(`currencies/${currencyCode}`),
+    {
+      onSuccess: () => {
+        // Invalidate currencies.
+        queryClient.invalidateQueries(t.CURRENCIES);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the currencies list.
+ */
+export function useCurrencies(props) {
+  return useRequestQuery(
+    [t.CURRENCIES],
+    { method: 'get', url: 'currencies' },
+    {
+      select: (res) => res.data.currencies,
+      defaultData: [],
+      ...props
+    },
+  );
+}

packages/webapp/src/hooks/query/customers.tsx

@@ -0,0 +1,159 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const defaultPagination = {
+  pageSize: 20,
+  page: 0,
+  pagesCount: 0,
+};
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate customers.
+  queryClient.invalidateQueries(t.CUSTOMERS);
+
+  // Invalidate the financial reports.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate the financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate SMS details.
+  queryClient.invalidateQueries(t.SALE_ESTIMATE_SMS_DETAIL);
+  queryClient.invalidateQueries(t.SALE_INVOICE_SMS_DETAIL);
+  queryClient.invalidateQueries(t.SALE_RECEIPT_SMS_DETAIL);
+  queryClient.invalidateQueries(t.PAYMENT_RECEIVE_SMS_DETAIL);
+};
+
+// Customers response selector.
+const customersSelector = (response) => ({
+  customers: response.data.customers,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve customers list with pagination meta.
+ */
+export function useCustomers(query, props) {
+  return useRequestQuery(
+    [t.CUSTOMERS, query],
+    { method: 'get', url: `customers`, params: query },
+    {
+      select: customersSelector,
+      defaultData: {
+        customers: [],
+        pagination: defaultPagination,
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits the given customer details.
+ * @param {*} props
+ */
+export function useEditCustomer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`customers/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific customer.
+        queryClient.invalidateQueries([t.CUSTOMER, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given customer.
+ */
+export function useDeleteCustomer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`customers/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific customer.
+      queryClient.invalidateQueries([t.CUSTOMER, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Creates a new customer.
+ */
+export function useCreateCustomer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('customers', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve the customer details.
+ */
+export function useCustomer(id, props) {
+  return useRequestQuery(
+    [t.CUSTOMER, id],
+    { method: 'get', url: `customers/${id}` },
+    {
+      select: (res) => res.data.customer,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useEditCustomerOpeningBalance(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`customers/${id}/opening_balance`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific customer.
+        queryClient.invalidateQueries([t.CUSTOMER, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useRefreshCustomers() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CUSTOMERS);
+    },
+  };
+}

packages/webapp/src/hooks/query/estimates.tsx

@@ -0,0 +1,241 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../utils';
+
+import { transformPagination } from '@/utils';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate estimates.
+  queryClient.invalidateQueries(t.SALE_ESTIMATES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
+};
+
+/**
+ * Creates a new sale estimate.
+ */
+export function useCreateEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('sales/estimates', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate the settings.
+      queryClient.invalidateQueries([t.SETTING, t.SETTING_ESTIMATES]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given sale estimate.
+ */
+export function useEditEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/estimates/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate specific sale estimate.
+        queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve sale estimate details.
+ */
+export function useEstimate(id, props) {
+  return useRequestQuery(
+    [t.SALE_ESTIMATE, id],
+    { method: 'get', url: `sales/estimates/${id}` },
+    {
+      select: (res) => res.data.estimate,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+const transformEstimates = (res) => ({
+  estimates: res.data.sales_estimates,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve sale invoices list with pagination meta.
+ */
+export function useEstimates(query, props) {
+  return useRequestQuery(
+    [t.SALE_ESTIMATES, query],
+    { method: 'get', url: 'sales/estimates', params: query },
+    {
+      select: transformEstimates,
+      defaultData: {
+        estimates: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useDeleteEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`sales/estimates/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Mark the given estimate as delivered.
+ */
+export function useDeliverEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/deliver`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Mark the given estimate as approved.
+ */
+export function useApproveEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/approve`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Mark the given estimate as rejected.
+ */
+export function useRejectEstimate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/estimates/${id}/reject`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific sale estimate.
+      queryClient.invalidateQueries([t.SALE_ESTIMATE, id]);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve the estimate pdf document data,
+ */
+
+export function usePdfEstimate(estimateId) {
+  return useRequestPdf(`sales/estimates/${estimateId}`);
+}
+
+export function useRefreshEstimates() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_ESTIMATES);
+    },
+  };
+}
+
+/**
+ *
+ */
+export function useCreateNotifyEstimateBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/estimates/${id}/notify-by-sms`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_SALE_ESTIMATE_BY_SMS, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ *
+ * @param {*} estimateId
+ * @param {*} props
+ * @param {*} requestProps
+ * @returns
+ */
+export function useEstimateSMSDetail(estimateId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_ESTIMATE_SMS_DETAIL, estimateId],
+    {
+      method: 'get',
+      url: `sales/estimates/${estimateId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/exchangeRates.tsx

@@ -0,0 +1,102 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
+import { useQueryTenant } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+
+const defaultPagination = {
+  pageSize: 20,
+  page: 0,
+  pagesCount: 0,
+};
+/**
+ * Creates a new exchange rate.
+ */
+export function useCreateExchangeRate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('exchange_rates', values), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('EXCHANGES_RATES');
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the exchange rate.
+ */
+export function useEdiExchangeRate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`exchange_rates/${id}`, values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('EXCHANGES_RATES');
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the exchange rate.
+ */
+export function useDeleteExchangeRate(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`exchange_rates/${id}`), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('EXCHANGES_RATES');
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve the exchange rate list.
+ */
+export function useExchangeRates(query, props) {
+  const apiRequest = useApiRequest();
+
+  const states = useQueryTenant(
+    ['EXCHANGES_RATES', query],
+    () => apiRequest.get('exchange_rates', { params: query }),
+    {
+      select: (res) => ({
+        exchangesRates: res.data.exchange_rates.results,
+        pagination: transformPagination(res.data.exchange_rates.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
+      ...props,
+    },
+  );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      exchangesRates: [],
+      pagination: {
+        page: 1,
+        pageSize: 20,
+        total: 0,
+      },
+      filterMeta: {},
+    }),
+  };
+}
+
+export function useRefreshExchangeRate() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries('EXCHANGES_RATES');
+    },
+  };
+}

packages/webapp/src/hooks/query/expenses.tsx

@@ -0,0 +1,167 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import useApiRequest from '../useRequest';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import t from './types';
+
+const defaultPagination = {
+  pageSize: 20,
+  page: 0,
+  pagesCount: 0,
+};
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate expenses.
+  queryClient.invalidateQueries(t.EXPENSES);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate the cashflow transactions.
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate landed cost.
+  queryClient.invalidateQueries(t.LANDED_COST);
+  queryClient.invalidateQueries(t.LANDED_COST_TRANSACTION);
+};
+
+const transformExpenses = (response) => ({
+  expenses: response.data.expenses,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve the expenses list.
+ */
+export function useExpenses(query, props) {
+  return useRequestQuery(
+    [t.EXPENSES, query],
+    {
+      method: 'get',
+      url: `expenses`,
+      params: { ...query },
+    },
+    {
+      select: transformExpenses,
+      defaultData: {
+        expenses: [],
+        pagination: defaultPagination,
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the expense details.
+ * @param {number} id - Expense id.
+ */
+export function useExpense(id, props) {
+  return useRequestQuery(
+    [t.EXPENSE, id],
+    {
+      method: 'get',
+      url: `expenses/${id}`,
+    },
+    {
+      select: (res) => res.data.expense,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given expense.
+ */
+export function useDeleteExpense(props) {
+  const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
+
+  return useMutation((id) => apiRequest.delete(`expenses/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific expense.
+      queryClient.invalidateQueries([t.EXPENSE, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given expense.
+ */
+export function useEditExpense(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`expenses/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific expense.
+        queryClient.invalidateQueries([t.EXPENSE, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Creates the new expense.
+ */
+export function useCreateExpense(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('expenses', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Publishes the given expense.
+ */
+export function usePublishExpense(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`expenses/${id}/publish`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific expense.
+      queryClient.invalidateQueries([t.EXPENSE, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+export function useRefreshExpenses() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.EXPENSES);
+    },
+  };
+}

packages/webapp/src/hooks/query/financialReports.tsx

@@ -0,0 +1,474 @@
+// @ts-nocheck
+import { useRequestQuery } from '../useQueryRequest';
+import {
+  trialBalanceSheetReducer,
+  generalLedgerTableRowsReducer,
+  journalTableRowsReducer,
+  ARAgingSummaryTableRowsMapper,
+  APAgingSummaryTableRowsMapper,
+  inventoryValuationReducer,
+  purchasesByItemsReducer,
+  salesByItemsReducer,
+} from '@/containers/FinancialStatements/reducers';
+import t from './types';
+
+/**
+ * Retrieve balance sheet.
+ */
+export function useBalanceSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.BALANCE_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/balance_sheet',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve trial balance sheet.
+ */
+export function useTrialBalanceSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.TRIAL_BALANCE_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/trial_balance_sheet',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        tableRows: trialBalanceSheetReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve profit/loss (P&L) sheet.
+ */
+export function useProfitLossSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.PROFIT_LOSS_SHEET, query],
+    {
+      method: 'get',
+      url: '/financial_statements/profit_loss_sheet',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => res.data,
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve general ledger (GL) sheet.
+ */
+export function useGeneralLedgerSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.GENERAL_LEDGER, query],
+    {
+      method: 'get',
+      url: '/financial_statements/general_ledger',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        tableRows: generalLedgerTableRowsReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: {},
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve journal sheet.
+ */
+export function useJournalSheet(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.JOURNAL, query],
+    { method: 'get', url: '/financial_statements/journal', params: query },
+    {
+      select: (res) => ({
+        tableRows: journalTableRowsReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        data: {},
+        tableRows: [],
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve A/R aging summary report.
+ */
+export function useARAgingSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.AR_AGING_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/receivable_aging_summary',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        columns: res.data.columns,
+        data: res.data.data,
+        query: res.data.query,
+        tableRows: ARAgingSummaryTableRowsMapper({
+          customers: res.data.data.customers,
+          total: res.data.data.total,
+          columns: res.data.columns,
+        }),
+      }),
+      defaultData: {
+        data: {
+          customers: [],
+          total: {},
+        },
+        columns: [],
+        tableRows: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve A/P aging summary report.
+ */
+export function useAPAgingSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.AP_AGING_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/payable_aging_summary',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        columns: res.data.columns,
+        data: res.data.data,
+        query: res.data.query,
+        tableRows: APAgingSummaryTableRowsMapper({
+          vendors: res.data.data.vendors,
+          total: res.data.data.total,
+          columns: res.data.columns,
+        }),
+      }),
+      defaultData: {
+        data: {
+          vendors: [],
+          total: {},
+        },
+        columns: [],
+        tableRows: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve inventory valuation.
+ */
+export function useInventoryValuation(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_VALUATION, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-valuation',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        tableRows: inventoryValuationReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+/**
+ * Retrieve purchases by items.
+ */
+export function usePurchasesByItems(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.PURCHASES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/purchases-by-items',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        tableRows: purchasesByItemsReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve sales by items.
+ */
+export function useSalesByItems(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.SALES_BY_ITEMS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/sales-by-items',
+      params: query,
+    },
+    {
+      select: (res) => ({
+        tableRows: salesByItemsReducer(res.data.data),
+        ...res.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve customers balance summary report.
+ */
+export function useCustomerBalanceSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CUSTOMERS_BALANCE_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/customer-balance-summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        query: res.data.query,
+        table: res.data.table,
+      }),
+      defaultData: {
+        table: {},
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve vendors balance summary report.
+ */
+export function useVendorsBalanceSummaryReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_BALANCE_SUMMARY, query],
+    {
+      method: 'get',
+      url: '/financial_statements/vendor-balance-summary',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+
+    {
+      select: (res) => ({
+        query: res.data.query,
+        table: res.data.table,
+      }),
+      defaultData: {
+        table: {},
+        query: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve customers transactions report.
+ */
+export function useCustomersTransactionsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CUSTOMERS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-customers',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.rows,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve vendors transactions report.
+ */
+export function useVendorsTransactionsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-vendors',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve cash flow statement report.
+ */
+export function useCashFlowStatementReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CASH_FLOW_STATEMENT, query],
+    {
+      method: 'get',
+      url: '/financial_statements/cash-flow',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        query: res.data.query,
+        meta: res.data.meta,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        columns: [],
+        query: {},
+        meta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve inventory item detail report.
+ */
+export function useInventoryItemDetailsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_ITEM_DETAILS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-item-details',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        query: res.data.query,
+        meta: res.data.meta,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        columns: [],
+        query: {},
+        meta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve transactions by reference report.
+ */
+export function useTransactionsByReference(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_BY_REFERENCE, query],
+    {
+      method: 'get',
+      url: `/financial_statements/transactions-by-reference`,
+      params: query,
+    },
+    {
+      select: (res) => res.data,
+      defaultData: {
+        transactions: [],
+      },
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/index.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+export * from './authentication';
+export * from './accounts';
+export * from './views';
+export * from './items';
+export * from './itemsCategories';
+export * from './inventoryAdjustments';
+export * from './expenses';
+export * from './financialReports';
+export * from './customers';
+export * from './vendors';
+export * from './manualJournals';
+export * from './currencies';
+export * from './invoices';
+export * from './bills';
+export * from './estimates';
+export * from './receipts';
+export * from './paymentReceives';
+export * from './paymentMades';
+export * from './settings';
+export * from './users';
+export * from './invite';
+export * from './exchangeRates';
+export * from './contacts';
+export * from './subscriptions';
+export * from './organization';
+export * from './landedCost';
+export * from './UniversalSearch/UniversalSearch';
+export * from './GenericResource';
+export * from './jobs';
+export * from './misc';
+export * from './cashflowAccounts';
+export * from './roles';
+export * from './creditNote';
+export * from './vendorCredit';
+export * from './transactionsLocking';
+export * from './warehouses';
+export * from './branches';
+export * from './warehousesTransfers';

packages/webapp/src/hooks/query/inventoryAdjustments.tsx

@@ -0,0 +1,125 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate inventory adjustments.
+  queryClient.invalidateQueries(t.INVENTORY_ADJUSTMENTS);
+  queryClient.invalidateQueries(t.INVENTORY_ADJUSTMENT);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Creates the inventory adjustment to the given item.
+ */
+export function useCreateInventoryAdjustment(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('inventory_adjustments/quick', values),
+    {
+      onSuccess: () => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the inventory adjustment transaction.
+ */
+export function useDeleteInventoryAdjustment(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`inventory_adjustments/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+const inventoryAdjustmentsTransformer = (response) => {
+  return {
+    transactions: response.data.inventoy_adjustments,
+    pagination: transformPagination(response.data.pagination),
+  };
+};
+
+/**
+ * Retrieve inventory adjustment list with pagination meta.
+ */
+export function useInventoryAdjustments(query, props) {
+  return useRequestQuery(
+    ['INVENTORY_ADJUSTMENTS', query],
+    { url: 'inventory_adjustments', params: query },
+    {
+      select: inventoryAdjustmentsTransformer,
+      defaultData: {
+        transactions: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+          pagesCount: 0,
+        },
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Publishes the given inventory adjustment.
+ */
+export function usePublishInventoryAdjustment(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`inventory_adjustments/${id}/publish`),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate specific inventory adjustment.
+        queryClient.invalidateQueries([t.INVENTORY_ADJUSTMENT, id]);
+
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the inventory adjustment details.
+ * @param {number} id - inventory adjustment id.
+ */
+export function useInventoryAdjustment(id, props, requestProps) {
+  return useRequestQuery(
+    [t.INVENTORY_ADJUSTMENT, id],
+    { method: 'get', url: `inventory_adjustments/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/invite.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import { useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+
+/**
+ * Authentication invite accept.
+ */
+export const useAuthInviteAccept = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([values, token]) => apiRequest.post(`invite/accept/${token}`, values),
+    props,
+  );
+}
+
+/**
+ * Retrieve the invite meta by the given token.
+ * @param {string} token - Token.
+ */
+export const useInviteMetaByToken = (token, props) => {
+  return useRequestQuery(
+    ['INVITE_META', token],
+    { method: 'get', url: `invite/invited/${token}` },
+    {
+      select: (res) => res.data,
+      ...props
+    }
+  );
+}
+
+
+export const useResendInvitation = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (userId) => apiRequest.post(`invite/resend/${userId}`),
+    props
+  )
+}

packages/webapp/src/hooks/query/invoices.tsx

@@ -0,0 +1,305 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../utils';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate invoices.
+  queryClient.invalidateQueries(t.SALE_INVOICES);
+  queryClient.invalidateQueries(t.SALE_INVOICE);
+
+  // Invalidate customers.
+  queryClient.invalidateQueries(t.CUSTOMERS);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_INVOICES]);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate reconcile.
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
+
+  // Invalidate item warehouses.
+  queryClient.invalidateQueries(t.ITEM_WAREHOUSES_LOCATION);
+};
+
+/**
+ * Creates a new sale invoice.
+ */
+export function useCreateInvoice(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('sales/invoices', values), {
+    onSuccess: (res, values) => {
+      // Invalidate invoice customer.
+      queryClient.invalidateQueries([t.CUSTOMER, values.customer_id]);
+
+      // Invalidate estimates.
+      queryClient.invalidateQueries(t.SALE_ESTIMATES);
+      queryClient.invalidateQueries(t.SALE_ESTIMATE);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given sale invoice.
+ */
+export function useEditInvoice(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/invoices/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific sale invoice.
+        queryClient.invalidateQueries([t.SALE_INVOICE, id]);
+
+        // Invalidate invoice customer.
+        queryClient.invalidateQueries([t.CUSTOMER, values.customer_id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useDeleteInvoice(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`sales/invoices/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific invoice.
+      queryClient.invalidateQueries([t.SALE_INVOICE, id]);
+
+      // Invalidate estimates.
+      queryClient.invalidateQueries(t.SALE_ESTIMATES);
+      queryClient.invalidateQueries(t.SALE_ESTIMATE);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+const transformInvoices = (res) => ({
+  invoices: res.data.sales_invoices,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * 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 },
+    {
+      select: transformInvoices,
+      defaultData: {
+        invoices: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Marks the sale invoice as delivered.
+ */
+export function useDeliverInvoice(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (invoiceId) => apiRequest.post(`sales/invoices/${invoiceId}/deliver`),
+    {
+      onSuccess: (res, invoiceId) => {
+        // Invalidate specific invoice.
+        queryClient.invalidateQueries([t.SALE_INVOICE, invoiceId]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the sale invoice details.
+ * @param {number} invoiceId - Invoice id.
+ */
+export function useInvoice(invoiceId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_INVOICE, invoiceId],
+    { method: 'get', url: `sales/invoices/${invoiceId}`, ...requestProps },
+    {
+      select: (res) => res.data.sale_invoice,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the invoice pdf document data.
+ */
+export function usePdfInvoice(invoiceId) {
+  return useRequestPdf(`sales/invoices/${invoiceId}`);
+}
+
+/**
+ * Retrieve due invoices of the given customer id.
+ * @param {number} customerId - Customer id.
+ */
+export function useDueInvoices(customerId, props) {
+  return useRequestQuery(
+    [t.SALE_INVOICES, t.SALE_INVOICES_DUE, customerId],
+    {
+      method: 'get',
+      url: `sales/invoices/payable`,
+      params: { customer_id: customerId },
+    },
+    {
+      select: (res) => res.data.sales_invoices,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useRefreshInvoices() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_INVOICES);
+    },
+  };
+}
+
+export function useCreateBadDebt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/invoices/${id}/writeoff`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.BAD_DEBT, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useCancelBadDebt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`sales/invoices/${id}/writeoff/cancel`),
+    {
+      onSuccess: (res, id) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.CANCEL_BAD_DEBT, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useCreateNotifyInvoiceBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/invoices/${id}/notify-by-sms`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_SALE_INVOICE_BY_SMS, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useInvoiceSMSDetail(invoiceId, query, props) {
+  return useRequestQuery(
+    [t.SALE_INVOICE_SMS_DETAIL, invoiceId, query],
+    {
+      method: 'get',
+      url: `sales/invoices/${invoiceId}/sms-details`,
+      params: query,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useInvoicePaymentTransactions(invoiceId, props) {
+  return useRequestQuery(
+    [t.SALE_INVOICE_PAYMENT_TRANSACTIONS, invoiceId],
+    {
+      method: 'get',
+      url: `sales/invoices/${invoiceId}/payment-transactions`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/items.tsx

@@ -0,0 +1,272 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { transformPagination, transformResponse } from '@/utils';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const DEFAULT_PAGINATION = {
+  pageSize: 20,
+  page: 0,
+  pagesCount: 0,
+};
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+
+  // Invalidate items categories.
+  queryClient.invalidateQueries(t.ITEMS_CATEGORIES);
+};
+
+/**
+ * Creates a new item.
+ */
+export function useCreateItem(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('items', values), {
+    onSuccess: (res, values) => {
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given item.
+ */
+export function useEditItem(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(([id, values]) => apiRequest.post(`items/${id}`, values), {
+    onSuccess: (res, [id, values]) => {
+      // Invalidate specific item.
+      queryClient.invalidateQueries([t.ITEM, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Deletes the given item.
+ */
+export function useDeleteItem(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`items/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific item.
+      queryClient.invalidateQueries([t.ITEM, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Activate the given item.
+ */
+export function useActivateItem(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`items/${id}/activate`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific item.
+      queryClient.invalidateQueries([t.ITEM, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Inactivate the given item.
+ */
+export function useInactivateItem(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`items/${id}/inactivate`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific item.
+      queryClient.invalidateQueries([t.ITEM, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+// Transformes items response.
+const transformItemsResponse = (response) => {
+  return {
+    items: response.data.items,
+    pagination: transformPagination(
+      transformResponse(response.data.pagination),
+    ),
+    filterMeta: transformResponse(response.data.filter_meta),
+  };
+};
+
+/**
+ * Retrieves items list.
+ */
+export function useItems(query, props) {
+  return useRequestQuery(
+    [t.ITEMS, query],
+    {
+      method: 'get',
+      url: 'items',
+      params: { ...query },
+    },
+    {
+      select: transformItemsResponse,
+      defaultData: {
+        items: [],
+        pagination: DEFAULT_PAGINATION,
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+export function useRefreshItems() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.ITEMS);
+    },
+  };
+}
+
+/**
+ * Retrieve details of the given item.
+ * @param {number} id - Item id.
+ */
+export function useItem(id, props) {
+  return useRequestQuery(
+    [t.ITEM, id],
+    {
+      method: 'get',
+      url: `items/${id}`,
+    },
+    {
+      select: (response) => response.data.item,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedInvoiceTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_INVOICES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/invoices`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedEstimateTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_ESTIMATES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/estimates`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedReceiptTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_RECEIPTS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/receipts`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+export function useItemAssociatedBillTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEMS_ASSOCIATED_WITH_BILLS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/bills`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemWarehouseLocation(id, props) {
+  return useRequestQuery(
+    [t.ITEM_WAREHOUSES_LOCATION, id],
+    {
+      method: 'get',
+      url: `items/${id}/warehouses`,
+    },
+    {
+      select: (res) => res.data.item_warehouses,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * 
+ * @param {*} id 
+ * @param {*} query 
+ * @param {*} props 
+ * @returns 
+ */
+export function useItemInventoryCost(query, props) {
+  return useRequestQuery(
+    [t.ITEM_INVENTORY_COST, query],
+    {
+      method: 'get',
+      url: `inventory/items-cost`,
+      params: { ...query },
+    },
+    {
+      select: (res) => res.data.costs,
+      defaultData: [],
+      ...props,
+    },
+  ); 
+}

packages/webapp/src/hooks/query/itemsCategories.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate items categories.
+  queryClient.invalidateQueries(t.ITEMS_CATEGORIES);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+};
+
+/**
+ * Creates a new item category.
+ */
+export function useCreateItemCategory(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('item_categories', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the item category.
+ */
+export function useEditItemCategory(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`item_categories/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific item category.
+        queryClient.invalidateQueries([t.ITEM_CATEGORY, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given item category.
+ */
+export function useDeleteItemCategory(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`item_categories/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific item category.
+      queryClient.invalidateQueries([t.ITEM_CATEGORY, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+
+const transformCategories = (res) => ({
+  itemsCategories: res.data.item_categories,
+  pagination: res.data.pagination,  
+});
+
+/**
+ * Retrieve the items categories.
+ */
+export function useItemsCategories(query, props) {
+  return useRequestQuery(
+    [t.ITEMS_CATEGORIES, query],
+    { method: 'get', url: `item_categories`, params: query },
+    {
+      select: transformCategories,
+      defaultData: {
+        itemsCategories: [],
+        pagination: {}
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the item category details.
+ * @param {number} id - Item category.
+ */
+export function useItemCategory(id, props) {
+  return useRequestQuery(
+    [t.ITEM_CATEGORY, id],
+    { method: 'get', url: `item_categories/${id}` },
+    {
+      select: (res) => res.data.category,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/jobs.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { useRequestQuery } from '../useQueryRequest';
+
+/**
+ * Retrieve the job metadata.
+ */
+export function useJob(jobId, props = {}) {
+  return useRequestQuery(
+    ['JOB', jobId],
+    { method: 'get', url: `jobs/${jobId}` },
+    {
+      select: (res) => res.data.job,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/landedCost.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import useApiRequest from '../useRequest';
+import { useRequestQuery } from '../useQueryRequest';
+
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate bills.
+  queryClient.invalidateQueries(t.BILLS);
+  queryClient.invalidateQueries(t.BILL);
+  // Invalidate landed cost.
+  queryClient.invalidateQueries(t.LANDED_COST);
+  queryClient.invalidateQueries(t.LANDED_COST_TRANSACTION);
+};
+
+/**
+ * Creates a new landed cost.
+ */
+export function useCreateLandedCost(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/landed-cost/bills/${id}/allocate`, values),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given landed cost.
+ */
+export function useDeleteLandedCost(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (landedCostId) =>
+      apiRequest.delete(`purchases/landed-cost/${landedCostId}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the landed cost transactions.
+ */
+export function useLandedCostTransaction(query, props) {
+  return useRequestQuery(
+    [t.LANDED_COST, query],
+    {
+      method: 'get',
+      url: 'purchases/landed-cost/transactions',
+      params: { transaction_type: query },
+    },
+    {
+      select: (res) => res.data,
+      defaultData: {
+        transactions: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the bill located landed cost transactions.
+ */
+export function useBillLocatedLandedCost(id, props) {
+  return useRequestQuery(
+    [t.LANDED_COST_TRANSACTION, id],
+    { method: 'get', url: `purchases/landed-cost/bills/${id}/transactions` },
+    {
+      select: (res) => res.data.transactions,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/manualJournals.tsx

@@ -0,0 +1,154 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (client) => {
+  // Invalidate manual journals.
+  client.invalidateQueries(t.MANUAL_JOURNALS);
+
+  // Invalidate customers.
+  client.invalidateQueries(t.CUSTOMERS);
+  client.invalidateQueries(t.CUSTOMER);
+
+  // Invalidate vendors.
+  client.invalidateQueries(t.VENDORS);
+  client.invalidateQueries(t.VENDOR);
+
+  // Invalidate accounts.
+  client.invalidateQueries(t.ACCOUNTS);
+  client.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  client.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+};
+
+/**
+ * Creates a new manual journal.
+ */
+export function useCreateJournal(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('manual-journals', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given manual journal.
+ */
+export function useEditJournal(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`manual-journals/${id}`, values),
+    {
+      onSuccess: (res, [id]) => {
+        // Invalidate specific manual journal.
+        queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given manual jouranl.
+ */
+export function useDeleteJournal(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`manual-journals/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific manual journal.
+      queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Publishes the given manual journal.
+ */
+export function usePublishJournal(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`manual-journals/${id}/publish`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific manual journal.
+      queryClient.invalidateQueries(t.MANUAL_JOURNAL, id);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+const transformJournals = (response) => ({
+  manualJournals: response.data.manual_journals,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve the manual journals with pagination meta.
+ */
+export function useJournals(query, props) {
+  return useRequestQuery(
+    [t.MANUAL_JOURNALS, query],
+    { method: 'get', url: 'manual-journals', params: query },
+    {
+      select: transformJournals,
+      defaultData: {
+        manualJournals: [],
+        pagination: {},
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the manual journal details.
+ */
+export function useJournal(id, props) {
+  return useRequestQuery(
+    [t.MANUAL_JOURNAL, id],
+    { method: 'get', url: `manual-journals/${id}` },
+    {
+      select: (res) => res.data.manual_journal,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshJournals() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.MANUAL_JOURNALS);
+    },
+  };
+}

packages/webapp/src/hooks/query/misc.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { useRequestQuery } from '../useQueryRequest';
+
+/**
+ * Retrieve the job metadata.
+ */
+export function useDateFormats(props = {}) {
+  return useRequestQuery(
+    ['DATE_FORMATS'],
+    { method: 'get', url: `/date_formats` },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/organization.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { batch } from 'react-redux';
+import t from './types';
+import useApiRequest from '../useRequest';
+import { useRequestQuery } from '../useQueryRequest';
+import { useSetOrganizations, useSetSubscriptions } from '../state';
+import { omit } from 'lodash';
+
+/**
+ * Retrieve organizations of the authenticated user.
+ */
+export function useOrganizations(props) {
+  return useRequestQuery(
+    [t.ORGANIZATIONS],
+    { method: 'get', url: `organization/all` },
+    {
+      select: (res) => res.data.organizations,
+      initialDataUpdatedAt: 0,
+      initialData: {
+        data: {
+          organizations: [],
+        },
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the current organization metadata.
+ */
+export function useCurrentOrganization(props) {
+  const setOrganizations = useSetOrganizations();
+  const setSubscriptions = useSetSubscriptions();
+
+  return useRequestQuery(
+    [t.ORGANIZATION_CURRENT],
+    { method: 'get', url: `organization` },
+    {
+      select: (res) => res.data.organization,
+      defaultData: {},
+      onSuccess: (data) => {
+        const organization = omit(data, ['subscriptions']);
+
+        batch(() => {
+          // Sets subscriptions.
+          setSubscriptions(data.subscriptions);
+
+          // Sets organizations.
+          setOrganizations([organization]);
+        });
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Organization setup.
+ */
+export function useOrganizationSetup() {
+  const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (values) => apiRequest.post(`organization/build`, values),
+    {
+      onSuccess: (res) => {
+        queryClient.invalidateQueries(t.ORGANIZATION_CURRENT);
+        queryClient.invalidateQueries(t.ORGANIZATIONS);
+      },
+    },
+  );
+}
+
+/**
+ * Saves the settings.
+ */
+export function useUpdateOrganization(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (information) => apiRequest.put('organization', information),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(t.ORGANIZATION_CURRENT);
+        queryClient.invalidateQueries(t.ORGANIZATIONS);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useOrgBaseCurrencyMutateAbilities(props) {
+  return useRequestQuery(
+    [t.ORGANIZATION_MUTATE_BASE_CURRENCY_ABILITIES],
+    { method: 'get', url: `organization/base_currency_mutate` },
+    {
+      select: (res) => res.data.abilities,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/paymentMades.tsx

@@ -0,0 +1,193 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (client) => {
+  // Invalidate payment mades.
+  client.invalidateQueries(t.PAYMENT_MADES);
+
+  // Invalidate payment made new entries.
+  client.invalidateQueries(t.PAYMENT_MADE_NEW_ENTRIES);
+  client.invalidateQueries(t.PAYMENT_MADE_EDIT_PAGE);
+
+  // Invalidate financial reports.
+  client.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate accounts.
+  client.invalidateQueries(t.ACCOUNTS);
+  client.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate bills.
+  client.invalidateQueries(t.BILLS);
+  client.invalidateQueries(t.BILL);
+
+  // Invalidate vendors.
+  client.invalidateQueries(t.VENDORS);
+  client.invalidateQueries(t.VENDOR);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate bills payment transactions.
+  client.invalidateQueries(t.BILLS_PAYMENT_TRANSACTIONS);
+};
+
+/**
+ * Retrieve payment mades list.
+ */
+export function usePaymentMades(query, props) {
+  return useRequestQuery(
+    [t.PAYMENT_MADES, query],
+    { url: 'purchases/bill_payments', params: query },
+    {
+      select: (res) => ({
+        paymentMades: res.data.bill_payments,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
+      defaultData: {
+        paymentMades: [],
+        pagination: {},
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Creates payment made.
+ */
+export function useCreatePaymentMade(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('purchases/bill_payments', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidation queries.
+        commonInvalidateQueries(client);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits payment made.
+ */
+export function useEditPaymentMade(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`purchases/bill_payments/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidation queries.
+        commonInvalidateQueries(client);
+
+        // Invalidate specific payment made.
+        client.invalidateQueries([t.PAYMENT_MADE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes payment made.
+ */
+export function useDeletePaymentMade(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/bill_payments/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidation queries.
+        commonInvalidateQueries(client);
+
+        // Invalidate specific payment made.
+        client.invalidateQueries([t.PAYMENT_MADE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve specific payment made.
+ */
+export function usePaymentMadeEditPage(id, props) {
+  return useRequestQuery(
+    [t.PAYMENT_MADE_EDIT_PAGE, id],
+    {
+      method: 'get',
+      url: `purchases/bill_payments/${id}/edit-page`,
+    },
+    {
+      select: (res) => ({
+        paymentMade: res.data.bill_payment,
+        entries: res.data.entries,
+      }),
+      defaultData: {
+        paymentMade: {},
+        entries: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retreive payment made new page entries.
+ * @param {number} vendorId -
+ */
+export function usePaymentMadeNewPageEntries(vendorId, props) {
+  return useRequestQuery(
+    [t.PAYMENT_MADE_NEW_ENTRIES, vendorId],
+    {
+      method: 'get',
+      url: `purchases/bill_payments/new-page/entries`,
+      params: { vendor_id: vendorId },
+    },
+    {
+      select: (res) => res.data.entries,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useRefreshPaymentMades() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.PAYMENT_MADES);
+    },
+  };
+}
+
+/**
+ * Retrieve specific payment made.
+ * @param {number} id - Payment made.
+ */
+export function usePaymentMade(id, props) {
+  return useRequestQuery(
+    [t.PAYMENT_MADE, id],
+    { method: 'get', url: `purchases/bill_payments/${id}` },
+    {
+      select: (res) => res.data.bill_payment,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/paymentReceives.tsx

@@ -0,0 +1,236 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import { transformPagination, saveInvoke } from '@/utils';
+import { useRequestPdf } from '../utils';
+
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (client) => {
+  // Invalidate payment receives.
+  client.invalidateQueries(t.PAYMENT_RECEIVES);
+  client.invalidateQueries(t.PAYMENT_RECEIVE_EDIT_PAGE);
+
+  // Invalidate invoices.
+  client.invalidateQueries(t.SALE_INVOICES);
+  client.invalidateQueries(t.SALE_INVOICE);
+
+  // Invalidate accounts.
+  client.invalidateQueries(t.ACCOUNTS);
+  client.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  client.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate customers.
+  client.invalidateQueries(t.CUSTOMERS);
+  client.invalidateQueries(t.CUSTOMER);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  client.invalidateQueries(t.CREDIT_NOTE);
+  client.invalidateQueries(t.CREDIT_NOTES);
+
+  // Invalidate reconcile.
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate invoices payment transactions.
+  client.invalidateQueries(t.SALE_INVOICE_PAYMENT_TRANSACTIONS);
+};
+
+// Transform payment receives.
+const transformPaymentReceives = (res) => ({
+  paymentReceives: res.data.payment_receives,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve accounts list.
+ */
+export function usePaymentReceives(query, props) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVES, query],
+    { method: 'get', url: 'sales/payment_receives', params: query },
+    {
+      select: transformPaymentReceives,
+      defaultData: {
+        paymentReceives: [],
+        pagination: { page: 1, pageSize: 20, total: 0 },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Creates payment receive.
+ */
+export function useCreatePaymentReceive(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('sales/payment_receives', values),
+    {
+      onSuccess: (data, values) => {
+        // Invalidate specific payment receive.
+        commonInvalidateQueries(client);
+
+        // Invalidate payment receive settings.
+        client.invalidateQueries([t.SETTING, t.SETTING_PAYMENT_RECEIVES]);
+
+        saveInvoke(props?.onSuccess, data);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits payment receive.
+ */
+export function useEditPaymentReceive(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/payment_receives/${id}`, values),
+    {
+      onSuccess: (data, [id, values]) => {
+        // Invalidate specific payment receive.
+        client.invalidateQueries([t.PAYMENT_RECEIVE, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(client);
+
+        saveInvoke(props?.onSuccess, data);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes payment receive.
+ */
+export function useDeletePaymentReceive(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/payment_receives/${id}`),
+    {
+      onSuccess: (data, id) => {
+        // Invalidate specific payment receive.
+        client.invalidateQueries([t.PAYMENT_RECEIVE, id]);
+
+        commonInvalidateQueries(client);
+
+        saveInvoke(props?.onSuccess, data);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve specific payment receive.
+ * @param {number} id - Payment receive.
+ */
+export function usePaymentReceive(id, props) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVE, id],
+    { method: 'get', url: `sales/payment_receives/${id}` },
+    {
+      select: (res) => res.data.payment_receive,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve information of payment receive in edit page.
+ * @param {number} id - Payment receive id.
+ */
+export function usePaymentReceiveEditPage(id, props) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVE_EDIT_PAGE, id],
+    { method: 'get', url: `sales/payment_receives/${id}/edit-page` },
+    {
+      select: (res) => ({
+        paymentReceive: res.data.payment_receive,
+        entries: res.data.entries,
+      }),
+      defaultData: {
+        paymentReceive: {},
+        entries: [],
+      },
+      ...props,
+    },
+  );
+}
+
+export function useRefreshPaymentReceive() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.PAYMENT_RECEIVES);
+    },
+  };
+}
+
+export function useCreateNotifyPaymentReceiveBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/payment_receives/${id}/notify-by-sms`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate
+        queryClient.invalidateQueries([t.NOTIFY_PAYMENT_RECEIVE_BY_SMS, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function usePaymentReceiveSMSDetail(
+  paymentReceiveId,
+  props,
+  requestProps,
+) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVE_SMS_DETAIL, paymentReceiveId],
+    {
+      method: 'get',
+      url: `sales/payment_receives/${paymentReceiveId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the payment receive pdf document data.
+ */
+export function usePdfPaymentReceive(paymentReceiveId) {
+  return useRequestPdf(`sales/payment_receives/${paymentReceiveId}`);
+}

packages/webapp/src/hooks/query/receipts.tsx

@@ -0,0 +1,206 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { useRequestPdf } from '../utils';
+import useApiRequest from '../useRequest';
+import { transformPagination } from '@/utils';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate receipts.
+  queryClient.invalidateQueries(t.SALE_RECEIPTS);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate the cashflow transactions.
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
+
+  // Invalidate item warehouses.
+  queryClient.invalidateQueries(t.ITEM_WAREHOUSES_LOCATION);
+
+  // Invalidate the settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
+};
+
+/**
+ * Creates a new sale invoice.
+ */
+export function useCreateReceipt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('sales/receipts', values), {
+    onSuccess: () => {
+      // Invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given sale invoice.
+ */
+export function useEditReceipt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/receipts/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific receipt.
+        queryClient.invalidateQueries([t.SALE_RECEIPT, id]);
+
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useDeleteReceipt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`sales/receipts/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific receipt.
+      queryClient.invalidateQueries([t.SALE_RECEIPT, id]);
+
+      // Invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Deletes the given sale invoice.
+ */
+export function useCloseReceipt(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/receipts/${id}/close`), {
+    onSuccess: (res, id) => {
+      queryClient.invalidateQueries([t.SALE_RECEIPT, id]);
+
+      // Invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+const transformReceipts = (res) => ({
+  receipts: res.data.data,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve sale invoices list with pagination meta.
+ */
+export function useReceipts(query, props) {
+  return useRequestQuery(
+    ['SALE_RECEIPTS', query],
+    { method: 'get', url: 'sales/receipts', params: query },
+    {
+      select: transformReceipts,
+      defaultData: {
+        receipts: [],
+        pagination: {
+          page: 1,
+          page_size: 12,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve sale invoices list with pagination meta.
+ */
+export function useReceipt(id, props) {
+  return useRequestQuery(
+    ['SALE_RECEIPT', id],
+    { method: 'get', url: `sales/receipts/${id}` },
+    {
+      select: (res) => res.data.sale_receipt,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the receipt pdf document data.
+ */
+export function usePdfReceipt(ReceiptId) {
+  return useRequestPdf(`sales/receipts/${ReceiptId}`);
+}
+
+export function useRefreshReceipts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.SALE_RECEIPTS);
+    },
+  };
+}
+
+export function useCreateNotifyReceiptBySMS(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/receipts/${id}/notify-by-sms`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        queryClient.invalidateQueries([t.NOTIFY_SALE_RECEIPT_BY_SMS, id]);
+
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useReceiptSMSDetail(receiptId, props, requestProps) {
+  return useRequestQuery(
+    [t.SALE_RECEIPT_SMS_DETAIL, receiptId],
+    {
+      method: 'get',
+      url: `sales/receipts/${receiptId}/sms-details`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/roles.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  queryClient.invalidateQueries(t.ROLE);
+  queryClient.invalidateQueries(t.ROLES);
+  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
+};
+
+/**
+ * Edit role .
+ */
+export function useEditRolePermissionSchema(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(([id, values]) => apiRequest.post(`roles/${id}`, values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Create a new roles
+ */
+export function useCreateRolePermissionSchema(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post(`roles`, values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Delete the given role.
+ */
+export function useDeleteRole(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`roles/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific role.
+      queryClient.invalidateQueries(t.ROLE, id);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrive the roles permissions schema.
+ */
+export function usePermissionsSchema(query, props) {
+  return useRequestQuery(
+    [t.ROLES_PERMISSIONS_SCHEMA, query],
+    { method: 'get', url: 'roles/permissions/schema', params: query },
+    {
+      select: (res) => res.data.data,
+      defaultData: {
+        roles: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the role permisstion schema.
+ * @param {number} role_id - role id.
+ */
+export function useRolePermission(role_id, props, requestProps) {
+  return useRequestQuery(
+    [t.ROLE, role_id],
+    { method: 'get', url: `roles/${role_id}`, ...requestProps },
+    {
+      select: (res) => res.data.role,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the roles.
+ */
+export function useRoles(props, query) {
+  return useRequestQuery(
+    [t.ROLES, query],
+    { method: 'get', url: `roles`, params: query },
+    {
+      select: (res) => res.data.roles,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/settings.tsx

@@ -0,0 +1,215 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import { useSetSettings } from '@/hooks/state';
+import t from './types';
+
+/**
+ * Saves the settings.
+ */
+export function useSaveSettings(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((settings) => apiRequest.post('settings', settings), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(t.SETTING);
+    },
+    ...props,
+  });
+}
+
+function useSettingsQuery(key, query, props) {
+  const setSettings = useSetSettings();
+
+  return useRequestQuery(
+    key,
+    { method: 'get', url: 'settings', params: query },
+    {
+      select: (res) => res.data.settings,
+      defaultData: [],
+      onSuccess: (settings) => {
+        setSettings(settings);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the all settings of the organization.
+ */
+export function useSettings() {
+  return useSettingsQuery([t.SETTING, 'ALL'], {});
+}
+
+/**
+ * Retrieve invoices settings.
+ */
+export function useSettingsInvoices(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_INVOICES],
+    { group: 'sale_invoices' },
+    props,
+  );
+}
+
+/**
+ * Retrieve invoices settings.
+ */
+export function useSettingsEstimates(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_ESTIMATES],
+    { group: 'sale_estimates' },
+    props,
+  );
+}
+
+/**
+ * Retrieve payment receives settings.
+ */
+export function useSettingsPaymentReceives(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_PAYMENT_RECEIVES],
+    { group: 'payment_receives' },
+    props,
+  );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props
+ */
+export function useSettingsReceipts(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_RECEIPTS],
+    { group: 'sale_receipts' },
+    props,
+  );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props
+ */
+export function useSettingsManualJournals(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_MANUAL_JOURNALS],
+    { group: 'manual_journals' },
+    props,
+  );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props
+ */
+export function useSettingsItems(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_ITEMS],
+    { group: 'items' },
+    props,
+  );
+}
+
+/**
+ * Retrieve cashflow settings.
+ */
+export function useSettingCashFlow(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_CASHFLOW],
+    { group: 'cashflow' },
+    props,
+  );
+}
+
+/**
+ * Retrieve credit notes settings.
+ */
+export function useSettingsCreditNotes(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_CREDIT_NOTES],
+    { group: 'credit_note' },
+    props,
+  );
+}
+/**
+ * Retrieve vendor credit settings.
+ */
+export function useSettingsVendorCredits(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_VENDOR_CREDITS],
+    { group: 'vendor_credit' },
+    props,
+  );
+}
+
+/**
+ * Retrieve warehouse transfer settings.
+ */
+export function useSettingsWarehouseTransfers(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_WAREHOUSE_TRANSFERS],
+    { group: 'warehouse_transfers' },
+    props,
+  );
+}
+
+/**
+ * Retrieve SMS Notifications settings.
+ */
+export function useSettingSMSNotifications(props) {
+  return useRequestQuery(
+    [t.SETTING_SMS_NOTIFICATIONS],
+    { method: 'get', url: `settings/sms-notifications` },
+    {
+      select: (res) => res.data.notifications,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve Specific SMS Notification settings.
+ */
+export function useSettingSMSNotification(key, props) {
+  return useRequestQuery(
+    [t.SETTING_SMS_NOTIFICATIONS, key],
+    {
+      method: 'get',
+      url: `settings/sms-notification/${key}`,
+    },
+    {
+      select: (res) => res.data.notification,
+      defaultData: {
+        smsNotification: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve Edit SMS Notification settings.
+ */
+export function useSettingEditSMSNotification(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post(`settings/sms-notification`, values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([t.SETTING_SMS_NOTIFICATIONS]);
+
+        queryClient.invalidateQueries(t.SALE_INVOICE_SMS_DETAIL);
+        queryClient.invalidateQueries(t.SALE_RECEIPT_SMS_DETAIL);
+        queryClient.invalidateQueries(t.PAYMENT_RECEIVE_SMS_DETAIL);
+        queryClient.invalidateQueries(t.SALE_ESTIMATE_SMS_DETAIL);
+      },
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/subscriptions.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import { useEffect } from "react"
+import { useMutation, useQueryClient } from "react-query";
+import { useRequestQuery } from "../useQueryRequest";
+import useApiRequest from "../useRequest";
+import { useSetSubscriptions } from '../state/subscriptions';
+import T from './types';
+
+/**
+ * Subscription payment via voucher.
+ */
+export const usePaymentByVoucher = (props) => {
+  const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (values) => apiRequest.post('subscription/license/payment', values),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(T.SUBSCRIPTIONS);
+        queryClient.invalidateQueries(T.ORGANIZATION_CURRENT);
+        queryClient.invalidateQueries(T.ORGANIZATIONS);
+      },
+      ...props,
+    }
+  );
+}
+
+/**
+ * Fetches the organization subscriptions.
+ */
+export const useOrganizationSubscriptions = (props) => {
+  const setSubscriptions = useSetSubscriptions();
+
+  const state = useRequestQuery(
+    [T.SUBSCRIPTIONS],
+    { method: 'get', url: 'subscriptions' },
+    { ...props },
+  );
+  useEffect(() => {
+    if (state.isSuccess) {
+      setSubscriptions(state.data);
+    }
+  }, [state.isSuccess, state.data, setSubscriptions])
+};

packages/webapp/src/hooks/query/transactionsLocking.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../utils';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate.
+  queryClient.invalidateQueries(t.TRANSACTION_LOCKING);
+  queryClient.invalidateQueries(t.TRANSACTIONS_LOCKING);
+};
+
+/**
+ * Create a locking transactions.
+ */
+export function useCreateLockingTransactoin(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/lock', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create cancle locking transactions
+ */
+export function useCancelLockingTransaction(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/cancel-lock', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create a unlocking partial transactions.
+ */
+export function useCreateUnlockingPartialTransactions(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    (values) => apiRequest.put('transactions-locking/unlock-partial', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create cancle unlocking partial transactions.
+ */
+export function useCancelUnlockingPartialTransactions(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+  return useMutation(
+    (values) =>
+      apiRequest.put('transactions-locking/cancel-unlock-partial', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrive the transactions locking.
+ */
+export function useTransactionsLocking(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_LOCKING, query],
+    { method: 'get', url: 'transactions-locking', params: query },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useEditTransactionsLocking(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTION_LOCKING, query],
+    { method: 'get', url: `transactions-locking/${query}` },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/types.tsx

@@ -0,0 +1,250 @@
+// @ts-nocheck
+const ACCOUNTS = {
+  ACCOUNT: 'ACCOUNT',
+  ACCOUNT_TRANSACTION: 'ACCOUNT_TRANSACTION',
+  ACCOUNTS: 'ACCOUNTS',
+  ACCOUNTS_TYPES: 'ACCOUNTS_TYPES',
+};
+
+const FINANCIAL_REPORTS = {
+  FINANCIAL_REPORT: 'FINANCIAL-REPORT',
+  BALANCE_SHEET: 'BALANCE-SHEET',
+  TRIAL_BALANCE_SHEET: 'TRIAL-BALANCE-SHEET',
+  PROFIT_LOSS_SHEET: 'PROFIT-LOSS-SHEET',
+  GENERAL_LEDGER: 'GENERAL-LEDGER',
+  JOURNAL: 'JOURNAL',
+  AR_AGING_SUMMARY: 'AR-AGING-SUMMARY',
+  AP_AGING_SUMMARY: 'AP-AGING-SUMMARY',
+  VENDORS_TRANSACTIONS: 'VENDORS_TRANSACTIONS',
+  CUSTOMERS_TRANSACTIONS: 'CUSTOMERS_TRANSACTIONS',
+  VENDORS_BALANCE_SUMMARY: 'VENDORS_BALANCE_SUMMARY',
+  CUSTOMERS_BALANCE_SUMMARY: 'CUSTOMERS_BALANCE_SUMMARY',
+  SALES_BY_ITEMS: 'SALES_BY_ITEMS',
+  PURCHASES_BY_ITEMS: 'PURCHASES_BY_ITEMS',
+  INVENTORY_VALUATION: 'INVENTORY_VALUATION',
+  CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT',
+  INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS',
+  TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE',
+  REALIZED_GAIN_OR_LOSS: 'REALIZED_GAIN_OR_LOSS',
+  UNREALIZED_GAIN_OR_LOSS: 'UNREALIZED_GAIN_OR_LOSS',
+  PROJECT_PROFITABILITY_SUMMARY: 'PROJECT_PROFITABILITY_SUMMARY',
+};
+
+const BILLS = {
+  BILLS: 'BILLS',
+  BILL: 'BILL',
+  BILLS_DUE: 'BILLS_DUE',
+  BILLS_PAYMENT_TRANSACTIONS: 'BILLS_PAYMENT_TRANSACTIONS',
+};
+
+const VENDORS = {
+  VENDORS: 'VENDORS',
+  VENDOR: 'VENDOR',
+};
+
+const CUSTOMERS = {
+  CUSTOMERS: 'CUSTOMERS',
+  CUSTOMER: 'CUSTOMER',
+};
+
+const ITEMS = {
+  ITEMS: 'ITEMS',
+  ITEM: 'ITEM',
+  ITEMS_CATEGORIES: 'ITEMS_CATEGORIES',
+  ITEM_ASSOCIATED_WITH_INVOICES: 'ITEM_ASSOCIATED_WITH_INVOICES',
+  ITEM_ASSOCIATED_WITH_ESTIMATES: 'ITEM_ASSOCIATED_WITH_ESTIMATES',
+  ITEM_ASSOCIATED_WITH_RECEIPTS: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
+  ITEMS_ASSOCIATED_WITH_BILLS: 'ITEMS_ASSOCIATED_WITH_BILLS',
+  ITEM_WAREHOUSES_LOCATION: 'ITEM_WAREHOUSES_LOCATION',
+  ITEM_INVENTORY_COST: 'ITEM_INVENTORY_COST',
+};
+
+const SALE_ESTIMATES = {
+  SALE_ESTIMATES: 'SALE_ESTIMATES',
+  SALE_ESTIMATE: 'SALE_ESTIMATE',
+  SALE_ESTIMATE_SMS_DETAIL: 'SALE_ESTIMATE_SMS_DETAIL',
+  NOTIFY_SALE_ESTIMATE_BY_SMS: 'NOTIFY_SALE_ESTIMATE_BY_SMS',
+};
+
+const SALE_RECEIPTS = {
+  SALE_RECEIPTS: 'SALE_RECEIPTS',
+  SALE_RECEIPT: 'SALE_RECEIPT',
+  SALE_RECEIPT_SMS_DETAIL: 'SALE_RECEIPT_SMS_DETAIL',
+  NOTIFY_SALE_RECEIPT_BY_SMS: 'NOTIFY_SALE_RECEIPT_BY_SMS',
+};
+
+const INVENTORY_ADJUSTMENTS = {
+  INVENTORY_ADJUSTMENTS: 'INVENTORY_ADJUSTMENTS',
+  INVENTORY_ADJUSTMENT: 'INVENTORY_ADJUSTMENT',
+};
+
+const CURRENCIES = {
+  CURRENCIES: 'CURRENCIES',
+};
+
+const PAYMENT_MADES = {
+  PAYMENT_MADES: 'PAYMENT_MADES',
+  PAYMENT_MADE: 'PAYMENT_MADE',
+  PAYMENT_MADE_NEW_ENTRIES: 'PAYMENT_MADE_NEW_ENTRIES',
+  PAYMENT_MADE_EDIT_PAGE: 'PAYMENT_MADE_EDIT_PAGE',
+};
+
+const PAYMENT_RECEIVES = {
+  PAYMENT_RECEIVES: 'PAYMENT_RECEIVES',
+  PAYMENT_RECEIVE: 'PAYMENT_RECEIVE',
+  PAYMENT_RECEIVE_NEW_ENTRIES: 'PAYMENT_RECEIVE_NEW_ENTRIES',
+  PAYMENT_RECEIVE_EDIT_PAGE: 'PAYMENT_RECEIVE_EDIT_PAGE',
+  PAYMENT_RECEIVE_SMS_DETAIL: 'PAYMENT_RECEIVE_SMS_DETAIL',
+  NOTIFY_PAYMENT_RECEIVE_BY_SMS: 'NOTIFY_PAYMENT_RECEIVE_BY_SMS',
+};
+
+const SALE_INVOICES = {
+  SALE_INVOICES: 'SALE_INVOICES',
+  SALE_INVOICE: 'SALE_INVOICE',
+  SALE_INVOICES_DUE: 'SALE_INVOICES_DUE',
+  SALE_INVOICE_SMS_DETAIL: 'SALE_INVOICE_SMS_DETAIL',
+  NOTIFY_SALE_INVOICE_BY_SMS: 'NOTIFY_SALE_INVOICE_BY_SMS',
+  BAD_DEBT: 'BAD_DEBT',
+  CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
+  SALE_INVOICE_PAYMENT_TRANSACTIONS: 'SALE_INVOICE_PAYMENT_TRANSACTIONS',
+};
+
+const USERS = {
+  USERS: 'USERS',
+  USER: 'USER',
+};
+
+const ROLES = {
+  ROLE: 'ROLE',
+  ROLES: 'ROLES',
+  ROLES_PERMISSIONS_SCHEMA: 'ROLES_PERMISSIONS_SCHEMA',
+};
+
+const CREDIT_NOTES = {
+  CREDIT_NOTE: 'CREDIT_NOTE',
+  CREDIT_NOTES: 'CREDIT_NOTES',
+  REFUND_CREDIT_NOTE: 'REFUND_CREDIT_NOTE',
+  REFUND_CREDIT_NOTE_TRANSACTION: 'REFUND_CREDIT_NOTE_TRANSACTION',
+  RECONCILE_CREDIT_NOTE: 'RECONCILE_CREDIT_NOTE',
+  RECONCILE_CREDIT_NOTES: 'RECONCILE_CREDIT_NOTES',
+};
+
+const VENDOR_CREDIT_NOTES = {
+  VENDOR_CREDITS: 'VENDOR_CREDITS',
+  VENDOR_CREDIT: 'VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT: 'REFUND_VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT_TRANSACTION: 'REFUND_VENDOR_CREDIT_TRANSACTION',
+  RECONCILE_VENDOR_CREDIT: 'RECONCILE_VENDOR_CREDIT',
+  RECONCILE_VENDOR_CREDITS: 'RECONCILE_VENDOR_CREDITS',
+};
+
+const SETTING = {
+  SETTING: 'SETTING',
+  SETTING_INVOICES: 'SETTING_INVOICES',
+  SETTING_ESTIMATES: 'SETTING_ESTIMATES',
+  SETTING_RECEIPTS: 'SETTING_RECEIPTS',
+  SETTING_PAYMENT_RECEIVES: 'SETTING_PAYMENT_RECEIVES',
+  SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS',
+  SETTING_ITEMS: 'SETTING_ITEMS',
+  SETTING_CASHFLOW: 'SETTING_CASHFLOW',
+  SETTING_SMS_NOTIFICATION: 'SETTING_SMS_NOTIFICATION',
+  SETTING_SMS_NOTIFICATIONS: 'SETTING_SMS_NOTIFICATIONS',
+  SETTING_EDIT_SMS_NOTIFICATION: 'SETTING_EDIT_SMS_NOTIFICATION',
+  SETTING_CREDIT_NOTES: 'SETTING_CREDIT_NOTES',
+  SETTING_VENDOR_CREDITS: 'SETTING_VENDOR_CREDITS',
+  SETTING_WAREHOUSE_TRANSFER: 'SETTING_WAREHOUSE_TRANSFERS',
+};
+
+const ORGANIZATIONS = {
+  ORGANIZATIONS: 'ORGANIZATIONS',
+  ORGANIZATION_CURRENT: 'ORGANIZATION_CURRENT',
+};
+
+const SUBSCRIPTIONS = {
+  SUBSCRIPTIONS: 'SUBSCRIPTIONS',
+};
+
+const EXPENSES = {
+  EXPENSES: 'EXPENSES',
+  EXPENSE: 'EXPENSE',
+};
+
+const MANUAL_JOURNALS = {
+  MANUAL_JOURNALS: 'MANUAL_JOURNALS',
+  MANUAL_JOURNAL: 'MANUAL_JOURNAL',
+};
+
+const LANDED_COSTS = {
+  LANDED_COST: 'LANDED_COST',
+  LANDED_COSTS: 'LANDED_COSTS',
+  LANDED_COST_TRANSACTION: 'LANDED_COST_TRANSACTION',
+};
+
+const CONTACTS = {
+  CONTACTS: 'CONTACTS',
+  CONTACT: 'CONTACT',
+};
+
+const CASH_FLOW_ACCOUNTS = {
+  CASH_FLOW_ACCOUNTS: 'CASH_FLOW_ACCOUNTS',
+  CASH_FLOW_TRANSACTIONS: 'CASH_FLOW_TRANSACTIONS',
+  CASH_FLOW_TRANSACTION: 'CASH_FLOW_TRANSACTION',
+  CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY:
+    'CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY',
+};
+
+const TARNSACTIONS_LOCKING = {
+  TRANSACTION_LOCKING: 'TRANSACTION_LOCKING',
+  TRANSACTIONS_LOCKING: 'TRANSACTIONS_LOCKING',
+};
+
+const WAREHOUSES = {
+  WAREHOUSE: 'WAREHOUSE',
+  WAREHOUSES: 'WAREHOUSES',
+};
+const WAREHOUSE_TRANSFERS = {
+  WAREHOUSE_TRANSFER: 'WAREHOUSE_TRANSFER',
+  WAREHOUSE_TRANSFERS: 'WAREHOUSE_TRANSFERS',
+};
+
+const BRANCHES = {
+  BRANCHES: 'BRANCHES',
+  BRANCH: 'BRANCH',
+};
+
+const DASHBOARD = {
+  DASHBOARD_META: 'DASHBOARD_META',
+};
+
+export default {
+  ...ACCOUNTS,
+  ...BILLS,
+  ...VENDORS,
+  ...CUSTOMERS,
+  ...FINANCIAL_REPORTS,
+  ...ITEMS,
+  ...SALE_ESTIMATES,
+  ...INVENTORY_ADJUSTMENTS,
+  ...CURRENCIES,
+  ...SALE_RECEIPTS,
+  ...PAYMENT_MADES,
+  ...PAYMENT_RECEIVES,
+  ...SALE_INVOICES,
+  ...USERS,
+  ...SETTING,
+  ...ORGANIZATIONS,
+  ...SUBSCRIPTIONS,
+  ...EXPENSES,
+  ...MANUAL_JOURNALS,
+  ...LANDED_COSTS,
+  ...CONTACTS,
+  ...CASH_FLOW_ACCOUNTS,
+  ...ROLES,
+  ...CREDIT_NOTES,
+  ...VENDOR_CREDIT_NOTES,
+  ...TARNSACTIONS_LOCKING,
+  ...WAREHOUSES,
+  ...WAREHOUSE_TRANSFERS,
+  ...BRANCHES,
+  ...DASHBOARD,
+};

packages/webapp/src/hooks/query/users.tsx

@@ -0,0 +1,169 @@
+// @ts-nocheck
+import { useEffect } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+import { useQueryTenant, useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import { useSetFeatureDashboardMeta } from '../state/feature';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  queryClient.invalidateQueries(t.USERS);
+};
+
+/**
+ * Create a new invite user.
+ */
+export function useCreateInviteUser(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('invite/send', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given user.
+ */
+export function useEditUser(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(([id, values]) => apiRequest.post(`users/${id}`, values), {
+    onSuccess: (res, [id, values]) => {
+      queryClient.invalidateQueries([t.USER, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+export function useInactivateUser(props) {
+  const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
+
+  return useMutation((userId) => apiRequest.put(`users/${userId}/inactivate`), {
+    onSuccess: (res, userId) => {
+      queryClient.invalidateQueries([t.USER, userId]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+export function useActivateUser(props) {
+  const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
+
+  return useMutation((userId) => apiRequest.put(`users/${userId}/activate`), {
+    onSuccess: (res, userId) => {
+      queryClient.invalidateQueries([t.USER, userId]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Deletes the given user.
+ */
+export function useDeleteUser(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`users/${id}`), {
+    onSuccess: (res, id) => {
+      queryClient.invalidateQueries([t.USER, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieves users list.
+ */
+export function useUsers(props) {
+  return useRequestQuery(
+    [t.USERS],
+    {
+      method: 'get',
+      url: 'users',
+    },
+    {
+      select: (res) => res.data.users,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve details of the given user.
+ */
+export function useUser(id, props) {
+  return useRequestQuery(
+    [t.USER, id],
+    {
+      method: 'get',
+      url: `users/${id}`,
+    },
+    {
+      select: (response) => response.data.user,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useAuthenticatedAccount(props) {
+  return useRequestQuery(
+    ['AuthenticatedAccount'],
+    {
+      method: 'get',
+      url: `account`,
+    },
+    {
+      select: (response) => response.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Fetches the dashboard meta.
+ */
+export const useDashboardMeta = (props) => {
+  const setFeatureDashboardMeta = useSetFeatureDashboardMeta();
+
+  const state = useRequestQuery(
+    [t.DASHBOARD_META],
+    { method: 'get', url: 'dashboard/boot' },
+    {
+      select: (res) => res.data.meta,
+      defaultData: {},
+      ...props,
+    },
+  );
+  useEffect(() => {
+    if (state.isSuccess) {
+      setFeatureDashboardMeta(state.data);
+    }
+  }, [state.isSuccess, state.data, setFeatureDashboardMeta]);
+  return state;
+};
+

packages/webapp/src/hooks/query/vendorCredit.tsx

@@ -0,0 +1,361 @@
+// @ts-nocheck
+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 settings.
+  queryClient.invalidateQueries([t.SETTING, t.SETTING_VENDOR_CREDITS]);
+
+  // Invalidate refund vendor credit
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT_TRANSACTION);
+
+  // Invalidate reconcile vendor credit.
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDITS);
+
+  // Invalidate bills.
+  queryClient.invalidateQueries(t.BILL);
+  queryClient.invalidateQueries(t.BILLS);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // 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, query],
+    {
+      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);
+    },
+  };
+}
+
+/**
+ * Create Round vendor creidt
+ */
+export function useCreateRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/vendor-credit/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund vendor credit.
+ */
+export function useDeleteRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/refund`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Mark the given vendor credit  as opened.
+ */
+export function useOpenVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`purchases/vendor-credit/${id}/open`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate specific.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Create Reconcile vendor credit.
+ */
+export function useCreateReconcileVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/vendor-credit/${id}/apply-to-bills`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile vendor credit of the given id.
+ * @param {number} id
+ *
+ */
+export function useReconcileVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_VENDOR_CREDIT, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/apply-to-bills`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve reconcile credit notes.
+ */
+export function useReconcileVendorCredits(id, props, requestProps) {
+  return useRequestQuery(
+    [t.RECONCILE_VENDOR_CREDITS, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/applied-bills`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+/**
+ * Delete the given reconcile vendor credit.
+ */
+export function useDeleteReconcileVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/applied-to-bills/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund vendor transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT_TRANSACTION, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/refunds/${id}`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/vendors.tsx

@@ -0,0 +1,146 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import t from './types';
+import { transformPagination } from '@/utils';
+import useApiRequest from '../useRequest';
+import { useRequestQuery } from '../useQueryRequest';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate vendors list.
+  queryClient.invalidateQueries(t.VENDORS);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+// Transformes vendors response.
+const transformVendorsResponse = (res) => ({
+  vendors: res.data.vendors,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter_meta,
+});
+
+/**
+ * Retrieve vendors list.
+ */
+export function useVendors(query, props) {
+  return useRequestQuery(
+    [t.VENDORS, query],
+    { method: 'get', url: `vendors`, params: query },
+    {
+      select: transformVendorsResponse,
+      defaultData: {
+        vendors: [],
+        pagination: {},
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits details of the given vendor.
+ */
+export function useEditVendor(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`vendors/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific vendor.
+        queryClient.invalidateQueries([t.VENDOR, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given vendor.
+ */
+export function useDeleteVendor(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`vendors/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific vendor.
+      queryClient.invalidateQueries([t.VENDOR, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Creates a new vendor.
+ */
+export function useCreateVendor(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('vendors', values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve vendor details.
+ */
+export function useVendor(id, props) {
+  return useRequestQuery(
+    [t.VENDOR, id],
+    { method: 'get', url: `vendors/${id}` },
+    {
+      select: (res) => res.data.vendor,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useEditVendorOpeningBalance(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`vendors/${id}/opening_balance`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific vendor.
+        queryClient.invalidateQueries([t.VENDOR, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useRefreshVendors() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.VENDORS);
+    },
+  };
+}

packages/webapp/src/hooks/query/views.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import { useRequestQuery } from '../useQueryRequest';
+
+/**
+ * Retrieve the resource views.
+ * @param {string} resourceSlug - Resource slug.
+ */
+export function useResourceViews(resourceSlug) {
+  return useRequestQuery(
+    ['RESOURCE_VIEW', resourceSlug],
+    { method: 'get', url: `views/resource/${resourceSlug}` },
+    {
+      select: (response) => response.data.views,
+      defaultData: [],
+    },
+  );
+}
+
+/**
+ * Retrieve the resource meta.
+ * @param {string} resourceSlug - Resource slug.
+ */
+export function useResourceMeta(resourceSlug, props) {
+  return useRequestQuery(
+    ['RESOURCE_META', resourceSlug],
+    { method: 'get', url: `resources/${resourceSlug}/meta` },
+    {
+      select: (res) => res.data.resource_meta,
+      defaultData: {
+        fields: {},
+      },
+    },
+    props,
+  );
+}

packages/webapp/src/hooks/query/warehouses.tsx

@@ -0,0 +1,140 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { transformPagination } from '@/utils';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate warehouses.
+  queryClient.invalidateQueries(t.WAREHOUSES);
+  queryClient.invalidateQueries(t.WAREHOUSE);
+
+  // Invalidate warehouses transfers.
+  queryClient.invalidateQueries(t.WAREHOUSE_TRANSFERS);
+
+  queryClient.invalidateQueries(t.DASHBOARD_META);
+};
+
+/**
+ * Create a new warehouse.
+ */
+export function useCreateWarehouse(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('warehouses', values), {
+    onSuccess: (res, values) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Edits the given warehouse.
+ */
+export function useEditWarehouse(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`warehouses/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific sale invoice.
+        queryClient.invalidateQueries([t.WAREHOUSE, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given warehouse.
+ */
+export function useDeleteWarehouse(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`warehouses/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific warehoue.
+      queryClient.invalidateQueries([t.WAREHOUSE, id]);
+
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrieve Warehoues list.
+ */
+export function useWarehouses(query, props) {
+  return useRequestQuery(
+    [t.WAREHOUSES, query],
+    { method: 'get', url: 'warehouses', params: query },
+    {
+      select: (res) => res.data.warehouses,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the warehouse details.
+ * @param {number}
+ */
+export function useWarehouse(id, props, requestProps) {
+  return useRequestQuery(
+    [t.WAREHOUSE, id],
+    { method: 'get', url: `warehouses/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.warehouse,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Activate the given warehouse.
+ */
+export function useActivateWarehouses(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`warehouses/activate`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Mark primary the given branch.
+ */
+export function useMarkWarehouseAsPrimary(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`warehouses/${id}/mark-primary`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific inventory adjustment.
+      queryClient.invalidateQueries([t.WAREHOUSE, id]);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}

packages/webapp/src/hooks/query/warehousesTransfers.tsx

@@ -0,0 +1,173 @@
+// @ts-nocheck
+import { useQueryClient, useMutation } from 'react-query';
+import { transformPagination } from '@/utils';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate warehouses transfers.
+  queryClient.invalidateQueries(t.WAREHOUSE_TRANSFERS);
+
+  // Invalidate item warehouses.
+  queryClient.invalidateQueries(t.ITEM_WAREHOUSES_LOCATION);
+};
+
+/**
+ * Create a new warehouse transfer.
+ */
+export function useCreateWarehouseTransfer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('warehouses/transfers', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edits the given warehouse transfer.
+ */
+export function useEditWarehouseTransfer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`warehouses/transfers/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Invalidate specific sale invoice.
+        queryClient.invalidateQueries([t.WAREHOUSE_TRANSFER, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Deletes the given warehouse Transfer.
+ */
+export function useDeleteWarehouseTransfer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`warehouses/transfers/${id}`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+const transformWarehousesTransfer = (res) => ({
+  warehousesTransfers: res.data.data,
+  pagination: transformPagination(res.data.pagination),
+  filterMeta: res.data.filter,
+});
+
+/**
+ * Retrieve Warehoues list.
+ */
+export function useWarehousesTransfers(query, props) {
+  return useRequestQuery(
+    [t.WAREHOUSE_TRANSFERS, query],
+    { method: 'get', url: 'warehouses/transfers', params: query },
+    {
+      select: transformWarehousesTransfer,
+      defaultData: {
+        warehousesTransfers: [],
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the warehouse transfer details.
+ * @param {number}
+ */
+export function useWarehouseTransfer(id, props, requestProps) {
+  return useRequestQuery(
+    [t.WAREHOUSE_TRANSFER, id],
+    { method: 'get', url: `warehouses/transfers/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ *
+ * @param {*} props
+ * @returns
+ */
+export function useInitiateWarehouseTransfer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.put(`warehouses/transfers/${id}/initiate`),
+    {
+      onSuccess: (res, id) => {
+        queryClient.invalidateQueries([t.WAREHOUSE_TRANSFER, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ *
+ * @param {*} props
+ * @returns
+ */
+export function useTransferredWarehouseTransfer(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.put(`warehouses/transfers/${id}/transferred`),
+    {
+      onSuccess: (res, id) => {
+        queryClient.invalidateQueries([t.WAREHOUSE_TRANSFER, id]);
+
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useRefreshWarehouseTransfers() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.WAREHOUSE_TRANSFERS);
+    },
+  };
+}

packages/webapp/src/hooks/state/authentication.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
+import { isAuthenticated } from '@/store/authentication/authentication.reducer';
+import { setLogin } from '@/store/authentication/authentication.actions';
+import { useQueryClient } from 'react-query';
+import { removeCookie } from '@/utils';
+
+/**
+ * Removes the authentication cookies.
+ */
+function removeAuthenticationCookies() {
+  removeCookie('token');
+  removeCookie('organization_id');
+  removeCookie('tenant_id');
+  removeCookie('authenticated_user_id');
+  removeCookie('locale');
+}
+
+export const useAuthActions = () => {
+  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
+
+  return {
+    setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
+    setLogout: useCallback(() => {
+      // Resets store state.
+      // dispatch(setStoreReset());
+
+      // Remove all cached queries.
+      queryClient.removeQueries();
+
+      removeAuthenticationCookies();
+
+      window.location.reload();
+    }, [queryClient]),
+  };
+};
+
+/**
+ * Retrieve whether the user is authenticated.
+ */
+export const useIsAuthenticated = () => {
+  return useSelector(isAuthenticated);
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useAuthToken = () => {
+  return useSelector((state) => state.authentication.token);
+};
+
+/**
+ * Retrieve the authentication user.
+ */
+export const useAuthUser = () => {
+  return useSelector((state) => ({}));
+};
+
+/**
+ * Retrieve the authenticated organization id.
+ */
+export const useAuthOrganizationId = () => {
+  return useSelector((state) => state.authentication.organizationId);
+};

packages/webapp/src/hooks/state/dashboard.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import {
+  splashStopLoading,
+  splashStartLoading,
+  dashboardPageTitle,
+  openSidebarSubmenu,
+  closeSidebarSubmenu,
+  openDialog,
+  closeDialog,
+} from '@/store/dashboard/dashboard.actions';
+
+export const useDispatchAction = (action) => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (payload) => {
+      dispatch(action(payload));
+    },
+    [dispatch, action],
+  );
+};
+
+export const useDashboardPageTitle = () => {
+  return useDispatchAction(dashboardPageTitle);
+};
+
+/**
+ * Splash loading screen actions.
+ */
+export const useSplashLoading = () => {
+  return [
+    useDispatchAction(splashStartLoading),
+    useDispatchAction(splashStopLoading),
+  ];
+};
+
+/**
+ * Sidebar submenu actions.
+ */
+export const useSidebarSubmnuActions = () => {
+  return {
+    openSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+    closeSidebarSubmenu: useDispatchAction(closeSidebarSubmenu),
+    toggleSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+  };
+};
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+const sidebarSubmenuSelector = createSelector(
+  (state) => state.dashboard.sidebarSubmenu,
+  (sidebarSubmenu) => sidebarSubmenu,
+);
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+export const useSidebarSubmenu = () => {
+  const sidebarSubmenu = useSelector(sidebarSubmenuSelector);
+
+  return {
+    isOpen: sidebarSubmenu?.isOpen || false,
+    submenuId: sidebarSubmenu?.submenuId || null,
+  };
+};
+
+/**
+ * Dialogs actions.
+ */
+export const useDialogActions = () => {
+  return {
+    openDialog: useDispatchAction(openDialog),
+    closeDialog: useDispatchAction(closeDialog),
+  };
+};

packages/webapp/src/hooks/state/feature.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setFeatureDashboardMeta } from '@/store/dashboard/dashboard.actions';
+
+const featuresSelector = createSelector(
+  (state) => state.dashboard.features,
+  (features) => features,
+);
+
+export const useFeatureCan = () => {
+  const features = useSelector(featuresSelector);
+
+  return {
+    featureCan: (feature) => {
+      return !!features[feature];
+    },
+  };
+};
+
+/**
+ * Sets features.
+ */
+export const useSetFeatureDashboardMeta = () => {
+  const dispatch = useDispatch();
+
+  return React.useCallback(
+    (features) => {
+      dispatch(setFeatureDashboardMeta(features));
+    },
+    [dispatch],
+  );
+};

packages/webapp/src/hooks/state/globalErrors.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { setGlobalErrors } from '@/store/globalErrors/globalErrors.actions';
+
+export const useSetGlobalErrors = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((errors) => {
+    dispatch(setGlobalErrors(errors));
+  }, [dispatch]);
+};
+
+export const useGlobalErrors = () => {
+  const globalErrors = useSelector(state => state.globalErrors.data);
+
+  return { globalErrors };
+}

packages/webapp/src/hooks/state/index.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+export * from './dashboard';
+export * from './authentication';
+export * from './globalErrors';
+export * from './subscriptions';
+export * from './organizations';
+export * from './settings';
+export * from './feature';

packages/webapp/src/hooks/state/organizations.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { setOrganizations } from '@/store/organizations/organizations.actions';
+import { getCurrentOrganizationFactory } from '@/store/authentication/authentication.selectors';
+
+export const useSetOrganizations = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((organizations) => {
+    dispatch(setOrganizations(organizations))    
+  }, [dispatch]);
+};
+
+export const useCurrentOrganization = () => {
+  return useSelector(getCurrentOrganizationFactory())
+};

packages/webapp/src/hooks/state/settings.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSettings } from '@/store/settings/settings.actions';
+
+export const useSetSettings = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (settings) => {
+      dispatch(setSettings(settings));
+    },
+    [dispatch],
+  );
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useSettingsSelector = () => {
+  return useSelector((state) => state.settings.data);
+};

packages/webapp/src/hooks/state/subscriptions.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import { useCallback } from "react"
+import { useDispatch, useSelector } from "react-redux";
+import { setSubscriptions } from '@/store/subscription/subscription.actions';
+import {
+  isSubscriptionOnTrialFactory,
+  isSubscriptionInactiveFactory,
+  isSubscriptionActiveFactory,
+} from '@/store/subscription/subscription.selectors';
+
+/**
+ * Sets subscriptions.
+ */
+export const useSetSubscriptions = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((subscriptions) => {
+    dispatch(setSubscriptions(subscriptions));
+  }, [dispatch]);
+}
+
+/**
+ * The organization subscription selector.
+ * @param   {string} slug 
+ * @returns {}
+ */
+export const useSubscription = (slug = 'main') => {
+  const isSubscriptionOnTrial = useSelector(isSubscriptionOnTrialFactory(slug));
+  const isSubscriptionInactive = useSelector(isSubscriptionInactiveFactory(slug));
+  const isSubscriptionActive = useSelector(isSubscriptionActiveFactory(slug));
+
+  return {
+    isSubscriptionActive,
+    isSubscriptionInactive,
+    isSubscriptionOnTrial
+  }
+}

packages/webapp/src/hooks/useAutofocus.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { useRef, useEffect } from 'react';
+
+export default function useAutofocus(focus = true) {
+  const ref = useRef();
+
+  useEffect(() => {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [ref, focus]);
+
+  return ref;
+}

packages/webapp/src/hooks/useMedia.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React, { useState, useRef, useCallback } from 'react';
+import { ProgressBar, Classes, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { AppToaster } from '@/components';
+import { saveFilesInAsync } from '@/utils';
+
+const useMedia = ({ saveCallback, deleteCallback }) => {
+  const [files, setFiles] = useState([]);
+  const [deletedFiles, setDeletedFiles] = useState([]);
+  const toastKey = useRef(0);
+
+  const openProgressToast = useCallback(
+    (amount) => ({
+      message: (
+        <ProgressBar
+          className={classNames('toast-progress', {
+            [Classes.PROGRESS_NO_STRIPES]: amount >= 100,
+          })}
+          intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
+          value={amount / 100}
+        />
+      ),
+    }),
+    [],
+  );
+
+  const saveMedia = useCallback(() => {
+    const notUploadedFiles = files.filter((file) => file.uploaded === false);
+
+    if (notUploadedFiles.length > 0) {
+      toastKey.current = AppToaster.show(openProgressToast(0));
+
+      const saveAction = (formData, attachment, progressCallback) => {
+        return saveCallback(formData, {
+          onUploadProgress: (progress) => {
+            progressCallback(progress);
+          },
+        }).then((res) => {
+          attachment.uploaded = true;
+          return res;
+        });
+      };
+      return saveFilesInAsync(notUploadedFiles, saveAction).onProgress(
+        (progress) => {
+          if (progress > 0) {
+            AppToaster.show(
+              openProgressToast(progress * 100),
+              toastKey.current,
+            );
+          }
+        },
+      );
+    }
+    return Promise.resolve([]);
+  }, [files, openProgressToast, saveCallback]);
+
+  const deleteMedia = useCallback(() => {
+    return deletedFiles.length > 0
+      ? deleteCallback(deletedFiles)
+      : Promise.resolve();
+  }, [deletedFiles, deleteCallback]);
+
+  return {
+    files,
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  };
+};
+
+export default useMedia;

packages/webapp/src/hooks/useQueryRequest.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import { useQuery } from 'react-query';
+import { castArray, defaultTo } from 'lodash';
+import { useAuthOrganizationId } from './state';
+import useApiRequest from './useRequest';
+import { useRef } from 'react';
+
+/**
+ * Query for tenant requests.
+ */
+export function useQueryTenant(query, callback, props) {
+  const organizationId = useAuthOrganizationId();
+
+  return useQuery([...castArray(query), organizationId], callback, props);
+}
+
+export function useRequestQuery(query, axios, props) {
+  const apiRequest = useApiRequest();
+
+  const states = useQuery(
+    query,
+    () => apiRequest.http({ ...axios, url: `/api/${axios.url}` }),
+    props,
+  );
+  // Momerize the default data.
+  const defaultData = useRef(props.defaultData || undefined);
+
+  return {
+    ...states,
+    data: defaultTo(states.data, defaultData.current),
+  };
+}

packages/webapp/src/hooks/useQueryString.ts

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import {
+  ParseOptions,
+  ParsedQuery,
+  StringifyOptions,
+  parse,
+  stringify,
+} from 'query-string';
+import { useHistory } from 'react-router';
+
+export interface QueryStringResult {
+  [0]: ParsedQuery;
+  [1]: Dispatch<SetStateAction<Record<string, any>>>;
+}
+
+type NavigateCallback = (
+  pathnameWithParams: string,
+  pathname: string,
+  stringifedParams: string,
+) => void;
+
+/**
+ * Query string.
+ * @param {Location} location
+ * @param {NavigateCallback} navigate
+ * @param {ParseOptions} parseOptions
+ * @param {StringifyOptions} stringifyOptions
+ * @returns {QueryStringResult}
+ */
+export function useQueryString(
+  location: Location,
+  navigate: NavigateCallback,
+  parseOptions?: ParseOptions,
+  stringifyOptions?: StringifyOptions,
+): QueryStringResult {
+  const isFirst = useRef(true);
+  const [state, setState] = useState(parse(location.search, parseOptions));
+
+  useEffect((): void => {
+    if (isFirst.current) {
+      isFirst.current = false;
+    } else {
+      const pathname = location.pathname;
+      const stringifedParams = stringify(state, stringifyOptions);
+      const pathnameWithParams = pathname + '?' + stringifedParams;
+
+      navigate(pathnameWithParams, pathname, stringifedParams);
+    }
+  }, [state]);
+
+  const setQuery: typeof setState = (values): void => {
+    const nextState = typeof values === 'function' ? values(state) : values;
+    setState(
+      (state): ParsedQuery => ({
+        ...state,
+        ...nextState,
+      }),
+    );
+  };
+
+  return [state, setQuery];
+}
+
+/**
+ * Query string hook integrate with react router of the application.
+ * @param {NavigateCallback} navigate
+ * @param {ParseOptions} parseOptions
+ * @returns {QueryStringResult}
+ */
+export const useAppQueryString = (
+  navigate: NavigateCallback,
+  parseOptions: ParseOptions = {},
+): QueryStringResult => {
+  const history = useHistory();
+
+  return useQueryString(
+    window.location,
+    (pathnameWithParams, pathname, stringifiedParams) => {
+      history.push({ pathname, search: stringifiedParams });
+
+      navigate && navigate(pathnameWithParams, pathname, stringifiedParams);
+    },
+    {
+      parseNumbers: true,
+      parseBooleans: true,
+      ...parseOptions,
+    },
+  );
+};

packages/webapp/src/hooks/useRequest.tsx

@@ -0,0 +1,111 @@
+// @ts-nocheck
+import React from 'react';
+import axios from 'axios';
+import {
+  useAuthActions,
+  useAuthOrganizationId,
+  useSetGlobalErrors,
+  useAuthToken,
+} from './state';
+import { getCookie } from '../utils';
+
+export default function useApiRequest() {
+  const setGlobalErrors = useSetGlobalErrors();
+  const { setLogout } = useAuthActions();
+  const currentLocale = getCookie('locale');
+
+  // Authentication token.
+  const token = useAuthToken();
+
+  // Authentication organization id.
+  const organizationId = useAuthOrganizationId();
+
+  const http = React.useMemo(() => {
+    // Axios instance.
+    const instance = axios.create();
+
+    // Request interceptors.
+    instance.interceptors.request.use(
+      (request) => {
+        const locale = currentLocale;
+
+        if (token) {
+          request.headers.common['X-Access-Token'] = token;
+        }
+        if (organizationId) {
+          request.headers.common['organization-id'] = organizationId;
+        }
+        if (locale) {
+          request.headers.common['Accept-Language'] = locale;
+        }
+        return request;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
+    // Response interceptors.
+    instance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        const { status, data } = error.response;
+
+        if (status >= 500) {
+          setGlobalErrors({ something_wrong: true });
+        }
+        if (status === 401) {
+          setGlobalErrors({ session_expired: true });
+          setLogout();
+        }
+        if (status === 403) {
+          setGlobalErrors({ access_denied: true });
+        }
+        if (status === 400) {
+          const lockedError = data.errors.find(
+            (error) => error.type === 'TRANSACTIONS_DATE_LOCKED',
+          );
+          if (lockedError) {
+            setGlobalErrors({ transactionsLocked: { ...lockedError.data } });
+          }
+          if (data.errors.find((e) => e.type === 'USER_INACTIVE')) {
+            setGlobalErrors({ userInactive: true });
+            setLogout();
+          }
+        }
+        return Promise.reject(error);
+      },
+    );
+    return instance;
+  }, [token, organizationId, setGlobalErrors, setLogout]);
+
+  return React.useMemo(
+    () => ({
+      http,
+
+      get(resource, params) {
+        return http.get(`/api/${resource}`, params);
+      },
+
+      post(resource, params, config) {
+        return http.post(`/api/${resource}`, params, config);
+      },
+
+      update(resource, slug, params) {
+        return http.put(`/api/${resource}/${slug}`, params);
+      },
+
+      put(resource, params) {
+        return http.put(`/api/${resource}`, params);
+      },
+
+      patch(resource, params, config) {
+        return http.patch(`/api/${resource}`, params, config);
+      },
+
+      delete(resource, params) {
+        return http.delete(`/api/${resource}`, params);
+      },
+    }),
+    [http],
+  );
+}

packages/webapp/src/hooks/useRequestPdf.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+import useApiRequest from './useRequest';
+
+export const useRequestPdf = (url) => {
+  const apiRequest = useApiRequest();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [pdfUrl, setPdfUrl] = React.useState('');
+  const [response, setResponse] = React.useState(null);
+
+  React.useEffect(() => {
+    setIsLoading(true);
+    apiRequest
+      .get(url, {
+        headers: { accept: 'application/pdf' },
+        responseType: 'blob',
+      })
+      .then((response) => {
+        // Create a Blob from the PDF Stream.
+        const file = new Blob([response.data], { type: 'application/pdf' });
+
+        // Build a URL from the file
+        const fileURL = URL.createObjectURL(file);
+
+        setPdfUrl(fileURL);
+        setIsLoading(false);
+        setIsLoaded(true);
+        setResponse(response);
+      });
+  }, []);
+
+  return {
+    isLoading,
+    isLoaded,
+    pdfUrl,
+    response,
+  };
+};

packages/webapp/src/hooks/utils/index.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+export * from './useLocalStorage';
+export * from './usePrevious';
+export * from './useUpdateEffect';
+export * from './useWatch';
+export * from './useWhen';
+export * from './useRequestPdf';
+export * from './useIntersectionObserver';
+export * from './useAbilityContext';
+export * from './useCustomCompareEffect';
+export * from './useDeepCompareEffect';

packages/webapp/src/hooks/utils/useAbilityContext.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+import { useAbility } from '@casl/react';
+import { AbilityContext } from '@/components';
+
+export const useAbilityContext = () => useAbility(AbilityContext);
+
+/**
+ *
+ */
+export const useAbilitiesFilter = () => {
+  const ability = useAbilityContext();
+
+  return React.useCallback(
+    (items) => {
+      return items.filter(
+        (item) =>
+          !item.permission ||
+          ability.can(item.permission.ability, item.permission.subject),
+      );
+    },
+    [ability],
+  );
+};

packages/webapp/src/hooks/utils/useCustomCompareEffect.ts

@@ -0,0 +1,43 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+type DepsEqualFnType<TDeps extends DependencyList> = (
+  prevDeps: TDeps,
+  nextDeps: TDeps,
+) => boolean;
+
+const useCustomCompareEffect = <TDeps extends DependencyList>(
+  effect: EffectCallback,
+  deps: TDeps,
+  depsEqual: DepsEqualFnType<TDeps>,
+) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+
+    if (typeof depsEqual !== 'function') {
+      console.warn(
+        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list',
+      );
+    }
+  }
+
+  const ref = useRef<TDeps | undefined>(undefined);
+
+  if (!ref.current || !depsEqual(deps, ref.current)) {
+    ref.current = deps;
+  }
+  useEffect(effect, ref.current);
+};
+
+export { useCustomCompareEffect };

packages/webapp/src/hooks/utils/useDeepCompareEffect.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { DependencyList, EffectCallback } from 'react';
+import isDeepEqualReact from 'fast-deep-equal/react';
+import { useCustomCompareEffect } from './useCustomCompareEffect';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+  }
+  useCustomCompareEffect(effect, deps, isDeepEqualReact);
+};
+
+export { useDeepCompareEffect };

packages/webapp/src/hooks/utils/useIntersectionObserver.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+
+export function useIntersectionObserver({
+  root,
+  target,
+  onIntersect,
+  threshold = 1.0,
+  rootMargin = '0px',
+  enabled = true,
+}) {
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) =>
+        entries.forEach((entry) => entry.isIntersecting && onIntersect()),
+      {
+        root: root && root.current,
+        rootMargin,
+        // threshold,
+        threshold: 0.25,
+      },
+    );
+    const el = target && target.current;
+
+    if (!el) {
+      return;
+    }
+    observer.observe(el);
+
+    return () => {
+      observer.unobserve(el);
+    };
+  }, [target.current, enabled, onIntersect, root]);
+}

packages/webapp/src/hooks/utils/useLocalStorage.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+
+// Hook
+export function useLocalStorage(key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = React.useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

packages/webapp/src/hooks/utils/usePrevious.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { useRef, useEffect } from 'react';
+
+
+// Hook
+export function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}

packages/webapp/src/hooks/utils/useRequestPdf.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+import useApiRequest from '../useRequest';
+
+export const useRequestPdf = (url) => {
+  const apiRequest = useApiRequest();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [pdfUrl, setPdfUrl] = React.useState('');
+  const [response, setResponse] = React.useState(null);
+
+  React.useEffect(() => {
+    setIsLoading(true);
+    apiRequest
+      .get(url, {
+        headers: { accept: 'application/pdf' },
+        responseType: 'blob',
+      })
+      .then((response) => {
+        // Create a Blob from the PDF Stream.
+        const file = new Blob([response.data], { type: 'application/pdf' });
+
+        // Build a URL from the file
+        const fileURL = URL.createObjectURL(file);
+
+        setPdfUrl(fileURL);
+        setIsLoading(false);
+        setIsLoaded(true);
+        setResponse(response);
+      });
+  }, []);
+
+  return {
+    isLoading,
+    isLoaded,
+    pdfUrl,
+    response,
+  };
+};

packages/webapp/src/hooks/utils/useUpdateEffect.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { useRef, useEffect } from 'react';
+
+/**
+ * A custom useEffect hook that only triggers on updates, not on initial mount
+ * Idea stolen from: https://stackoverflow.com/a/55075818/1526448
+ * @param {Function} effect
+ * @param {Array<any>} dependencies
+ */
+export function useUpdateEffect(effect, dependencies = []) {
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      effect();
+    }
+  }, dependencies);
+}

packages/webapp/src/hooks/utils/useWatch.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { useEffect, useRef } from 'react';
+
+export function useWatch(callback, argument) {
+  const flag = useRef(false);
+
+  useEffect(() => {
+    if (!flag.current) {
+      flag.current = true;
+      return;
+    }
+    callback(argument);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [argument]);
+}
+
+export function useWatchImmediate(callback, argument) {
+  useEffect(() => {
+    callback(argument);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [argument]);
+}

packages/webapp/src/hooks/utils/useWhen.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import React from 'react';
+
+export function useWhen(condition, callback) {
+  React.useEffect(() => {
+    if (condition) {
+      callback();
+    }
+  }, [condition, callback]);
+}
+
+export function useWhenNot(condition, callback) {
+  return useWhen(!condition, callback);
+}