npm - @accounter/client - Versions diffs - 0.0.8-alpha-20251022132023-9f41aae2ce16f8761101edc548f486cc6ce80333 → 0.0.8-alpha-20251022144027-c9c7a4b309de8a72dfd0ec4f11e63713ad12878f - Mend

@accounter/client 0.0.8-alpha-20251022132023-9f41aae2ce16f8761101edc548f486cc6ce80333 → 0.0.8-alpha-20251022144027-c9c7a4b309de8a72dfd0ec4f11e63713ad12878f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/CHANGELOG.md +1 -25
package/dist/assets/index-B2UYAO1O.css +1 -0
package/dist/assets/index-CZb2m31K.js +1229 -0
package/dist/assets/{index.es-CL8po8bM.js → index.es-9gVMpHTc.js} +5 -5
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/components/business/admin-business-section.tsx +284 -0
package/src/components/business/index.tsx +22 -0
package/src/components/business-transactions/business-extended-info.tsx +15 -13
package/src/components/business-transactions/business-transactions-single.tsx +3 -3
package/src/components/business-transactions/index.tsx +1 -12
package/src/components/business-trips/business-trip.tsx +3 -3
package/src/components/charges/cells/business-trip.tsx +8 -6
package/src/components/charges/cells/counterparty.tsx +5 -7
package/src/components/common/accounter-table.tsx +5 -6
package/src/components/common/business-trip-report/parts/core-expense-row.tsx +9 -11
package/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx +13 -11
package/src/components/common/buttons/button-with-label.tsx +41 -0
package/src/components/common/buttons/button.tsx +44 -0
package/src/components/common/buttons/index.ts +2 -0
package/src/components/common/buttons/logout-button.tsx +6 -7
package/src/components/common/documents-to-charge-matcher/selection-handler/index.tsx +2 -4
package/src/components/common/documents-to-charge-matcher/selection-handler/wide-filtered-selection.tsx +7 -5
package/src/components/common/forms/edit-document.tsx +10 -21
package/src/components/common/new-documents-list.tsx +8 -10
package/src/components/documents-table/cells/creditor.tsx +4 -11
package/src/components/documents-table/cells/debtor.tsx +4 -11
package/src/components/layout/dashboard-layout.tsx +0 -4
package/src/components/layout/sidelinks.tsx +27 -28
package/src/components/ledger-table/counterparty-cell.tsx +13 -19
package/src/components/login-page.tsx +1 -2
package/src/components/reports/corporate-tax-ruling-compliance-report/index.tsx +3 -3
package/src/components/reports/profit-and-loss-report/index.tsx +3 -3
package/src/components/reports/tax-report/index.tsx +3 -3
package/src/components/screens/businesses/business.tsx +9 -21
package/src/components/screens/charges/charge.tsx +9 -22
package/src/components/transactions-table/cells/counterparty.tsx +2 -9
package/src/components/transactions-table/cells-legacy/counterparty.tsx +2 -9
package/src/gql/gql.ts +15 -3
package/src/gql/graphql.ts +4913 -1559
package/src/hooks/use-update-admin-business.ts +71 -0
package/src/index.tsx +22 -4
package/src/providers/auth-guard.tsx +23 -14
package/src/providers/index.tsx +2 -7
package/src/providers/urql.tsx +12 -7
package/src/providers/user-provider.tsx +2 -3
package/dist/assets/Checkbox-DBF5r7jA.js +0 -6
package/dist/assets/Progress-Cjv9yrat.js +0 -1
package/dist/assets/Typography-DdVppmQe.js +0 -1
package/dist/assets/accordion-DcMd-Til.js +0 -1
package/dist/assets/accountant-approvals-CU_EA64d.js +0 -1
package/dist/assets/all-charges-DKGmrDeD.js +0 -1
package/dist/assets/arrow-up-down-BeIaAKWn.js +0 -6
package/dist/assets/business-EtSaFzKh.js +0 -37
package/dist/assets/business-transactions-single-B0Up2Bs4.js +0 -1
package/dist/assets/business-trip-CmMmdjCh.js +0 -1
package/dist/assets/charges-filters-CqWjSIKI.js +0 -1
package/dist/assets/charges-ledger-validation-DHfLjNlq.js +0 -1
package/dist/assets/chart-D1Y6fN3z.js +0 -74
package/dist/assets/data-table-pagination-BCciANKD.js +0 -11
package/dist/assets/editable-business-trip-VNJjiYOp.js +0 -16
package/dist/assets/graphql-document-dedupe-fragments-ByT8-wlV.js +0 -1
package/dist/assets/index-1L3dEkVN.js +0 -1
package/dist/assets/index-4ZIYAzBJ.js +0 -1
package/dist/assets/index-4r9JDo8p.js +0 -1
package/dist/assets/index-BFHiMLVc.js +0 -1
package/dist/assets/index-BGmhxff9.js +0 -1
package/dist/assets/index-BMcyYDGt.js +0 -11
package/dist/assets/index-BVQkLk5i.js +0 -1
package/dist/assets/index-Bj3HckU6.js +0 -876
package/dist/assets/index-BnQW4CTb.js +0 -1
package/dist/assets/index-C0FVazZA.js +0 -24
package/dist/assets/index-CUDeasQ_.js +0 -1
package/dist/assets/index-Cfm6e2hX.js +0 -1
package/dist/assets/index-Cqz-mRoO.js +0 -17
package/dist/assets/index-Cs7MeC4J.js +0 -137
package/dist/assets/index-CzzfC-dD.css +0 -1
package/dist/assets/index-DABsOOfA.js +0 -1
package/dist/assets/index-DB4BgQdp.js +0 -2
package/dist/assets/index-DV-Q6DUw.js +0 -1
package/dist/assets/index-Dd5ylSyH.js +0 -9
package/dist/assets/index-Dn7p3J8Q.js +0 -1
package/dist/assets/index-Dpk6i3ex.js +0 -6
package/dist/assets/index-EiT4SOpW.js +0 -2
package/dist/assets/index-rcKvu7eR.js +0 -6
package/dist/assets/index-sDbz8nnb.js +0 -1
package/dist/assets/issue-document-CYdlZijI.js +0 -1
package/dist/assets/login-page-CnMdssTN.js +0 -1
package/dist/assets/missing-info-charges-CzeKbCyG.js +0 -1
package/dist/assets/page-not-found-Bsa0DCM4.js +0 -1
package/dist/assets/pencil-BMWYIsZB.js +0 -6
package/dist/assets/report-commentary-row-D9AtKtZx.js +0 -1
package/dist/assets/save-DC_eQcBj.js +0 -11
package/dist/assets/sequential-CAnleQny.js +0 -1
package/dist/assets/similar-charges-by-business-modal-Dmb2ZymF.js +0 -1
package/dist/assets/sub-BIMwxqar.js +0 -1
package/dist/assets/subMonths-B7SR4Lli.js +0 -1
package/src/components/error-boundary.tsx +0 -189
package/src/components/layout/breadcrumbs.tsx +0 -72
package/src/components/layout/document-title.tsx +0 -26
package/src/components/layout/navigation-progress.tsx +0 -52
package/src/components/layout/page-skeleton.tsx +0 -49
package/src/providers/urql-client.ts +0 -86
package/src/router/config.tsx +0 -534
package/src/router/layouts/dashboard-layout.tsx +0 -20
package/src/router/layouts/root-layout.tsx +0 -69
package/src/router/loaders/auth-loader.ts +0 -32
package/src/router/loaders/business-loader.ts +0 -25
package/src/router/loaders/charge-loader.ts +0 -25
package/src/router/loaders/index.ts +0 -17
package/src/router/routes.ts +0 -88
package/src/router/types.ts +0 -68

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" href="/icons/accounter-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Accounter</title>
-    <script type="module" crossorigin src="/assets/index-Bj3HckU6.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CzzfC-dD.css">
+    <script type="module" crossorigin src="/assets/index-CZb2m31K.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B2UYAO1O.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@accounter/client",
-  "version": "0.0.8-alpha-20251022132023-9f41aae2ce16f8761101edc548f486cc6ce80333",
+  "version": "0.0.8-alpha-20251022144027-c9c7a4b309de8a72dfd0ec4f11e63713ad12878f",
   "type": "module",
   "license": "MIT",
   "scripts": {

package/src/components/business/admin-business-section.tsx ADDED Viewed

@@ -0,0 +1,284 @@
+'use client';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { Save, Shield } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button.js';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card.js';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import {
+  BusinessAdminSectionFragmentDoc,
+  type BusinessAdminSectionFragment,
+  type UpdateAdminBusinessInput,
+} from '@/gql/graphql.js';
+import { getFragmentData, type FragmentType } from '@/gql/index.js';
+import {
+  dirtyFieldMarker,
+  relevantDataPicker,
+  type MakeBoolean,
+  type TimelessDateString,
+} from '@/helpers/index.js';
+import { useUpdateAdminBusiness } from '@/hooks/use-update-admin-business.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment BusinessAdminSection on Business {
+    id
+    ... on LtdFinancialEntity {
+      adminInfo {
+        id
+        employerWithholdingTaxAccountNumber
+        taxPrepaymentId
+        nationalInsuranceEmployerId
+        advanceTaxRate
+        registrationDate
+      }
+    }
+  }
+`;
+const adminBusinessFormSchema = z.object({
+  employerWithholdingTaxAccountNumber: z.string().min(1, {
+    message: 'Employer Withholding Tax Account Number is required',
+  }),
+  taxPrepaymentId: z.string().min(1, {
+    message: 'Tax Prepayment ID is required',
+  }),
+  nationalInsuranceEmployerId: z.string().min(1, {
+    message: 'National Insurance Employer ID is required',
+  }),
+  advanceTaxRate: z
+    .number()
+    .min(0, {
+      message: 'Advance Tax Rate must be at least 0',
+    })
+    .max(100, {
+      message: 'Advance Tax Rate must be at most 100',
+    }),
+  registrationDate: z.string().min(1, {
+    message: 'Registration Date is required',
+  }),
+});
+type AdminBusinessFormValues = z.infer<typeof adminBusinessFormSchema>;
+function BusinessAdminSectionFragmentToFormValues(
+  admin?: BusinessAdminSectionFragment,
+): AdminBusinessFormValues {
+  if (!admin || admin.__typename !== 'LtdFinancialEntity' || !admin.adminInfo) {
+    return {} as AdminBusinessFormValues;
+  }
+  return {
+    employerWithholdingTaxAccountNumber: admin.adminInfo.employerWithholdingTaxAccountNumber ?? '',
+    taxPrepaymentId: admin.adminInfo.taxPrepaymentId ?? '',
+    nationalInsuranceEmployerId: admin.adminInfo.nationalInsuranceEmployerId ?? '',
+    advanceTaxRate: admin.adminInfo.advanceTaxRate ?? 0,
+    registrationDate: admin.adminInfo.registrationDate ?? '',
+  };
+}
+function convertFormDataToUpdateAdminBusinessInput(
+  formData: Partial<AdminBusinessFormValues>,
+): UpdateAdminBusinessInput {
+  return {
+    employerWithholdingTaxAccountNumber: formData.employerWithholdingTaxAccountNumber,
+    taxPrepaymentId: formData.taxPrepaymentId,
+    nationalInsuranceEmployerId: formData.nationalInsuranceEmployerId,
+    advanceTaxRate: formData.advanceTaxRate,
+    registrationDate: formData.registrationDate as TimelessDateString,
+  };
+}
+interface Props {
+  data?: FragmentType<typeof BusinessAdminSectionFragmentDoc>;
+  refetchBusiness?: () => Promise<void>;
+}
+export function AdminBusinessSection({ data, refetchBusiness }: Props): React.ReactElement {
+  const admin = getFragmentData(BusinessAdminSectionFragmentDoc, data);
+  const [defaultFormValues, setDefaultFormValues] = useState(
+    BusinessAdminSectionFragmentToFormValues(admin),
+  );
+  const { updateAdminBusiness: updateDbAdminBusiness, fetching: isUpdating } =
+    useUpdateAdminBusiness();
+  const form = useForm<AdminBusinessFormValues>({
+    resolver: zodResolver(adminBusinessFormSchema),
+    defaultValues: defaultFormValues,
+  });
+  const onSubmit = async (data: AdminBusinessFormValues) => {
+    if (!admin) {
+      return;
+    }
+    const dataToUpdate = relevantDataPicker(
+      data,
+      form.formState.dirtyFields as MakeBoolean<typeof data>,
+    );
+    if (!dataToUpdate) return;
+    const updateBusinessInput = convertFormDataToUpdateAdminBusinessInput(dataToUpdate);
+    await updateDbAdminBusiness({
+      adminBusinessId: admin.id,
+      fields: updateBusinessInput,
+    });
+    refetchBusiness?.();
+  };
+  useEffect(() => {
+    if (admin) {
+      const formValues = BusinessAdminSectionFragmentToFormValues(admin);
+      setDefaultFormValues(formValues);
+      form.reset(formValues);
+    }
+  }, [admin, form]);
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Shield className="h-5 w-5 text-primary" />
+          <CardTitle>Admin Business Configuration</CardTitle>
+        </div>
+        <CardDescription>
+          Tax and registration information for the business operating this application
+        </CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <CardContent>
+            <div className="grid gap-6 md:grid-cols-2">
+              {/* Employer Withholding Tax Account Number */}
+              <FormField
+                control={form.control}
+                name="employerWithholdingTaxAccountNumber"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Employer Withholding Tax Account Number</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter account number"
+                        {...field}
+                        className={dirtyFieldMarker(fieldState)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* Tax Prepayment ID */}
+              <FormField
+                control={form.control}
+                name="taxPrepaymentId"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Tax Prepayment ID</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter prepayment ID"
+                        {...field}
+                        className={dirtyFieldMarker(fieldState)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* National Insurance Employer ID */}
+              <FormField
+                control={form.control}
+                name="nationalInsuranceEmployerId"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>National Insurance Employer ID</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter employer ID"
+                        {...field}
+                        className={dirtyFieldMarker(fieldState)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* Advance Tax Rate */}
+              <FormField
+                control={form.control}
+                name="advanceTaxRate"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Advance Tax Rate (%)</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        max="100"
+                        placeholder="Enter tax rate"
+                        {...field}
+                        className={dirtyFieldMarker(fieldState)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* Registration Date */}
+              <FormField
+                control={form.control}
+                name="registrationDate"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Registration Date</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} className={dirtyFieldMarker(fieldState)} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-end border-t mt-4 pt-6">
+            <Button
+              type="submit"
+              disabled={isUpdating || Object.keys(form.formState.dirtyFields).length === 0}
+            >
+              <Save className="h-4 w-4" />
+              Save Changes
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  );
+}

package/src/components/business/index.tsx CHANGED Viewed

@@ -7,12 +7,14 @@ import {
   FileText,
   Plug,
   Settings,
+  Shield,
   //   TrendingUp,
 } from 'lucide-react';
 import { useSearchParams } from 'react-router-dom';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
 import { getFragmentData, type FragmentType } from '@/gql/index.js';
 import { BusinessPageFragmentDoc } from '../../gql/graphql.js';
+import { AdminBusinessSection } from './admin-business-section.js';
 import { BusinessHeader } from './business-header.js';
 import { ChargesSection } from './charges-section.jsx';
 import { ChartsSection } from './charts-section.jsx';
@@ -31,11 +33,15 @@ import { TransactionsSection } from './transactions-section.js';
       clientInfo {
         id
       }
+      adminInfo {
+        id
+      }
     }
     ...ClientIntegrationsSection
     ...BusinessHeader
     ...BusinessContactSection
     ...BusinessConfigurationSection
+    ...BusinessAdminSection
   }
 `;
