el-contador 1.2.13 → 1.2.14

package/README.md

@@ -75,6 +75,10 @@ The app is built to run behind a reverse proxy (`trust proxy` is enabled). To se
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
+           # Batch expense upload calls Gemini once per file; default 60s proxy timeout often returns 504
+           proxy_connect_timeout 300s;
+           proxy_send_timeout 300s;
+           proxy_read_timeout 300s;
        }
    }
    ```

package/docker-compose.yml

@@ -5,6 +5,7 @@ services:
   postgres:
     container_name: el-contador-postgres
     image: postgres:16-alpine
+    restart: unless-stopped
     environment:
       POSTGRES_USER: ${DB_USER:-el_contador}
       POSTGRES_PASSWORD: ${DB_PASSWORD:?Set DB_PASSWORD in .env}
@@ -25,6 +26,7 @@ services:
     build:
       context: .
       dockerfile: server/Dockerfile
+    restart: unless-stopped
     depends_on:
       postgres:
         condition: service_healthy

package/frontend/src/App.tsx

@@ -10,6 +10,7 @@ import Bank from './pages/Bank';
 import Reconciliation from './pages/Reconciliation';
 import AccountLedger from './pages/AccountLedger';
 import Contacts from './pages/Contacts';
+import Projects from './pages/Projects';
 import Settings from './pages/Settings';
 
 const queryClient = new QueryClient({
@@ -36,6 +37,7 @@ function App() {
               <Route path="reconciliation" element={<Reconciliation />} />
               <Route path="accounts/:id" element={<AccountLedger />} />
               <Route path="contacts" element={<Contacts />} />
+              <Route path="projects" element={<Projects />} />
               <Route path="settings" element={<Settings />} />
             </Route>
             <Route path="*" element={<Navigate to="/" replace />} />

package/frontend/src/components/ui/dropdown-menu.tsx

@@ -22,7 +22,7 @@ function DropdownMenuContent({
   align = "start",
   alignOffset = 0,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 10,
   className,
   ...props
 }: MenuPrimitive.Popup.Props &
@@ -41,7 +41,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -136,7 +136,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "w-auto min-w-[96px] rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}

package/frontend/src/components/ui/popover.tsx

@@ -16,7 +16,7 @@ function PopoverContent({
   align = "center",
   alignOffset = 0,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 10,
   ...props
 }: PopoverPrimitive.Popup.Props &
   Pick<
@@ -35,7 +35,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg border border-border bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

package/frontend/src/components/ui/select.tsx

@@ -58,7 +58,7 @@ function SelectContent({
   className,
   children,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 10,
   align = "center",
   alignOffset = 0,
   alignItemWithTrigger = true,
@@ -81,7 +81,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-[200] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-white pb-[15px] text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("relative isolate z-[200] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover pb-[15px] text-popover-foreground shadow-md duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         >
           <SelectScrollUpButton />

package/frontend/src/hooks/useContacts.ts

@@ -89,7 +89,7 @@ export function useSuppliers() {
 export function useCreateSupplier() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (body: Partial<Supplier>) => {
+    mutationFn: async (body: Partial<Supplier> & { force?: boolean }) => {
       const { data } = await api.post<Supplier>('/suppliers', body);
       return data;
     },
@@ -124,6 +124,20 @@ export function useDeleteSupplier() {
   });
 }
 
+export function useMergeSuppliers() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: { keepSupplierId: string; mergeSupplierIds: string[] }) => {
+      const { data } = await api.post<{ ok: boolean; mergedCount: number }>('/suppliers/merge', body);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['suppliers'] });
+      queryClient.invalidateQueries({ queryKey: ['expenses'] });
+    },
+  });
+}
+
 // Payees
 export function usePayees() {
   return useQuery({

package/frontend/src/hooks/useExpenses.ts

@@ -1,11 +1,40 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '../lib/api';
+import type { ProjectAllocation } from './useProjects';
 
-export function useExpenses() {
+export type Expense = {
+  id: string;
+  date: string;
+  vendor: string;
+  category: string | null;
+  categoryId: string | null;
+  categoryName: string | null;
+  accountId: string | null;
+  accountCode: number | null;
+  accountName: string | null;
+  amount: number;
+  vat: number;
+  vatRate: number | null;
+  notes: string;
+  fileName: string | null;
+  invoiceNumber: string | null;
+  reconciled: boolean;
+  reconciledAt: string | null;
+  supplierId: string | null;
+  bankTransactionId: string | null;
+  createdAt: string;
+  createdBy?: string | null;
+  creatorEmail?: string | null;
+  approvalStatus?: string;
+  projectAllocations: ProjectAllocation[];
+};
+
+export function useExpenses(projectId?: string | null) {
   return useQuery({
-    queryKey: ['expenses'],
+    queryKey: ['expenses', projectId || 'all'],
     queryFn: async () => {
-      const { data } = await api.get('/expenses');
+      const params = projectId ? { projectId } : undefined;
+      const { data } = await api.get<Expense[]>('/expenses', { params });
       return data;
     },
   });
@@ -21,7 +50,7 @@ export function useExpenseCategories() {
   });
 }
 
-/** Expense accounts (chart of accounts 400-799) for expense dropdowns */
+/** Accounts for expenses: not asset/revenue (100-299) and Allow expenses enabled on the account */
 export function useExpenseAccounts() {
   return useQuery({
     queryKey: ['accounts', 'expense'],
@@ -44,6 +73,8 @@ export function useCreateExpense() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['expenses'] });
       queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+      queryClient.invalidateQueries({ queryKey: ['project-reports'] });
+      queryClient.invalidateQueries({ queryKey: ['project-report-detail'] });
     },
   });
 }
@@ -51,12 +82,14 @@ export function useCreateExpense() {
 export function useDeleteExpense() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (id: number) => {
+    mutationFn: async (id: string) => {
       await api.delete(`/expenses/${id}`);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['expenses'] });
       queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+      queryClient.invalidateQueries({ queryKey: ['project-reports'] });
+      queryClient.invalidateQueries({ queryKey: ['project-report-detail'] });
     },
   });
 }

package/frontend/src/hooks/useProjects.ts

@@ -0,0 +1,148 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+
+export type Project = {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  responsible: string;
+  projectAccountNum: string;
+  active: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type ProjectAllocation = {
+  projectId: string;
+  projectName: string;
+  projectCode?: string;
+  responsible?: string;
+  projectAccountNum?: string;
+  allocationPercentage: number;
+};
+
+export type ProjectReportSummaryRow = {
+  projectId: string;
+  projectName: string;
+  projectCode: string;
+  responsible: string;
+  projectAccountNum: string;
+  active: boolean;
+  expenseCount: number;
+  netAmount: number;
+  vatAmount: number;
+  totalAmount: number;
+};
+
+export type ProjectReportDetail = {
+  from: string;
+  to: string;
+  project: Project;
+  totals: {
+    expenseCount: number;
+    netAmount: number;
+    vatAmount: number;
+    totalAmount: number;
+  };
+  breakdown: Array<{
+    category: string;
+    expenseCount: number;
+    netAmount: number;
+    vatAmount: number;
+    totalAmount: number;
+  }>;
+  expenses: Array<{
+    expenseId: string;
+    date: string;
+    vendor: string;
+    invoiceNumber: string;
+    notes: string;
+    accountId: string | null;
+    accountCode: number | null;
+    accountName: string | null;
+    categoryName: string | null;
+    allocationPercentage: number;
+    netAmount: number;
+    vatAmount: number;
+    totalAmount: number;
+  }>;
+};
+
+export function useProjects(active?: boolean) {
+  return useQuery({
+    queryKey: ['projects', active ?? 'all'],
+    queryFn: async () => {
+      const params = active === undefined ? undefined : { active: String(active) };
+      const { data } = await api.get<Project[]>('/projects', { params });
+      return data;
+    },
+  });
+}
+
+export function useCreateProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: Partial<Project>) => {
+      const { data } = await api.post<Project>('/projects', body);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      queryClient.invalidateQueries({ queryKey: ['project-reports'] });
+    },
+  });
+}
+
+export function useUpdateProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, ...body }: Partial<Project> & { id: string }) => {
+      const { data } = await api.put<Project>(`/projects/${id}`, body);
+      return data;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      queryClient.invalidateQueries({ queryKey: ['project-reports'] });
+      queryClient.invalidateQueries({ queryKey: ['project-report-detail', variables.id] });
+    },
+  });
+}
+
+export function useDeleteProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await api.delete(`/projects/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      queryClient.invalidateQueries({ queryKey: ['project-reports'] });
+    },
+  });
+}
+
+export function useProjectReportSummary(from: string, to: string) {
+  return useQuery({
+    queryKey: ['project-reports', 'summary', from, to],
+    queryFn: async () => {
+      const { data } = await api.get<{ from: string; to: string; projects: ProjectReportSummaryRow[] }>('/reports/projects/summary', {
+        params: { from, to },
+      });
+      return data;
+    },
+  });
+}
+
+export function useProjectReportDetail(projectId: string | null, from: string, to: string) {
+  return useQuery({
+    queryKey: ['project-report-detail', projectId, from, to],
+    enabled: Boolean(projectId),
+    queryFn: async () => {
+      const { data } = await api.get<ProjectReportDetail>(`/reports/projects/${projectId}`, {
+        params: { from, to },
+      });
+      return data;
+    },
+  });
+}

