[MVPTN-1] feat(CRUD): Finalização do CRUD de cadastro de Tipos de Reconhecimentos

src/app/(protected)/(cadastros)/cadastros/(t_tb_reconhecimentotipo)/reconhecimentos/page.tsx

@@ -1,139 +1,174 @@
-'use client'
+'use client';
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
+import { useEffect, useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { PlusIcon } from "lucide-react";
 
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
+import Loading from "@/app/_components/loading/loading";
+import TTBAndamentoServicoTable from "../../_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoTable";
+import TTBAndamentoServicoForm from "../../_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoForm";
 
-import { Input } from "@/components/ui/input"
-import { Card, CardContent } from "@/components/ui/card"
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
-import { useTTBReconhecimentoTipoReadHooks } from "../../_hooks/t_tb_reocnhecimentotipo/useTTBReconhecimentoTipoReadHooks"
-import { useEffect, useState } from "react"
-import ITTTBReconhecimentoTipo from "../../_interfaces/TTBReconhecimentoTipoInterface"
-import Loading from "@/app/_components/loading/loading"
-import { Button } from "@/components/ui/button"
-import { useTTBReconhecimentoTipoSaveHooks } from "../../_hooks/t_tb_reocnhecimentotipo/useTTBReconhecimentoTipoSaveHooks"
-import { Controller, useForm } from "react-hook-form"
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "@/components/ui/form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { TTBReconhecimentoTipoSchema } from "../../_schemas/TTBReconhecimentoTipoSchema"
-import z from "zod"
-import { Label } from "@/components/ui/label"
-import { Checkbox } from "@/components/ui/checkbox"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu"
-import { EllipsisIcon, PencilIcon, PlusIcon, Trash2 } from "lucide-react"
+import { useTTBReconhecimentoTipoReadHook } from "../../_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoReadHook";
+import { useTTBReconhecimentoTipoSaveHook } from "../../_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoSaveHook";
+import { useTTBReconhecimentoTipoDeleteHook } from "../../_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoDeleteHook";
 
-type FormValues = z.infer<typeof TTBReconhecimentoTipoSchema>
+import ConfirmDialog from "@/app/_components/confirm_dialog/ConfirmDialog";
+import { useConfirmDialog } from "@/app/_components/confirm_dialog/useConfirmDialog";
 
-export default function TTBReconhecimentoTipoPage() {
-    const { reconhecimentosTipos, fetchReconhecimentosTipos, addReconhecimentoTipo } = useTTBReconhecimentoTipoReadHooks()
-    const { reconhecimentoTipo, saveReconhecimentoTipo } = useTTBReconhecimentoTipoSaveHooks()
+import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
+import TTBReconhecimentoTipoFormProps from "../../_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoForm";
 
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [editingItem, setEditingItem] = useState<FormValues | null>(null);
+export default function TTBAndamentoServico() {
 
-    const [alertDialogOpen, setAlertDialogOpen] = useState(false);
-    const [item, setItem] = useState<any>(null);
+    // Hooks para leitura e salvamento
+    const { tTBReconhecimentosTipos, fetchTTBReconhecimentosTipos } = useTTBReconhecimentoTipoReadHook();
+    const { saveTTBReconhecimentoTipo } = useTTBReconhecimentoTipoSaveHook();
+    const { deleteTTBReconhecimentoTipo } = useTTBReconhecimentoTipoDeleteHook();
 
+    // Estados
+    const [selectedReconhecimentoTipo, setReconhecimentoTipo] = useState<TTBReconhecimentoTipoInterface | null>(null);
+    const [isFormOpen, setIsFormOpen] = useState(false);
+
+    // Estado para saber qual item será deletado
+    const [itemToDelete, setItemToDelete] = useState<TTBReconhecimentoTipoInterface | null>(null);
+
+    /**
+     * Hook do modal de confirmação
+     */
+    const {
+        isOpen: isConfirmOpen,
+        openDialog: openConfirmDialog,
+        handleConfirm,
+        handleCancel,
+    } = useConfirmDialog();
+
+    /**
+     * Abre o formulário no modo de edição ou criação
+     */
+    const handleOpenForm = useCallback((data: TTBReconhecimentoTipoInterface | null) => {
+        setReconhecimentoTipo(data);
+        setIsFormOpen(true);
+    }, []);
+
+    /**
+     * Fecha o formulário e limpa o andamento selecionado
+     */
+    const handleCloseForm = useCallback(() => {
+        setReconhecimentoTipo(null);
+        setIsFormOpen(false);
+    }, []);
+
+    /**
+     * Salva os dados do formulário
+     */
+    const handleSave = useCallback(async (formData: TTBReconhecimentoTipoInterface) => {
+
+        // Aguarda salvar o registro
+        await saveTTBReconhecimentoTipo(formData);
+
+        // Encerra o fomulário
+        handleCloseForm();
+
+        // Atualiza a lista de dados
+        fetchTTBReconhecimentosTipos();
+
+    }, [saveTTBReconhecimentoTipo, fetchTTBReconhecimentosTipos, handleCloseForm]);
+
+    /**
+     * Quando o usuário clica em "remover" na tabela
+     */
+    const handleConfirmDelete = useCallback((item: TTBReconhecimentoTipoInterface) => {
+
+        // Define o item atual para remoção
+        setItemToDelete(item);
+
+        // Abre o modal de confirmação
+        openConfirmDialog();
+
+    }, [openConfirmDialog]);
+
+    /**
+     * Executa a exclusão de fato quando o usuário confirma
+     */
+    const handleDelete = useCallback(async () => {
+
+        // Executa o Hook de remoção
+        await deleteTTBReconhecimentoTipo(itemToDelete);
+
+        // Atualiza a lista
+        await fetchTTBReconhecimentosTipos();
+
+        // Limpa o item selecionado
+        setItemToDelete(null);
+
+        // Fecha o modal
+        handleCancel();
+
+    }, [itemToDelete, fetchTTBReconhecimentosTipos, handleCancel]);
+
+    /**
+     * Busca inicial dos dados
+     */
     useEffect(() => {
-        fetchReconhecimentosTipos()
-    }, [])
+        fetchTTBReconhecimentosTipos();
+    }, []);
 
-    const form = useForm<FormValues>({
-        resolver: zodResolver(TTBReconhecimentoTipoSchema),
-        defaultValues: {
-            tb_reconhecimentotipo_id: 0,
-            descricao: "",
-            situacao: "I",
-        },
-    })
-
-    async function onSubmit(values: FormValues) {
-        const saved = await saveReconhecimentoTipo(values); // aguarda o retorno
-        addReconhecimentoTipo(saved); // adiciona diretamente na lista
-
-        // reinicia o formulário para o estado original
-        form.reset();
+    /**
+     * Tela de loading enquanto carrega os dados
+     */
+    if (!tTBReconhecimentosTipos) {
+        return <Loading type={2} />;
     }
 
-    async function openForm(values: FormValues) {
-        setEditingItem(values);      // guarda os valores do item
-        setDialogOpen(true);         // abre o Dialog
-        form.reset({
-            tb_reconhecimentotipo_id: values.tb_reconhecimentotipo_id,
-            descricao: values.descricao,
-            situacao: values.situacao,
-        });
-
-    }
-
-    async function handlingConfirmation(visibility : boolean, item: null|any) {
-        setAlertDialogOpen(visibility);
-        setItem(item);
-    }
-
-    const emptyForm: FormValues = {
-        tb_reconhecimentotipo_id: 0,
-        descricao: "",
-        situacao: "I", // padrão Inativo
-    };
-
-    if (!reconhecimentosTipos) return <Loading type={2} />
-
     return (
-
         <div>
-            <div className="flex">
-                <div className="w-64 flex-1">
-                    <div className="text-4xl font-semibold mb-1">
-                        Tipos de Reconhecimentos
-                    </div>
-                    <div className="text-base text-muted-foreground">
+            {/* Cabeçalho */}
+            <div className="flex items-center justify-between mb-4">
+                <div>
+                    <h1 className="text-4xl font-semibold mb-1">
+                        Reconhecimentos
+                    </h1>
+                    <p className="text-base text-muted-foreground">
                         Gerenciamento de tipos de reconhecimentos
-                    </div>
-                </div>
-
-                <div className="w-64 flex-1 text-end">
-                    <Button onClick={() => { openForm(emptyForm) }} className="cursor-pointer">
-                        <PlusIcon />Tipos
-                    </Button>
+                    </p>
                 </div>
+                <Button onClick={() => handleOpenForm(null)} className="cursor-pointer">
+                    <PlusIcon className="mr-2" />
+                    Novo Tipo
+                </Button>
             </div>
 
+            {/* Tabela de andamentos */}
+            <Card>
+                <CardContent>
+                    <TTBAndamentoServicoTable
+                        data={tTBReconhecimentosTipos}
+                        onEdit={handleOpenForm}
+                        onDelete={handleConfirmDelete}
+                    />
+                </CardContent>
+            </Card>
+
+            {/* Modal de confirmação */}
+            <ConfirmDialog
+                isOpen={isConfirmOpen}
+                title="Confirmar exclusão"
+                description="Atenção"
+                message={`Deseja realmente excluir o andamento "${itemToDelete?.descricao}"?`}
+                confirmText="Sim, excluir"
+                cancelText="Cancelar"
+                onConfirm={handleDelete}
+                onCancel={handleCancel}
+            />
+
+            {/* Formulário de criação/edição */}
+            <TTBReconhecimentoTipoFormProps
+                isOpen={isFormOpen}
+                data={selectedReconhecimentoTipo}
+                onClose={handleCloseForm}
+                onSave={handleSave}
+            />
         </div>
-    )
-}
+    );
+}

