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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,29 +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  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

@@ -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

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

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

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState, type ReactElement } from 'react';
-import { Link } from 'react-router-dom';
 import { useGetBusinesses } from '@/hooks/use-get-businesses.js';
-import { Indicator } from '@mantine/core';
+import { Indicator, NavLink } from '@mantine/core';
 import { DocumentType } from '../../../gql/graphql.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
 import { useUrlQuery } from '../../../hooks/use-url-query.js';
@@ -101,15 +100,9 @@ export const Debtor = ({ document, onChange }: Props): ReactElement => {
         <Indicator inline size={12} disabled={!isError} color="red" zIndex="auto">
           {shouldHaveDebtor &&
             (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}

package/src/components/layout/dashboard-layout.tsx

@@ -1,9 +1,7 @@
 import type { ReactElement } from 'react';
 import { useSidebar } from '../../hooks/use-sidebar.js';
-import { Breadcrumbs } from './breadcrumbs.js';
 import { Footer } from './footer.js';
 import { Header } from './header.js';
-import { NavigationProgress } from './navigation-progress.js';
 import { Sidebar } from './sidebar.js';
 
 type DashboardLayoutProps = {
@@ -16,14 +14,12 @@ export function DashboardLayout({ children, filtersContext }: DashboardLayoutPro
 
   return (
     <main>
-      <NavigationProgress />
       <Header />
       <div className="flex h-screen overflow-hidden bg-gray-100">
         <Sidebar />
         <div
           className={`overflow-scroll flex flex-col justify-start gap-10 z-0 my-20 pl-10 flex-1 ${isMinimized ? 'pr-10' : 'pr-5'} transition-all`}
         >
-          <Breadcrumbs />
           {children}
         </div>
       </div>

package/src/components/layout/sidelinks.tsx

@@ -26,7 +26,6 @@ import {
   Scale,
   Tags,
 } from 'lucide-react';
-import { ROUTES } from '../../router/routes.js';
 
 export interface NavLink {
   title: string;
@@ -50,19 +49,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'All Charges',
         label: '',
-        href: ROUTES.CHARGES.ALL,
+        href: '/charges',
         icon: <Receipt size={18} />,
       },
       {
         title: 'Missing Info Charges',
         label: '',
-        href: ROUTES.CHARGES.MISSING_INFO,
+        href: '/charges/missing-info',
         icon: <RectangleEllipsis size={18} />,
       },
       {
         title: 'Ledger Validation',
         label: '',
-        href: ROUTES.CHARGES.LEDGER_VALIDATION,
+        href: '/charges/ledger-validation',
         icon: <BookOpenCheck size={18} />,
       },
     ],
@@ -76,73 +75,73 @@ export const sidelinks: SideLink[] = [
       {
         title: 'VAT Monthly Report',
         label: '',
-        href: ROUTES.REPORTS.VAT_MONTHLY,
+        href: '/reports/vat-monthly',
         icon: <Receipt size={18} />,
       },
       {
         title: 'Trial Balance Report',
         label: '',
-        href: ROUTES.REPORTS.TRIAL_BALANCE,
+        href: '/reports/trial-balance',
         icon: <Scale size={18} />,
       },
       {
         title: 'Conto Report',
         label: '',
-        href: ROUTES.REPORTS.CONTO,
+        href: '/reports/conto',
         icon: <Puzzle size={18} />,
       },
       {
         title: 'Profit and Loss Report',
         label: '',
-        href: ROUTES.REPORTS.PROFIT_AND_LOSS(),
+        href: '/reports/profit-and-loss',
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Tax Report',
         label: '',
-        href: ROUTES.REPORTS.TAX(),
+        href: '/reports/tax',
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Corporate Tax Ruling Compliance Report',
         label: '',
-        href: ROUTES.REPORTS.CORPORATE_TAX_RULING_COMPLIANCE(),
+        href: '/reports/corporate-tax-ruling-compliance',
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Depreciation Report',
         label: '',
-        href: ROUTES.REPORTS.DEPRECIATION,
+        href: '/reports/depreciation',
         icon: <ChartColumnDecreasing size={18} />,
       },
       {
         title: 'Shaam 6111 Report',
         label: '',
-        href: ROUTES.REPORTS.SHAAM_6111,
+        href: '/reports/shaam6111',
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Accountant Approvals',
         label: '',
-        href: ROUTES.ACCOUNTANT_APPROVALS,
+        href: '/accountant-approvals',
         icon: <Calculator size={18} />,
       },
       {
         title: 'Yearly Ledger Report',
         label: '',
-        href: ROUTES.REPORTS.YEARLY_LEDGER,
+        href: '/reports/yearly-ledger',
         icon: <Rows4 size={18} />,
       },
       {
         title: 'Transactions Balance',
         label: '',
-        href: ROUTES.REPORTS.BALANCE,
+        href: '/reports/balance',
         icon: <ChartNoAxesCombined size={18} />,
       },
       {
         title: 'Validate Reports',
         label: '',
-        href: ROUTES.REPORTS.VALIDATE_REPORTS,
+        href: '/reports/validate-reports',
         icon: <CheckCheck size={18} />,
       },
       {
@@ -161,25 +160,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Businesses',
         label: '',
-        href: ROUTES.BUSINESSES.ALL,
+        href: '/businesses',
         icon: <Factory size={18} />,
       },
       {
         title: 'Business Transactions',
         label: '',
-        href: ROUTES.BUSINESSES.TRANSACTIONS,
+        href: '/businesses/transactions',
         icon: <ArrowLeftRight size={18} />,
       },
       {
         title: 'Tax Categories',
         label: '',
-        href: ROUTES.TAX_CATEGORIES,
+        href: '/tax-categories',
         icon: <ArrowDown01 size={18} />,
       },
       {
         title: 'Sort Codes',
         label: '',
-        href: ROUTES.SORT_CODES,
+        href: '/sort-codes',
         icon: <Book size={18} />,
       },
     ],
@@ -191,7 +190,7 @@ export const sidelinks: SideLink[] = [
     icon: <Files size={18} />,
     sub: [
       {
-        href: ROUTES.DOCUMENTS.ALL,
+        href: '/documents',
         title: 'All Documents',
         label: '',
         icon: <Files size={18} />,
@@ -199,19 +198,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Issue Documents',
         label: '',
-        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENTS,
+        href: '/documents/issue-documents',
         icon: <FilePen size={18} />,
       },
       {
         title: 'Issue Document',
         label: '',
-        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENT,
+        href: '/documents/issue-document',
         icon: <FilePen size={18} />,
       },
     ],
   },
   {
-    href: ROUTES.BUSINESS_TRIPS.ALL,
+    href: '/business-trips',
     title: 'Business Trips',
     label: '',
     icon: <PlaneTakeoff size={18} />,
@@ -225,25 +224,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Main',
         label: '',
-        href: ROUTES.CHARTS.MAIN,
+        href: '/charts/',
         icon: <BarChartBig size={18} />,
       },
       {
         title: 'Monthly Income/Expense',
         label: '',
-        href: ROUTES.CHARTS.MONTHLY_INCOME_EXPENSE,
+        href: '/charts/monthly-income-expense',
         icon: <BarChartBig size={18} />,
       },
     ],
   },
   {
-    href: ROUTES.SALARIES,
+    href: '/salaries',
     title: 'Salaries',
     label: '',
     icon: <BadgeDollarSign size={18} />,
   },
   {
-    href: ROUTES.TAGS,
+    href: '/tags',
     title: 'Tags',
     label: '',
     icon: <Tags size={18} />,

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

@@ -1,5 +1,5 @@
 import { useCallback, type ReactElement } from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from '@mantine/core';
 import type { ChargeFilter } from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../business-transactions/index.js';
@@ -50,27 +50,21 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
       {(account || isAccountDiff) && (
         <>
           {account && (
-            <Link
-              to={getHref(account.id)}
-              target="_blank"
-              rel="noreferrer"
-              onClick={event => event.stopPropagation()}
-              className={`inline-flex items-center font-semibold ${isAccountDiff ? 'line-through' : ''}`}
-            >
-              {account.name}
-            </Link>
+            <a href={getHref(account.id)} target="_blank" rel="noreferrer">
+              <NavLink
+                label={account.name}
+                className={`[&>*>.mantine-NavLink-label]:font-semibold ${isAccountDiff ? 'line-through' : ''}`}
+              />
+            </a>
           )}
           {isAccountDiff && diffAccount && (
             <div className="border-2 border-yellow-500 rounded-md">
-              <Link
-                to={getHref(diffAccount.id)}
-                target="_blank"
-                rel="noreferrer"
-                onClick={event => event.stopPropagation()}
-                className="inline-flex items-center font-semibold"
-              >
-                {diffAccount.name}
-              </Link>
+              <a href={getHref(diffAccount.id)} target="_blank" rel="noreferrer">
+                <NavLink
+                  label={diffAccount.name}
+                  className="[&>*>.mantine-NavLink-label]:font-semibold"
+                />
+              </a>
             </div>
           )}
         </>

package/src/components/login-page.tsx

@@ -5,7 +5,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AuthContext } from '../providers/auth-guard.js';
-import { ROUTES } from '../router/routes.js';
 import { Button } from './ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form.js';
 import { Input } from './ui/input.js';
@@ -33,7 +32,7 @@ export function LoginPage(): ReactElement {
   function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       authService.login(values.username, values.password).then(_user => {
-        navigate(ROUTES.HOME);
+        navigate('/');
       });
       toast.success('Success', {
         description: 'You have successfully logged in.',

package/src/components/reports/corporate-tax-ruling-compliance-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useParams } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Indicator, Table, Tooltip } from '@mantine/core';
 import { CorporateTaxRulingComplianceReportDocument, Currency } from '../../../gql/graphql.js';
@@ -109,10 +109,10 @@ function multipleOptionalFormatter(amounts: number[], currency: Currency) {
 }
 
 export const CorporateTaxRulingComplianceReport = (): ReactElement => {
-  const { year: yearFromUrl } = useParams<{ year: string }>();
+  const match = useMatch('/reports/corporate-tax-ruling-compliance/:year');
   const { setFiltersContext } = useContext(FiltersContext);
   const [years, setYears] = useState<number[]>(
-    yearFromUrl ? [Number(yearFromUrl)] : [new Date().getFullYear()],
+    (match ? [Number(match.params.year)] : undefined) ?? [new Date().getFullYear()],
   );
 
   // fetch data