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

package/src/components/layout/sidelinks.tsx

@@ -26,6 +26,7 @@ import {
   Scale,
   Tags,
 } from 'lucide-react';
+import { ROUTES } from '../../router/routes.js';
 
 export interface NavLink {
   title: string;
@@ -49,19 +50,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'All Charges',
         label: '',
-        href: '/charges',
+        href: ROUTES.CHARGES.ALL,
         icon: <Receipt size={18} />,
       },
       {
         title: 'Missing Info Charges',
         label: '',
-        href: '/missing-info-charges',
+        href: ROUTES.CHARGES.MISSING_INFO,
         icon: <RectangleEllipsis size={18} />,
       },
       {
         title: 'Ledger Validation',
         label: '',
-        href: '/charges-ledger-validation',
+        href: ROUTES.CHARGES.LEDGER_VALIDATION,
         icon: <BookOpenCheck size={18} />,
       },
     ],
@@ -75,73 +76,73 @@ export const sidelinks: SideLink[] = [
       {
         title: 'VAT Monthly Report',
         label: '',
-        href: '/reports/vat-monthly',
+        href: ROUTES.REPORTS.VAT_MONTHLY,
         icon: <Receipt size={18} />,
       },
       {
         title: 'Trial Balance Report',
         label: '',
-        href: '/reports/trial-balance',
+        href: ROUTES.REPORTS.TRIAL_BALANCE,
         icon: <Scale size={18} />,
       },
       {
         title: 'Conto Report',
         label: '',
-        href: '/reports/conto',
+        href: ROUTES.REPORTS.CONTO,
         icon: <Puzzle size={18} />,
       },
       {
         title: 'Profit and Loss Report',
         label: '',
-        href: '/reports/profit-and-loss',
+        href: ROUTES.REPORTS.PROFIT_AND_LOSS(),
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Tax Report',
         label: '',
-        href: '/reports/tax',
+        href: ROUTES.REPORTS.TAX(),
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Corporate Tax Ruling Compliance Report',
         label: '',
-        href: '/reports/corporate-tax-ruling-compliance',
+        href: ROUTES.REPORTS.CORPORATE_TAX_RULING_COMPLIANCE(),
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Depreciation Report',
         label: '',
-        href: '/reports/depreciation',
+        href: ROUTES.REPORTS.DEPRECIATION,
         icon: <ChartColumnDecreasing size={18} />,
       },
       {
         title: 'Shaam 6111 Report',
         label: '',
-        href: '/reports/shaam6111',
+        href: ROUTES.REPORTS.SHAAM_6111,
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Accountant Approvals',
         label: '',
-        href: '/accountant-approvals',
+        href: ROUTES.ACCOUNTANT_APPROVALS,
         icon: <Calculator size={18} />,
       },
       {
         title: 'Yearly Ledger Report',
         label: '',
-        href: '/reports/yearly-ledger',
+        href: ROUTES.REPORTS.YEARLY_LEDGER,
         icon: <Rows4 size={18} />,
       },
       {
         title: 'Transactions Balance',
         label: '',
-        href: '/reports/balance',
+        href: ROUTES.REPORTS.BALANCE,
         icon: <ChartNoAxesCombined size={18} />,
       },
       {
         title: 'Validate Reports',
         label: '',
-        href: '/reports/validate-reports',
+        href: ROUTES.REPORTS.VALIDATE_REPORTS,
         icon: <CheckCheck size={18} />,
       },
       {
@@ -160,25 +161,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Businesses',
         label: '',
-        href: '/businesses',
+        href: ROUTES.BUSINESSES.ALL,
         icon: <Factory size={18} />,
       },
       {
         title: 'Business Transactions',
         label: '',
-        href: '/business-transactions',
+        href: ROUTES.BUSINESSES.TRANSACTIONS,
         icon: <ArrowLeftRight size={18} />,
       },
       {
         title: 'Tax Categories',
         label: '',
-        href: '/tax-categories',
+        href: ROUTES.TAX_CATEGORIES,
         icon: <ArrowDown01 size={18} />,
       },
       {
         title: 'Sort Codes',
         label: '',
-        href: '/sort-codes',
+        href: ROUTES.SORT_CODES,
         icon: <Book size={18} />,
       },
     ],