@@ -59,6 +65,7 @@ export default function Business({ data, refetchBusiness }: Props): ReactElement
   }
   const isClient = 'clientInfo' in business && !!business.clientInfo;
+  const isAdmin = 'adminInfo' in business && !!business.adminInfo;
   return (
     <div className="min-h-screen bg-background">
@@ -127,6 +134,15 @@ export default function Business({ data, refetchBusiness }: Props): ReactElement
                 </TabsTrigger> */}
               </>
             )}
+            {isAdmin && (
+              <TabsTrigger
+                value="admin"
+                className="flex items-center gap-2 data-[state=active]:bg-background"
+              >
+                <Shield className="h-4 w-4" />
+                <span className="hidden sm:inline">Admin</span>
+              </TabsTrigger>
+            )}
           </TabsList>
           <TabsContent value="contact" className="mt-0">
@@ -164,6 +180,12 @@ export default function Business({ data, refetchBusiness }: Props): ReactElement
               </TabsContent>
             </>
           )}
+          {isAdmin && (
+            <TabsContent value="admin" className="mt-0">
+              <AdminBusinessSection data={business} />
+            </TabsContent>
+          )}
         </Tabs>
       </main>
     </div>

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

@@ -1,9 +1,8 @@
 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, Table, Tooltip } from '@mantine/core';
