Exportar OSP en excel con formato especifico (falta img y datos que no estan en el formulario)

apps/web/feactures/training/components/training-tables/cell-action.tsx

@@ -9,16 +9,17 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@repo/shadcn/tooltip';
-import { Edit, Eye, Trash } from 'lucide-react';
+import { Edit, Eye, Trash, FileDown } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { TrainingViewModal } from '../training-view-modal';
 
 interface CellActionProps {
   data: TrainingSchema;
+  apiUrl: string;
 }
 
-export const CellAction: React.FC<CellActionProps> = ({ data }) => {
+export const CellAction: React.FC<CellActionProps> = ({ data, apiUrl }) => {
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [viewOpen, setViewOpen] = useState(false);
@@ -37,6 +38,10 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
     }
   };
 
+  const handleExport = (id?: number | undefined) => {
+    window.open(`${apiUrl}/training/export/${id}`, '_blank');
+  };
+
   return (
     <>
       <AlertModal
@@ -72,6 +77,23 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
           </Tooltip>
         </TooltipProvider>
 
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => handleExport(data.id)}
+              >
+                <FileDown className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Exportar Excel</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>

apps/web/feactures/training/components/training-tables/columns.tsx

@@ -4,42 +4,48 @@ import { Badge } from '@repo/shadcn/badge';
 import { ColumnDef } from '@tanstack/react-table';
 import { CellAction } from './cell-action';
 
-export const columns: ColumnDef<TrainingSchema>[] = [
-  {
-    accessorKey: 'ospName',
-    header: 'Nombre OSP',
-  },
-  {
-    accessorKey: 'ospRif',
-    header: 'RIF',
-  },
-  {
-    accessorKey: 'ospType',
-    header: 'Tipo',
-  },
-  {
-    accessorKey: 'currentStatus',
-    header: 'Estatus',
-    cell: ({ row }) => {
-      const status = row.getValue('currentStatus') as string;
-      return (
-        <Badge variant={status === 'ACTIVA' ? 'default' : 'secondary'}>
-          {status}
-        </Badge>
-      );
+interface ColumnsProps {
+  apiUrl: string;
+}
+
+export function columns({ apiUrl }: ColumnsProps): ColumnDef<TrainingSchema>[] {
+  return [
+    {
+      accessorKey: 'ospName',
+      header: 'Nombre OSP',
     },
-  },
-  {
-    accessorKey: 'visitDate',
-    header: 'Fecha Visita',
-    cell: ({ row }) => {
-      const date = row.getValue('visitDate') as string;
-      return date ? new Date(date).toLocaleString() : 'N/A';
+    {
+      accessorKey: 'ospRif',
+      header: 'RIF',
     },
-  },
-  {
-    id: 'actions',
-    header: 'Acciones',
-    cell: ({ row }) => <CellAction data={row.original} />,
-  },
-];
+    {
+      accessorKey: 'ospType',
+      header: 'Tipo',
+    },
+    {
+      accessorKey: 'currentStatus',
+      header: 'Estatus',
+      cell: ({ row }) => {
+        const status = row.getValue('currentStatus') as string;
+        return (
+          <Badge variant={status === 'ACTIVA' ? 'default' : 'secondary'}>
+            {status}
+          </Badge>
+        );
+      },
+    },
+    {
+      accessorKey: 'visitDate',
+      header: 'Fecha Visita',
+      cell: ({ row }) => {
+        const date = row.getValue('visitDate') as string;
+        return date ? new Date(date).toLocaleString() : 'N/A';
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Acciones',
+      cell: ({ row }) => <CellAction data={row.original} apiUrl={apiUrl} />,
+    },
+  ];
+}