npm - @accounter/client - Versions diffs - 0.0.8-alpha-20251021225827-178e480c997a9811913e16f85cb94329041b096e → 0.0.8-alpha-20251022130946-0923a77d2ee3f22a60a7f5b1e0623bd3bee88868 - Mend

@accounter/client 0.0.8-alpha-20251021225827-178e480c997a9811913e16f85cb94329041b096e → 0.0.8-alpha-20251022130946-0923a77d2ee3f22a60a7f5b1e0623bd3bee88868

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 (108) hide show

package/CHANGELOG.md +1 -25
package/dist/assets/index-B2UYAO1O.css +1 -0
package/dist/assets/index-BexxGuN6.js +1224 -0
package/dist/assets/{index.es-CYeQ4a5s.js → index.es-CWwhWGxX.js} +5 -5
package/dist/index.html +2 -2
package/package.json +1 -1
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 -23
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/graphql.ts +4842 -1554
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-CxedbJAl.js +0 -6
package/dist/assets/Progress-D5SuJtCd.js +0 -1
package/dist/assets/Typography-BQFz-z7L.js +0 -1
package/dist/assets/accordion-COWOBKuq.js +0 -1
package/dist/assets/accountant-approvals-Bd2y8us_.js +0 -1
package/dist/assets/all-charges-SWBnaZu7.js +0 -1
package/dist/assets/arrow-up-down-dZmrBLse.js +0 -6
package/dist/assets/business--GVVfDEa.js +0 -37
package/dist/assets/business-transactions-single-BsbkUf_H.js +0 -1
package/dist/assets/business-trip-ByXPVXdG.js +0 -1
package/dist/assets/charges-filters-D43UbXob.js +0 -1
package/dist/assets/charges-ledger-validation-D0uMH_JE.js +0 -1
package/dist/assets/chart-ClU1KbWe.js +0 -74
package/dist/assets/data-table-pagination-D9Y0_Tn8.js +0 -11
package/dist/assets/editable-business-trip-DhqOQBPa.js +0 -16
package/dist/assets/graphql-document-dedupe-fragments-ByT8-wlV.js +0 -1
package/dist/assets/index-1U6rQgQe.js +0 -6
package/dist/assets/index-3-AKn8tg.js +0 -1
package/dist/assets/index-91A2PLZ6.js +0 -137
package/dist/assets/index-BBHuCWRn.js +0 -1
package/dist/assets/index-BPNuFFtx.js +0 -1
package/dist/assets/index-BXqHnRVY.js +0 -1
package/dist/assets/index-BciOH8FS.js +0 -1
package/dist/assets/index-BjHuUHDO.js +0 -1
package/dist/assets/index-BxKmoNQd.js +0 -1
package/dist/assets/index-C3bqiFIv.js +0 -2
package/dist/assets/index-C5MeepK_.js +0 -11
package/dist/assets/index-CAwm68Mg.js +0 -1
package/dist/assets/index-CJ8OGXxv.js +0 -1
package/dist/assets/index-CJyY-qF6.js +0 -1
package/dist/assets/index-CMYnx46_.js +0 -6
package/dist/assets/index-CNrwxUZ7.js +0 -1
package/dist/assets/index-CvV5z5r9.js +0 -876
package/dist/assets/index-D08H2GXq.js +0 -17
package/dist/assets/index-GFsPY1p4.js +0 -2
package/dist/assets/index-KwNwThNu.js +0 -1
package/dist/assets/index-YA8IBFyB.js +0 -1
package/dist/assets/index-ZpyI3qxW.js +0 -24
package/dist/assets/index-gdTXrWXt.css +0 -1
package/dist/assets/index-ytnIEraq.js +0 -9
package/dist/assets/issue-document-CdikNnO2.js +0 -1
package/dist/assets/login-page-effgZS3V.js +0 -1
package/dist/assets/missing-info-charges-CnPFTzoZ.js +0 -1
package/dist/assets/page-not-found-D8YlgDOm.js +0 -1
package/dist/assets/pencil-mxW0-tGM.js +0 -6
package/dist/assets/report-commentary-row-DCozKgVE.js +0 -1
package/dist/assets/save-CHlytUqu.js +0 -11
package/dist/assets/sequential-CAnleQny.js +0 -1
package/dist/assets/similar-charges-by-business-modal-Dzbspk_r.js +0 -1
package/dist/assets/sub-Cp_PhKiD.js +0 -1
package/dist/assets/subMonths-DCj_iXAn.js +0 -1
package/src/components/error-boundary.tsx +0 -189
package/src/components/layout/breadcrumbs.tsx +0 -77
package/src/components/layout/document-title.tsx +0 -31
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 -62

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-CvV5z5r9.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-gdTXrWXt.css">
+    <script type="module" crossorigin src="/assets/index-BexxGuN6.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-20251021225827-178e480c997a9811913e16f85cb94329041b096e",
+  "version": "0.0.8-alpha-20251022130946-0923a77d2ee3f22a60a7f5b1e0623bd3bee88868",
   "type": "module",
   "license": "MIT",
   "scripts": {

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} />

