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

apps/web/app/dashboard/formulario/page.tsx

@@ -5,6 +5,8 @@ import TrainingTableAction from '@/feactures/training/components/training-tables
 import { searchParamsCache } from '@repo/shadcn/lib/searchparams';
 import { SearchParams } from 'nuqs';
 
+import { env } from '@/lib/env';
+
 export const metadata = {
   title: 'Registro de OSP',
 };
@@ -29,6 +31,7 @@ export default async function Page({ searchParams }: PageProps) {
           initialPage={page}
           initialSearch={searchQuery}
           initialLimit={limit || 10}
+          apiUrl={env.API_URL}
         />
       </div>
     </PageContainer>

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

@@ -1,5 +1,4 @@
 'use client';
-
 import { DataTable } from '@repo/shadcn/table/data-table';
 import { DataTableSkeleton } from '@repo/shadcn/table/data-table-skeleton';
 import { useTrainingQuery } from '../hooks/use-training';
@@ -9,12 +8,14 @@ interface TrainingListProps {
   initialPage: number;
   initialSearch?: string | null;
   initialLimit: number;
+  apiUrl: string;
 }
 
 export default function TrainingList({
   initialPage,
   initialSearch,
   initialLimit,
+  apiUrl,
 }: TrainingListProps) {
   const filters = {
     page: initialPage,
@@ -30,7 +31,7 @@ export default function TrainingList({
 
   return (
     <DataTable
-      columns={columns}
+      columns={columns({ apiUrl })}
       data={data?.data || []}
       totalItems={data?.meta.totalCount || 0}
       pageSizeOptions={[10, 20, 30, 40, 50]}

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} />,
+    },
+  ];
+}

apps/web/feactures/training/components/training-view-modal.tsx

@@ -314,10 +314,10 @@ export function TrainingViewModal({
                     ))}
                     {(!data.equipmentList ||
                       data.equipmentList.length === 0) && (
-                      <p className="text-sm text-muted-foreground italic">
-                        No hay equipamiento registrado.
-                      </p>
-                    )}
+                        <p className="text-sm text-muted-foreground italic">
+                          No hay equipamiento registrado.
+                        </p>
+                      )}
                   </CardContent>
                 </Card>
 
@@ -345,10 +345,10 @@ export function TrainingViewModal({
                     ))}
                     {(!data.productionList ||
                       data.productionList.length === 0) && (
-                      <p className="text-sm text-muted-foreground italic">
-                        No hay materia prima registrada.
-                      </p>
-                    )}
+                        <p className="text-sm text-muted-foreground italic">
+                          No hay materia prima registrada.
+                        </p>
+                      )}
                   </CardContent>
                 </Card>
               </div>
@@ -421,7 +421,7 @@ export function TrainingViewModal({
                     {data.paralysisReason && (
                       <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-900">
                         <p className="text-xs font-bold text-red-600 dark:text-red-400 uppercase mb-1">
-                          Motivo Paralización
+                          Motivo de Paralización
                         </p>
                         <p className="text-sm">{data.paralysisReason}</p>
                       </div>