el-contador 1.2.5 → 1.2.7

package/frontend/src/hooks/useBank.ts

@@ -31,8 +31,9 @@ export function useBankImportPreview() {
 export function useConfirmBankImport() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (rows: BankImportPreviewRow[]) => {
-      const { data } = await api.post('/bank-transactions/import/confirm', { rows });
+    mutationFn: async (payload: { rows: BankImportPreviewRow[]; accountId?: string | null }) => {
+      const { rows, accountId } = payload;
+      const { data } = await api.post('/bank-transactions/import/confirm', { rows, accountId: accountId || undefined });
       return data;
     },
     onSuccess: () => {
@@ -45,7 +46,7 @@ export function useConfirmBankImport() {
 export function useUpdateBankTransaction() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, ...payload }: { id: string; date?: string; type?: string; amount?: number; reference?: string; description?: string }) => {
+    mutationFn: async ({ id, ...payload }: { id: string; date?: string; type?: string; amount?: number; reference?: string; description?: string; accountId?: string | null }) => {
       const { data } = await api.patch(`/bank-transactions/${encodeURIComponent(id)}`, payload);
       return data;
     },

package/frontend/src/hooks/useContacts.ts

@@ -21,6 +21,9 @@ export type Payee = ContactBase;
 export type Supplier = ContactBase & {
   categoryId?: string | null;
   categoryName?: string | null;
+  accountId?: string | null;
+  accountCode?: number | null;
+  accountName?: string | null;
 };
 
 // Customers

package/frontend/src/hooks/useExpenses.ts

@@ -21,6 +21,19 @@ export function useExpenseCategories() {
   });
 }
 
+/** Expense accounts (chart of accounts 400-799) for expense dropdowns */
+export function useExpenseAccounts() {
+  return useQuery({
+    queryKey: ['accounts', 'expense'],
+    queryFn: async () => {
+      const { data } = await api.get('/accounts?type=expense');
+      return data;
+    },
+    refetchOnMount: true,
+    staleTime: 0,
+  });
+}
+
 export function useCreateExpense() {
   const queryClient = useQueryClient();
   return useMutation({

package/frontend/src/hooks/useSettings.ts

@@ -23,6 +23,21 @@ export function useSaveInvoiceConfig() {
   });
 }
 
+export function useUploadLogo() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append('file', file);
+      const { data } = await api.post<{ logoPath: string }>('/invoice-config/logo', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      return data;
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['invoice-config'] }),
+  });
+}
+
 // Integrations
 export function useIntegrationsSettings() {
   return useQuery({
@@ -136,3 +151,72 @@ export function useDeleteExpenseCategory() {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['expense-categories'] }),
   });
 }