package/frontend/src/layouts/ProtectedLayout.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { useInvoiceConfig } from '../hooks/useSettings';
-import { LogOut, Settings, LayoutDashboard, FileText, Landmark, Users, Contact, Menu } from 'lucide-react';
+import { LogOut, Settings, LayoutDashboard, FileText, Landmark, Users, Contact, Menu, BriefcaseBusiness } from 'lucide-react';
 import { Link, useLocation } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
@@ -37,6 +37,7 @@ export default function ProtectedLayout() {
     { name: 'Bank', path: '/bank', icon: Landmark },
     { name: 'Reconciliation', path: '/reconciliation', icon: FileText },
     { name: 'Contacts', path: '/contacts', icon: Contact },
+    { name: 'Projects', path: '/projects', icon: BriefcaseBusiness },
     { name: 'Settings', path: '/settings', icon: Settings },
   ];
 

package/frontend/src/lib/api-errors.ts

@@ -0,0 +1,16 @@
+export function parseApiError(error: unknown, fallback = 'Request failed. Please try again.'): string {
+  const res =
+    error && typeof error === 'object' && 'response' in error
+      ? (error as { response?: { status?: number; data?: unknown } }).response
+      : undefined;
+  const data = res?.data;
+  if (data && typeof data === 'object') {
+    const d = data as Record<string, unknown>;
+    if (typeof d.message === 'string' && d.message.trim()) return d.message.trim();
+    if (typeof d.error === 'string' && d.error.trim()) return d.error.trim();
+  }
+  if (res?.status === 413) {
+    return 'File too large. Use a smaller file or ask an administrator to raise the upload limit.';
+  }
+  return fallback;
+}

