el-contador 1.2.7 → 1.2.8

package/README.md

@@ -65,6 +65,8 @@ The app is built to run behind a reverse proxy (`trust proxy` is enabled). To se
    server {
        listen 80;
        server_name contador.example.com;
+       # Allow batch expense import (e.g. 30 files × 1MB)
+       client_max_body_size 35M;
 
        location / {
            proxy_pass http://127.0.0.1:3080;

package/frontend/src/App.tsx

@@ -8,6 +8,7 @@ import Expenses from './pages/Expenses';
 import Sales from './pages/Sales';
 import Bank from './pages/Bank';
 import Reconciliation from './pages/Reconciliation';
+import AccountLedger from './pages/AccountLedger';
 import Contacts from './pages/Contacts';
 import Settings from './pages/Settings';
 
@@ -33,6 +34,7 @@ function App() {
               <Route path="sales" element={<Sales />} />
               <Route path="bank" element={<Bank />} />
               <Route path="reconciliation" element={<Reconciliation />} />
+              <Route path="accounts/:id" element={<AccountLedger />} />
               <Route path="contacts" element={<Contacts />} />
               <Route path="settings" element={<Settings />} />
             </Route>

package/frontend/src/hooks/useSettings.ts

@@ -38,7 +38,7 @@ export function useUploadLogo() {
   });
 }
 
-// Integrations
+// Integrations (payments)
 export function useIntegrationsSettings() {
   return useQuery({
     queryKey: ['integrations'],

package/frontend/src/index.css

@@ -37,11 +37,11 @@
     --chart-revenue: #42d4a6;
     --chart-expenses: #f13f66;
     /* Reconciliation match block */
-    --reconciliation-match-bg: #eff6ff;
-    --reconciliation-match-border: lch(88.74% 26.13 221.7);
+    --reconciliation-match-bg: #edeebb;
+    --reconciliation-match-border: #dbdfae;
     --reconciliation-match-muted-bg: rgba(239, 246, 255, 0.6);
-    --reconciliation-selected-bg: #eff6ff;
-    --reconciliation-selected-hover: #dbeafe;
+    --reconciliation-selected-bg: #96c4b1;
+    --reconciliation-selected-hover: #c2f5db;
     --radius: 0.625rem;
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);

package/frontend/src/layouts/ProtectedLayout.tsx

@@ -62,33 +62,33 @@ export default function ProtectedLayout() {
   );
 
   const sidebarContent = (
-    <>
-      <div className="p-4 flex items-center min-h-[7rem]">
+    <div className="flex flex-col h-full min-h-0">
+      <div className="p-4 flex items-center min-h-[7rem] shrink-0">
         {logoUrl ? (
           <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}
       </div>
-      <nav className="flex-1 px-2 py-4 space-y-1">
+      <nav className="flex-1 px-2 py-4 space-y-1 overflow-y-auto min-h-0">
         {navLinks}
       </nav>
-      <div className="p-4 border-t border-slate-800">
+      <div className="p-4 border-t border-slate-800 shrink-0 mt-auto">
         <div className="flex items-center gap-3 mb-4">
           <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center">
             <Users size={16} />
           </div>
-          <div className="text-sm">
-            <div className="font-medium text-white">{user.name || 'User'}</div>
+          <div className="text-sm min-w-0">
+            <div className="font-medium text-white truncate">{user.name || 'User'}</div>
             <div className="text-xs text-slate-400 capitalize">{user.role}</div>
           </div>
         </div>
         <Button variant="outline" className="w-full justify-start text-slate-800 bg-white" onClick={() => { setMobileNavOpen(false); logout(); }}>
-          <LogOut className="mr-2 h-4 w-4" />
+          <LogOut className="mr-2 h-4 w-4 shrink-0" />
           Log out
         </Button>
       </div>
-    </>
+    </div>
   );
 
   return (
@@ -113,8 +113,8 @@ export default function ProtectedLayout() {
         ) : null}
       </header>
 
-      {/* Desktop: sidebar */}
-      <aside className="hidden md:flex w-64 bg-slate-900 text-slate-300 flex-col shrink-0">
+      {/* Desktop: sidebar - user and logout pinned to bottom */}
+      <aside className="hidden md:flex w-64 bg-slate-900 text-slate-300 flex-col shrink-0 h-screen sticky top-0">
         {sidebarContent}
       </aside>
 

package/frontend/src/pages/AccountLedger.tsx

@@ -0,0 +1,483 @@
+import { useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Skeleton } from '@/components/ui/skeleton';
+import { api } from '@/lib/api';
+import { formatYyMmDd } from '@/lib/date';
+import { ArrowLeft, Plus, Pencil, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+const currentYear = new Date().getFullYear();
+const YEARS = Array.from({ length: 10 }, (_, i) => currentYear - 5 + i);
+
+export default function AccountLedger() {
+  const { id } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+  const [year, setYear] = useState<string>('all');
+  const [quarter, setQuarter] = useState<string>('all');
+  const [month, setMonth] = useState<string>('all');
+  const [ytd, setYtd] = useState(false);
+  const [newTxOpen, setNewTxOpen] = useState(false);
+  const [newTxDirection, setNewTxDirection] = useState<'pay_to' | 'pay_from'>('pay_to');
+  const [newTxCounterAccountId, setNewTxCounterAccountId] = useState('');
+  const [newTxAmount, setNewTxAmount] = useState('');
+  const [newTxDate, setNewTxDate] = useState(() => new Date().toISOString().slice(0, 10));
+  const [newTxDescription, setNewTxDescription] = useState('');
+  const [editEntryId, setEditEntryId] = useState<string | null>(null);
+  const [editDate, setEditDate] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [deleteEntryId, setDeleteEntryId] = useState<string | null>(null);
+
+  const { data: account, isLoading: accountLoading } = useQuery({
+    queryKey: ['account', id],
+    queryFn: async () => {
+      const { data } = await api.get(`/accounts/${id}`);
+      return data;
+    },
+    enabled: !!id,
+  });
+
+  const ledgerParams = new URLSearchParams();
+  if (year && year !== 'all') ledgerParams.set('year', year);
+  if (quarter && quarter !== 'all') ledgerParams.set('quarter', quarter);
+  if (month && month !== 'all') ledgerParams.set('month', month);
+  if (ytd && year === String(currentYear)) ledgerParams.set('ytd', '1');
+
+  const { data: ledgerData, isLoading: ledgerLoading } = useQuery({
+    queryKey: ['account-ledger', id, year, quarter, month, ytd],
+    queryFn: async () => {
+      const { data } = await api.get(`/accounts/${id}/ledger?${ledgerParams.toString()}`);
+      return data;
+    },
+    enabled: !!id,
+  });
+
+  const { data: accounts } = useQuery({
+    queryKey: ['accounts', 'all'],
+    queryFn: async () => {
+      const { data } = await api.get('/accounts/all');
+      return data;
+    },
+  });
+
+  const createManualMutation = useMutation({
+    mutationFn: async (body: {
+      accountId: string;
+      counterAccountId: string;
+      amount: number;
+      date: string;
+      description?: string;
+      direction: 'pay_to' | 'pay_from';
+    }) => {
+      const { data } = await api.post('/journal/manual', body);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['account-ledger', id] });
+      setNewTxOpen(false);
+      setNewTxAmount('');
+      setNewTxDescription('');
+      toast.success('Transaction created');
+    },
+    onError: (err: any) => {
+      toast.error(err.response?.data?.error || 'Failed to create transaction');
+    },
+  });
+
+  const updateEntryMutation = useMutation({
+    mutationFn: async ({ entryId, date, description }: { entryId: string; date: string; description: string }) => {
+      await api.patch(`/journal/entries/${entryId}`, { date, description });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['account-ledger', id] });
+      setEditEntryId(null);
+      toast.success('Transaction updated');
+    },
+    onError: (err: any) => {
+      toast.error(err.response?.data?.error || 'Failed to update transaction');
+    },
+  });
+
+  const deleteEntryMutation = useMutation({
+    mutationFn: async (entryId: string) => {
+      await api.delete(`/journal/entries/${entryId}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['account-ledger', id] });
+      setDeleteEntryId(null);
+      toast.success('Transaction deleted');
+    },
+    onError: (err: any) => {
+      toast.error(err.response?.data?.error || 'Failed to delete transaction');
+    },
+  });
+
+  const lines = ledgerData?.lines || [];
+  const periodSum = Number(ledgerData?.periodSum ?? 0);
+  let runningBalance = 0;
+  const rows = lines.map((line: any) => {
+    const debit = line.debitAmount || 0;
+    const credit = line.creditAmount || 0;
+    runningBalance += debit - credit;
+    return { ...line, runningBalance };
+  });
+
+  const otherAccounts = (accounts || []).filter((a: any) => String(a.id) !== String(id));
+
+  const handleCreateTransaction = (e: React.FormEvent) => {
+    e.preventDefault();
+    const amt = parseFloat(newTxAmount);
+    if (!id || !newTxCounterAccountId || Number.isNaN(amt) || amt <= 0 || !newTxDate) {
+      toast.error('Fill in amount, date and counter account');
+      return;
+    }
+    createManualMutation.mutate({
+      accountId: id,
+      counterAccountId: newTxCounterAccountId,
+      amount: amt,
+      date: newTxDate,
+      description: newTxDescription.trim() || undefined,
+      direction: newTxDirection,
+    });
+  };
+
+  const handleOpenEdit = (row: { journalEntryId: string; date: string; description?: string | null }) => {
+    setEditEntryId(row.journalEntryId);
+    setEditDate(String(row.date).slice(0, 10));
+    setEditDescription(row.description || '');
+  };
+
+  const handleSaveEdit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editEntryId || !editDate) return;
+    updateEntryMutation.mutate({
+      entryId: editEntryId,
+      date: editDate,
+      description: editDescription.trim(),
+    });
+  };
+
+  const handleDeleteConfirm = () => {
+    if (deleteEntryId) deleteEntryMutation.mutate(deleteEntryId);
+  };
+
+  if (accountLoading || !id) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!account) {
+    return (
+      <div>
+        <p className="text-muted-foreground">Account not found.</p>
+        <Link to="/settings"><Button variant="link" type="button">Back to Settings</Button></Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <Link to="/settings">
+            <Button variant="ghost" size="icon" type="button">
+              <ArrowLeft className="w-4 h-4" />
+            </Button>
+          </Link>
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">
+              {account.name} ({account.code})
+            </h2>
+            <p className="text-sm text-muted-foreground">{account.accountGroupName}</p>
+          </div>
+        </div>
+        <Button onClick={() => setNewTxOpen(true)}>
+          <Plus className="w-4 h-4 mr-2" /> New transaction
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-4">
+          <div className="space-y-1">
+            <CardTitle>Ledger</CardTitle>
+            <p className="text-sm text-muted-foreground">Fiscal periods: year from 1 Jan; use Year to date for current year (1 Jan to today).</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Select value={year} onValueChange={(v) => setYear(v ?? 'all')}>
+              <SelectTrigger className="w-24">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All (historic)</SelectItem>
+                {YEARS.map((y) => (
+                  <SelectItem key={y} value={String(y)}>{y}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {year && year !== 'all' && year === String(currentYear) && (
+              <label className="flex items-center gap-2 text-sm whitespace-nowrap">
+                <input
+                  type="checkbox"
+                  checked={ytd}
+                  onChange={(e) => setYtd(e.target.checked)}
+                  className="rounded border-input"
+                />
+                Year to date
+              </label>
+            )}
+            {year && year !== 'all' && (
+              <>
+                <Select value={quarter} onValueChange={(v) => setQuarter(v ?? 'all')}>
+                  <SelectTrigger className="w-28">
+                    <SelectValue placeholder="Quarter" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All</SelectItem>
+                    {[1, 2, 3, 4].map((q) => (
+                      <SelectItem key={q} value={String(q)}>Q{q}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Select value={month} onValueChange={(v) => setMonth(v ?? 'all')}>
+                  <SelectTrigger className="w-28">
+                    <SelectValue placeholder="Month" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All</SelectItem>
+                    {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
+                      <SelectItem key={m} value={String(m)}>{new Date(2000, m - 1, 1).toLocaleString('default', { month: 'short' })}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {ledgerLoading ? (
+            <Skeleton className="h-48 w-full" />
+          ) : (
+            <>
+              {rows.length > 0 && (
+                <p className="text-sm font-medium mb-2">
+                  Period total: €{periodSum.toFixed(2)}
+                </p>
+              )}
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-28">Date</TableHead>
+                    <TableHead>Description</TableHead>
+                    <TableHead className="w-28 text-right">Debit</TableHead>
+                    <TableHead className="w-28 text-right">Credit</TableHead>
+                    <TableHead className="w-28 text-right">Balance</TableHead>
+                    <TableHead className="w-24">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {rows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
+                        No transactions in this period.
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    rows.map((row: any) => (
+                      <TableRow key={row.lineId}>
+                        <TableCell className="whitespace-nowrap">{formatYyMmDd(row.date)}</TableCell>
+                        <TableCell className="min-w-0 max-w-xs truncate" title={row.description || undefined}>
+                          {row.description || '\u2014'}
+                        </TableCell>
+                        <TableCell className="text-right font-mono">
+                          {row.debitAmount > 0 ? '€' + row.debitAmount.toFixed(2) : '\u2014'}
+                        </TableCell>
+                        <TableCell className="text-right font-mono">
+                          {row.creditAmount > 0 ? '€' + row.creditAmount.toFixed(2) : '\u2014'}
+                        </TableCell>
+                        <TableCell className="text-right font-mono">
+                          €{row.runningBalance.toFixed(2)}
+                        </TableCell>
+                        <TableCell className="w-24">
+                          {row.sourceRefType === 'manual' ? (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                                onClick={() => handleOpenEdit(row)}
+                                title="Edit"
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-destructive hover:text-destructive"
+                                onClick={() => setDeleteEntryId(row.journalEntryId)}
+                                title="Delete"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          ) : (
+                            '\u2014'
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={newTxOpen} onOpenChange={setNewTxOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New transaction</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleCreateTransaction} className="space-y-4">
+            <div>
+              <Label>Direction</Label>
+              <Select value={newTxDirection} onValueChange={(v) => v && setNewTxDirection(v as 'pay_to' | 'pay_from')}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="pay_to">Pay to this account</SelectItem>
+                  <SelectItem value="pay_from">Pay from this account</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label>Counter account *</Label>
+              <Select value={newTxCounterAccountId} onValueChange={(v) => setNewTxCounterAccountId(v ?? '')} required>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select account">
+                    {newTxCounterAccountId
+                      ? (() => {
+                          const sel = otherAccounts.find((a: any) => String(a.id) === String(newTxCounterAccountId));
+                          return sel ? `${sel.code} ${sel.name}` : null;
+                        })()
+                      : null}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {otherAccounts.map((a: any) => (
+                    <SelectItem key={a.id} value={a.id}>
+                      {a.code} {a.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label>Amount *</Label>
+              <Input
+                type="number"
+                step="0.01"
+                min="0.01"
+                value={newTxAmount}
+                onChange={(e) => setNewTxAmount(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label>Date *</Label>
+              <Input type="date" value={newTxDate} onChange={(e) => setNewTxDate(e.target.value)} required />
+            </div>
+            <div>
+              <Label>Description</Label>
+              <Input
+                value={newTxDescription}
+                onChange={(e) => setNewTxDescription(e.target.value)}
+                placeholder="Optional"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="outline" onClick={() => setNewTxOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={createManualMutation.isPending}>
+                Create
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={!!editEntryId} onOpenChange={(open) => !open && setEditEntryId(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit transaction</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSaveEdit} className="space-y-4">
+            <div>
+              <Label>Date *</Label>
+              <Input
+                type="date"
+                value={editDate}
+                onChange={(e) => setEditDate(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label>Description</Label>
+              <Input
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                placeholder="Optional"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="outline" onClick={() => setEditEntryId(null)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={updateEntryMutation.isPending}>
+                Save
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={!!deleteEntryId} onOpenChange={(open: boolean) => !open && setDeleteEntryId(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete transaction</DialogTitle>
+            <p className="text-sm text-muted-foreground">
+              This will permanently delete this manual journal entry. This action cannot be undone.
+            </p>
+          </DialogHeader>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="outline" onClick={() => setDeleteEntryId(null)}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+            >
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/frontend/src/pages/Expenses.tsx

@@ -695,7 +695,10 @@ export default function Expenses() {
           {batchStep === 1 && (
             <div className="space-y-4 py-2">
               <p className="text-sm text-muted-foreground">
-                Select invoice files from your computer (PDF, JPG, PNG, WebP, GIF). They will be copied temporarily and processed with AI extraction.
+                Select invoice files from your computer (PDF, JPG, PNG, WebP, GIF). Max 1MB per file. They will be copied temporarily and processed with AI extraction.
+              </p>
+              <p className="text-xs text-muted-foreground">
+                If upload fails with many files (413), the web server in front of this app often has a 1MB total request limit. An administrator must raise it to at least 35M for this domain (nginx: client_max_body_size 35M; Apache: LimitRequestBody 36700160).
               </p>
               <div className="flex flex-col gap-2">
                 <Input
@@ -724,7 +727,12 @@ export default function Expenses() {
                       setSupplierMappings(initial);
                       setBatchStep(2);
                     } catch (err: any) {
-                      setBatchUploadError(err.response?.data?.error || err.message || 'Upload failed');
+                      const status = err.response?.status;
+                      if (status === 413) {
+                        setBatchUploadError('Request too large. The web server (proxy) in front of this app is rejecting the request—it often has a 1MB total limit, so many small files can trigger this. An administrator must raise the limit for this domain: nginx use client_max_body_size 35M; Apache use LimitRequestBody 36700160. Then try again.');
+                      } else {
+                        setBatchUploadError(err.response?.data?.error || err.message || 'Upload failed');
+                      }
                     } finally {
                       setBatchUploading(false);
                     }
@@ -748,7 +756,7 @@ export default function Expenses() {
                   <div key={vendor} className="flex flex-wrap items-end gap-2 p-2 border rounded">
                     <span className="font-medium w-full text-sm text-muted-foreground">{vendor}</span>
                     <Select
-                      value={supplierMappings[vendor]?.type === 'existing' ? (supplierMappings[vendor] as { type: 'existing'; supplierId: string }).supplierId : 'new'}
+                      value={supplierMappings[vendor]?.type === 'existing' ? String((supplierMappings[vendor] as { type: 'existing'; supplierId: string }).supplierId) : 'new'}
                       onValueChange={(val) => {
                         if (val === 'new' || !val) {
                           setSupplierMappings((m) => ({ ...m, [vendor]: { type: 'new', name: vendor, categoryId: null } }));
@@ -763,7 +771,7 @@ export default function Expenses() {
                       <SelectContent>
                         <SelectItem value="new">Create new supplier</SelectItem>
                         {(suppliers || []).map((s) => (
-                          <SelectItem key={s.id} value={s.id}>
+                          <SelectItem key={String(s.id)} value={String(s.id)}>
                             {s.name}
                             {s.categoryName ? ` (${s.categoryName})` : ''}
                           </SelectItem>