@accounter/client 0.0.8-alpha-20251028124234-328844c99a42b68aa9e2f32fd86da80b4832f631 → 0.0.8-alpha-20251028124537-8b0946b10a6e597c997017c33fb80fbf674e2feb

package/src/components/clients/modify-client-dialog.tsx

@@ -49,9 +49,10 @@ interface Props {
   businessId: string;
   client?: ClientFormValues | null;
   onDone?: () => void;
+  showTrigger?: boolean;
 }
 
-export function ModifyClientDialog({ client, businessId, onDone }: Props) {
+export function ModifyClientDialog({ client, businessId, onDone, showTrigger = true }: Props) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingClient, setEditingClient] = useState<ClientFormValues | null>(null);
 
@@ -138,13 +139,23 @@ export function ModifyClientDialog({ client, businessId, onDone }: Props) {
   );
 
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" onClick={handleNew}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Client
-        </Button>
-      </DialogTrigger>
+    <Dialog
+      open={isDialogOpen}
+      onOpenChange={status => {
+        setIsDialogOpen(status);
+        if (!status) {
+          onDone?.();
+        }
+      }}
+    >
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button size="sm" onClick={handleNew}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Client
+          </Button>
+        </DialogTrigger>
+      )}
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{editingClient ? 'Edit Client' : 'Create New Client'}</DialogTitle>
@@ -263,7 +274,14 @@ export function ModifyClientDialog({ client, businessId, onDone }: Props) {
               </div>
             </div>
             <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setIsDialogOpen(false);
+                  onDone?.();
+                }}
+              >
                 Cancel
               </Button>
               <Button type="submit">{editingClient ? 'Update Client' : 'Create Client'}</Button>

package/src/components/common/business-trip-report/parts/core-expense-row.tsx