package/src/components/common/buttons/button-with-label.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import type { CSSProperties, MouseEventHandler, ReactElement } from 'react';
+export interface ButtonWithLabelProps {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  type?: 'submit' | 'button';
+  style?: CSSProperties;
+  target?: string;
+  rel?: string;
+  title?: string;
+  url?: string;
+  textLabel?: string;
+}
+export const ButtonWithLabel = ({
+  title,
+  url,
+  style,
+  target,
+  textLabel,
+  rel,
+  type = 'button',
+  onClick,
+}: ButtonWithLabelProps): ReactElement => {
+  return (
+    <div>
+      <label className="text-sm font-medium text-gray-700">{textLabel}</label>
+      <div>
+        <button
+          style={style}
+          type={type}
+          onClick={onClick}
+          className="bg-gray-100 border focus:ring-2 focus:ring-indigo-200 focus:bg-transparent hover:bg-indigo-500 hover:text-white text-base outline-hidden text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out sm:text-sm rounded-md"
+        >
+          <a rel={rel} target={target} href={url} type={type}>
+            {title}
+          </a>
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/common/buttons/button.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import type {
+  ButtonHTMLAttributes,
+  CSSProperties,
+  DetailedHTMLProps,
+  MouseEventHandler,
+  ReactElement,
+} from 'react';
+export interface Props
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  herf?: string;
+  type?: 'submit' | 'button';
+  style?: CSSProperties;
+  target?: string;
+  rel?: string;
+  title?: string;
+  url?: string;
+}
+export const Button = ({
+  title,
+  herf,
+  style,
+  target,
+  rel,
+  type = 'button',
+  onClick,
+  ...props
+}: Props): ReactElement => {
+  return (
+    <button
+      style={style}
+      type={type}
+      onClick={onClick}
+      className="cursor: pointer text-align: center flex ml-auto text-white bg-indigo-500 border-0 py-1.5 px-3 focus:outline-hidden hover:bg-indigo-600 rounded-sm;"
+      {...props}
+    >
+      <a rel={rel} target={target} href={herf} type={type}>
+        {title}
+      </a>
+    </button>
+  );
+};

package/src/components/common/buttons/index.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+export * from './button.js';
+export * from './button-with-label.js';
 export * from './charge-navigate-button.js';
 export * from './close-document-button.js';
 export * from './confirm-mini-button.js';

package/src/components/common/buttons/logout-button.tsx CHANGED Viewed

@@ -1,20 +1,19 @@
-import { useContext, type ReactElement } from 'react';
+import { useCallback, useContext, type ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../../providers/auth-guard.js';
-import { ROUTES } from '../../../router/routes.js';
 import { Button } from '../../ui/button.js';
 export function LogoutButton(): ReactElement {
   const navigate = useNavigate();
   const { authService } = useContext(AuthContext);
-  const handleLogout = async (): Promise<void> => {
-    await authService.logout();
-    navigate(ROUTES.LOGIN);
-  };
+  const onLogout = useCallback(() => {
+    authService.logout();
+    navigate('/login');
+  }, [navigate, authService]);
   return (
-    <Button variant="ghost" onClick={handleLogout}>
+    <Button variant="ghost" onClick={onLogout}>
       Log out
     </Button>
   );

package/src/components/common/documents-to-charge-matcher/selection-handler/index.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import { useMemo, useState, type ReactElement } from 'react';
-import { Button } from '@/components/ui/button.js';
 import {
   ChargeToMatchDocumentsFieldsFragmentDoc,
   DocumentsToMatchFieldsFragmentDoc,
@@ -10,6 +9,7 @@ import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { useUpdateDocument } from '../../../../hooks/use-update-document.js';
 import { FormLabel } from '../../../ui/form.js';
 import { Switch } from '../../../ui/switch.js';
+import { Button } from '../../index.js';
 import { StrictFilteredSelection } from './strict-filtered-selection.js';
 import { WideFilteredSelection } from './wide-filtered-selection.js';
@@ -165,9 +165,7 @@ export function SelectionHandler({ chargeProps, documentsProps, onDone }: Props)
             <Switch checked={filterSuggestions} onCheckedChange={setFilterSuggestions} />
           </div>
         )}
-        <Button disabled={selectedDocuments.length === 0} onClick={onExecuteMatch}>
-          Accept
-        </Button>
+        <Button title="Accept" disabled={selectedDocuments.length === 0} onClick={onExecuteMatch} />
       </div>
       <div>
         {filterSuggestions ? (

package/src/components/common/documents-to-charge-matcher/selection-handler/wide-filtered-selection.tsx CHANGED Viewed

@@ -1,11 +1,10 @@
 import { useState, type ReactElement } from 'react';
-import { Button } from '@/components/ui/button.js';
 import { Image } from '@mantine/core';
 import {
   type ChargeToMatchDocumentsFieldsFragment,
   type DocumentsToMatchFieldsFragment,
 } from '../../../../gql/graphql.js';
-import { AccounterTable, PopUpModal } from '../../index.js';
+import { AccounterTable, Button, PopUpModal } from '../../index.js';
 interface Props {
   documents: Exclude<
@@ -54,9 +53,12 @@ export function WideFilteredSelection({
             title: 'File',
             value: doc =>
               doc.file && (
-                <a href={doc.file?.toString()} target="_blank" rel="noreferrer">
-                  <Button>Open Link</Button>
-                </a>
+                <Button
+                  target="_blank"
+                  rel="noreferrer"
+                  herf={doc.file?.toString()}
+                  title="Open Link"
+                />
               ),
           },
           { title: 'Date', value: doc => ('date' in doc ? doc.date : null) },

package/src/components/common/forms/edit-document.tsx CHANGED Viewed

@@ -1,15 +1,12 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import { useForm, type SubmitHandler } from 'react-hook-form';
-import { Link } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { Button } from '@/components/ui/button.js';
-import { Label } from '@/components/ui/label.js';
 import { Drawer, Image, Loader } from '@mantine/core';
 import { EditDocumentDocument, type UpdateDocumentFieldsInput } from '../../../gql/graphql.js';
 import { relevantDataPicker, type MakeBoolean } from '../../../helpers/form.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
 import { Form } from '../../ui/form.js';
-import { ImageMagnifier, SimpleGrid } from '../index.js';
+import { ButtonWithLabel, ImageMagnifier, SimpleGrid } from '../index.js';
 import { ModifyDocumentFields } from './modify-document-fields.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -109,31 +106,21 @@ export const EditDocument = ({ documentId, onDone, onChange }: Props): ReactElem
               <form onSubmit={handleSubmit(onSubmit)}>
                 <SimpleGrid cols={4}>
                   <ModifyDocumentFields document={document} formManager={formManager} />
-                  <div className="space-y-2">
-                    <Label htmlFor="file">File</Label>
-                    <Link
-                      to={document?.file?.toString() || ''}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="flex flex-col items-center justify-center mt-5"
-                    >
-                      <Button variant="outline" className="w-full mb-2">
-                        Open File
-                      </Button>
-                    </Link>
-                  </div>
+                  <ButtonWithLabel
+                    target="_blank"
+                    textLabel="File"
+                    url={document?.file?.toString()}
+                    title="Open Link"
+                  />
                 </SimpleGrid>
                 <div className="flex justify-center mt-5">
-                  <Button
+                  <button
                     type="submit"
-                    variant="default"
-                    // className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12 mr-5 border border-transparent shadow-xs text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                    onClick={onDone}
+                    className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12  border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                     disabled={fetching || Object.keys(dirtyFields).length === 0}
                   >
                     Save
-                  </Button>
+                  </button>
                 </div>
               </form>
             </Form>

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

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from '@mantine/core';
 import { NewFetchedDocumentFieldsFragmentDoc } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { getChargeHref } from '../screens/charges/charge.js';
@@ -32,16 +32,14 @@ export const NewDocumentsList = ({ data }: Props): ReactElement => {
       {documents
         .filter(({ charge }) => charge)
         .map(doc => (
-          <Link
+          <NavLink
             key={doc.id}
-            to={getChargeHref(doc.charge!.id)}
-            target="_blank"
-            rel="noreferrer"
-            onClick={event => event.stopPropagation()}
-            className="inline-flex items-center font-semibold"
-          >
-            {`${doc.charge!.counterparty?.name ?? 'Unknown'} - ${doc.charge!.userDescription}`}
-          </Link>
+            label={`${doc.charge!.counterparty?.name ?? 'Unknown'} - ${doc.charge!.userDescription}`}
+            onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+              event.stopPropagation();
+              window.open(getChargeHref(doc.charge!.id), '_blank', 'noreferrer');
+            }}
+          />
         ))}
     </div>
   );

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

@@ -1,10 +1,9 @@
 import { useCallback, useMemo, useState, type ReactElement } from 'react';
-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 { useUrlQuery } from '@/hooks/use-url-query.js';
-import { Indicator } from '@mantine/core';
+import { Indicator, NavLink } from '@mantine/core';
 import { getBusinessHref } from '../../charges/helpers.js';
 import { ConfirmMiniButton, InsertBusiness, SelectWithSearch } from '../../common/index.js';
 import type { DocumentsTableRowType } from '../columns.js';
@@ -105,15 +104,9 @@ export const Creditor = ({ document, onChange }: Props): ReactElement => {
         <Indicator inline size={12} disabled={!isError} color="red" zIndex="auto">
           {shouldHaveCreditor &&
             (id ? (
-              <Link
-                to={getHref(id)}
-                target="_blank"
-                rel="noreferrer"
-                onClick={event => event.stopPropagation()}
-                className="inline-flex items-center font-semibold"
-              >
-                {name}
-              </Link>
+              <a href={getHref(id)} target="_blank" rel="noreferrer">
+                <NavLink label={name} className="[&>*>.mantine-NavLink-label]:font-semibold" />
+              </a>
             ) : (
               <SelectWithSearch
                 options={selectableBusinesses}