+
+// Chart of accounts: account groups and accounts
+export function useAccountGroups() {
+  return useQuery({
+    queryKey: ['account-groups'],
+    queryFn: async () => {
+      const { data } = await api.get('/account-groups');
+      return data;
+    },
+  });
+}
+
+export function useAccounts(params?: { groupId?: string; type?: string }) {
+  return useQuery({
+    queryKey: ['accounts', params?.groupId, params?.type],
+    queryFn: async () => {
+      const sp = new URLSearchParams();
+      if (params?.groupId) sp.set('group_id', params.groupId);
+      if (params?.type) sp.set('type', params.type);
+      const { data } = await api.get('/accounts' + (sp.toString() ? '?' + sp.toString() : ''));
+      return data;
+    },
+  });
+}
+
+export function useAccountsAll() {
+  return useQuery({
+    queryKey: ['accounts', 'all'],
+    queryFn: async () => {
+      const { data } = await api.get('/accounts/all');
+      return data;
+    },
+  });
+}
+
+export function useSaveAccount() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (account: any) => {
+      if (account.id) {
+        const { data } = await api.put(`/accounts/${account.id}`, account);
+        return data;
+      } else {
+        const { data } = await api.post('/accounts', account);
+        return data;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      queryClient.invalidateQueries({ queryKey: ['account-groups'] });
+      queryClient.invalidateQueries({ queryKey: ['expense-categories'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+    },
+  });
+}
+
+export function useDeleteAccount() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await api.delete(`/accounts/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      queryClient.invalidateQueries({ queryKey: ['account-groups'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+    },
+  });
+}

package/frontend/src/index.css

@@ -34,8 +34,8 @@
     --chart-6: oklch(0.72 0.19 165);
     --chart-7: oklch(0.6 0.22 25);
     --chart-8: oklch(0.45 0.2 265);
-    --chart-revenue: lch(73.2% 44.87 177.66)
-    --chart-expenses: lch(52.4% 74.12 16.07);
+    --chart-revenue: #42d4a6;
+    --chart-expenses: #f13f66;
     /* Reconciliation match block */
     --reconciliation-match-bg: #eff6ff;
     --reconciliation-match-border: lch(88.74% 26.13 221.7);
@@ -79,8 +79,8 @@
     --chart-6: oklch(0.72 0.19 165);
     --chart-7: oklch(0.6 0.22 25);
     --chart-8: oklch(0.45 0.2 265);
-    --chart-revenue: oklch(0.732 0.4487 177.66);
-    --chart-expenses: oklch(0.527 0.861 1.16);
+    --chart-revenue: #10b981;
+    --chart-expenses: #f87171;
     --reconciliation-match-bg: #1e3a5f;
     --reconciliation-match-border: #2563eb;
     --reconciliation-match-muted-bg: rgba(30, 58, 95, 0.4);

package/frontend/src/layouts/ProtectedLayout.tsx

@@ -63,11 +63,12 @@ export default function ProtectedLayout() {
 
   const sidebarContent = (
     <>
-      <div className="p-4 flex items-center gap-2 min-h-[3rem]">
+      <div className="p-4 flex items-center min-h-[7rem]">
         {logoUrl ? (
-          <img src={logoUrl} alt="" className="h-8 w-auto object-contain flex-shrink-0" />
+          <div className="rounded-lg bg-white p-2 w-full h-20 flex items-center justify-center">
+            <img src={logoUrl} alt="" className="max-w-full max-h-full w-auto h-auto object-contain" />
+          </div>
         ) : null}
-        <h1 className="text-xl font-bold text-white truncate">{companyName}</h1>
       </div>
       <nav className="flex-1 px-2 py-4 space-y-1">
         {navLinks}
@@ -106,9 +107,10 @@ export default function ProtectedLayout() {
           </SheetContent>
         </Sheet>
         {logoUrl ? (
-          <img src={logoUrl} alt="" className="h-7 w-auto object-contain flex-shrink-0" />
+          <div className="rounded-lg bg-white p-2 h-10 w-24 flex items-center justify-center shrink-0">
+            <img src={logoUrl} alt="" className="max-w-full max-h-full w-auto h-auto object-contain" />
+          </div>
         ) : null}
-        <h1 className="text-lg font-bold truncate">{companyName}</h1>
       </header>
 
       {/* Desktop: sidebar */}

package/frontend/src/pages/Bank.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useBankTransactions, useBankImportPreview, useConfirmBankImport, useUpdateBankTransaction, useDeleteBankTransaction, type BankImportPreviewRow } from '../hooks/useBank';
+import { useAccountsAll } from '../hooks/useSettings';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
@@ -61,26 +62,41 @@ function SortableTh({
 
 type ReviewRow = BankImportPreviewRow & { selected: boolean };
 
+const ASSET_CODE_MIN = 100;
+const ASSET_CODE_MAX = 199;
+
 export default function Bank() {
   const { data: transactions, isLoading } = useBankTransactions();
+  const { data: allAccounts } = useAccountsAll();
   const previewMutation = useBankImportPreview();
   const confirmImportMutation = useConfirmBankImport();
   const updateMutation = useUpdateBankTransaction();
   const deleteMutation = useDeleteBankTransaction();
 
+  const assetAccounts = (allAccounts ?? []).filter(
+    (a: { code: number }) => a.code >= ASSET_CODE_MIN && a.code <= ASSET_CODE_MAX
+  ).sort((a: { code: number }, b: { code: number }) => a.code - b.code);
+  const defaultBankAccountId = assetAccounts.length > 0 ? assetAccounts[0].id : null;
+
   const [searchTerm, setSearchTerm] = useState('');
   const [filterType, setFilterType] = useState('all');
+  const [filterAccountId, setFilterAccountId] = useState<string>('all');
   const [page, setPage] = useState(0);
   const [editingTx, setEditingTx] = useState<any>(null);
   const [deletingTx, setDeletingTx] = useState<any>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
-  const [editForm, setEditForm] = useState({ date: '', type: 'out' as 'in' | 'out', amount: '', reference: '', description: '' });
+  const [editForm, setEditForm] = useState({ date: '', type: 'out' as 'in' | 'out', amount: '', reference: '', description: '', accountId: '' as string });
   const [importReviewOpen, setImportReviewOpen] = useState(false);
   const [reviewRows, setReviewRows] = useState<ReviewRow[]>([]);
+  const [importAccountId, setImportAccountId] = useState<string | null>(null);
   const [importError, setImportError] = useState<string | null>(null);
   const [sortBy, setSortBy] = useState<SortKey>('date');
   const [sortDir, setSortDir] = useState<SortDir>('desc');
 
+  useEffect(() => {
+    if (defaultBankAccountId && importAccountId === null) setImportAccountId(defaultBankAccountId);
+  }, [defaultBankAccountId, importAccountId]);
+
   const handleSort = (key: SortKey) => {
     if (sortBy === key) {
       setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
@@ -98,6 +114,7 @@ export default function Bank() {
       amount: tx.amount != null ? String(Math.abs(Number(tx.amount))) : '',
       reference: tx.reference ?? '',
       description: tx.description ?? '',
+      accountId: tx.accountId ?? '',
     });
   };
 
@@ -111,6 +128,7 @@ export default function Bank() {
       amount,
       reference: editForm.reference,
       description: editForm.description,
+      accountId: editForm.accountId || undefined,
     });
     setEditingTx(null);
   };
@@ -164,7 +182,7 @@ export default function Bank() {
     if (toImport.length === 0) return;
     setImportError(null);
     try {
-      await confirmImportMutation.mutateAsync(toImport);
+      await confirmImportMutation.mutateAsync({ rows: toImport, accountId: importAccountId || defaultBankAccountId });
       setImportReviewOpen(false);
       setReviewRows([]);
     } catch (err: any) {
@@ -178,12 +196,11 @@ export default function Bank() {
     const amountStr = String(Math.abs(Number(tx.amount)) ?? '');
     const term = searchTerm.toLowerCase().trim();
     const matchesSearch = !term || desc.includes(term) || ref.includes(term) || amountStr.includes(term.replace(',', '.'));
-    
+    if (filterAccountId !== 'all' && tx.accountId !== filterAccountId) return false;
     if (filterType === 'unreconciled' && tx.reconciled) return false;
     if (filterType === 'reconciled' && !tx.reconciled) return false;
     if (filterType === 'in' && tx.type !== 'in') return false;
     if (filterType === 'out' && tx.type !== 'out') return false;
-    
     return matchesSearch;
   });
 
@@ -258,6 +275,22 @@ export default function Bank() {
                 <SelectItem value="out">Money Out</SelectItem>
               </SelectContent>
             </Select>
+            <Select value={filterAccountId} onValueChange={(val) => setFilterAccountId(val || 'all')}>
+              <SelectTrigger className="w-[180px]">
+                <span className="truncate">
+                  {filterAccountId === 'all' ? 'All accounts' : (() => {
+                    const sel = assetAccounts.find((a: { id: string }) => a.id === filterAccountId);
+                    return sel ? `${sel.code} ${sel.name}` : 'Account...';
+                  })()}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All accounts</SelectItem>
+                {assetAccounts.map((a: { id: string; code: number; name: string }) => (
+                  <SelectItem key={a.id} value={a.id}>{a.code} {a.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </CardHeader>
         <CardContent>
@@ -275,6 +308,7 @@ export default function Bank() {
                   <SortableTh label="Date" sortKey="date" currentSortKey={sortBy} sortDir={sortDir} onSort={handleSort} className="w-24" />
                   <SortableTh label="Reference" sortKey="reference" currentSortKey={sortBy} sortDir={sortDir} onSort={handleSort} className="w-32" />
                   <SortableTh label="Description" sortKey="description" currentSortKey={sortBy} sortDir={sortDir} onSort={handleSort} className="w-32" />
+                  <TableHead className="w-28">Account</TableHead>
                   <SortableTh label="Amount" sortKey="amount" currentSortKey={sortBy} sortDir={sortDir} onSort={handleSort} className="w-24 text-right" />
                   <SortableTh label="Status" sortKey="status" currentSortKey={sortBy} sortDir={sortDir} onSort={handleSort} className="w-24" />
                   <TableHead className="w-[200px] whitespace-nowrap">Actions</TableHead>
@@ -283,7 +317,7 @@ export default function Bank() {
               <TableBody>
                 {totalCount === 0 ? (
                   <TableRow>
-                    <TableCell colSpan={6} className="text-center py-4 text-muted-foreground">
+                    <TableCell colSpan={7} className="text-center py-4 text-muted-foreground">
                       No transactions found.
                     </TableCell>
                   </TableRow>
@@ -297,6 +331,10 @@ export default function Bank() {
                       <TableCell className="w-32 truncate" title={tx.description || undefined}>
                         {truncate(tx.description)}
                       </TableCell>
+                      <TableCell className="w-28 truncate" title={tx.accountName || (tx.accountCode != null ? String(tx.accountCode) : undefined)}>
+                        {tx.accountCode != null ? `${tx.accountCode}` : '\u2014'}
+                        {tx.accountName ? ` ${truncate(tx.accountName, 12)}` : ''}
+                      </TableCell>
                       <TableCell className={`w-24 text-right font-medium whitespace-nowrap ${tx.type === 'in' ? 'text-emerald-600' : 'text-slate-900'}`}>
                         {tx.type === 'in' ? '+' : '-'}€{Math.abs(Number(tx.amount)).toFixed(2)}
                       </TableCell>
@@ -416,6 +454,26 @@ export default function Bank() {
                 onChange={(e) => setEditForm((f) => ({ ...f, description: e.target.value }))}
               />
             </div>
+            {assetAccounts.length > 0 && (
+              <div className="grid grid-cols-4 items-center gap-2">
+                <Label>Account</Label>
+                <Select value={editForm.accountId || defaultBankAccountId || ''} onValueChange={(v) => setEditForm((f) => ({ ...f, accountId: v }))}>
+                  <SelectTrigger className="col-span-3">
+                    <span className="truncate">
+                      {(() => {
+                        const sel = assetAccounts.find((a: { id: string }) => a.id === (editForm.accountId || defaultBankAccountId));
+                        return sel ? `${sel.code} ${sel.name}` : 'Select account...';
+                      })()}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {assetAccounts.map((a: { id: string; code: number; name: string }) => (
+                      <SelectItem key={a.id} value={a.id}>{a.code} {a.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
           </div>
           <DialogFooter showCloseButton>
             <Button onClick={submitEdit} disabled={updateMutation.isPending || !editForm.date || !editForm.amount}>
@@ -456,9 +514,29 @@ export default function Bank() {
           <DialogHeader>
             <DialogTitle>Review import</DialogTitle>
             <DialogDescription>
-              Uncheck rows to exclude from import. Edit any field as needed, then click Import selected.
+              Uncheck rows to exclude from import. Choose the account to import into, then click Import selected.
             </DialogDescription>
           </DialogHeader>
+          {assetAccounts.length > 0 && (
+            <div className="flex items-center gap-2 py-2 border-b">
+              <Label className="shrink-0">Import to account</Label>
+              <Select value={importAccountId || defaultBankAccountId || ''} onValueChange={(v) => setImportAccountId(v)}>
+                <SelectTrigger className="w-[280px]">
+                  <span className="truncate">
+                    {(() => {
+                      const sel = assetAccounts.find((a: { id: string }) => a.id === (importAccountId || defaultBankAccountId));
+                      return sel ? `${sel.code} ${sel.name}` : 'Select account...';
+                    })()}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  {assetAccounts.map((a: { id: string; code: number; name: string }) => (
+                    <SelectItem key={a.id} value={a.id}>{a.code} {a.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
           <div className="flex items-center gap-2 py-2 border-b">
             <Button variant="outline" size="sm" onClick={() => setReviewRows((prev) => prev.map((r) => ({ ...r, selected: true })))}>
               Select all

package/frontend/src/pages/Contacts.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useCustomers, useCreateCustomer, useUpdateCustomer, useDeleteCustomer, type Customer } from '../hooks/useContacts';
 import { useSuppliers, useCreateSupplier, useUpdateSupplier, useDeleteSupplier, type Supplier } from '../hooks/useContacts';
 import { usePayees, useCreatePayee, useUpdatePayee, useDeletePayee, type Payee } from '../hooks/useContacts';
-import { useExpenseCategories as useExpenseCategoriesHook } from '../hooks/useExpenses';
+import { useExpenseCategories as useExpenseCategoriesHook, useExpenseAccounts } from '../hooks/useExpenses';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
@@ -32,6 +32,7 @@ export default function Contacts() {
   const [editing, setEditing] = useState<Customer | Supplier | Payee | null>(null);
   const [form, setForm] = useState(emptyContact);
   const [supplierCategoryId, setSupplierCategoryId] = useState<string | null>(null);
+  const [supplierAccountId, setSupplierAccountId] = useState<string | null>(null);
 
   const { data: customers, isLoading: loadingCustomers } = useCustomers();
   const createCustomer = useCreateCustomer();
@@ -40,6 +41,8 @@ export default function Contacts() {
 
   const { data: suppliers, isLoading: loadingSuppliers } = useSuppliers();
   const { data: categories } = useExpenseCategoriesHook();
+  const { data: expenseAccounts } = useExpenseAccounts();
+  const useAccountForSupplier = expenseAccounts && expenseAccounts.length > 0;
   const createSupplier = useCreateSupplier();
   const updateSupplier = useUpdateSupplier();
   const deleteSupplier = useDeleteSupplier();
@@ -62,9 +65,11 @@ export default function Contacts() {
         notes: editing.notes ?? '',
       });
       setSupplierCategoryId((editing as Supplier).categoryId ?? null);
+      setSupplierAccountId((editing as Supplier).accountId ?? (editing as Supplier).categoryId ?? null);
     } else {
       setForm(emptyContact);
       setSupplierCategoryId(null);
+      setSupplierAccountId(null);
     }
   }, [editing]);
 
@@ -72,6 +77,7 @@ export default function Contacts() {
     setEditing(null);
     setForm(emptyContact);
     setSupplierCategoryId(null);
+    setSupplierAccountId(null);
     setDialogOpen(true);
   };
 
@@ -95,7 +101,9 @@ export default function Contacts() {
           await createCustomer.mutateAsync(form);
         }
       } else if (activeTab === 'supplier') {
-        const body = { ...form, categoryId: supplierCategoryId || undefined };
+        const body = useAccountForSupplier
+          ? { ...form, accountId: supplierAccountId || undefined }
+          : { ...form, categoryId: supplierCategoryId || undefined };
         if (editing?.id) {
           await updateSupplier.mutateAsync({ id: editing.id, ...body });
         } else {
@@ -228,7 +236,7 @@ export default function Contacts() {
                         <TableRow key={row.id}>
                           <TableCell className="font-medium">{row.name}</TableCell>
                           <TableCell>{row.accountNumber || '-'}</TableCell>
-                          <TableCell>{(row as Supplier).categoryName || '-'}</TableCell>
+                          <TableCell>{(row as Supplier).accountName || (row as Supplier).categoryName || '-'}</TableCell>
                           <TableCell>{row.email || '-'}</TableCell>
                           <TableCell>{row.phone || '-'}</TableCell>
                           <TableCell>
@@ -348,20 +356,34 @@ export default function Contacts() {
             </div>
             {activeTab === 'supplier' && (
               <div className="space-y-2">
-                <label className="text-sm font-medium">Default category</label>
-                <Select value={supplierCategoryId ?? ''} onValueChange={(v) => setSupplierCategoryId(v || null)}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Optional" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="">None</SelectItem>
-                    {(categories ?? []).sort((a: { sortOrder?: number }, b: { sortOrder?: number }) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).map((cat: { id: string; name: string }) => (
-                      <SelectItem key={cat.id} value={cat.id}>
-                        {cat.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <label className="text-sm font-medium">{useAccountForSupplier ? 'Default account' : 'Default category'}</label>
+                {useAccountForSupplier ? (
+                  <Select value={supplierAccountId ?? ''} onValueChange={(v) => setSupplierAccountId(v || null)}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Optional" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">None</SelectItem>
+                      {(expenseAccounts ?? []).sort((a: any, b: any) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || (a.code - b.code)).map((acc: any) => (
+                        <SelectItem key={acc.id} value={acc.id}>{acc.code} - {acc.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Select value={supplierCategoryId ?? ''} onValueChange={(v) => setSupplierCategoryId(v || null)}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Optional" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">None</SelectItem>
+                      {(categories ?? []).sort((a: { sortOrder?: number }, b: { sortOrder?: number }) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).map((cat: { id: string; name: string }) => (
+                        <SelectItem key={cat.id} value={cat.id}>
+                          {cat.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
               </div>
             )}
             <div className="space-y-2">