@@ -4,7 +4,6 @@ import { Controller, type Control } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 import { useQuery } from 'urql';
-import { ROUTES } from '@/router/routes.js';
 import { Select, Text } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import {
@@ -15,6 +14,7 @@ import {
 } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { TIMELESS_DATE_REGEX } from '../../../../helpers/consts.js';
+import { getChargeHref } from '../../../screens/charges/charge.js';
 import { CurrencyInput } from '../../index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -239,7 +239,7 @@ export const CoreExpenseRow = ({
           {linkedChargeIds.map(id => (
             <Link
               key={id}
-              to={ROUTES.CHARGES.DETAIL(id)}
+              to={getChargeHref(id)}
               target="_blank"
               rel="noreferrer"
               onClick={event => event.stopPropagation()}

package/src/components/common/business-trip-report/parts/report-header.tsx

@@ -1,6 +1,5 @@
 import type { ReactElement } from 'react';
 import { differenceInDays, format, setHours } from 'date-fns';
-import { ROUTES } from '@/router/routes.js';
 import { Grid, Text } from '@mantine/core';
 import { BusinessTripReportHeaderFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
@@ -44,7 +43,7 @@ export const ReportHeader = ({ data, onChange }: Props): ReactElement => {
           <AccountantApproval data={businessTrip} onChange={onChange} />
           <CopyToClipboardButton
             isLink
-            content={`${window.location.origin}${ROUTES.BUSINESS_TRIPS.DETAIL(businessTrip.id)}`}
+            content={`${window.location.origin}/business-trips/${businessTrip.id}`}
           />
           <BusinessTripToggleMenu businessTripId={businessTrip.id} />
         </div>

package/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 import { AlertCircle } from 'lucide-react';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '@/router/routes.js';
 import { Popover, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
@@ -11,6 +10,7 @@ import {
 } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { formatStringifyAmount } from '../../../../helpers/index.js';
+import { getChargeHref } from '../../../screens/charges/charge.js';
 import {
   Account,
   Counterparty,
@@ -94,7 +94,7 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
                 <Amount data={uncategorizedTransaction} />
                 <td>
                   <Link
-                    to={ROUTES.CHARGES.DETAIL(uncategorizedTransaction.transaction.chargeId)}
+                    to={getChargeHref(uncategorizedTransaction.transaction.chargeId)}
                     target="_blank"
                     rel="noreferrer"
                     onClick={event => event.stopPropagation()}

package/src/components/common/buttons/charge-navigate-button.tsx

@@ -1,9 +1,8 @@
 import type { ComponentProps, ReactElement } from 'react';
 import { ExternalLink } from 'lucide-react';
-import { Link } from 'react-router-dom';
 import { Tooltip } from '@mantine/core';
 import { cn } from '../../../lib/utils.js';
-import { ROUTES } from '../../../router/routes.js';
+import { getChargeHref } from '../../screens/charges/charge.js';
 import { Button } from '../../ui/button.js';
 
 export function ChargeNavigateButton(
@@ -11,17 +10,17 @@ export function ChargeNavigateButton(
 ): ReactElement {
   return (
     <Tooltip label="To Charge">
-      <Link
-        to={ROUTES.CHARGES.DETAIL(props.chargeId)}
-        target="_blank"
-        rel="noreferrer"
-        onClick={event => event.stopPropagation()}
-        className="inline-block"
+      <Button
+        onClick={event => {
+          event.stopPropagation();
+          window.open(getChargeHref(props.chargeId), '_blank', 'noreferrer');
+        }}
+        {...props}
+        className={cn('size-7.5', props.className)}
+        variant="ghost"
       >
-        <Button {...props} className={cn('size-7.5', props.className)} variant="ghost">
-          <ExternalLink className="size-5" />
-        </Button>
-      </Link>
+        <ExternalLink className="size-5" />
+      </Button>
     </Tooltip>
   );
 }

package/src/components/common/modals/edit-charge-modal.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement } from 'react';
 import { useQuery } from 'urql';
-import { ROUTES } from '@/router/routes.js';
 import { Loader } from '@mantine/core';
 import { EditChargeDocument } from '../../../gql/graphql.js';
+import { getChargeHref } from '../../screens/charges/charge.js';
 import { CopyToClipboardButton, EditCharge, PopUpDrawer } from '../index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -89,7 +89,7 @@ export const EditChargeModalContent = ({
             ID: {chargeId}
             <CopyToClipboardButton
               isLink
-              content={`${window.location.origin}${ROUTES.CHARGES.DETAIL(chargeId)}`}
+              content={`${window.location.origin}${getChargeHref(chargeId)}`}
             />
           </div>
         </div>

package/src/components/common/modals/insert-business.tsx

@@ -2,6 +2,10 @@ import { useCallback, useContext, useState } from 'react';
 import { Globe, Mail, MapPin, Phone, Plus, X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import {
+  ModifyClientDialog,
+  type ClientFormValues,
+} from '@/components/clients/modify-client-dialog.js';
 import { Badge } from '@/components/ui/badge.js';
 import { Button } from '@/components/ui/button.js';
 import {
@@ -15,6 +19,7 @@ import {
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -28,7 +33,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select.js';
+import { Switch } from '@/components/ui/switch.js';
 import { Textarea } from '@/components/ui/textarea.js';
+import { DocumentType } from '@/gql/graphql.js';
 import { pcn874RecordEnum } from '@/helpers/index.js';
 import { useAllCountries } from '@/hooks/use-get-countries.js';
 import { useGetSortCodes } from '@/hooks/use-get-sort-codes.js';
@@ -48,8 +55,8 @@ const businessFormSchema = z
     localName: z.string().optional(),
     govId: z.string().optional(),
     address: z.string().optional(),
-    generalContacts: z.array(z.string().email()),
-    website: z.string().url().optional().or(z.literal('')),
+    generalContacts: z.array(z.email()),
+    website: z.url().optional().or(z.literal('')),
     phone: z.string().optional(),
     taxCategory: z.string().optional(),
     sortCode: z.string().optional(),
@@ -57,8 +64,9 @@ const businessFormSchema = z
     irsCode: z.int().optional(),
     defaultDescription: z.string().optional(),
     defaultTags: z.array(z.string()),
+    isClient: z.boolean().default(false).optional(),
     transactionPhrases: z.array(z.string()),
-    emailAddresses: z.array(z.string().email()),
+    emailAddresses: z.array(z.email()),
   })
   .refine(
     data => {
@@ -117,6 +125,7 @@ export function InsertBusiness({
   onAdd?: (businessId: string) => void;
 }) {
   const [isNewBusinessOpen, setIsNewBusinessOpen] = useState(false);
+  const [client, setClient] = useState<ClientFormValues | null>(null);
 
   const { insertBusiness, fetching: addingInProcess } = useInsertBusiness();
 
@@ -128,6 +137,7 @@ export function InsertBusiness({
       defaultTags: [],
       transactionPhrases: description ? [description] : [],
       emailAddresses: [],
+      locality: 'GAB', // TODO: set default based on DB
     },
   });
 
@@ -135,44 +145,69 @@ export function InsertBusiness({
     const newBusiness = await insertBusiness({
       fields: convertFormDataToInsertNewBusinessInput(data),
     });
+    if (data.isClient && newBusiness?.id) {
+      setClient({
+        businessId: newBusiness.id,
+        generatedDocumentType: DocumentType.Proforma,
+        emails: [],
+      });
+    } else {
+      onComplete(newBusiness?.id);
+    }
+  };
+
+  const onComplete = (businessId: string = '') => {
+    setClient(null);
     setIsNewBusinessOpen(false);
     form.reset();
-    onAdd?.(newBusiness?.id ?? '');
+    onAdd?.(businessId);
   };
 
   return (
-    <Dialog open={isNewBusinessOpen} onOpenChange={setIsNewBusinessOpen}>
-      <DialogTrigger asChild>
-        <Button>
-          <Plus className="size-4 mr-2" />
-          New Business
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>Create New Business</DialogTitle>
-          <DialogDescription>Add a new business to Accounter.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <ContactInformationSection form={form} />
-
-            <DefaultsSection form={form} />
-
-            <AutoMatchingSection form={form} />
-
-            <div className="flex justify-end gap-3 pt-4 border-t">
-              <Button type="button" variant="outline" onClick={() => setIsNewBusinessOpen(false)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={addingInProcess}>
-                Create Business
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
+    <>
+      <Dialog open={isNewBusinessOpen} onOpenChange={setIsNewBusinessOpen}>
+        <DialogTrigger asChild>
+          <Button>
+            <Plus className="size-4 mr-2" />
+            New Business
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Create New Business</DialogTitle>
+            <DialogDescription>Add a new business to Accounter.</DialogDescription>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <ContactInformationSection form={form} />
+
+              <DefaultsSection form={form} />
+
+              <AutoMatchingSection form={form} />
+
+              <div className="flex justify-end gap-3 pt-4 border-t">
+                <Button type="button" variant="outline" onClick={() => setIsNewBusinessOpen(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={addingInProcess}>
+                  Create Business
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+      {client?.businessId && (
+        <ModifyClientDialog
+          businessId={client.businessId}
+          client={client}
+          showTrigger={false}
+          onDone={() => {
+            onComplete(client.businessId);
+          }}
+        />
+      )}
+    </>
   );
 }
 
@@ -538,12 +573,29 @@ function DefaultsSection({ form }: SectionProps) {
                   placeholder="Select Default Tags"
                   variant="default"
                   disabled={fetchingTags}
+                  asChild
                 />
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
+
+        <FormField
+          control={form.control}
+          name="isClient"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+              <div className="space-y-0.5">
+                <FormLabel>Client</FormLabel>
+                <FormDescription>Business is a client</FormDescription>
+              </div>
+              <FormControl>
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
       </div>
     </div>
   );

package/src/components/common/modals/insert-document-modal.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { ROUTES } from '@/router/routes.js';
+import { getChargeHref } from '../../screens/charges/charge.js';
 import { CopyToClipboardButton, InsertDocument, PopUpDrawer } from '../index.js';
 
 interface Props {
@@ -24,7 +24,7 @@ export const InsertDocumentModal = ({
             Charge ID: {chargeId}
             <CopyToClipboardButton
               isLink
-              content={`${window.location.origin}${ROUTES.CHARGES.DETAIL(chargeId)}`}
+              content={`${window.location.origin}${getChargeHref(chargeId)}`}
             />
           </div>
         </div>

package/src/components/common/modals/match-document-modal.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { ROUTES } from '@/router/routes.js';
+import { getChargeHref } from '../../screens/charges/charge.js';
 import { DocumentsToChargeMatcher } from '../documents-to-charge-matcher/index.js';
 import { CopyToClipboardButton, PopUpDrawer } from '../index.js';
 
@@ -25,7 +25,7 @@ export const MatchDocumentModal = ({
             Charge ID: {chargeId}
             <CopyToClipboardButton
               isLink
-              content={`${window.location.origin}${ROUTES.CHARGES.DETAIL(chargeId)}`}
+              content={`${window.location.origin}${getChargeHref(chargeId)}`}
             />
           </div>
         </div>

package/src/components/common/new-documents-list.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '@/router/routes.js';
 import { NewFetchedDocumentFieldsFragmentDoc } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
+import { getChargeHref } from '../screens/charges/charge.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -34,7 +34,7 @@ export const NewDocumentsList = ({ data }: Props): ReactElement => {
         .map(doc => (
           <Link
             key={doc.id}
-            to={ROUTES.CHARGES.DETAIL(doc.charge!.id)}
+            to={getChargeHref(doc.charge!.id)}
             target="_blank"
             rel="noreferrer"
             onClick={event => event.stopPropagation()}

package/src/components/documents-table/cells/creditor.tsx

@@ -3,8 +3,9 @@ import { Link } from 'react-router-dom';
 import { DocumentType } from '@/gql/graphql.js';
 import { useGetBusinesses } from '@/hooks/use-get-businesses.js';
 import { useUpdateDocument } from '@/hooks/use-update-document.js';
-import { ROUTES } from '@/router/routes.js';
+import { useUrlQuery } from '@/hooks/use-url-query.js';
 import { Indicator } from '@mantine/core';
+import { getBusinessHref } from '../../charges/helpers.js';
 import { ConfirmMiniButton, InsertBusiness, SelectWithSearch } from '../../common/index.js';
 import type { DocumentsTableRowType } from '../columns.js';
 
@@ -19,6 +20,7 @@ type Props = {
 };
 
 export const Creditor = ({ document, onChange }: Props): ReactElement => {
+  const { get } = useUrlQuery();
   const dbCreditor = 'creditor' in document ? document.creditor : undefined;
 
   const shouldHaveCreditor =
@@ -28,6 +30,13 @@ export const Creditor = ({ document, onChange }: Props): ReactElement => {
 
   const { selectableBusinesses, refresh: refreshBusinesses } = useGetBusinesses();
 
+  const encodedFilters = get('chargesFilters');
+
+  const getHref = useCallback(
+    (businessId: string) => getBusinessHref(businessId, encodedFilters as string),
+    [encodedFilters],
+  );
+
   const suggestedCreditor = useMemo(() => {
     if (dbCreditor || !('missingInfoSuggestions' in document) || !document.missingInfoSuggestions) {
       // case when creditor is already set or no suggestions
@@ -97,7 +106,7 @@ export const Creditor = ({ document, onChange }: Props): ReactElement => {
           {shouldHaveCreditor &&
             (id ? (
               <Link
-                to={ROUTES.BUSINESSES.DETAIL(id)}
+                to={getHref(id)}
                 target="_blank"
                 rel="noreferrer"
                 onClick={event => event.stopPropagation()}

package/src/components/documents-table/cells/debtor.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useState, type ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 import { useGetBusinesses } from '@/hooks/use-get-businesses.js';
-import { ROUTES } from '@/router/routes.js';
 import { Indicator } from '@mantine/core';
 import { DocumentType } from '../../../gql/graphql.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
+import { useUrlQuery } from '../../../hooks/use-url-query.js';
+import { getBusinessHref } from '../../charges/helpers.js';
 import { ConfirmMiniButton, InsertBusiness, SelectWithSearch } from '../../common/index.js';
 import type { DocumentsTableRowType } from '../columns.js';
 import { COUNTERPARTIES_LESS_DOCUMENT_TYPES } from './index.js';
@@ -15,6 +16,7 @@ type Props = {
 };
 
 export const Debtor = ({ document, onChange }: Props): ReactElement => {
+  const { get } = useUrlQuery();
   const dbDebtor = 'debtor' in document ? document.debtor : undefined;
 
   const shouldHaveDebtor =
@@ -24,6 +26,13 @@ export const Debtor = ({ document, onChange }: Props): ReactElement => {
 
   const { selectableBusinesses, refresh: refreshBusinesses } = useGetBusinesses();
 
+  const encodedFilters = get('chargesFilters');
+
+  const getHref = useCallback(
+    (businessId: string) => getBusinessHref(businessId, encodedFilters as string),
+    [encodedFilters],
+  );
+
   const suggestedDebtor = useMemo(() => {
     if (dbDebtor || !('missingInfoSuggestions' in document) || !document.missingInfoSuggestions) {
       // case when creditor is already set or no suggestions
@@ -93,7 +102,7 @@ export const Debtor = ({ document, onChange }: Props): ReactElement => {
           {shouldHaveDebtor &&
             (id ? (
               <Link
-                to={ROUTES.BUSINESSES.DETAIL(id)}
+                to={getHref(id)}
                 target="_blank"
                 rel="noreferrer"
                 onClick={event => event.stopPropagation()}

package/src/components/layout/user-nav.tsx

@@ -1,5 +1,8 @@
-import { useState, type JSX } from 'react';
-import { CircleCheckBig, FileDown, User2Icon } from 'lucide-react';
+import { useContext, useState, type JSX } from 'react';
+import { CircleCheckBig, FileDown, Shield, User2Icon } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { UserContext } from '@/providers/index.js';
+import { ROUTES } from '@/router/routes.js';
 import { Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCornJobs } from '../../hooks/use-corn-jobs.js';
@@ -17,11 +20,14 @@ import {
 } from '../ui/dropdown-menu.js';
 
 export function UserNav(): JSX.Element {
+  const { userContext } = useContext(UserContext);
   const [pullDocumentsOpened, { close: closePullDocuments, open: openPullDocuments }] =
     useDisclosure(false);
   const [balanceChargeModalOpen, setBalanceChargeModalOpen] = useState(false);
   const { executeJobs } = useCornJobs();
 
+  const userName = userContext?.username || 'User Name';
+
   return (
     <>
       <DropdownMenu>
@@ -35,11 +41,24 @@ export function UserNav(): JSX.Element {
         <DropdownMenuContent className="w-56" align="end" forceMount>
           <DropdownMenuLabel className="font-normal">
             <div className="flex flex-col space-y-1">
-              <p className="text-sm font-medium leading-none">User Name</p>
+              <p className="text-sm font-medium leading-none">{userName}</p>
               <p className="text-xs leading-none text-muted-foreground">Email</p>
             </div>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
+          {userContext?.context.adminBusinessId && (
+            <DropdownMenuItem asChild>
+              <Link
+                to={{
+                  pathname: ROUTES.BUSINESSES.DETAIL(userContext.context.adminBusinessId),
+                  search: '?tab=admin',
+                }}
+              >
+                <Shield className="size-4" />
+                <span className="hidden sm:inline">Admin Configurations</span>
+              </Link>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem>
             <Button variant="ghost" onClick={() => setBalanceChargeModalOpen(true)}>
               Add Balance Charge

package/src/components/ledger-table/counterparty-cell.tsx

@@ -1,6 +1,8 @@
-import { type ReactElement } from 'react';
+import { useCallback, type ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '@/router/routes.js';
+import type { ChargeFilter } from '../../gql/graphql.js';
+import { useUrlQuery } from '../../hooks/use-url-query.js';
+import { getBusinessTransactionsHref } from '../business-transactions/index.js';
 
 type Props = {
   account?: {
@@ -14,6 +16,33 @@ type Props = {
 };
 
 export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement => {
+  const { get } = useUrlQuery();
+
+  const encodedFilters = get('chargesFilters');
+
+  const getHref = useCallback(
+    (businessID: string) => {
+      let currentFilters: ChargeFilter = {};
+      if (encodedFilters) {
+        try {
+          const decoded = decodeURIComponent(encodedFilters);
+          const parsed = JSON.parse(decoded);
+          currentFilters = parsed as ChargeFilter;
+        } catch (error) {
+          console.error('Failed to parse filters from URL:', error);
+        }
+      }
+
+      return getBusinessTransactionsHref({
+        ownerIds: currentFilters.byOwners || [],
+        businessIDs: [businessID],
+        ...(currentFilters.fromDate && { fromDate: currentFilters.fromDate }),
+        ...(currentFilters.toDate && { toDate: currentFilters.toDate }),
+      });
+    },
+    [encodedFilters],
+  );
+
   const isAccountDiff = diffAccount && diffAccount?.id !== account?.id;
 
   return (
@@ -22,7 +51,7 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
         <>
           {account && (
             <Link
-              to={ROUTES.BUSINESSES.DETAIL(account.id)}
+              to={getHref(account.id)}
               target="_blank"
               rel="noreferrer"
               onClick={event => event.stopPropagation()}
@@ -34,7 +63,7 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
           {isAccountDiff && diffAccount && (
             <div className="border-2 border-yellow-500 rounded-md">
               <Link
-                to={ROUTES.BUSINESSES.DETAIL(diffAccount.id)}
+                to={getHref(diffAccount.id)}
                 target="_blank"
                 rel="noreferrer"
                 onClick={event => event.stopPropagation()}