mejoras al formulario de registro organizaciones productivas

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

@@ -0,0 +1,113 @@
+'use client';
+import { AlertModal } from '@/components/modal/alert-modal';
+import { useDeleteTraining } from '@/feactures/training/hooks/use-training';
+import { TrainingSchema } from '@/feactures/training/schemas/training';
+import { Button } from '@repo/shadcn/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@repo/shadcn/tooltip';
+import { Edit, Eye, Trash } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { TrainingViewModal } from '../training-view-modal';
+
+interface CellActionProps {
+  data: TrainingSchema;
+}
+
+export const CellAction: React.FC<CellActionProps> = ({ data }) => {
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [viewOpen, setViewOpen] = useState(false);
+  const { mutate: deleteTraining } = useDeleteTraining();
+  const router = useRouter();
+
+  const onConfirm = async () => {
+    try {
+      setLoading(true);
+      deleteTraining(data.id!);
+      setOpen(false);
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <AlertModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onConfirm={onConfirm}
+        loading={loading}
+        title="¿Estás seguro que desea eliminar este registro?"
+        description="Esta acción no se puede deshacer."
+      />
+
+      <TrainingViewModal
+        isOpen={viewOpen}
+        onClose={() => setViewOpen(false)}
+        data={data}
+      />
+
+      <div className="flex gap-1">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setViewOpen(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Ver detalle</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() =>
+                  router.push(`/dashboard/formulario/editar/${data.id}`)
+                }
+              >
+                <Edit className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Editar</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setOpen(true)}
+              >
+                <Trash className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Eliminar</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,45 @@
+'use client';
+import { TrainingSchema } from '@/feactures/training/schemas/training';
+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>
+      );
+    },
+  },
+  {
+    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} />,
+  },
+];

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button } from '@repo/shadcn/components/ui/button';
+import { DataTableSearch } from '@repo/shadcn/table/data-table-search';
+import { Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useTrainingTableFilters } from './use-training-table-filters';
+
+export default function TrainingTableAction() {
+  const { searchQuery, setPage, setSearchQuery } = useTrainingTableFilters();
+  const router = useRouter();
+  return (
+    <div className="flex items-center justify-between mt-4 ">
+      <div className="flex items-center gap-4 flex-grow">
+        <DataTableSearch
+          searchKey="nombre"
+          searchQuery={searchQuery || ''}
+          setSearchQuery={setSearchQuery}
+          setPage={setPage}
+        />
+      </div>{' '}
+      <Button
+        onClick={() => router.push(`/dashboard/formulario/nuevo`)}
+        size="sm"
+      >
+        <Plus className="h-4 w-4" />
+        Nuevo Registro
+      </Button>
+    </div>
+  );
+}

apps/web/feactures/training/components/training-tables/use-training-table-filters.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { searchParams } from '@repo/shadcn/lib/searchparams';
+import { useQueryState } from 'nuqs';
+import { useCallback, useMemo } from 'react';
+
+export function useTrainingTableFilters() {
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'q',
+    searchParams.q
+      .withOptions({
+        shallow: false,
+        throttleMs: 500,
+      })
+      .withDefault(''),
+  );
+
+  const [page, setPage] = useQueryState(
+    'page',
+    searchParams.page.withDefault(1),
+  );
+
+  const resetFilters = useCallback(() => {
+    setSearchQuery(null);
+    setPage(1);
+  }, [setSearchQuery, setPage]);
+
+  const isAnyFilterActive = useMemo(() => {
+    return !!searchQuery;
+  }, [searchQuery]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    page,
+    setPage,
+    resetFilters,
+    isAnyFilterActive,
+  };
+}