src/app/(protected)/(cadastros)/cadastros/_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoAlert.tsx

@@ -1,28 +0,0 @@
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-
-export default function TTBReconhecimentoTipoAlert() {
-
-    return (
-        <AlertDialog open={alertDialogOpen}>
-            <AlertDialogContent>
-                <AlertDialogHeader>
-                    <AlertDialogTitle>
-                        #{item?.tb_reconhecimentotipo_id} - {item?.descricao}
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                        Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro e seus dados dos nossos servidores.
-                    </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                    <AlertDialogCancel onClick={() => handlingConfirmation(false, null)} className="cursor-pointer">
-                        Cancelar
-                    </AlertDialogCancel>
-                    <AlertDialogAction className="cursor-pointer">
-                        Continuar
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
-    );
-
-}

src/app/(protected)/(cadastros)/cadastros/_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoForm.tsx

@@ -1,74 +1,126 @@
+'use client';
+
+import z from "zod";
+import { useEffect } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "@/components/ui/dialog";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Controller, Form } from "react-hook-form";
 
-export default function TTBReconhecimentoTipoForm() {
+import { TTBReconhecimentoTipoSchema } from "../../_schemas/TTBReconhecimentoTipoSchema";
+
+type FormValues = z.infer<typeof TTBReconhecimentoTipoSchema>;
+
+interface TTBReconhecimentoTipoFormProps {
+    isOpen: boolean;
+    data: FormValues | null;
+    onClose: (item: null, isFormStatus: boolean) => void;
+    onSave: (data: FormValues) => void;
+}
+
+export default function TTBReconhecimentoTipoFormProps({ isOpen, data, onClose, onSave }: TTBReconhecimentoTipoFormProps) {
+    // Inicializa o react-hook-form com schema zod
+    const form = useForm<FormValues>({
+        resolver: zodResolver(TTBReconhecimentoTipoSchema),
+        defaultValues: {
+            tb_reconhecimentotipo_id: 0,
+            descricao: "",
+            situacao: "A",
+        },
+    });
+
+    // Atualiza o formulário quando recebe dados para edição
+    useEffect(() => {
+        if (data) form.reset(data);
+    }, [data, form]);
 
     return (
-        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-            {/* Formulário dentro do Dialog */}
-            <Form {...form}>
-                <form
-                    onSubmit={form.handleSubmit(onSubmit)}
-                    className="space-y-8"
-                >
-                    <DialogContent className="sm:max-w-[425px]">
-                        <Form {...form}>
-                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-                                <DialogHeader>
-                                    <DialogTitle>Tipos de Reconhecimentos</DialogTitle>
-                                    <DialogDescription>
-                                        Tipos de reconhecimentos são usados na tela de balcão
-                                    </DialogDescription>
-                                </DialogHeader>
-                                <FormField
-                                    control={form.control}
-                                    name="descricao"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>Descrição</FormLabel>
-                                            <FormControl>
-                                                <Input placeholder="Digite a descrição" {...field} />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
+        <Dialog
+            open={isOpen}
+            onOpenChange={(open) => {
+                if (!open) onClose(null, false);
+            }}
+        >
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        Reconhecimentos
+                    </DialogTitle>
+                    <DialogDescription>
+                        Tipos de Reconhecimentos
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSave)} className="space-y-6">
+
+                        {/* Descrição */}
+                        <FormField
+                            control={form.control}
+                            name="descricao"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Descrição</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} placeholder="Digite a descrição" />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        {/* Situação */}
+                        <Controller
+                            name="situacao"
+                            control={form.control}
+                            render={({ field }) => (
                                 <div className="flex items-center space-x-2">
-                                    <Controller
-                                        name="situacao"
-                                        control={form.control}
-                                        render={({ field }) => (
-                                            <Checkbox
-                                                checked={field.value === "A"}
-                                                onCheckedChange={(checked) => field.onChange(checked ? "A" : "I")}
-                                            />
-                                        )}
+                                    <Checkbox
+                                        checked={field.value === "A"}
+                                        onCheckedChange={(checked) => field.onChange(checked ? "A" : "I")}
                                     />
-                                    <Label>
-                                        Ativo
-                                    </Label>
+                                    <Label>Ativo</Label>
                                 </div>
-                                <DialogFooter>
-                                    <DialogClose asChild>
-                                        <Button variant="outline" type="button" className="cursor-pointer">
-                                            Cancelar
-                                        </Button>
-                                    </DialogClose>
-                                    <Button type="submit" className="cursor-pointer">
-                                        Salvar
-                                    </Button>
-                                </DialogFooter>
-                                <input type="hidden" {...form.register("tb_reconhecimentotipo_id")} />
-                            </form>
-                        </Form>
-                    </DialogContent>
-                </form>
-            </Form>
+                            )}
+                        />
+
+                        {/* Rodapé do Dialog */}
+                        <DialogFooter className="mt-4">
+                            <DialogClose asChild>
+                                <Button variant="outline" type="button" onClick={() => onClose(null, false)} className="cursor-pointer">
+                                    Cancelar
+                                </Button>
+                            </DialogClose>
+                            <Button type="submit" className="cursor-pointer">
+                                Salvar
+                            </Button>
+                        </DialogFooter>
+
+                        {/* Campo oculto */}
+                        <input type="hidden" {...form.register("tb_reconhecimentotipo_id")} />
+                    </form>
+                </Form>
+            </DialogContent>
         </Dialog>
     );