package/frontend/src/lib/selectDisplay.ts

@@ -0,0 +1,13 @@
+/**
+ * Base UI Select shows the raw `value` (e.g. UUID) in the trigger when SelectValue
+ * has no children. Use this to resolve a human-readable label from a list by id.
+ */
+export function labelForId<T extends { id: string }>(
+  items: T[] | null | undefined,
+  id: string | null | undefined,
+  getLabel: (row: T) => string
+): string | undefined {
+  if (id == null || id === '') return undefined;
+  const row = items?.find((x) => String(x.id) === String(id));
+  return row ? getLabel(row) : undefined;
+}

package/frontend/src/pages/AccountLedger.tsx

@@ -216,7 +216,7 @@ export default function AccountLedger() {
           <div className="flex flex-wrap items-center gap-2">
             <Select value={year} onValueChange={(v) => setYear(v ?? 'all')}>
               <SelectTrigger className="w-24">
-                <SelectValue placeholder="Year" />
+                <SelectValue placeholder="Year">{year === 'all' ? 'All (historic)' : year}</SelectValue>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All (historic)</SelectItem>
@@ -240,7 +240,7 @@ export default function AccountLedger() {
               <>
                 <Select value={quarter} onValueChange={(v) => setQuarter(v ?? 'all')}>
                   <SelectTrigger className="w-28">
-                    <SelectValue placeholder="Quarter" />
+                    <SelectValue placeholder="Quarter">{quarter === 'all' ? 'All' : `Q${quarter}`}</SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">All</SelectItem>
@@ -251,7 +251,9 @@ export default function AccountLedger() {
                 </Select>
                 <Select value={month} onValueChange={(v) => setMonth(v ?? 'all')}>
                   <SelectTrigger className="w-28">
-                    <SelectValue placeholder="Month" />
+                    <SelectValue placeholder="Month">
+                      {month === 'all' ? 'All' : new Date(2000, Number(month) - 1, 1).toLocaleString('default', { month: 'short' })}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">All</SelectItem>
@@ -356,7 +358,9 @@ export default function AccountLedger() {
               <Label>Direction</Label>
               <Select value={newTxDirection} onValueChange={(v) => v && setNewTxDirection(v as 'pay_to' | 'pay_from')}>
                 <SelectTrigger>
-                  <SelectValue />
+                  <SelectValue>
+                    {newTxDirection === 'pay_to' ? 'Pay to this account' : newTxDirection === 'pay_from' ? 'Pay from this account' : undefined}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="pay_to">Pay to this account</SelectItem>
@@ -372,7 +376,7 @@ export default function AccountLedger() {
                     {newTxCounterAccountId
                       ? (() => {
                           const sel = otherAccounts.find((a: any) => String(a.id) === String(newTxCounterAccountId));
-                          return sel ? `${sel.code} ${sel.name}` : null;
+                          return sel ? `${sel.code} ${sel.name}` : 'Unknown account';
                         })()
                       : null}
                   </SelectValue>

package/frontend/src/pages/Bank.tsx

@@ -265,7 +265,19 @@ export default function Bank() {
             />
             <Select value={filterType} onValueChange={(val) => setFilterType(val || 'all')}>
               <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Filter..." />
+                <SelectValue placeholder="Filter...">
+                  {filterType === 'all'
+                    ? 'All Transactions'
+                    : filterType === 'unreconciled'
+                      ? 'Unreconciled'
+                      : filterType === 'reconciled'
+                        ? 'Reconciled'
+                        : filterType === 'in'
+                          ? 'Money In'
+                          : filterType === 'out'
+                            ? 'Money Out'
+                            : undefined}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Transactions</SelectItem>
@@ -416,7 +428,7 @@ export default function Bank() {
               <Label>Type</Label>
               <Select value={editForm.type} onValueChange={(v) => v && setEditForm((f) => ({ ...f, type: v as 'in' | 'out' }))}>
                 <SelectTrigger className="col-span-3">
-                  <SelectValue />
+                  <SelectValue>{editForm.type === 'in' ? 'Money In' : editForm.type === 'out' ? 'Money Out' : undefined}</SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="in">Money In</SelectItem>
@@ -582,7 +594,7 @@ export default function Bank() {
                     <TableCell>
                       <Select value={row.type} onValueChange={(v) => v && setReviewRowField(i, 'type', v as 'in' | 'out')}>
                         <SelectTrigger className="h-8 text-sm">
-                          <SelectValue />
+                          <SelectValue>{row.type === 'in' ? 'In' : row.type === 'out' ? 'Out' : undefined}</SelectValue>
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="in">In</SelectItem>
@@ -621,12 +633,18 @@ export default function Bank() {
           {importError && (
             <p className="text-sm text-destructive mt-2">{importError}</p>
           )}
-          <DialogFooter showCloseButton>
+          <DialogFooter showCloseButton className="sm:justify-between">
+            <p className="text-sm text-muted-foreground">
+              Ready to import {selectedCount} {selectedCount === 1 ? 'transaction' : 'transactions'}.
+            </p>
             <Button
+              size="lg"
+              className="min-w-[220px] font-semibold shadow-sm"
               onClick={handleImportSelected}
               disabled={confirmImportMutation.isPending || selectedCount === 0}
             >
-              {confirmImportMutation.isPending ? 'Importing...' : `Import selected (${selectedCount})`}
+              <Upload className="w-4 h-4 mr-2" />
+              {confirmImportMutation.isPending ? 'Importing...' : `Import ${selectedCount} ${selectedCount === 1 ? 'transaction' : 'transactions'}`}
             </Button>
           </DialogFooter>
         </DialogContent>