fix: ajustes dashboards tv e titulos

src/components/dashboards/dashboard-list.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"
 import { useMutation, useQuery } from "convex/react"
 import { formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
-import { Plus, Sparkles } from "lucide-react"
+import { Plus, Sparkles, Trash2 } from "lucide-react"
 import type { Id } from "@/convex/_generated/dataModel"
 
 import { api } from "@/convex/_generated/api"
@@ -21,7 +21,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Badge } from "@/components/ui/badge"
@@ -131,7 +131,10 @@ export function DashboardListView() {
   const { session, convexUserId, isStaff } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const createDashboard = useMutation(api.dashboards.create)
+  const archiveDashboard = useMutation(api.dashboards.archive)
   const [isCreating, setIsCreating] = useState(false)
+  const [dashboardToDelete, setDashboardToDelete] = useState<DashboardSummary | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
 
   const dashboards = useQuery(
     api.dashboards.list,
@@ -163,6 +166,26 @@ export function DashboardListView() {
     }
   }
 
+  async function handleConfirmDelete() {
+    if (!dashboardToDelete || !convexUserId) return
+    setIsDeleting(true)
+    try {
+      await archiveDashboard({
+        tenantId,
+        actorId: convexUserId as Id<"users">,
+        dashboardId: dashboardToDelete.id,
+        archived: true,
+      })
+      toast.success("Dashboard removido.")
+      setDashboardToDelete(null)
+    } catch (error) {
+      console.error(error)
+      toast.error("Não foi possível remover o dashboard.")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
   if (!isStaff) {
     return (
       <Card className="border-dashed border-primary/40 bg-primary/5 text-primary">
@@ -265,22 +288,64 @@ export function DashboardListView() {
                       <span className="h-2 w-2 rounded-full bg-neutral-400" />
                       Formato {dashboard.aspectRatio}
                     </Badge>
-                    <Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
-                      <span className="h-2 w-2 rounded-full bg-neutral-400" />
-                      Tema {dashboard.theme}
-                    </Badge>
+                    {dashboard.theme && dashboard.theme.toLowerCase() !== "system" ? (
+                      <Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
+                        <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                        Tema {dashboard.theme}
+                      </Badge>
+                    ) : null}
                   </div>
                 </CardContent>
-                <CardFooter>
-                  <Button asChild className="w-full">
+                <CardFooter className="flex gap-2">
+                  <Button asChild className="flex-1">
                     <Link href={`/dashboards/${dashboard.id}`}>Abrir dashboard</Link>
                   </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="shrink-0 size-9 rounded-lg border border-rose-300 bg-white text-rose-600 transition hover:bg-rose-50 focus-visible:ring-rose-200 [&>svg]:transition [&>svg]:text-rose-600 hover:[&>svg]:text-rose-700"
+                    onClick={() => setDashboardToDelete(dashboard)}
+                    aria-label={`Excluir ${dashboard.name}`}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
                 </CardFooter>
               </Card>
             )
           })}
         </div>
       )}
+      <Dialog
+        open={Boolean(dashboardToDelete)}
+        onOpenChange={(open) => {
+          if (!open && !isDeleting) {
+            setDashboardToDelete(null)
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Excluir dashboard</DialogTitle>
+            <DialogDescription>
+              Essa ação remove o dashboard para toda a equipe. Confirme para continuar.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="sm:justify-between">
+            <Button
+              variant="outline"
+              onClick={() => {
+                if (!isDeleting) setDashboardToDelete(null)
+              }}
+              disabled={isDeleting}
+            >
+              Cancelar
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmDelete} disabled={isDeleting}>
+              {isDeleting ? "Removendo..." : "Excluir dashboard"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }