Ajustes e melhorias no Codex

src/components/prompts/PromptsView.tsx

@@ -1,12 +1,13 @@
 import { useState, useMemo, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { FileText, Plus, Eye, Edit, Copy } from "lucide-react";
+import { FileText, Plus, Eye, Edit, Copy, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { usePrompts } from "@/contexts/PromptsContext";
 import type { Prompt } from "@/contexts/PromptsContext";
@@ -26,10 +27,12 @@ function apiItemToPrompt(item: { id: string; titulo: string; area_nome: string;
 
 export const PromptsView = () => {
   const navigate = useNavigate();
-  const { prompts, setPrompts, areaItems } = usePrompts();
+  const { prompts, setPrompts, areaItems, refreshAreas } = usePrompts();
 
   const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+  const [promptToDelete, setPromptToDelete] = useState<Prompt | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
@@ -39,6 +42,7 @@ export const PromptsView = () => {
   const [totalRegistros, setTotalRegistros] = useState(0);
   const [totalPaginas, setTotalPaginas] = useState(1);
   const [loadingList, setLoadingList] = useState(true);
+  const [isDeletingPrompt, setIsDeletingPrompt] = useState(false);
 
   const totalPages = Math.max(1, totalPaginas);
 
@@ -88,6 +92,10 @@ export const PromptsView = () => {
     setCurrentPage(1);
   }, [filterNome, filterAreaId]);
 
+  useEffect(() => {
+    refreshAreas();
+  }, [refreshAreas]);
+
   const clearFilters = () => {
     setFilterNome("");
     setFilterAreaId("");
@@ -112,6 +120,35 @@ export const PromptsView = () => {
     navigate(`/codex/prompts/${selectedPrompt.id}`);
   };
 
+  const openDeleteDialog = (prompt: Prompt) => {
+    setPromptToDelete(prompt);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleDeletePrompt = async () => {
+    if (!promptToDelete) return;
+    setIsDeletingPrompt(true);
+    try {
+      await promptsService.deletar(promptToDelete.id);
+      setPromptsList((prev) => prev.filter((p) => p.id !== promptToDelete.id));
+      setPrompts((prev) => prev.filter((p) => p.id !== promptToDelete.id));
+      setTotalRegistros((prev) => Math.max(0, prev - 1));
+      if (selectedPrompt?.id === promptToDelete.id) {
+        setIsDetailsDialogOpen(false);
+        setSelectedPrompt(null);
+      }
+      toast.success("Prompt excluído com sucesso!");
+      setIsDeleteDialogOpen(false);
+      setPromptToDelete(null);
+      setCurrentPage(1);
+    } catch (e: unknown) {
+      const msg = e && typeof e === "object" && "message" in e ? (e as { message: string }).message : "Erro ao excluir prompt.";
+      toast.error(msg);
+    } finally {
+      setIsDeletingPrompt(false);
+    }
+  };
+
   return (
     <div className="flex flex-col h-full bg-background pb-16 md:pb-0">
       <div className="p-3 md:p-6 border-b border-border">
@@ -240,6 +277,15 @@ export const PromptsView = () => {
                           >
                             <Edit className="w-3 h-3 md:w-4 md:h-4" />
                           </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => openDeleteDialog(prompt)}
+                            title="Excluir"
+                            className="h-7 w-7 md:h-9 md:w-9 text-destructive hover:text-destructive hover:bg-slate-300 dark:hover:bg-slate-700"
+                          >
+                            <Trash2 className="w-3 h-3 md:w-4 md:h-4" />
+                          </Button>
                         </div>
                       </TableCell>
                     </TableRow>
@@ -365,6 +411,27 @@ export const PromptsView = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir prompt</AlertDialogTitle>
+            <AlertDialogDescription>
+              Deseja excluir o prompt "{promptToDelete?.titulo ?? ""}"? Esta ação não pode ser desfeita.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingPrompt}>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeletePrompt}
+              disabled={isDeletingPrompt || !promptToDelete}
+              className={(isDeletingPrompt || !promptToDelete) ? "opacity-50 cursor-not-allowed" : "bg-destructive text-destructive-foreground hover:bg-destructive/90"}
+            >
+              {isDeletingPrompt ? "Excluindo..." : "Excluir"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 };