P2 tail: cuota progress bars, Sync item rows, dialog polish

Financiamientos shows cuota progress as Progress bars; Sincronización
uses a single Card of Item rows; Items Recurrentes table wrapped in a
Card like every other table; both window.confirm sites replaced with
the app's ConfirmDialog.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/pages/Financiamientos.tsx

@@ -9,6 +9,7 @@ import {
 import { formatAmount } from '@/lib/format';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Table,
@@ -30,8 +31,20 @@ function formatDate(iso: string) {
   });
 }
 
-function progressLabel(plan: InstallmentPlan) {
-  return `${String(plan.cuotas_billed).padStart(3, '0')}/${String(plan.num_installments).padStart(3, '0')}`;
+function CuotasProgress({ plan }: { plan: InstallmentPlan }) {
+  const pct = (plan.cuotas_billed / plan.num_installments) * 100;
+  return (
+    <div className="flex items-center gap-2">
+      <Progress
+        value={pct}
+        className="w-16"
+        aria-label={`${plan.cuotas_billed} de ${plan.num_installments} cuotas pagadas`}
+      />
+      <span className="font-mono text-xs text-muted-foreground whitespace-nowrap">
+        {plan.cuotas_billed}/{plan.num_installments}
+      </span>
+    </div>
+  );
 }
 
 export default function Financiamientos() {
@@ -87,7 +100,9 @@ export default function Financiamientos() {
         <TableCell className="text-muted-foreground whitespace-nowrap">
           {formatDate(plan.purchase_date)}
         </TableCell>
-        <TableCell className="font-mono text-xs">{progressLabel(plan)}</TableCell>
+        <TableCell>
+          <CuotasProgress plan={plan} />
+        </TableCell>
         <TableCell className="text-right font-mono" data-sensitive>
           {formatAmount(plan.installment_amount, plan.currency)}
         </TableCell>