@@ -190,7 +191,7 @@ export const sidelinks: SideLink[] = [
     icon: <Files size={18} />,
     sub: [
       {
-        href: '/documents',
+        href: ROUTES.DOCUMENTS.ALL,
         title: 'All Documents',
         label: '',
         icon: <Files size={18} />,
@@ -198,19 +199,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Issue Documents',
         label: '',
-        href: '/documents/issue-documents',
+        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENTS,
         icon: <FilePen size={18} />,
       },
       {
         title: 'Issue Document',
         label: '',
-        href: '/documents/issue-document',
+        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENT,
         icon: <FilePen size={18} />,
       },
     ],
   },
   {
-    href: '/business-trips',
+    href: ROUTES.BUSINESS_TRIPS.ALL,
     title: 'Business Trips',
     label: '',
     icon: <PlaneTakeoff size={18} />,
@@ -224,25 +225,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Main',
         label: '',
-        href: '/charts/',
+        href: ROUTES.CHARTS.MAIN,
         icon: <BarChartBig size={18} />,
       },
       {
         title: 'Monthly Income/Expense',
         label: '',
-        href: '/charts/monthly-income-expense',
+        href: ROUTES.CHARTS.MONTHLY_INCOME_EXPENSE,
         icon: <BarChartBig size={18} />,
       },
     ],
   },
   {
-    href: '/salaries',
+    href: ROUTES.SALARIES,
     title: 'Salaries',
     label: '',
     icon: <BadgeDollarSign size={18} />,
   },
   {
-    href: '/tags',
+    href: ROUTES.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 { NavLink } from '@mantine/core';
+import { Link } from 'react-router-dom';
 import type { ChargeFilter } from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../business-transactions/index.js';
@@ -50,21 +50,27 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
       {(account || isAccountDiff) && (
         <>
           {account && (
-            <a href={getHref(account.id)} target="_blank" rel="noreferrer">
-              <NavLink
-                label={account.name}
-                className={`[&>*>.mantine-NavLink-label]:font-semibold ${isAccountDiff ? 'line-through' : ''}`}
-              />
-            </a>
+            <Link
+              to={getHref(account.id)}
+              target="_blank"
+              rel="noreferrer"
+              onClick={event => event.stopPropagation()}
+              className="inline-flex items-center font-semibold"
+            >
+              {account.name}
+            </Link>
           )}
           {isAccountDiff && diffAccount && (
             <div className="border-2 border-yellow-500 rounded-md">
-              <a href={getHref(diffAccount.id)} target="_blank" rel="noreferrer">
-                <NavLink
-                  label={diffAccount.name}
-                  className="[&>*>.mantine-NavLink-label]:font-semibold"
-                />
-              </a>
+              <Link
+                to={getHref(diffAccount.id)}
+                target="_blank"
+                rel="noreferrer"
+                onClick={event => event.stopPropagation()}
+                className="inline-flex items-center font-semibold"
+              >
+                {diffAccount.name}
+              </Link>
             </div>
           )}
         </>

package/src/components/login-page.tsx

@@ -5,6 +5,7 @@ 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';
@@ -32,7 +33,7 @@ export function LoginPage(): ReactElement {
   function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       authService.login(values.username, values.password).then(_user => {
-        navigate('/');
+        navigate(ROUTES.HOME);
       });
       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 { useMatch } from 'react-router-dom';
+import { useParams } 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 match = useMatch('/reports/corporate-tax-ruling-compliance/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [years, setYears] = useState<number[]>(
-    (match ? [Number(match.params.year)] : undefined) ?? [new Date().getFullYear()],
+    yearFromUrl ? [Number(yearFromUrl)] : [new Date().getFullYear()],
   );
 
   // fetch data

package/src/components/reports/profit-and-loss-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Table } from '@mantine/core';
 import { ProfitAndLossReportDocument } from '../../../gql/graphql.js';
@@ -135,10 +135,10 @@ import { ProfitAndLossReportFilter } from './profit-and-loss-report-filters.js';
 `;
 
 export const ProfitAndLossReport = (): ReactElement => {
-  const match = useMatch('/reports/profit-and-loss/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    (match ? Number(match.params.year) : undefined) ?? new Date().getFullYear(),
+    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
   );
   const [referenceYears, setReferenceYears] = useState<number[]>([]);
 

package/src/components/reports/tax-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Table } from '@mantine/core';
 import { TaxReportDocument } from '../../../gql/graphql.js';
@@ -140,10 +140,10 @@ import { TaxReportFilter } from './tax-report-filters.js';
 `;
 
 export const TaxReport = (): ReactElement => {
-  const match = useMatch('/reports/tax/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    (match ? Number(match.params.year) : undefined) ?? new Date().getFullYear(),
+    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
   );
   const [referenceYears, setReferenceYears] = useState<number[]>([]);
 

package/src/components/reports/trial-balance-report/trial-balance-report-group.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import { Text } from '@mantine/core';
 import { Currency } from '../../../gql/graphql.js';
-import { currencyCodeToSymbol, formatStringifyAmount } from '../../../helpers/index.js';
+import { formatAmountWithCurrency } from '../../../helpers/index.js';
 import { TrialBalanceReportFilters } from './trial-balance-report-filters.js';
 import {
   TrialBalanceReportSortCode,
@@ -44,16 +44,14 @@ export const TrialBalanceReportGroup = ({
         <td colSpan={2}>Group total:</td>
         <td colSpan={1}>{group.replaceAll('0', '*')}</td>
         <td colSpan={1}>
-          {!!data.totalDebit &&
-            `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.totalDebit)}`}
+          {!!data.totalDebit && formatAmountWithCurrency(data.totalDebit, Currency.Ils)}
         </td>
         <td colSpan={1}>
-          {!!data.totalCredit &&
-            `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.totalCredit)}`}
+          {!!data.totalCredit && formatAmountWithCurrency(data.totalCredit, Currency.Ils)}
         </td>
         <td colSpan={1}>
           <Text fw={700} c={data.sum > 0 ? 'green' : data.sum < 0 ? 'red' : undefined}>
-            {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.sum)}`}
+            {formatAmountWithCurrency(data.sum, Currency.Ils)}
           </Text>
         </td>
       </tr>

package/src/components/reports/trial-balance-report/trial-balance-report-sort-code.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import { Text } from '@mantine/core';
 import { Currency } from '../../../gql/graphql.js';
-import { currencyCodeToSymbol, formatStringifyAmount } from '../../../helpers/index.js';
+import { formatAmountWithCurrency } from '../../../helpers/index.js';
 import {
   TrialBalanceReportBusiness,
   type ExtendedBusiness,
@@ -55,29 +55,26 @@ export const TrialBalanceReportSortCode = ({
             <td colSpan={2}>Group total:</td>
             <td colSpan={1}>{sortCode.key}</td>
             <td colSpan={1}>
-              {!!sortCode.totalDebit &&
-                `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.totalDebit)}`}
+              {!!sortCode.totalDebit && formatAmountWithCurrency(sortCode.totalDebit, Currency.Ils)}
             </td>
             <td colSpan={1}>
               {!!sortCode.totalCredit &&
-                `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.totalCredit)}`}
+                formatAmountWithCurrency(sortCode.totalCredit, Currency.Ils)}
             </td>
             <td colSpan={1}>
-              <Text
-                c={sortCode.sum > 0 ? 'green' : sortCode.sum < 0 ? 'red' : undefined}
-              >{`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.sum)}`}</Text>
+              <Text c={sortCode.sum > 0 ? 'green' : sortCode.sum < 0 ? 'red' : undefined}>
+                {formatAmountWithCurrency(sortCode.sum, Currency.Ils)}
+              </Text>
               {!!sortCode.debit && (
                 <>
                   <br />
-                  Total Debit Balances:{' '}
-                  {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.debit)}`}
+                  Total Debit Balances: {formatAmountWithCurrency(sortCode.debit, Currency.Ils)}
                 </>
               )}
               {!!sortCode.credit && (
                 <>
                   <br />
-                  Total Credit Balances:{' '}
-                  {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.credit)}`}
+                  Total Credit Balances: {formatAmountWithCurrency(sortCode.credit, Currency.Ils)}
                 </>
               )}
             </td>

package/src/components/screens/businesses/business.tsx

@@ -0,0 +1,56 @@
+import { type ReactElement } from 'react';
+import { useLoaderData, useParams } from 'react-router-dom';
+import { useQuery } from 'urql';
+import Business from '@/components/business/index.js';
+import { BusinessScreenDocument, type BusinessScreenQuery } from '../../../gql/graphql.js';
+import { AccounterLoader } from '../../common/index.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query BusinessScreen($businessId: UUID!) {
+    business(id: $businessId) {
+      id
+      ...BusinessPage
+    }
+  }
+`;
+
+export function getBusinessHref(businessId: string): string {
+  return `/businesses/${businessId}`;
+}
+
+export const BusinessScreen = (): ReactElement => {
+  const { businessId } = useParams<{ businessId: string }>();
+
+  // Try to get loader data (will be available when navigating via router)
+  let loaderData: BusinessScreenQuery | undefined;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    loaderData = useLoaderData() as BusinessScreenQuery;
+  } catch {
+    // No loader data - fallback to query
+  }
+
+  // Only fetch if we don't have loader data
+  const [{ data, fetching }, fetchBusiness] = useQuery({
+    query: BusinessScreenDocument,
+    pause: !businessId || !!loaderData,
+    variables: {
+      businessId: businessId ?? '',
+    },
+  });
+
+  // Use loader data if available, otherwise use query data
+  const businessData = loaderData || data;
+  const isLoading = !loaderData && fetching;
+
+  if (isLoading && !businessData?.business) {
+    return <AccounterLoader />;
+  }
+
+  if (!businessId || !businessData?.business) {
+    return <div>Business not found</div>;
+  }
+
+  return <Business data={businessData.business} refetchBusiness={async () => fetchBusiness()} />;
+};