+import { Mark, NavLink, Table, Tooltip } from '@mantine/core';
 import {
   BusinessTransactionsInfoDocument,
   Currency,
@@ -15,7 +14,6 @@ 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 */ `
@@ -235,15 +233,17 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 }}
               >
                 <td>
-                  <Link
-                    to={getBusinessTransactionsHref({ businessIDs: [row.business.id] })}
+                  <a
+                    href={`/businesses/${row.business.id}/transactions`}
                     target="_blank"
                     rel="noreferrer"
                     onClick={event => event.stopPropagation()}
-                    className="inline-flex items-center font-semibold"
                   >
-                    {row.business.name}
-                  </Link>
+                    <NavLink
+                      label={row.business.name}
+                      className="[&>*>.mantine-NavLink-label]:font-semibold"
+                    />
+                  </a>
                 </td>
                 <td>{row.invoiceDate ? format(new Date(row.invoiceDate), 'dd/MM/yy') : null}</td>
                 <td style={{ whiteSpace: 'nowrap' }}>
@@ -273,15 +273,17 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 <td>{row.details}</td>
                 <td>
                   {row.counterAccount && (
-                    <Link
-                      to={getBusinessTransactionsHref({ businessIDs: [row.counterAccount.id] })}
+                    <a
+                      href={`/businesses/${row.counterAccount?.id}/transactions`}
                       target="_blank"
                       rel="noreferrer"
                       onClick={event => event.stopPropagation()}
-                      className="inline-flex items-center font-semibold"
                     >
-                      {row.counterAccount.name}
-                    </Link>
+                      <NavLink
+                        label={row.counterAccount?.name}
+                        className="[&>*>.mantine-NavLink-label]:font-semibold"
+                      />
+                    </a>
                   )}
                 </td>
                 <td />

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo, useState, type ReactElement, type ReactNode } from 'react';
-import { useParams } from 'react-router-dom';
+import { useMatch } 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 { businessId: businessIdFromUrl } = useParams<{ businessId: string }>();
+  const match = useMatch('businesses/:businessId/transactions');
   const { get } = useUrlQuery();
   const { setFiltersContext } = useContext(FiltersContext);
-  const id = businessId || businessIdFromUrl;
+  const id = businessId || match?.params.businessId;
   const [filter, setFilter] = useState<BusinessTransactionsFilter>(
     get('transactionsFilters')
       ? {

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

@@ -72,24 +72,13 @@ import {
 export function getBusinessTransactionsHref(filter?: BusinessTransactionsFilter | null): string {
   const params = new URLSearchParams();
-  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);
+  const transactionsFilters = encodeTransactionsFilters(filter);
   if (transactionsFilters) {
     // Add it as a single encoded parameter
     params.append('transactionsFilters', transactionsFilters);
   }
   const queryParams = params.size > 0 ? `?${params}` : '';
-  if (businessId) {
-    return `/businesses/${businessId}/transactions${queryParams}`;
-  }
   return `/businesses/transactions${queryParams}`;
 }

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect, type ReactElement } from 'react';
-import { useParams } from 'react-router-dom';
+import { useMatch } 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 { businessTripId: businessTripIdFromUrl } = useParams<{ businessTripId: string }>();
+  const match = useMatch('business-trips/:businessTripId');
   const { setFiltersContext } = useContext(FiltersContext);
-  const id = businessTripId ?? businessTripIdFromUrl ?? '';
+  const id = businessTripId ?? match?.params.businessTripId ?? '';
   const [{ data, fetching }] = useQuery({
     query: BusinessTripScreenDocument,
     variables: {

package/src/components/charges/cells/business-trip.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from '@mantine/core';
 import { ChargesTableBusinessTripFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
@@ -29,15 +29,17 @@ export const BusinessTrip = ({ data }: Props): ReactElement => {
   return (
     <td>
-      <Link
-        to={`/business-trips/${charge.businessTrip?.id}`}
+      <a
+        href={`/business-trips/${charge.businessTrip?.id}`}
         target="_blank"
         rel="noreferrer"
         onClick={event => event.stopPropagation()}
-        className="inline-flex items-center font-semibold"
       >
-        {charge.businessTrip?.name}
-      </Link>
+        <NavLink
+          label={charge.businessTrip?.name}
+          className="[&>*>.mantine-NavLink-label]:font-semibold"
+        />
+      </a>
     </td>
   );
 };

package/src/components/charges/cells/counterparty.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, type ReactElement } from 'react';
-import { Link } from 'react-router-dom';
-import { Indicator } from '@mantine/core';
+import { Indicator, NavLink } from '@mantine/core';
 import {
   ChargesTableEntityFieldsFragmentDoc,
   MissingChargeInfo,
@@ -82,15 +81,14 @@ export const Counterparty = ({ data }: Props): ReactElement => {
       <div className="flex flex-wrap">
         <Indicator inline size={12} disabled={!isError} color="red" zIndex="auto">
           {!isError && id && (
-            <Link
-              to={getHref(id)}
+            <a
+              href={getHref(id)}
               target="_blank"
               rel="noreferrer"
               onClick={event => event.stopPropagation()}
-              className="inline-flex items-center font-semibold"
             >
-              {name}
-            </Link>
+              <NavLink label={name} className="[&>*>.mantine-NavLink-label]:font-semibold" />
+            </a>
           )}
           {isError && name}
         </Indicator>

package/src/components/common/accounter-table.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useState, type ReactElement, type ReactNode } from 'react';
-import { Button } from '@/components/ui/button.js';
 import { Pagination, Paper, Table, type PaginationProps } from '@mantine/core';
+import { Button } from './index.js';
 export interface AccounterTableProps<T, U> {
   highlightOnHover?: boolean;
@@ -47,9 +47,7 @@ export function AccounterTableRow<T, U>(props: AccountTableRow<T, U>): ReactElem
             {moreInfoValue === null ? (
               <p>No Data Related</p>
             ) : (
-              <Button onClick={(): void => setOpened(!opened)} className="ml-auto">
-                More Info
-              </Button>
+              <Button title="More Info" onClick={(): void => setOpened(!opened)} />
             )}
           </td>
         )}
@@ -75,14 +73,15 @@ export function AccounterTable<T, U>(props: AccounterTableProps<T, U>): ReactNod
       <div className="flex flex-row justify-end w-full">
         {props.pagination && <Pagination className="flex-auto" {...props.pagination} />}
         {props.showButton === true ? (
-          <Button
+          <button
+            className="inline-flex text-white bg-indigo-500 border-0 py-1.5 px-3 focus:outline-hidden hover:bg-indigo-600 rounded-sm text-sm"
             type="button"
             onClick={(): void => {
               setIsShowAll(prev => !prev);
             }}
           >
             {isShowAll ? 'Hide All' : 'Show All'}
-          </Button>
+          </button>
         ) : null}
       </div>
       <Table striped={props.striped} highlightOnHover={props.highlightOnHover}>

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

@@ -1,10 +1,9 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import { format } from 'date-fns';
 import { Controller, type Control } from 'react-hook-form';
-import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 import { useQuery } from 'urql';
-import { Select, Text } from '@mantine/core';
+import { NavLink, Select, Text } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import {
   AttendeesByBusinessTripDocument,
@@ -237,16 +236,15 @@ export const CoreExpenseRow = ({
       <td>
         <div className="flex flex-col gap-2">
           {linkedChargeIds.map(id => (
-            <Link
+            <NavLink
               key={id}
-              to={getChargeHref(id)}
-              target="_blank"
-              rel="noreferrer"
-              onClick={event => event.stopPropagation()}
-              className="inline-flex items-center font-semibold"
-            >
-              To Charge
-            </Link>
+              label="To Charge"
+              className="[&>*>.mantine-NavLink-label]:font-semibold"
+              onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+                event.stopPropagation();
+                window.open(getChargeHref(id), '_blank', 'noreferrer');
+              }}
+            />
           ))}
         </div>
       </td>

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

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 import { AlertCircle } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { Popover, Table, Text } from '@mantine/core';
+import { NavLink, Popover, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
   BusinessTripUncategorizedTransactionsFieldsFragmentDoc,
@@ -93,15 +92,18 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
                 <DebitDate data={uncategorizedTransaction.transaction} />
                 <Amount data={uncategorizedTransaction} />
                 <td>
-                  <Link
-                    to={getChargeHref(uncategorizedTransaction.transaction.chargeId)}
-                    target="_blank"
-                    rel="noreferrer"
-                    onClick={event => event.stopPropagation()}
-                    className="inline-flex items-center font-semibold"
-                  >
-                    To Charge
-                  </Link>
+                  <NavLink
+                    label="To Charge"
+                    className="[&>*>.mantine-NavLink-label]:font-semibold"
+                    onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+                      event.stopPropagation();
+                      window.open(
+                        getChargeHref(uncategorizedTransaction.transaction.chargeId),
+                        '_blank',
+                        'noreferrer',
+                      );
+                    }}
+                  />
                 </td>
                 <Account data={uncategorizedTransaction.transaction} />
                 <Description data={uncategorizedTransaction.transaction} />