-
-}
+}

src/app/(protected)/(cadastros)/cadastros/_components/t_tb_reconhecimentotipo/TTBReconhecimentoTipoTable.tsx

@@ -1,85 +1,124 @@
+'use client';
+
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { EllipsisIcon, PencilIcon, Trash2 } from "lucide-react";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+
+import { EllipsisIcon, PencilIcon, Trash2Icon } from "lucide-react";
 import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
 
-interface Props {
-    data: TTBReconhecimentoTipoInterface,
-    onEdit: (item: TTBReconhecimentoTipoInterface) => void,
-    onDelete: (item: TTBReconhecimentoTipoInterface) => void,
+interface TTBReconhecimentoTipoTableProps {
+    data: TTBReconhecimentoTipoInterface[];
+    onEdit: (item: TTBReconhecimentoTipoInterface, isEditingFormStatus: boolean) => void;
+    onDelete: (item: TTBReconhecimentoTipoInterface, isEditingFormStatus: boolean) => void;
 }
 
-export default function TTBReconhecimentoTipoTable() {
+/**
+ * Renderiza o badge de situação
+ */
+function StatusBadge({ situacao }: { situacao: string }) {
+    const isActive = situacao === "A";
+
+    const baseClasses =
+        "text-xs font-medium px-2.5 py-0.5 rounded-sm me-2";
+
+    const activeClasses =
+        "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300";
+
+    const inactiveClasses =
+        "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300";
 
     return (
-        <Card>
-            <CardContent>
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead className="w-[100px]">
-                                #
-                            </TableHead>
-                            <TableHead>
-                                Situação
-                            </TableHead>
-                            <TableHead>
-                                Descrição
-                            </TableHead>
-                            <TableHead className="text-right"></TableHead>
-                        </TableRow>
-                    </TableHeader>
-
-                    <TableBody>
-                        {reconhecimentosTipos.map(
-                            (item: ITTTBReconhecimentoTipo) => (
-                                <TableRow key={item.tb_reconhecimentotipo_id} className="cursor-pointer">
-                                    <TableCell className="font-medium">
-                                        {item.tb_reconhecimentotipo_id}
-                                    </TableCell>
-                                    <TableCell>
-                                        {item.situacao === 'A' ? (
-                                            <span className="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">
-                                                Ativo
-                                            </span>
-                                        ) : (
-                                            <span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
-                                                Inativo
-                                            </span>
-                                        )}
-                                    </TableCell>
-                                    <TableCell>
-                                        {item.descricao}
-                                    </TableCell>
-                                    <TableCell className="text-right">
-                                        <DropdownMenu>
-                                            <DropdownMenuTrigger asChild>
-                                                <Button variant="outline" className="cursor-pointer">
-                                                    <EllipsisIcon />
-                                                </Button>
-                                            </DropdownMenuTrigger>
-                                            <DropdownMenuContent side="left" align="start">
-                                                <DropdownMenuGroup>
-                                                    <DropdownMenuItem className="cursor-pointer" onSelect={() => openForm(item)}>
-                                                        <PencilIcon /> Editar
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuSeparator />
-                                                    <DropdownMenuItem className="cursor-pointer" onSelect={() => handlingConfirmation(true, item)}>
-                                                        <Trash2 /> Remover
-                                                    </DropdownMenuItem>
-                                                </DropdownMenuGroup>
-                                            </DropdownMenuContent>
-                                        </DropdownMenu>
-                                    </TableCell>
-                                </TableRow>
-                            )
-                        )}
-                    </TableBody>
-                </Table>
-            </CardContent>
-        </Card>
+        <span className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}>
+            {isActive ? "Ativo" : "Inativo"}
+        </span>
     );
+}
 
-}
+export default function TTBReconhecimentoTipoTable({
+    data,
+    onEdit,
+    onDelete
+}: TTBReconhecimentoTipoTableProps) {
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>#</TableHead>
+                    <TableHead>Situação</TableHead>
+                    <TableHead>Descrição</TableHead>
+                    <TableHead className="text-right">Ações</TableHead>
+                </TableRow>
+            </TableHeader>
+
+            <TableBody>
+                {data.map((item) => (
+                    <TableRow
+                        key={item.tb_reconhecimentotipo_id}
+                        className="cursor-pointer"
+                    >
+                        <TableCell className="font-medium">
+                            {item.tb_reconhecimentotipo_id}
+                        </TableCell>
+
+                        <TableCell>
+                            <StatusBadge situacao={item.situacao} />
+                        </TableCell>
+
+                        <TableCell>{item.descricao}</TableCell>
+
+                        <TableCell className="text-right">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        size="icon"
+                                        className="cursor-pointer"
+                                    >
+                                        <EllipsisIcon />
+                                    </Button>
+                                </DropdownMenuTrigger>
+
+                                <DropdownMenuContent side="left" align="start">
+                                    <DropdownMenuGroup>
+                                        <DropdownMenuItem
+                                            className="cursor-pointer"
+                                            onSelect={() => onEdit(item, true)}
+                                        >
+                                            <PencilIcon className="mr-2 h-4 w-4" />
+                                            Editar
+                                        </DropdownMenuItem>
+
+                                        <DropdownMenuSeparator />
+
+                                        <DropdownMenuItem
+                                            className="cursor-pointer"
+                                            onSelect={() => onDelete(item, true)}
+                                        >
+                                            <Trash2Icon className="mr-2 h-4 w-4" />
+                                            Remover
+                                        </DropdownMenuItem>
+                                    </DropdownMenuGroup>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+}

src/app/(protected)/(cadastros)/cadastros/_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoDeleteData.ts

@@ -0,0 +1,16 @@
+import API from "@/services/api/Api";
+import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
+import { Methods } from "@/services/api/enums/ApiMethodEnum";
+
+export default async function TTBReconhecimentoTipoDeleteData(data: TTBReconhecimentoTipoInterface) {
+
+    const api = new API();
+
+    const response = await api.send({
+        method: Methods.DELETE,
+        endpoint: `administrativo/t_tb_reconhecimentotipo/${data.tb_reconhecimentotipo_id}`
+    });
+
+    return response;
+
+}

src/app/(protected)/(cadastros)/cadastros/_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoIndexData.ts

@@ -5,21 +5,13 @@ import { Methods } from "@/services/api/enums/ApiMethodEnum";
 
 export default async function TTBReconhecimentoTipoIndexData() {
 
-    // const api = new API();
+    const api = new API();
 
-    // const response = await api.send({
-    //     'method': Methods.GET,
-    //     'endpoint': `cadastros/reconhecimentos`
-    // });
-
-    // return response;
-
-    return Promise.resolve({
-        data: [
-            { tb_reconhecimentotipo_id: 1, descricao: 'SEMELHANÇA', situacao: 'A' },
-            { tb_reconhecimentotipo_id: 2, descricao: 'VERDADEIRO', situacao: 'A' },
-            { tb_reconhecimentotipo_id: 3, descricao: 'ABONO', situacao: 'A' }
-        ]
+    const response = await api.send({
+        method: Methods.GET,
+        endpoint: `administrativo/t_tb_reconhecimentotipo`
     });
 
+    return response;
+
 }

src/app/(protected)/(cadastros)/cadastros/_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoSaveData.ts

@@ -1,14 +1,17 @@
-import { faker } from "@faker-js/faker"
+import API from "@/services/api/Api";
+import { Methods } from "@/services/api/enums/ApiMethodEnum";
+import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
 
-export default async function TTBReconhecimentoTipoSaveData(reconhecimentoTipo: any) {
+export default async function TTBReconhecimentoTipoSaveData(data: TTBReconhecimentoTipoInterface) {
 
-    return Promise.resolve({
-        message: 'Dados salvos com sucesso',
-        data: {
-            tb_reconhecimentotipo_id: faker.number.int({ min: 1, max: 1000 }),
-            descricao: reconhecimentoTipo.tb_reconhecimentotipo_id + reconhecimentoTipo.descricao,
-            situacao: reconhecimentoTipo.situacao
-        },
+    const api = new API();
+
+    const response = await api.send({
+        method: data.tb_reconhecimentotipo_id ? Methods.PUT : Methods.POST,
+        endpoint: `administrativo/t_tb_reconhecimentotipo/${data.tb_reconhecimentotipo_id ? data.tb_reconhecimentotipo_id : ''}`,
+        body: data
     });
 
+    return response;
+
 }

src/app/(protected)/(cadastros)/cadastros/_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoDeleteHook.ts

@@ -0,0 +1,19 @@
+import { useResponse } from "@/app/_response/ResponseContext"
+import TTBReconhecimentoTipoInterface from "../../_interfaces/TTBReconhecimentoTipoInterface";
+import TTBReconhecimentoTipoDeleteData from "../../_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoDeleteData";
+
+export const useTTBReconhecimentoTipoDeleteHook = () => {
+
+    const { setResponse } = useResponse();
+
+    const deleteTTBReconhecimentoTipo = async (data: TTBReconhecimentoTipoInterface) => {
+
+        const response = await TTBReconhecimentoTipoDeleteData(data);
+
+        setResponse(response);
+
+    }
+
+    return { deleteTTBReconhecimentoTipo }
+
+}

src/app/(protected)/(cadastros)/cadastros/_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoReadHook.ts

@@ -5,13 +5,13 @@ import { useResponse } from "@/app/_response/ResponseContext"
 import { useState } from "react";
 import TTBReconhecimentoTipoIndexData from '../../_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoIndexData';
 
-export const useTTBReconhecimentoTipoReadHooks = () => {
+export const useTTBReconhecimentoTipoReadHook = () => {
 
     const { setResponse } = useResponse();
 
-    const [reconhecimentosTipos, setReconhecimenntosTipos] = useState<ITTTBReconhecimentoTipo>();
+    const [tTBReconhecimentosTipos, setReconhecimenntosTipos] = useState<ITTTBReconhecimentoTipo>();
 
-    const fetchReconhecimentosTipos = async () => {
+    const fetchTTBReconhecimentosTipos = async () => {
 
         const response = await TTBReconhecimentoTipoIndexData();
 
@@ -21,12 +21,6 @@ export const useTTBReconhecimentoTipoReadHooks = () => {
 
     }
 
-    function addReconhecimentoTipo(reconhecimentoTipo: ITTTBReconhecimentoTipo) {
-
-        setReconhecimenntosTipos(prev => [...(prev || []), reconhecimentoTipo]);
-
-    }
-
-    return { reconhecimentosTipos, fetchReconhecimentosTipos, addReconhecimentoTipo }
+    return { tTBReconhecimentosTipos, fetchTTBReconhecimentosTipos }
 
 }

src/app/(protected)/(cadastros)/cadastros/_hooks/t_tb_reconhecimentotipo/useTTBReconhecimentoTipoSaveHook.ts

@@ -5,17 +5,17 @@ import { useState } from "react";
 import ITTTBReconhecimentoTipo from '../../_interfaces/TTBReconhecimentoTipoInterface'
 import TTBReconhecimentoTipoSaveData from "../../_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoSaveData";
 
-export const useTTBReconhecimentoTipoSaveHooks = () => {
+export const useTTBReconhecimentoTipoSaveHook = () => {
 
     const { setResponse } = useResponse();
 
-    const [reconhecimentoTipo, setReconhcimentoTipo] = useState<ITTTBReconhecimentoTipo>();
+    const [tTBReconhecimentoTipo, setTTBReconhcimentoTipo] = useState<ITTTBReconhecimentoTipo>();
 
-    const saveReconhecimentoTipo = async (reconhecimentoTipo: ITTTBReconhecimentoTipo) => {
+    const saveTTBReconhecimentoTipo = async (reconhecimentoTipo: ITTTBReconhecimentoTipo) => {
 
         const response = await TTBReconhecimentoTipoSaveData(reconhecimentoTipo);
 
-        setReconhcimentoTipo(response.data);
+        saveTTBReconhecimentoTipo(response.data);
 
         setResponse(response);
 
@@ -24,6 +24,6 @@ export const useTTBReconhecimentoTipoSaveHooks = () => {
 
     }
 
-    return { reconhecimentoTipo, saveReconhecimentoTipo }
+    return { tTBReconhecimentoTipo, saveTTBReconhecimentoTipo }
 
 }