Exportar datos de osp de la db en un excel

apps/web/feactures/training/components/training-statistics.tsx

@@ -37,6 +37,8 @@ import {
   YAxis,
 } from 'recharts';
 import { useTrainingStatsQuery } from '../hooks/use-training-statistics';
+import { exportTrainingAction } from '../actions/training-actions';
+import { Download } from 'lucide-react';
 
 const OSP_TYPES = [
   'EPSD',
@@ -89,6 +91,38 @@ export function TrainingStatistics() {
     setOspType('');
   };
 
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = async () => {
+    try {
+      setIsExporting(true);
+      const bytes = await exportTrainingAction({
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+        stateId: stateId || undefined,
+        municipalityId: municipalityId || undefined,
+        parishId: parishId || undefined,
+        ospType: ospType || undefined,
+      });
+
+      const blob = new Blob([new Uint8Array(bytes)], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `entrenamientos_${new Date().toISOString().split('T')[0]}.xlsx`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Error exporting:', error);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="flex justify-center p-8">Cargando estadísticas...</div>
@@ -216,10 +250,19 @@ export function TrainingStatistics() {
                 </SelectContent>
               </Select>
             </div>
-            <div className="flex items-end">
+            <div className="flex items-end gap-2">
               <Button variant="outline" onClick={handleClearFilters}>
                 Limpiar Filtros
               </Button>
+              <Button
+                variant="default"
+                onClick={handleExport}
+                disabled={isExporting}
+                className="bg-green-600 hover:bg-green-700"
+              >
+                <Download className="mr-2 h-4 w-4" />
+                {isExporting ? 'Exportando...' : 'Exportar Excel'}
+              </Button>
             </div>
           </div>
         </CardContent>