package/src/components/screens/charges/charge.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useLoaderData, useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { ChargeScreenDocument } from '../../../gql/graphql.js';
+import { ChargeScreenDocument, type ChargeScreenQuery } from '../../../gql/graphql.js';
 import { ChargesTable } from '../../charges/charges-table.js';
 import {
   AccounterLoader,
@@ -29,9 +29,17 @@ type Props = {
 };
 
 export const Charge = ({ chargeId }: Props): ReactElement => {
-  const match = useMatch('/charges/:chargeId');
+  const { chargeId: chargeIdFromUrl } = useParams<{ chargeId: string }>();
+  const id = chargeId || chargeIdFromUrl;
 
-  const id = chargeId || match?.params.chargeId;
+  // Try to get loader data (will be available when navigating via router)
+  let loaderData: ChargeScreenQuery | undefined;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    loaderData = useLoaderData() as ChargeScreenQuery;
+  } catch {
+    // No loader data - component used outside router context (e.g., as child component)
+  }
 
   const [editChargeId, setEditChargeId] = useState<
     { id: string; onChange: () => void } | undefined
@@ -43,19 +51,24 @@ export const Charge = ({ chargeId }: Props): ReactElement => {
     undefined,
   );
 
+  // Only fetch if we don't have loader data and need to fetch (prop-based usage)
   const [{ data, fetching }, fetchCharge] = useQuery({
     query: ChargeScreenDocument,
-    pause: !id,
+    pause: !id || !!loaderData,
     variables: {
       chargeId: id ?? '',
     },
   });
 
   useEffect(() => {
-    if (id) {
+    if (id && !loaderData) {
       fetchCharge();
     }
-  }, [id, fetchCharge]);
+  }, [id, loaderData, fetchCharge]);
+
+  // Use loader data if available, otherwise use query data
+  const chargeData = loaderData || data;
+  const isLoading = !loaderData && fetching;
 
   if (!id) {
     return <div>Charge not found</div>;
@@ -63,14 +76,14 @@ export const Charge = ({ chargeId }: Props): ReactElement => {
 
   return (
     <>
-      {fetching ? (
+      {isLoading ? (
         <AccounterLoader />
       ) : (
         <ChargesTable
           setEditChargeId={setEditChargeId}
           setInsertDocument={setInsertDocument}
           setMatchDocuments={setMatchDocuments}
-          data={data?.charge ? [data.charge] : []}
+          data={chargeData?.charge ? [chargeData.charge] : []}
           isAllOpened
         />
       )}

package/src/components/screens/documents/issue-documents/edit-issue-document-modal.tsx

@@ -3,7 +3,7 @@ import { Check, Edit, Eye, FileText, Loader2 } from 'lucide-react';
 import type { NewDocumentInfoFragment } from '../../../../gql/graphql.js';
 import { usePreviewDocument } from '../../../../hooks/use-preview-document.js';
 import { PdfViewer } from '../../../common/documents/issue-document/pdf-viewer.js';
-import { RecentClientDocs } from '../../../common/documents/issue-document/recent-client-docs.js';
+import { RecentBusinessDocs } from '../../../common/documents/issue-document/recent-business-docs.js';
 import { RecentDocsOfSameType } from '../../../common/documents/issue-document/recent-docs-of-same-type.js';
 import {
   convertNewDocumentInfoFragmentIntoPreviewDocumentInput,
@@ -201,10 +201,10 @@ export function EditIssueDocumentModal({ onApprove, draft }: Props): ReactElemen
                   </CardContent>
                 </Card>
 
-                {/* Previous client documents */}
+                {/* Previous business documents */}
                 {document.client?.id && (
-                  <RecentClientDocs
-                    clientId={document.client?.id}
+                  <RecentBusinessDocs
+                    businessId={document.client?.id}
                     linkedDocumentIds={document.linkedDocumentIds ?? []}
                   />
                 )}

package/src/components/transactions-table/cells/counterparty.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState, type ReactElement } from 'react';
 import { CheckIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import type { ChargeFilter } from '../../../gql/graphql.js';
 import { useGetBusinesses } from '../../../hooks/use-get-businesses.js';
 import { useUpdateTransaction } from '../../../hooks/use-update-transaction.js';
@@ -85,9 +86,15 @@ export function Counterparty({ transaction, onChange }: Props): ReactElement {
     <>
       <div className="flex flex-wrap flex-col justify-center">
         {counterparty?.id ? (
-          <a href={getHref(counterparty.id)} target="_blank" rel="noreferrer">
+          <Link
+            to={getHref(counterparty.id)}
+            target="_blank"
+            rel="noreferrer"
+            onClick={event => event.stopPropagation()}
+            className="inline-flex items-center font-semibold"
+          >
             {name}
-          </a>
+          </Link>
         ) : (
           <>
             <SelectWithSearch

package/src/components/transactions-table/cells-legacy/counterparty.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState, type ReactElement } from 'react';
 import { CheckIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import {
   TransactionsTableEntityFieldsFragmentDoc,
   type ChargeFilter,
@@ -106,9 +107,15 @@ export function Counterparty({ data, onChange, enableEdit }: Props): ReactElemen
     <td>
       <div className="flex flex-wrap gap-1 items-center justify-center">
         {counterparty?.id ? (
-          <a href={getHref(counterparty.id)} target="_blank" rel="noreferrer">
+          <Link
+            to={getHref(counterparty.id)}
+            target="_blank"
+            rel="noreferrer"
+            onClick={event => event.stopPropagation()}
+            className="inline-flex items-center font-semibold"
+          >
             {name}
-          </a>
+          </Link>
         ) : (
           <>
             <SelectWithSearch

package/src/components/ui/progress.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
+import { cn } from '@/lib/utils.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+const Progress = forwardRef<
+  ComponentRef<typeof ProgressPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-gray-900/20 dark:bg-gray-50/20',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-gray-900 transition-all dark:bg-gray-50"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils.js';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-gray-900/10 dark:bg-gray-50/10', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };