Oleada UX 6: Reportes agrupados en familias con rango global persistente y favoritos; Configuracion con auditoria de cambios y simulador de comisiones

frontend/src/components/reportes/ComisionesReport.tsx

@@ -5,20 +5,15 @@ import { Card, Input, EmptyState, Skeleton, toast } from '../ui';
 import { ExportButton } from '../ui/ExportButton';
 import { exportToExcel } from '../../lib/exporter';
 import { odooApi, type ComisionRow } from '../../services/odoo';
+import { useReportRange } from '../../lib/reportRange';
 
 const formatCurrency = (value: number) =>
   new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 }).format(value);
 
-const inicioDeMes = () => {
-  const d = new Date();
-  d.setDate(1);
-  return d.toISOString().split('T')[0];
-};
-const hoy = () => new Date().toISOString().split('T')[0];
 
 const ComisionesReport: FC = () => {
-  const [start, setStart] = useState(inicioDeMes());
-  const [end, setEnd] = useState(hoy());
+  // Rango global de Reportes; los campos Inicio/Fin fijan uno propio
+  const { start, end, setStart, setEnd } = useReportRange('comisiones');
   const [rows, setRows] = useState<ComisionRow[]>([]);
   const [totales, setTotales] = useState({ vendido: 0, comision: 0 });
   const [loading, setLoading] = useState(true);
@@ -79,6 +74,7 @@ const ComisionesReport: FC = () => {
           <div className="flex flex-col sm:flex-row gap-3 items-end">
             <Input label="Inicio" type="date" value={start} onChange={(e) => setStart(e.target.value)} className="sm:max-w-[160px]" />
             <Input label="Fin" type="date" value={end} onChange={(e) => setEnd(e.target.value)} className="sm:max-w-[160px]" />
+            
             <ExportButton onClick={exportar} loading={exporting} />
           </div>
           <p className="text-sm text-theme-muted">