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

package/src/components/business/integrations-section.tsx

@@ -0,0 +1,477 @@
+import { useCallback, useEffect, useState } from 'react';
+import { CheckCircle2, Mail, MapPin, Phone, Plus, Settings, XCircle } from 'lucide-react';
+import { useQuery } from 'urql';
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
+import {
+  ClientIntegrationsSectionFragmentDoc,
+  ClientIntegrationsSectionGreenInvoiceDocument,
+  type ClientUpdateInput,
+} from '@/gql/graphql.js';
+import { getFragmentData, type FragmentType } from '@/gql/index.js';
+import { useUpdateClient } from '@/hooks/use-update-client.js';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment ClientIntegrationsSection on LtdFinancialEntity {
+    id
+    clientInfo {
+      id
+      greenInvoiceId
+      hiveId
+    }
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query ClientIntegrationsSectionGreenInvoice($clientId: UUID!) {
+    greenInvoiceClient(clientId: $clientId) {
+      id
+      country
+      emails
+      name
+      phone
+      taxId
+      address
+      city
+      zip
+      fax
+      mobile
+    }
+  }
+`;
+
+const generalIntegrations = [
+  {
+    id: 'hive',
+    name: 'Hive',
+    description:
+      'Schema registry, analytics, metrics and gateway for GraphQL federation and other GraphQL APIs',
+    status: 'disconnected',
+    lastSync: 'Never',
+  },
+  {
+    id: 'slack',
+    name: 'Slack',
+    description: 'Team communication and notifications',
+    status: 'disconnected',
+    lastSync: 'Never',
+  },
+  {
+    id: 'retool',
+    name: 'Retool',
+    description: 'Internal tools and dashboards',
+    status: 'disconnected',
+    lastSync: 'Never',
+  },
+  {
+    id: 'linear',
+    name: 'Linear',
+    description: 'Issue tracking and project management',
+    status: 'disconnected',
+    lastSync: 'Never',
+  },
+  {
+    id: 'workflowy',
+    name: 'Workflowy',
+    description: 'Task management and note taking',
+    status: 'disconnected',
+    lastSync: 'Never',
+  },
+];
+
+interface Props {
+  data?: FragmentType<typeof ClientIntegrationsSectionFragmentDoc>;
+}
+
+export function IntegrationsSection({ data }: Props) {
+  const business = getFragmentData(ClientIntegrationsSectionFragmentDoc, data);
+
+  const [{ data: greenInvoiceData, fetching: fetchingGreenInvoice }, fetchGreenInvoice] = useQuery({
+    query: ClientIntegrationsSectionGreenInvoiceDocument,
+    variables: {
+      clientId: business?.id ?? '',
+    },
+    pause: !business?.clientInfo?.greenInvoiceId || !business?.id,
+  });
+
+  const { updateClient } = useUpdateClient();
+
+  const updateIdByAttribute = useCallback(
+    (id: string, attribute: keyof Pick<ClientUpdateInput, 'greenInvoiceId' | 'hiveId'>) => {
+      if (!business?.id) return;
+
+      const fields: ClientUpdateInput = {};
+      fields[attribute] = id;
+      updateClient({
+        businessId: business?.id,
+        fields,
+      });
+    },
+    [business?.id, updateClient],
+  );
+
+  useEffect(() => {
+    if (business?.clientInfo?.greenInvoiceId && business?.id) {
+      fetchGreenInvoice();
+    }
+  }, [business?.clientInfo?.greenInvoiceId, business?.id, fetchGreenInvoice]);
+
+  const greenInvoiceClient = greenInvoiceData?.greenInvoiceClient;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Integrations</CardTitle>
+            <CardDescription>Connected external services and providers</CardDescription>
+          </div>
+          <Button size="sm">
+            <Plus className="h-4 w-4 mr-2" />
+            Add Integration
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <Accordion type="multiple" defaultValue={['green-invoice']} className="space-y-4">
+          {/* Green Invoice Integration */}
+          {fetchingGreenInvoice ? (
+            <AccordionItem
+              value="green-invoice"
+              className="rounded-lg border-2 border-green-600/20 bg-green-600/5"
+            >
+              <div className="px-4 py-3 bg-green-600/10 rounded-t-lg">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 flex-1">
+                    <Skeleton className="h-10 w-10 rounded-lg" />
+                    <div className="flex-1 space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Skeleton className="h-6 w-32" />
+                        <Skeleton className="h-5 w-5 rounded-full" />
+                      </div>
+                      <Skeleton className="h-4 w-64" />
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-8 w-24" />
+                    <Skeleton className="h-8 w-8" />
+                  </div>
+                </div>
+              </div>
+
+              <AccordionContent>
+                <div className="p-6 space-y-6">
+                  {/* Business Information Skeleton */}
+                  <div className="space-y-4">
+                    <Skeleton className="h-4 w-40" />
+                    <div className="grid gap-4 md:grid-cols-2">
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Contact Information Skeleton */}
+                  <div className="space-y-4">
+                    <Skeleton className="h-4 w-40" />
+                    <div className="grid gap-4 md:grid-cols-2">
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-32" />
+                        <Skeleton className="h-6 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Address Information Skeleton */}
+                  <div className="space-y-4">
+                    <Skeleton className="h-4 w-40" />
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <div className="space-y-2 md:col-span-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                      <div className="space-y-2">
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ) : (
+            <AccordionItem
+              value="green-invoice"
+              className="rounded-lg border-2 border-green-600/20 bg-green-600/5"
+            >
+              <div className="px-4 py-3 bg-green-600/10 rounded-t-lg">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div className="h-10 w-10 rounded-lg bg-green-600 flex items-center justify-center text-white font-bold">
+                      GI
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-lg">Green Invoice</h3>
+                        <CheckCircle2 className="h-5 w-5 text-green-600" />
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        Israeli invoicing system integration
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <UpdateIntegrationConfigDialog
+                      id={business?.clientInfo?.greenInvoiceId}
+                      provider="Green Invoice"
+                      updateClient={async newId => updateIdByAttribute(newId, 'greenInvoiceId')}
+                    />
+                    <AccordionTrigger className="hover:no-underline p-2" />
+                  </div>
+                </div>
+              </div>
+
+              <AccordionContent>
+                {greenInvoiceClient && (
+                  <div className="p-6 space-y-6">
+                    {/* Business Information */}
+                    <div className="space-y-4">
+                      <h4 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
+                        Business Information
+                      </h4>
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">
+                            Integration ID
+                          </span>
+                          <p className="text-sm font-mono">
+                            {business?.clientInfo?.greenInvoiceId}
+                          </p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">
+                            Business Name
+                          </span>
+                          <p className="text-sm">{greenInvoiceClient.name}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">Country</span>
+                          <p className="text-sm">{greenInvoiceClient.country}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">Tax ID</span>
+                          <p className="text-sm font-mono">{greenInvoiceClient.taxId}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Contact Information */}
+                    <div className="space-y-4">
+                      <h4 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
+                        Contact Information
+                      </h4>
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                            <Mail className="h-3.5 w-3.5" />
+                            Email Addresses
+                          </span>
+                          <div className="flex flex-wrap gap-2">
+                            {greenInvoiceClient.emails?.map((email, index) => (
+                              <span key={index} className="text-sm px-2 py-1 bg-muted rounded">
+                                {email}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                            <Phone className="h-3.5 w-3.5" />
+                            Phone
+                          </span>
+                          <p className="text-sm font-mono">{greenInvoiceClient.phone}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">Mobile</span>
+                          <p className="text-sm font-mono">{greenInvoiceClient.mobile}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">Fax</span>
+                          <p className="text-sm font-mono">{greenInvoiceClient.fax}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Address Information */}
+                    <div className="space-y-4">
+                      <h4 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        <MapPin className="h-3.5 w-3.5" />
+                        Address
+                      </h4>
+                      <div className="grid gap-4 md:grid-cols-3">
+                        <div className="space-y-1 md:col-span-2">
+                          <span className="text-sm font-medium text-muted-foreground">
+                            Street Address
+                          </span>
+                          <p className="text-sm">{greenInvoiceClient.address}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">City</span>
+                          <p className="text-sm">{greenInvoiceClient.city}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <span className="text-sm font-medium text-muted-foreground">
+                            Zip Code
+                          </span>
+                          <p className="text-sm font-mono">{greenInvoiceClient.zip}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          )}
+
+          {generalIntegrations.map(integration => (
+            <AccordionItem
+              key={integration.id}
+              value={integration.id}
+              className="rounded-lg border"
+            >
+              <div className="px-4 py-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        <h4 className="font-semibold">{integration.name}</h4>
+                        {integration.status === 'connected' ? (
+                          <CheckCircle2 className="h-4 w-4 text-green-600" />
+                        ) : (
+                          <XCircle className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </div>
+                      <p className="text-sm text-muted-foreground">{integration.description}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="sm" onClick={e => e.stopPropagation()}>
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                    <AccordionTrigger className="hover:no-underline p-2" />
+                  </div>
+                </div>
+              </div>
+
+              <AccordionContent>
+                <div className="px-4 pb-4 pt-2 border-t">
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">Last sync: </span>
+                    <span className="font-medium">{integration.lastSync}</span>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface updateIntegrationProps {
+  id?: string;
+  provider: string;
+  updateClient: (newId: string) => Promise<void>;
+}
+
+function UpdateIntegrationConfigDialog({ id, provider, updateClient }: updateIntegrationProps) {
+  const [isConfigOpen, setIsConfigOpen] = useState(false);
+  const [updatedId, setUpdatedId] = useState(id);
+
+  const handleSaveConfig = useCallback(async () => {
+    await updateClient(updatedId!);
+
+    setIsConfigOpen(false);
+  }, [updatedId, updateClient]);
+
+  return (
+    <Dialog open={isConfigOpen} onOpenChange={setIsConfigOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" onClick={e => e.stopPropagation()}>
+          <Settings className="h-4 w-4 mr-2" />
+          Configure
+        </Button>
+      </DialogTrigger>
+      <DialogContent onClick={e => e.stopPropagation()}>
+        <DialogHeader>
+          <DialogTitle>Configure {provider}</DialogTitle>
+          <DialogDescription>Update your {provider} integration settings</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="id">{provider} ID</Label>
+            <Input
+              id="id"
+              value={updatedId}
+              onChange={e => setUpdatedId(e.target.value)}
+              placeholder={`Enter ${provider} ID`}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setIsConfigOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSaveConfig} disabled={!updatedId}>
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/business/transactions-section.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { BusinessExtendedInfo } from '../business-transactions/business-extended-info';
+
+interface Props {
+  businessId: string;
+}
+
+export function TransactionsSection({ businessId }: Props) {
+  return (
+    <Card>
+      <CardHeader className="flex w-full justify-between items-center">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Transactions</CardTitle>
+            <CardDescription>Complete transaction history for this business</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="rounded-md border">
+          <BusinessExtendedInfo businessID={businessId} filter={{}} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/business-transactions/business-extended-info.tsx

@@ -1,23 +1,21 @@
 import { useState, type ReactElement } from 'react';
 import { format } from 'date-fns';
 import { ChevronsLeftRightEllipsis, ChevronsRightLeft } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { Mark, NavLink, Table, Tooltip } from '@mantine/core';
+import { Mark, Table, Tooltip } from '@mantine/core';
 import {
   BusinessTransactionsInfoDocument,
   Currency,
   type BusinessTransactionsFilter,
   type BusinessTransactionsInfoQuery,
 } from '../../gql/graphql.js';
-import {
-  currencyCodeToSymbol,
-  FIAT_CURRENCIES,
-  formatStringifyAmount,
-} from '../../helpers/index.js';
+import { FIAT_CURRENCIES, formatAmountWithCurrency } from '../../helpers/index.js';
 import { AccounterLoader } from '../common/index.js';
 import { getChargeHref } from '../screens/charges/charge.js';
 import { Button } from '../ui/button.js';
 import { DownloadCSV } from './download-csv.js';
+import { getBusinessTransactionsHref } from './index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -237,17 +235,15 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 }}
               >
                 <td>
-                  <a
-                    href={`/business-transactions/${row.business.id}`}
+                  <Link
+                    to={getBusinessTransactionsHref({ businessIDs: [row.business.id] })}
                     target="_blank"
                     rel="noreferrer"
                     onClick={event => event.stopPropagation()}
+                    className="inline-flex items-center font-semibold"
                   >
-                    <NavLink
-                      label={row.business.name}
-                      className="[&>*>.mantine-NavLink-label]:font-semibold"
-                    />
-                  </a>
+                    {row.business.name}
+                  </Link>
                 </td>
                 <td>{row.invoiceDate ? format(new Date(row.invoiceDate), 'dd/MM/yy') : null}</td>
                 <td style={{ whiteSpace: 'nowrap' }}>
@@ -257,11 +253,11 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 </td>
                 <td>
                   {row.ilsBalance === 0 ? (
-                    `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(row.ilsBalance)}`
+                    formatAmountWithCurrency(row.ilsBalance, Currency.Ils)
                   ) : (
-                    <Mark
-                      color={row.ilsBalance > 0 ? 'green' : 'red'}
-                    >{`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(row.ilsBalance)}`}</Mark>
+                    <Mark color={row.ilsBalance > 0 ? 'green' : 'red'}>
+                      {formatAmountWithCurrency(row.ilsBalance, Currency.Ils)}
+                    </Mark>
                   )}
                 </td>
                 {isEur && <CurrencyCells data={row} currency={Currency.Eur} />}
@@ -277,17 +273,15 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 <td>{row.details}</td>
                 <td>
                   {row.counterAccount && (
-                    <a
-                      href={`/business-transactions/${row.counterAccount?.id}`}
+                    <Link
+                      to={getBusinessTransactionsHref({ businessIDs: [row.counterAccount.id] })}
                       target="_blank"
                       rel="noreferrer"
                       onClick={event => event.stopPropagation()}
+                      className="inline-flex items-center font-semibold"
                     >
-                      <NavLink
-                        label={row.counterAccount?.name}
-                        className="[&>*>.mantine-NavLink-label]:font-semibold"
-                      />
-                    </a>
+                      {row.counterAccount.name}
+                    </Link>
                   )}
                 </td>
                 <td />
@@ -320,11 +314,11 @@ export function CurrencyCells({
       <td>
         {(data[key] ?? 0) !== 0 &&
           (data[key] === 0 ? (
-            `${currencyCodeToSymbol(currency)} ${formatStringifyAmount(data[key])}`
+            formatAmountWithCurrency(data[key], currency)
           ) : (
-            <Mark
-              color={data[key] > 0 ? 'green' : 'red'}
-            >{`${currencyCodeToSymbol(currency)} ${formatStringifyAmount(data[key])}`}</Mark>
+            <Mark color={data[key] > 0 ? 'green' : 'red'}>
+              {formatAmountWithCurrency(data[key], currency)}
+            </Mark>
           ))}
       </td>
     </>

package/src/components/business-transactions/business-transactions-single.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo, useState, type ReactElement, type ReactNode } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Mark } from '@mantine/core';
 import {
@@ -19,10 +19,10 @@ type Props = {
 };
 
 export const BusinessTransactionsSingle = ({ businessId }: Props): ReactElement => {
-  const match = useMatch('business-transactions/:businessId');
+  const { businessId: businessIdFromUrl } = useParams<{ businessId: string }>();
   const { get } = useUrlQuery();
   const { setFiltersContext } = useContext(FiltersContext);
-  const id = businessId || match?.params.businessId;
+  const id = businessId || businessIdFromUrl;
   const [filter, setFilter] = useState<BusinessTransactionsFilter>(
     get('transactionsFilters')
       ? {

package/src/components/business-transactions/index.tsx

@@ -72,14 +72,25 @@ import {
 export function getBusinessTransactionsHref(filter?: BusinessTransactionsFilter | null): string {
   const params = new URLSearchParams();
 
-  const transactionsFilters = encodeTransactionsFilters(filter);
+  let businessId: string | undefined = undefined;
+  let adjustedFilter = filter;
+  if (filter?.businessIDs && filter.businessIDs.length === 1) {
+    const { businessIDs, ...rest } = filter;
+    businessId = businessIDs[0];
+    adjustedFilter = rest;
+  }
+
+  const transactionsFilters = encodeTransactionsFilters(adjustedFilter);
   if (transactionsFilters) {
     // Add it as a single encoded parameter
     params.append('transactionsFilters', transactionsFilters);
   }
 
   const queryParams = params.size > 0 ? `?${params}` : '';
-  return `/business-transactions${queryParams}`;
+  if (businessId) {
+    return `/businesses/${businessId}/transactions${queryParams}`;
+  }
+  return `/businesses/transactions${queryParams}`;
 }
 
 type BusinessTransactionsSum = Extract<

package/src/components/business-trips/business-trip.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, type ReactElement } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Container } from '@mantine/core';
 import { BusinessTripScreenDocument } from '../../gql/graphql.js';
@@ -26,9 +26,9 @@ type Props = {
 };
 
 export const BusinessTrip = ({ businessTripId }: Props): ReactElement => {
-  const match = useMatch('business-trips/:businessTripId');
+  const { businessTripId: businessTripIdFromUrl } = useParams<{ businessTripId: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
-  const id = businessTripId ?? match?.params.businessTripId ?? '';
+  const id = businessTripId ?? businessTripIdFromUrl ?? '';
   const [{ data, fetching }] = useQuery({
     query: BusinessTripScreenDocument,
     variables: {