feat(trpc): implement tRPC integration for accounts module

- Add tRPC server setup with NestJS (nestjs-trpc)
- Create AccountsTrpcRouter with CRUD operations
- Add tRPC client configuration in webapp
- Create tRPC React hooks for accounts module
- Replace existing REST hooks with tRPC hooks across 35+ files
- Maintain backward compatibility with existing REST API
- Add proper cache invalidation for mutations

New files:
- packages/server/src/modules/Trpc/*
- packages/webapp/src/trpc.ts
- packages/webapp/src/hooks/trpc/*
- shared/bigcapital-utils/src/trpc.ts

Dependencies added:
- @trpc/server, @trpc/client, @trpc/react-query
- nestjs-trpc, superjson
- @tanstack/react-query

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/webapp/src/components/App.tsx

@@ -4,6 +4,7 @@ import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
+import { trpc, trpcClient, queryClient } from '@/trpc';
 
 import '@/style/App.scss';
 import 'moment/locale/ar-ly';
@@ -86,14 +87,16 @@ export default function App() {
   const queryClient = new QueryClient(queryConfig);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SplashScreen />
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <SplashScreen />
 
-      <AppIntlLoader>
-        <AppInsider history={history} />
-      </AppIntlLoader>
+        <AppIntlLoader>
+          <AppInsider history={history} />
+        </AppIntlLoader>
 
-      <ReactQueryDevtools initialIsOpen />
-    </QueryClientProvider>
+        <ReactQueryDevtools initialIsOpen />
+      </QueryClientProvider>
+    </trpc.Provider>
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalProvider.tsx

@@ -4,7 +4,6 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { DashboardInsider } from '@/components';
 import {
-  useAccounts,
   useAutoCompleteContacts,
   useCurrencies,
   useJournal,
@@ -13,6 +12,7 @@ import {
   useBranches,
   useSettingsManualJournals,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useProjects } from '@/containers/Projects/hooks';
 
 const MakeJournalFormContext = createContext();
@@ -27,7 +27,7 @@ function MakeJournalProvider({ journalId, query, ...props }) {
   const isProjectFeatureCan = featureCan(Features.Projects);
 
   // Load the accounts list.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Load the customers list.
   const { data: contacts, isLoading: isContactsLoading } =

packages/webapp/src/containers/Accounts/AccountsChartProvider.tsx

@@ -1,7 +1,8 @@
 // @ts-nocheck
 import React, { createContext } from 'react';
 import { DashboardInsider } from '@/components';
-import { useResourceViews, useResourceMeta, useAccounts } from '@/hooks/query';
+import { useResourceViews, useResourceMeta } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { getFieldsFromResourceMeta } from '@/utils';
 
 const AccountsChartContext = createContext();
@@ -26,7 +27,7 @@ function AccountsChartProvider({ query, tableStateChanged, ...props }) {
     data: accounts,
     isFetching: isAccountsFetching,
     isLoading: isAccountsLoading,
-  } = useAccounts(query, { keepPreviousData: true });
+  } = useAccountsTrpc(query, { placeholderData: (previousData) => previousData });
 
   // Provider payload.
   const provider = {

packages/webapp/src/containers/Accounts/hooks/use-bulk-delete-accounts-dialog.ts

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import { DialogsName } from '@/constants/dialogs';
-import { useValidateBulkDeleteAccounts } from '@/hooks/query/accounts';
+import { useValidateBulkDeleteAccountsTrpc } from '@/hooks/trpc';
 import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
 
 export const useBulkDeleteAccountsDialog = () => {
-  const validateBulkDeleteMutation = useValidateBulkDeleteAccounts();
+  const validateBulkDeleteMutation = useValidateBulkDeleteAccountsTrpc();
   const {
     openBulkDeleteDialog,
     closeBulkDeleteDialog,

packages/webapp/src/containers/Alerts/Accounts/AccountActivateAlert.tsx

@@ -7,7 +7,7 @@ import { AppToaster, FormattedMessage as T } from '@/components';
 import { withAlertStoreConnect } from '@/containers/Alert/withAlertStoreConnect';
 import { withAlertActions } from '@/containers/Alert/withAlertActions';
 
-import { useActivateAccount } from '@/hooks/query';
+import { useActivateAccountTrpc } from '@/hooks/trpc';
 import { compose } from '@/utils';
 
 /**
@@ -24,8 +24,8 @@ function AccountActivateAlert({
   
   const {
     mutateAsync: activateAccount,
-    isLoading 
-  } = useActivateAccount();
+    isLoading
+  } = useActivateAccountTrpc();
 
   // Handle alert cancel.
   const handleCancel = () => {

packages/webapp/src/containers/Alerts/Accounts/AccountDeleteAlert.tsx

@@ -14,7 +14,7 @@ import { withAlertStoreConnect } from '@/containers/Alert/withAlertStoreConnect'
 import { withAlertActions } from '@/containers/Alert/withAlertActions';
 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
 
-import { useDeleteAccount } from '@/hooks/query';
+import { useDeleteAccountTrpc } from '@/hooks/trpc';
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
 
@@ -34,7 +34,7 @@ function AccountDeleteAlert({
   // #withDrawerActions
   closeDrawer,
 }) {
-  const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
+  const { isLoading, mutateAsync: deleteAccount } = useDeleteAccountTrpc();
 
   // handle cancel delete account alert.
   const handleCancelAccountDelete = () => {

packages/webapp/src/containers/Alerts/Accounts/AccountInactivateAlert.tsx

@@ -8,7 +8,7 @@ import { withAlertStoreConnect } from '@/containers/Alert/withAlertStoreConnect'
 import { withAlertActions } from '@/containers/Alert/withAlertActions';
 
 import { compose } from '@/utils';
-import { useInactivateAccount } from '@/hooks/query';
+import { useInactivateAccountTrpc } from '@/hooks/trpc';
 
 /**
  * Account inactivate alert.
@@ -23,7 +23,7 @@ function AccountInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { mutateAsync: inactivateAccount, isLoading } = useInactivateAccount();
+  const { mutateAsync: inactivateAccount, isLoading } = useInactivateAccountTrpc();
 
   const handleCancelInactiveAccount = () => {
     closeAlert('account-inactivate');

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx

@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import { DialogContent } from '@/components';
 import { useBankRule } from '@/hooks/query/bank-rules';
-import { useAccounts } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 interface RuleFormBootValues {
   bankRule?: null;
@@ -27,7 +27,7 @@ function RuleFormBoot({ bankRuleId, ...props }: RuleFormBootProps) {
       enabled: !!bankRuleId,
     },
   );
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   const isNewMode = !bankRuleId;
   const isEditMode = !isNewMode;

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -2,7 +2,8 @@
 import React, { useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { DashboardInsider } from '@/components';
-import { useCashflowAccounts, useAccount } from '@/hooks/query';
+import { useCashflowAccounts } from '@/hooks/query';
+import { useAccountTrpc } from '@/hooks/trpc';
 import { useAppQueryString } from '@/hooks';
 import { useGetBankAccountSummaryMeta } from '@/hooks/query/bank-rules';
 
@@ -33,7 +34,7 @@ function AccountTransactionsProvider({ query, ...props }) {
     data: currentAccount,
     isFetching: isCurrentAccountFetching,
     isLoading: isCurrentAccountLoading,
-  } = useAccount(accountId, { keepPreviousData: true });
+  } = useAccountTrpc(accountId, { placeholderData: (previousData) => previousData });
 
   // Retrieves the bank account meta summary.
   const {

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx

@@ -2,7 +2,8 @@
 import React, { useMemo } from 'react';
 import { first } from 'lodash';
 import { DrawerLoading } from '@/components';
-import { useAccounts, useBranches } from '@/hooks/query';
+import { useBranches } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
 import { Spinner } from '@blueprintjs/core';
@@ -43,7 +44,7 @@ function CategorizeTransactionBoot({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches the branches list.
   const { data: branches, isLoading: isBranchesLoading } = useBranches(

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { Features } from '@/constants';
-import { useAccounts, useBranches } from '@/hooks/query';
+import { useBranches } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useFeatureCan } from '@/hooks/state';
 
 interface MatchingReconcileTransactionBootProps {
@@ -21,7 +22,7 @@ export function MatchingReconcileTransactionBoot({
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
 
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
   const { data: branches, isLoading: isBranchesLoading } = useBranches(
     {},
     {

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx

@@ -5,11 +5,11 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
   useCreateCashflowTransaction,
-  useAccounts,
   useBranches,
   useCashflowAccounts,
   useSettingCashFlow,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const MoneyInDialogContent = React.createContext();
 
@@ -30,7 +30,7 @@ function MoneyInDialogProvider({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches the branches list.
   const {

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFieldsProvider.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { DialogContent } from '@/components';
-import { useAccount } from '@/hooks/query';
+import { useAccountTrpc } from '@/hooks/trpc';
 import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 
 const MoneyInFieldsContext = React.createContext();
@@ -13,7 +13,7 @@ function MoneyInFieldsProvider({ ...props }) {
   const { accountId } = useMoneyInDailogContext();
 
   // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+  const { data: account, isLoading: isAccountLoading } = useAccountTrpc(accountId, {
     enabled: !!accountId,
   });
   // Provider data.

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.tsx

@@ -4,12 +4,12 @@ import { DialogContent } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  useAccounts,
   useBranches,
   useCreateCashflowTransaction,
   useCashflowAccounts,
   useSettingCashFlow,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const MoneyInDialogContent = React.createContext();
 
@@ -30,7 +30,7 @@ function MoneyOutProvider({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches the branches list.
   const {

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFieldsProvider.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { DialogContent } from '@/components';
-import { useAccount } from '@/hooks/query';
+import { useAccountTrpc } from '@/hooks/trpc';
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 const MoneyOutFieldsContext = React.createContext();
@@ -13,7 +13,7 @@ function MoneyOutFieldsProvider({ ...props }) {
   const { accountId } = useMoneyOutDialogContext();
 
   // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+  const { data: account, isLoading: isAccountLoading } = useAccountTrpc(accountId, {
     enabled: !!accountId,
   });
   // Provider data.

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogProvider.tsx

@@ -2,13 +2,15 @@
 import React, { createContext, useContext } from 'react';
 import { DialogContent } from '@/components';
 import {
-  useCreateAccount,
-  useAccountsTypes,
   useCurrencies,
-  useAccount,
-  useAccounts,
-  useEditAccount,
 } from '@/hooks/query';
+import {
+  useCreateAccountTrpc,
+  useAccountsTypesTrpc,
+  useAccountTrpc,
+  useAccountsTrpc,
+  useEditAccountTrpc,
+} from '@/hooks/trpc';
 import { AccountDialogAction, getDisabledFormFields } from './utils';
 
 const AccountDialogContext = createContext();
@@ -18,18 +20,18 @@ const AccountDialogContext = createContext();
  */
 function AccountDialogProvider({ dialogName, payload, ...props }) {
   // Create and edit account mutations.
-  const { mutateAsync: createAccountMutate } = useCreateAccount();
-  const { mutateAsync: editAccountMutate } = useEditAccount();
+  const { mutateAsync: createAccountMutate } = useCreateAccountTrpc();
+  const { mutateAsync: editAccountMutate } = useEditAccountTrpc();
 
   // Fetches accounts list.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Fetches accounts types.
   const { data: accountsTypes, isLoading: isAccountsTypesLoading } =
-    useAccountsTypes();
+    useAccountsTypesTrpc();
 
   // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(
+  const { data: account, isLoading: isAccountLoading } = useAccountTrpc(
     payload.accountId,
     {
       enabled:

packages/webapp/src/containers/Dialogs/Accounts/AccountBulkDeleteDialog.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage as T, AppToaster } from '@/components';
 import intl from 'react-intl-universal';
 
 import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
-import { useBulkDeleteAccounts } from '@/hooks/query/accounts';
+import { useBulkDeleteAccountsTrpc } from '@/hooks/trpc';
 import withDialogRedux from '@/components/DialogReduxConnect';
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { withAccountsTableActions } from '@/containers/Accounts/withAccountsTableActions';
@@ -28,7 +28,7 @@ function AccountBulkDeleteDialog({
   // #withDialogActions
   closeDialog,
 }) {
-  const { mutateAsync: bulkDeleteAccounts, isLoading } = useBulkDeleteAccounts();
+  const { mutateAsync: bulkDeleteAccounts, isLoading } = useBulkDeleteAccountsTrpc();
 
   const handleCancel = () => {
     closeDialog(dialogName);

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormProvider.tsx

@@ -2,7 +2,8 @@
 import React from 'react';
 
 import { DialogContent } from '@/components';
-import { useAccounts, useInvoice, useCreateBadDebt } from '@/hooks/query';
+import { useInvoice, useCreateBadDebt } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const BadDebtContext = React.createContext();
 
@@ -11,7 +12,7 @@ const BadDebtContext = React.createContext();
  */
 function BadDebtFormProvider({ invoiceId, dialogName, ...props }) {
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Handle fetch invoice data.
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormProvider.tsx

@@ -5,11 +5,11 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
   useItem,
-  useAccounts,
   useBranches,
   useWarehouses,
   useCreateInventoryAdjustment,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const InventoryAdjustmentContext = createContext();
 
@@ -23,7 +23,7 @@ function InventoryAdjustmentFormProvider({ itemId, dialogName, ...props }) {
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches accounts list.
-  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches the item details.
   const { isFetching: isItemLoading, data: item } = useItem(itemId);

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx

@@ -3,10 +3,10 @@ import React, { useMemo } from 'react';
 import { DialogContent } from '@/components';
 import {
   useBill,
-  useAccounts,
   useBranches,
   useCreatePaymentMade,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { pick } from 'lodash';
@@ -27,7 +27,7 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
   });
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Create payment made mutations.
   const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx

@@ -5,12 +5,12 @@ import { DialogContent } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  useAccounts,
   useInvoice,
   useBranches,
   useSettingsPaymentReceives,
   useCreatePaymentReceive,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const QuickPaymentReceiveContext = createContext();
 
@@ -28,7 +28,7 @@ function QuickPaymentReceiveFormProvider({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Handle fetch invoice data.
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {

packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.tsx

@@ -5,11 +5,11 @@ import { pick } from 'lodash';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  useAccounts,
   useCreditNote,
   useBranches,
   useCreateRefundCreditNote,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const RefundCreditNoteContext = React.createContext();
 
@@ -27,7 +27,7 @@ function RefundCreditNoteFormProvider({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Handle fetch credit note data.
   const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(

packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.tsx

@@ -5,11 +5,11 @@ import { pick } from 'lodash';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  useAccounts,
   useVendorCredit,
   useBranches,
   useCreateRefundVendorCredit,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 
 const RefundVendorCreditContext = React.createContext();
 
@@ -24,7 +24,7 @@ function RefundVendorCreditFormProvider({
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Fetches the branches list.
   const {

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { useAccount, useAccountTransactions } from '@/hooks/query';
+import { useAccountTrpc, useAccountTransactionsTrpc } from '@/hooks/trpc';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { DRAWERS } from '@/constants/drawers';
 
@@ -11,13 +11,13 @@ const AccountDrawerContext = React.createContext();
  */
 function AccountDrawerProvider({ accountId, name, ...props }) {
   // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+  const { data: account, isLoading: isAccountLoading } = useAccountTrpc(accountId, {
     enabled: !!accountId,
   });
 
   // Load the specific account transactions.
   const { data: accounts, isLoading: isAccountsLoading } =
-    useAccountTransactions(accountId, {
+    useAccountTransactionsTrpc(accountId, {}, {
       enabled: !!accountId,
     });
 

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -8,11 +8,11 @@ import {
   useCurrencies,
   useCustomers,
   useExpense,
-  useAccounts,
   useBranches,
   useCreateExpense,
   useEditExpense,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useProjects } from '@/containers/Projects/hooks';
 
 const ExpenseFormPageContext = createContext();
@@ -47,7 +47,7 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
   // Fetch accounts list.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Fetch the  projects list.
   const {

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { createContext, useContext } from 'react';
 
-import { useAccounts } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 
 const GLHeaderGeneralPanelContext = createContext();
@@ -11,7 +11,7 @@ const GLHeaderGeneralPanelContext = createContext();
  */
 function GLHeaderGeneralPanelProvider({ ...props }) {
   // Accounts list.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Provider
   const provider = {

packages/webapp/src/containers/Items/ItemFormProvider.tsx

@@ -7,8 +7,8 @@ import {
   useItemsCategories,
   useCreateItem,
   useEditItem,
-  useAccounts,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useWatchItemError } from './utils';
 import { useTaxRates } from '@/hooks/query/taxRates';
 
@@ -23,7 +23,7 @@ function ItemFormProvider({ itemId, ...props }) {
   const duplicateId = state?.action;
 
   // Fetches the accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches the items categories list.
   const {

packages/webapp/src/containers/Preferences/Accountant/AccountantFormProvider.tsx

@@ -5,7 +5,8 @@ import styled from 'styled-components';
 
 import { Card } from '@/components';
 import { CLASSES } from '@/constants/classes';
-import { useAccounts, useSaveSettings, useSettings } from '@/hooks/query';
+import { useSaveSettings, useSettings } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const AccountantFormContext = React.createContext();
@@ -15,7 +16,7 @@ const AccountantFormContext = React.createContext();
  */
 function AccountantFormProvider({ ...props }) {
   // Fetches the accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   // Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();

packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormProvider.tsx

@@ -5,7 +5,8 @@ import styled from 'styled-components';
 
 import { CLASSES } from '@/constants/classes';
 import { Card } from '@/components';
-import { useSettingsItems, useAccounts, useSaveSettings } from '@/hooks/query';
+import { useSettingsItems, useSaveSettings } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const ItemFormContext = createContext();
@@ -16,7 +17,7 @@ const ItemFormContext = createContext();
 
 function ItemPreferencesFormProvider({ ...props }) {
   // Fetches the accounts list.
-  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccountsTrpc();
 
   const {
     isLoading: isItemsSettingsLoading,

packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditBoot.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
-import { useAccounts } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useGetPaymentMethod } from '@/hooks/query/payment-services';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
@@ -40,7 +40,7 @@ export const StripeIntegrationEditBoot: React.FC<
     payload: { stripePaymentMethodId },
   } = useDrawerContext();
 
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
   const { data: paymentMethod, isLoading: isPaymentMethodLoading } =
     useGetPaymentMethod(stripePaymentMethodId, {
       enabled: !!stripePaymentMethodId,

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormProvider.tsx

@@ -5,7 +5,6 @@ import { useFeatureCan } from '@/hooks/state';
 import { DashboardInsider } from '@/components/Dashboard';
 import { useProjects } from '@/containers/Projects/hooks';
 import {
-  useAccounts,
   useVendors,
   useItems,
   useBill,
@@ -15,6 +14,7 @@ import {
   useCreateBill,
   useEditBill,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useTaxRates } from '@/hooks/query/taxRates';
 
 const BillFormContext = createContext();
@@ -48,7 +48,7 @@ function BillFormProvider({ billId, ...props }) {
   const isProjectsFeatureCan = featureCan(Features.Projects);
 
   // Handle fetch accounts.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Handle fetch vendors data table
   const {

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormProvider.tsx

@@ -3,7 +3,6 @@ import React, { createContext, useContext, useState } from 'react';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  useAccounts,
   useVendors,
   useItems,
   useBranches,
@@ -12,6 +11,7 @@ import {
   useCreatePaymentMade,
   useEditPaymentMade,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { DashboardInsider } from '@/components';
 
 // Payment made form context.
@@ -29,7 +29,7 @@ function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) {
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Handle fetch Items data table or list.
   const {

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormProvider.tsx

@@ -7,7 +7,6 @@ import { useProjects } from '@/containers/Projects/hooks';
 import {
   useSettingsPaymentReceives,
   usePaymentReceiveEditPage,
-  useAccounts,
   useCustomers,
   useBranches,
   useCreatePaymentReceive,
@@ -15,6 +14,7 @@ import {
   usePaymentReceivedState,
   PaymentReceivedStateResponse,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
 
 interface PaymentReceivedFormContextValue {
@@ -52,7 +52,7 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
   const paymentEntriesEditPage = paymentReceivedEditData?.entries
 
   // Handle fetch accounts data.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Fetch payment made settings.
   const fetchSettings = useSettingsPaymentReceives();

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx

@@ -5,7 +5,6 @@ import { useFeatureCan } from '@/hooks/state';
 import { DashboardInsider } from '@/components/Dashboard';
 import {
   useReceipt,
-  useAccounts,
   useSettingsReceipts,
   useCustomers,
   useWarehouses,
@@ -16,6 +15,7 @@ import {
   useGetReceiptState,
   IGetReceiptStateResponse,
 } from '@/hooks/query';
+import { useAccountsTrpc } from '@/hooks/trpc';
 import { useProjects } from '@/containers/Projects/hooks';
 import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
 
@@ -43,7 +43,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
     enabled: !!receiptId,
   });
   // Fetch accounts list.
-  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccountsTrpc();
 
   // Fetch customers list.
   const {

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

@@ -1,4 +1,6 @@
 // @ts-nocheck
+import { QueryClient } from '@tanstack/react-query';
+
 // Query client config.
 export const queryConfig = {
   defaultOptions: {
@@ -8,3 +10,6 @@ export const queryConfig = {
     },
   },
 };
+
+// Create a new QueryClient instance for tRPC
+export const tanstackQueryClient = new QueryClient(queryConfig);

packages/webapp/src/hooks/trpc/index.ts

@@ -0,0 +1,2 @@
+// tRPC hooks for accounts module
+export * from './useAccounts';

packages/webapp/src/hooks/trpc/useAccounts.ts

@@ -0,0 +1,188 @@
+import { trpc } from '@/trpc';
+import { useQueryClient } from '@tanstack/react-query';
+
+// Query keys for cache invalidation
+const accountQueryKeys = {
+  accounts: ['accounts'],
+  account: (id: number) => ['account', id],
+  accountTypes: ['accountTypes'],
+  accountTransactions: (id: number) => ['accountTransactions', id],
+  cashFlowAccounts: ['cashFlowAccounts'],
+  financialReport: ['financialReport'],
+};
+
+/**
+ * Retrieve accounts list using tRPC.
+ */
+export function useAccountsTrpc(query?: Record<string, any>, options = {}) {
+  return trpc.accounts.getAccounts.useQuery(query || {}, {
+    select: (res) => res.accounts,
+    ...options,
+  });
+}
+
+/**
+ * Retrieve the given account details using tRPC.
+ */
+export function useAccountTrpc(id: number, options = {}) {
+  return trpc.accounts.getAccount.useQuery(
+    { id },
+    {
+      enabled: !!id,
+      ...options,
+    }
+  );
+}
+
+/**
+ * Retrieve accounts types list using tRPC.
+ */
+export function useAccountsTypesTrpc(options = {}) {
+  return trpc.accounts.getAccountTypes.useQuery(undefined, options);
+}
+
+/**
+ * Retrieve account transactions using tRPC.
+ */
+export function useAccountTransactionsTrpc(
+  accountId: number,
+  filters?: { fromDate?: string; toDate?: string },
+  options = {}
+) {
+  return trpc.accounts.getAccountTransactions.useQuery(
+    {
+      accountId,
+      fromDate: filters?.fromDate,
+      toDate: filters?.toDate,
+    },
+    {
+      enabled: !!accountId,
+      ...options,
+    }
+  );
+}
+
+/**
+ * Creates account using tRPC.
+ */
+export function useCreateAccountTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.createAccount.useMutation({
+    onSuccess: () => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Edits the given account using tRPC.
+ */
+export function useEditAccountTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.editAccount.useMutation({
+    onSuccess: (_, variables) => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({
+        queryKey: accountQueryKeys.account(variables.id),
+      });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Deletes the given account using tRPC.
+ */
+export function useDeleteAccountTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.deleteAccount.useMutation({
+    onSuccess: () => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Activates the given account using tRPC.
+ */
+export function useActivateAccountTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.activateAccount.useMutation({
+    onSuccess: () => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Inactivates the given account using tRPC.
+ */
+export function useInactivateAccountTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.inactivateAccount.useMutation({
+    onSuccess: () => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Validates which accounts can be deleted in bulk using tRPC.
+ */
+export function useValidateBulkDeleteAccountsTrpc(options = {}) {
+  return trpc.accounts.validateBulkDeleteAccounts.useMutation(options);
+}
+
+/**
+ * Deletes multiple accounts in bulk using tRPC.
+ */
+export function useBulkDeleteAccountsTrpc(options = {}) {
+  const queryClient = useQueryClient();
+
+  return trpc.accounts.bulkDeleteAccounts.useMutation({
+    onSuccess: () => {
+      // Invalidate related queries
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.cashFlowAccounts });
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.financialReport });
+    },
+    ...options,
+  });
+}
+
+/**
+ * Hook to refresh accounts list.
+ */
+export function useRefreshAccountsTrpc() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries({ queryKey: accountQueryKeys.accounts });
+    },
+  };
+}

packages/webapp/src/trpc.ts

@@ -0,0 +1,42 @@
+import { createTRPCReact } from '@trpc/react-query';
+import { httpBatchLink } from '@trpc/client';
+import superjson from 'superjson';
+import { store } from '@/store/createStore';
+import { tanstackQueryClient } from '@/hooks/query/base';
+
+// Define the AppRouter type - this will be imported from the server package
+// For now, we use any until the server exports the proper types
+export type AppRouter = any;
+
+export const trpc = createTRPCReact<AppRouter>();
+
+export function getAuthHeaders() {
+  const state = store.getState();
+  const { token, organizationId } = state.authentication;
+  const headers: Record<string, string> = {};
+
+  if (token) {
+    headers['x-access-token'] = token;
+  }
+  if (organizationId) {
+    headers['organization-id'] = organizationId.toString();
+  }
+  headers['Accept-Language'] = 'en';
+
+  return headers;
+}
+
+export const trpcClient = trpc.createClient({
+  transformer: superjson,
+  links: [
+    httpBatchLink({
+      url: '/api/trpc',
+      headers() {
+        return getAuthHeaders();
+      },
+    }),
+  ],
+});
+
+// Export the QueryClient for use in the TRPCProvider
+export const queryClient = tanstackQueryClient;