@accounter/client 0.0.8-alpha-20251021150615-800574fc6d416cd319de216c97b431643d8958a2 → 0.0.8-alpha-20251021225827-178e480c997a9811913e16f85cb94329041b096e

package/src/helpers/contracts.ts

@@ -0,0 +1,22 @@
+import { BillingCycle, SubscriptionPlan } from '@/gql/graphql.js';
+
+export function standardBillingCycle(billingCycle: BillingCycle): string {
+  switch (billingCycle) {
+    case BillingCycle.Annual:
+      return 'Annual';
+    case BillingCycle.Monthly:
+      return 'Monthly';
+    default:
+      throw new Error(`Unsupported Billing Cycle: ${billingCycle}`);
+  }
+}
+export function standardPlan(plan: SubscriptionPlan): string {
+  switch (plan) {
+    case SubscriptionPlan.Enterprise:
+      return 'Enterprise';
+    case SubscriptionPlan.Pro:
+      return 'Pro';
+    default:
+      throw new Error(`Unsupported Subscription plan: ${plan}`);
+  }
+}

package/src/helpers/currency.ts

@@ -1,4 +1,5 @@
 import { Currency } from '../gql/graphql.js';
+import { formatStringifyAmount } from './index.js';
 
 export function getCurrencyFormatter(
   currency: Currency,
@@ -68,3 +69,7 @@ export const FIAT_CURRENCIES: Currency[] = [
   Currency.Aud,
   Currency.Sek,
 ] as const;
+
+export function formatAmountWithCurrency(amount: number, currency: Currency, digits = 2): string {
+  return `${currencyCodeToSymbol(currency)} ${formatStringifyAmount(amount, digits)}`;
+}

package/src/helpers/index.ts

@@ -1,6 +1,7 @@
 export * from './charges.js';
 export * from './clipboard.js';
 export * from './consts.js';
+export * from './contracts.js';
 export * from './currency.js';
 export * from './dates.js';
 export * from './document-matches.js';
@@ -9,6 +10,7 @@ export * from './files.js';
 export * from './form.js';
 export * from './graphql-document-dedupe-fragments.js';
 export * from './numbers.js';
+export * from './pcn874.js';
 export * from './strings-manipulations.js';
 export * from './vat.js';
 export * from './tags.js';

package/src/helpers/pcn874.ts

@@ -0,0 +1,17 @@
+import type { Pcn874RecordType } from '@/gql/graphql.js';
+
+export const pcn874RecordEnum: Record<Pcn874RecordType, string> = {
+  C: 'INPUT_SELF_INVOICE',
+  H: 'INPUT_SINGLE_DOC_BY_LAW',
+  I: 'SALE_PALESTINIAN_CUSTOMER',
+  K: 'INPUT_PETTY_CASH',
+  L1: 'SALE_UNIDENTIFIED_CUSTOMER',
+  L2: 'SALE_UNIDENTIFIED_ZERO_OR_EXEMPT',
+  M: 'SALE_SELF_INVOICE',
+  P: 'INPUT_PALESTINIAN_SUPPLIER',
+  R: 'INPUT_IMPORT',
+  S1: 'SALE_REGULAR',
+  S2: 'SALE_ZERO_OR_EXEMPT',
+  T: 'INPUT_REGULAR',
+  Y: 'SALE_EXPORT',
+} as const;

package/src/hooks/use-add-sort-code.ts

@@ -20,7 +20,7 @@ const NOTIFICATION_ID = 'addSortCode';
 
 export const useAddSortCode = (): UseAddSortCode => {
   // TODO: add authentication
-  // TODO: add local data update method after chang e
+  // TODO: add local data update method after change
 
   const [{ fetching }, mutate] = useMutation(AddSortCodeDocument);
   const addSortCode = useCallback(

package/src/hooks/use-add-tag.ts

@@ -20,7 +20,7 @@ const NOTIFICATION_ID = 'addTag';
 
 export const useAddTag = (): UseAddTag => {
   // TODO: add authentication
-  // TODO: add local data update method after chang e
+  // TODO: add local data update method after change
 
   const [{ fetching }, mutate] = useMutation(AddTagDocument);
   const addTag = useCallback(

package/src/hooks/use-create-contract.ts

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from 'urql';
+import { CreateContractDocument, type CreateContractMutationVariables } from '../gql/graphql.js';
+import { handleCommonErrors } from '../helpers/error-handling.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  mutation CreateContract($input: CreateContractInput!) {
+    createContract(input: $input) {
+      id
+    }
+  }
+`;
+
+type UseCreateContract = {
+  creating: boolean;
+  createContract: (variables: CreateContractMutationVariables) => Promise<void>;
+};
+
+const NOTIFICATION_ID = 'createContract';
+
+export const useCreateContract = (): UseCreateContract => {
+  // TODO: add authentication
+  // TODO: add local data update method after change
+
+  const [{ fetching }, mutate] = useMutation(CreateContractDocument);
+  const createContract = useCallback(
+    async (variables: CreateContractMutationVariables) => {
+      const message = `Error creating new contract for client[${variables.input.clientId}]`;
+      const notificationId = `${NOTIFICATION_ID}-${variables.input.clientId}`;
+      toast.loading('Creating contract', {
+        id: notificationId,
+      });
+      try {
+        const res = await mutate(variables);
+        const data = handleCommonErrors(res, message, notificationId);
+        if (data) {
+          toast.success('Success', {
+            id: notificationId,
+            description: `Contract for client ${variables.input.clientId} was successfully created`,
+          });
+        }
+      } catch (e) {
+        console.error(`${message}: ${e}`);
+        toast.error('Error', {
+          id: notificationId,
+          description: message,
+          duration: 100_000,
+          closeButton: true,
+        });
+      }
+      return void 0;
+    },
+    [mutate],
+  );
+
+  return {
+    creating: fetching,
+    createContract,
+  };
+};

package/src/hooks/use-delete-contract.ts

@@ -0,0 +1,64 @@
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from 'urql';
+import { DeleteContractDocument, type DeleteContractMutationVariables } from '../gql/graphql.js';
+import { handleCommonErrors } from '../helpers/error-handling.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  mutation DeleteContract($contractId: UUID!) {
+    deleteContract(id: $contractId)
+  }
+`;
+
+type UseDeleteContract = {
+  fetching: boolean;
+  deleteContract: (variables: DeleteContractMutationVariables) => Promise<boolean>;
+};
+
+const NOTIFICATION_ID = 'deleteContract';
+
+export const useDeleteContract = (): UseDeleteContract => {
+  // TODO: add authentication
+  // TODO: add local data delete method after change
+
+  const [{ fetching }, mutate] = useMutation(DeleteContractDocument);
+  const deleteContract = useCallback(
+    async (variables: DeleteContractMutationVariables) => {
+      const message = `Error deleting contract ID [${variables.contractId}]`;
+      const notificationId = `${NOTIFICATION_ID}-${variables.contractId}`;
+      toast.loading('Deleting contract', {
+        id: notificationId,
+      });
+      try {
+        const res = await mutate(variables);
+        const data = handleCommonErrors(res, message, notificationId);
+        if (data) {
+          if (data.deleteContract === false) {
+            throw new Error('Unsuccessful deletion');
+          }
+          toast.success('Success', {
+            id: notificationId,
+            description: 'Contract was deleted',
+          });
+          return data.deleteContract;
+        }
+      } catch (e) {
+        console.error(`${message}: ${e}`);
+        toast.error('Error', {
+          id: notificationId,
+          description: message,
+          duration: 100_000,
+          closeButton: true,
+        });
+      }
+      return false;
+    },
+    [mutate],
+  );
+
+  return {
+    fetching,
+    deleteContract,
+  };
+};

package/src/hooks/use-delete-tag.ts

@@ -20,7 +20,7 @@ const NOTIFICATION_ID = 'deleteTag';
 
 export const useDeleteTag = (): UseDeleteTag => {
   // TODO: add authentication
-  // TODO: add local data update method after chang e
+  // TODO: add local data update method after change
 
   const [{ fetching }, mutate] = useMutation(DeleteTagDocument);
   const deleteTag = useCallback(

package/src/hooks/use-get-all-contracts.ts

@@ -31,7 +31,6 @@ import { AllOpenContractsDocument, type AllOpenContractsQuery } from '../gql/gra
       isActive
       product
       plan
-      signedAgreement
       msCloud
     }
   }

package/src/hooks/use-insert-client.ts

@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from 'urql';
+import {
+  InsertClientDocument,
+  type InsertClientMutation,
+  type InsertClientMutationVariables,
+} from '../gql/graphql.js';
+import { handleCommonErrors } from '../helpers/error-handling.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  mutation InsertClient($fields: ClientInsertInput!) {
+    insertClient(fields: $fields) {
+      __typename
+      ... on Client {
+        id
+      }
+      ... on CommonError {
+        message
+      }
+    }
+  }
+`;
+
+type InsertClientSuccessfulResult = Extract<
+  InsertClientMutation['insertClient'],
+  { __typename: 'Client' }
+>;
+
+type UseInsertClient = {
+  fetching: boolean;
+  insertClient: (
+    variables: InsertClientMutationVariables,
+  ) => Promise<InsertClientSuccessfulResult | void>;
+};
+
+const NOTIFICATION_ID = 'insertClient';
+
+export const useInsertClient = (): UseInsertClient => {
+  // TODO: add authentication
+  // TODO: add local data update method after insert
+
+  const [{ fetching }, mutate] = useMutation(InsertClientDocument);
+  const insertClient = useCallback(
+    async (variables: InsertClientMutationVariables) => {
+      const errorMessage = `Error creating client [${variables.fields.businessId}]`;
+      const notificationId = `${NOTIFICATION_ID}-${variables.fields.businessId}`;
+      toast.loading('Creating Client...', {
+        id: notificationId,
+      });
+      try {
+        const res = await mutate(variables);
+        const data = handleCommonErrors(res, errorMessage, notificationId, 'insertClient');
+        if (data) {
+          toast.success('Success', {
+            id: notificationId,
+            description: `Client [${variables.fields.businessId}] was created`,
+          });
+          return data.insertClient;
+        }
+      } catch (e) {
+        console.error(`${errorMessage}: ${e}`);
+        toast.error('Error', {
+          id: notificationId,
+          description: errorMessage,
+          duration: 100_000,
+          closeButton: true,
+        });
+      }
+      return void 0;
+    },
+    [mutate],
+  );
+
+  return {
+    fetching,
+    insertClient,
+  };
+};

package/src/hooks/use-merge-businesses.ts

@@ -23,7 +23,7 @@ const NOTIFICATION_ID = 'mergeBusinesses';
 
 export const useMergeBusinesses = (): UseMergeBusinesses => {
   // TODO: add authentication
-  // TODO: add local data update method after chang e
+  // TODO: add local data update method after change
 
   const [{ fetching }, mutate] = useMutation(MergeBusinessesDocument);
   const mergeBusinesses = useCallback(

package/src/hooks/use-merge-charges.ts

@@ -47,7 +47,7 @@ const NOTIFICATION_ID = 'mergeCharges';
 
 export const useMergeCharges = (): UseMergeCharges => {
   // TODO: add authentication
-  // TODO: add local data update method after chang e
+  // TODO: add local data update method after change
 
   const [{ fetching }, mutate] = useMutation(MergeChargesDocument);
   const mergeCharges = useCallback(

package/src/hooks/use-update-client.ts

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from 'urql';
+import {
+  UpdateClientDocument,
+  type UpdateClientMutation,
+  type UpdateClientMutationVariables,
+} from '../gql/graphql.js';
+import { handleCommonErrors } from '../helpers/error-handling.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  mutation UpdateClient($businessId: UUID!, $fields: ClientUpdateInput!) {
+    updateClient(businessId: $businessId, fields: $fields) {
+      __typename
+      ... on Client {
+        id
+      }
+      ... on CommonError {
+        message
+      }
+    }
+  }
+`;
+
+type Client = Extract<UpdateClientMutation['updateClient'], { __typename: 'Client' }>;
+
+type UseUpdateClient = {
+  fetching: boolean;
+  updateClient: (variables: UpdateClientMutationVariables) => Promise<Client | void>;
+};
+
+const NOTIFICATION_ID = 'updateClient';
+
+export const useUpdateClient = (): UseUpdateClient => {
+  // TODO: add authentication
+  // TODO: add local data update method after change
+
+  const [{ fetching }, mutate] = useMutation(UpdateClientDocument);
+  const updateClient = useCallback(
+    async (variables: UpdateClientMutationVariables) => {
+      const message = `Error updating client ID [${variables.businessId}]`;
+      const notificationId = `${NOTIFICATION_ID}-${variables.businessId}`;
+      toast.loading('Updating client', {
+        id: notificationId,
+      });
+      try {
+        const res = await mutate(variables);
+        const data = handleCommonErrors(res, message, notificationId, 'updateClient');
+        if (data) {
+          toast.success('Success', {
+            id: notificationId,
+            description: 'Client updated',
+          });
+          return data.updateClient;
+        }
+      } catch (e) {
+        console.error(`${message}: ${e}`);
+        toast.error('Error', {
+          id: notificationId,
+          description: message,
+          duration: 100_000,
+          closeButton: true,
+        });
+      }
+      return void 0;
+    },
+    [mutate],
+  );
+
+  return {
+    fetching,
+    updateClient,
+  };
+};

package/src/hooks/use-update-contract.ts

@@ -0,0 +1,69 @@
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from 'urql';
+import {
+  UpdateContractDocument,
+  type UpdateContractMutation,
+  type UpdateContractMutationVariables,
+} from '../gql/graphql.js';
+import { handleCommonErrors } from '../helpers/error-handling.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  mutation UpdateContract($contractId: UUID!, $input: UpdateContractInput!) {
+    updateContract(contractId: $contractId, input: $input) {
+      id
+    }
+  }
+`;
+
+type Contract = UpdateContractMutation['updateContract'];
+
+type UseUpdateContract = {
+  updating: boolean;
+  updateContract: (variables: UpdateContractMutationVariables) => Promise<Contract | void>;
+};
+
+const NOTIFICATION_ID = 'updateContract';
+
+export const useUpdateContract = (): UseUpdateContract => {
+  // TODO: add authentication
+  // TODO: add local data update method after change
+
+  const [{ fetching }, mutate] = useMutation(UpdateContractDocument);
+  const updateContract = useCallback(
+    async (variables: UpdateContractMutationVariables) => {
+      const message = `Error updating contract ID [${variables.contractId}]`;
+      const notificationId = `${NOTIFICATION_ID}-${variables.contractId}`;
+      toast.loading('Updating contract', {
+        id: notificationId,
+      });
+      try {
+        const res = await mutate(variables);
+        const data = handleCommonErrors(res, message, notificationId, 'updateContract');
+        if (data) {
+          toast.success('Success', {
+            id: notificationId,
+            description: 'Contract updated',
+          });
+          return data.updateContract;
+        }
+      } catch (e) {
+        console.error(`${message}: ${e}`);
+        toast.error('Error', {
+          id: notificationId,
+          description: message,
+          duration: 100_000,
+          closeButton: true,
+        });
+      }
+      return void 0;
+    },
+    [mutate],
+  );
+
+  return {
+    updating: fetching,
+    updateContract,
+  };
+};

package/src/index.tsx

@@ -1,32 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
-import { App } from './app.js';
-import { Providers } from './providers/index.js';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { routes } from './router/config.js';
 import './index.css';
 
 const rootElement = document.getElementById('root');
-
 const root = createRoot(rootElement!);
 
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route
-      path="*"
-      element={
-        <Providers>
-          <App />
-        </Providers>
-      }
-      errorElement={<p>error</p>} // TODO: implement
-    />,
-  ),
-);
+// Create router with object-based configuration
+const router = createBrowserRouter(routes);
 
 root.render(
   <StrictMode>

package/src/providers/auth-guard.tsx

@@ -1,7 +1,4 @@
-import { createContext, useEffect, useState, type ReactNode } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
-import { NetworkError } from '@/components/screens/network-error.js';
-import { LoginPage } from '../components/login-page.js';
+import { createContext, useMemo, useState, type ReactNode } from 'react';
 import { UserService } from '../services/user-service.js';
 
 type ContextType = {
@@ -14,25 +11,19 @@ export const AuthContext = createContext<ContextType>({
   setAuthService: () => void 0,
 });
 
-export const AuthGuard = ({ children }: { children?: ReactNode }): ReactNode => {
-  const [authService, setAuthService] = useState<UserService>(new UserService());
-  const navigate = useNavigate();
+/**
+ * AuthProvider - provides authentication context
+ * Auth routing logic is now handled by route loaders
+ */
+export const AuthProvider = ({ children }: { children?: ReactNode }): ReactNode => {
+  // Use lazy initialization to prevent creating new UserService on every render
+  const [authService, setAuthService] = useState<UserService>(() => new UserService());
 
-  const loggedIn = authService.isLoggedIn();
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => ({ authService, setAuthService }), [authService]);
 
-  useEffect(() => {
-    if (!loggedIn) {
-      navigate('/login');
-    }
-  }, [loggedIn, navigate]);
-
-  return (
-    <AuthContext.Provider value={{ authService, setAuthService }}>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/network-error" element={<NetworkError />} />
-        <Route path="*" element={children} />
-      </Routes>
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
 };
+
+// Keep AuthGuard as alias for backwards compatibility
+export const AuthGuard = AuthProvider;

package/src/providers/index.tsx

@@ -5,9 +5,14 @@ import { red } from '@mui/material/colors';
 import { createTheme } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from '../components/ui/sonner.js';
-import { AuthGuard } from './auth-guard.js';
+import { AuthContext, AuthGuard, AuthProvider } from './auth-guard.js';
 import { UrqlProvider } from './urql.js';
-import { UserProvider } from './user-provider.js';
+import { UserContext, UserProvider, type UserInfo } from './user-provider.js';
+
+export { AuthGuard, AuthProvider, AuthContext };
+export { FiltersContext } from './filters-context.js';
+export { UrqlProvider };
+export { UserProvider, UserContext, type UserInfo };
 
 const queryClient = new QueryClient();
 

package/src/providers/urql-client.ts

@@ -0,0 +1,86 @@
+import {
+  createClient,
+  fetchExchange,
+  mapExchange,
+  type AnyVariables,
+  type Client,
+  type Operation,
+} from 'urql';
+import { authExchange } from '@urql/exchange-auth';
+import { UserService } from '../services/user-service.js';
+
+/**
+ * Singleton URQL client for use in loaders and server-side operations
+ * This is separate from the Provider client to avoid React context dependencies
+ */
+let globalClient: Client | null = null;
+
+export function getUrqlClient(): Client {
+  if (globalClient) {
+    return globalClient;
+  }
+
+  const authService = new UserService();
+
+  let url: string;
+  switch (import.meta.env.MODE) {
+    case 'production': {
+      url = 'https://accounter.onrender.com/graphql';
+      break;
+    }
+    case 'staging': {
+      url = 'https://accounter-staging.onrender.com/graphql';
+      break;
+    }
+    default: {
+      url = 'http://localhost:4000/graphql';
+      break;
+    }
+  }
+
+  globalClient = createClient({
+    url,
+    exchanges: [
+      mapExchange({
+        onResult(result) {
+          if (result.error?.networkError) {
+            console.error('Network Error:', result.error.networkError);
+          }
+        },
+      }),
+      authExchange(async utils => {
+        return {
+          addAuthToOperation(operation): Operation<void, AnyVariables> {
+            const token = authService.authToken();
+            if (!token) {
+              return operation;
+            }
+            return utils.appendHeaders(operation, {
+              Authorization: token,
+            });
+          },
+          didAuthError(error, _operation): boolean {
+            return (
+              error?.response?.status === 401 ||
+              error?.graphQLErrors?.some(e => e.extensions?.code === 'FORBIDDEN')
+            );
+          },
+          async refreshAuth(): Promise<void> {
+            authService.logout();
+            // Redirect handled by route loader
+          },
+        };
+      }),
+      fetchExchange,
+    ],
+  });
+
+  return globalClient;
+}
+
+/**
+ * Reset the global client (useful for tests or logout)
+ */
+export function resetUrqlClient(): void {
+  globalClient = null;
+}