@greatapps/greatauth-ui 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -50,16 +50,19 @@
     "class-variance-authority": "^0.7"
   },
   "devDependencies": {
-    "tsup": "latest",
-    "typescript": "^5",
-    "react": "^19",
-    "react-dom": "^19",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-table": "^8.21.3",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "next": "latest",
     "better-auth": "latest",
+    "cmdk": "^1",
+    "date-fns": "^4.1.0",
+    "next": "latest",
     "next-themes": "latest",
     "radix-ui": "^1.4",
-    "cmdk": "^1"
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "latest",
+    "typescript": "^5"
   }
 }

package/src/components/users/data-table.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Button } from "../ui/button";
+import { Skeleton } from "../ui/skeleton";
+import { cn } from "../../lib/utils";
+import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  total?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  pageSize?: number;
+  onRowClick?: (row: TData) => void;
+  selectedRowId?: string | number | null;
+  getRowId?: (row: TData) => string | number;
+  compact?: boolean;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  isLoading,
+  emptyMessage = "Nenhum registro encontrado",
+  total,
+  page = 1,
+  onPageChange,
+  pageSize = 15,
+  onRowClick,
+  selectedRowId,
+  getRowId,
+  compact,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+  });
+
+  const totalPages = total ? Math.ceil(total / pageSize) : 1;
+  const showPagination = onPageChange && total && total > pageSize;
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn(compact && "py-1.5 text-xs")}
+                    style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                  >
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 hover:text-foreground -ml-1 px-1 py-0.5 rounded cursor-pointer select-none"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {{
+                          asc: <ArrowUp className="h-3.5 w-3.5" />,
+                          desc: <ArrowDown className="h-3.5 w-3.5" />,
+                        }[header.column.getIsSorted() as string] ?? (
+                          <ArrowUpDown className="h-3.5 w-3.5 text-muted-foreground/50" />
+                        )}
+                      </button>
+                    ) : (
+                      flexRender(header.column.columnDef.header, header.getContext())
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: compact ? 3 : 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  {columns.map((_, j) => (
+                    <TableCell key={j} className={cn(compact && "py-1.5")}>
+                      <Skeleton className="h-4 w-full max-w-[120px]" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className={cn(
+                    "text-center text-muted-foreground",
+                    compact ? "py-4" : "py-8",
+                  )}
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => {
+                const rowId = getRowId ? getRowId(row.original) : undefined;
+                const isSelected = selectedRowId != null && rowId != null && rowId === selectedRowId;
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    className={cn(
+                      onRowClick && "cursor-pointer",
+                      isSelected && "bg-accent",
+                    )}
+                    onClick={() => onRowClick?.(row.original)}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className={cn(compact && "py-1.5")}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {showPagination && (
+        <div className="flex items-center justify-between px-2">
+          <p className="text-sm text-muted-foreground">
+            {total} registro{total !== 1 ? "s" : ""}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page - 1)}
+              disabled={page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Anterior
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              {page} de {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page + 1)}
+              disabled={page >= totalPages}
+            >
+              Próximo
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/users/user-form-dialog.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { GauthUser, GauthUserHookConfig } from "../../types/users";
+import { useCreateUser, useUpdateUser } from "../../hooks/use-users";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { ImageCropUpload } from "../image-crop-upload";
+
+const PROFILE_OPTIONS = [
+  { value: "owner", label: "Proprietário" },
+  { value: "admin", label: "Administrador" },
+  { value: "collaborator", label: "Colaborador" },
+  { value: "attendant", label: "Atendente" },
+  { value: "viewer", label: "Visualizador" },
+];
+
+export interface UserFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user?: GauthUser;
+  config: GauthUserHookConfig;
+  renderPhones?: (idUser: number) => React.ReactNode;
+}
+
+export function UserFormDialog({
+  open,
+  onOpenChange,
+  user,
+  config,
+  renderPhones,
+}: UserFormDialogProps) {
+  const isEditing = !!user;
+  const createUser = useCreateUser(config);
+  const updateUser = useUpdateUser(config);
+
+  const [name, setName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [profile, setProfile] = useState("collaborator");
+  const [password, setPassword] = useState("");
+  const [photo, setPhoto] = useState("");
+
+  useEffect(() => {
+    if (user) {
+      setName(user.name || "");
+      setLastName(user.last_name || "");
+      setEmail(user.email || "");
+      setProfile(user.profile || "collaborator");
+      setPhoto(user.photo || "");
+    } else {
+      setName(""); setLastName(""); setEmail(""); setProfile("collaborator"); setPhoto("");
+    }
+    setPassword("");
+  }, [user, open]);
+
+  const isPending = createUser.isPending || updateUser.isPending;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim() || !email.trim()) return;
+
+    try {
+      if (isEditing) {
+        await updateUser.mutateAsync({
+          id: user.id,
+          body: {
+            name: name.trim(),
+            last_name: lastName.trim() || undefined,
+            email: email.trim(),
+            profile,
+            photo: photo || null,
+          },
+        });
+        toast.success("Usuário atualizado");
+      } else {
+        await createUser.mutateAsync({
+          name: name.trim(),
+          last_name: lastName.trim() || undefined,
+          email: email.trim(),
+          profile,
+          password: password || undefined,
+          photo: photo || null,
+        });
+        toast.success("Usuário criado");
+      }
+      onOpenChange(false);
+    } catch {
+      toast.error(isEditing ? "Erro ao atualizar usuário" : "Erro ao criar usuário");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{isEditing ? "Editar Usuário" : "Novo Usuário"}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="flex justify-center">
+            <ImageCropUpload
+              value={photo || null}
+              onChange={setPhoto}
+              onRemove={() => setPhoto("")}
+              entityType="users"
+              entityId={user?.id}
+              idAccount={Number(config.accountId) || 0}
+              name={`${name} ${lastName}`.trim() || null}
+              disabled={isPending}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="user-name">Nome *</Label>
+              <Input id="user-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nome" required disabled={isPending} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="user-lastname">Sobrenome</Label>
+              <Input id="user-lastname" value={lastName} onChange={(e) => setLastName(e.target.value)} placeholder="Sobrenome" disabled={isPending} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="user-email">E-mail *</Label>
+            <Input id="user-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@exemplo.com" required disabled={isPending} />
+          </div>
+          {!isEditing && (
+            <div className="space-y-2">
+              <Label htmlFor="user-password">Senha</Label>
+              <Input id="user-password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Senha inicial (opcional)" disabled={isPending} />
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label>Perfil de acesso</Label>
+            <Select value={profile} onValueChange={setProfile} disabled={isPending}>
+              <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {PROFILE_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          {isEditing && renderPhones && (
+            <div className="border-t pt-4">
+              {renderPhones(user.id)}
+            </div>
+          )}
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>Cancelar</Button>
+            <Button type="submit" disabled={isPending || !name.trim() || !email.trim()}>
+              {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isEditing ? "Salvar" : "Criar"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/users/user-profile-badge.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Badge } from "../ui/badge";
+import type { UserProfile } from "../../types/users";
+
+const profileConfig: Record<string, { label: string; className: string }> = {
+  owner: { label: "Proprietário", className: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200" },
+  proprietario: { label: "Proprietário", className: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200" },
+  admin: { label: "Administrador", className: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" },
+  administrador: { label: "Administrador", className: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" },
+  manager: { label: "Gerente", className: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200" },
+  gerente: { label: "Gerente", className: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200" },
+  supervisor: { label: "Supervisor", className: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200" },
+  collaborator: { label: "Colaborador", className: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" },
+  colaborador: { label: "Colaborador", className: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" },
+  attendant: { label: "Atendente", className: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200" },
+  viewer: { label: "Visualizador", className: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200" },
+};
+
+export interface UserProfileBadgeProps {
+  profile: UserProfile | string;
+}
+
+export function UserProfileBadge({ profile }: UserProfileBadgeProps) {
+  const config = profileConfig[profile] || { label: profile, className: "" };
+  return (
+    <Badge variant="secondary" className={config.className}>
+      {config.label}
+    </Badge>
+  );
+}

package/src/components/users/users-page.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { GauthUser, GauthUserHookConfig } from "../../types/users";
+import { useUsers, useDeleteUser, useResetPassword } from "../../hooks/use-users";
+import { UserFormDialog } from "./user-form-dialog";
+import { UserProfileBadge } from "./user-profile-badge";
+import { DataTable } from "./data-table";
+import { EntityAvatar } from "../entity-avatar";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { Pencil, Trash2, Search, Forward, Plus } from "lucide-react";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+
+const PAGE_SIZE = 15;
+
+const PROFILE_FILTER_OPTIONS = [
+  { value: "all", label: "Todos os perfis" },
+  { value: "owner", label: "Proprietário" },
+  { value: "admin", label: "Administrador" },
+  { value: "collaborator", label: "Colaborador" },
+  { value: "attendant", label: "Atendente" },
+  { value: "viewer", label: "Visualizador" },
+];
+
+function useColumns(
+  onEdit: (user: GauthUser) => void,
+  onDelete: (id: number) => void,
+  onResetPassword: (user: GauthUser) => void,
+): ColumnDef<GauthUser>[] {
+  return [
+    {
+      accessorKey: "name",
+      header: "Nome",
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <EntityAvatar
+            photo={row.original.photo}
+            name={`${row.original.name} ${row.original.last_name}`.trim()}
+            size="sm"
+          />
+          <span className="font-medium">
+            {row.original.name} {row.original.last_name}
+          </span>
+        </div>
+      ),
+      sortingFn: (rowA, rowB) => {
+        const a = `${rowA.original.name} ${rowA.original.last_name}`.toLowerCase();
+        const b = `${rowB.original.name} ${rowB.original.last_name}`.toLowerCase();
+        return a.localeCompare(b);
+      },
+    },
+    {
+      accessorKey: "email",
+      header: "E-mail",
+    },
+    {
+      accessorKey: "profile",
+      header: "Perfil",
+      cell: ({ row }) => <UserProfileBadge profile={row.original.profile} />,
+      sortingFn: (rowA, rowB) => rowA.original.profile.localeCompare(rowB.original.profile),
+    },
+    {
+      accessorKey: "last_login",
+      header: "Último acesso",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm">
+          {row.original.last_login
+            ? format(new Date(row.original.last_login), "dd/MM/yyyy HH:mm", { locale: ptBR })
+            : "—"}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "datetime_add",
+      header: "Criado em",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm">
+          {format(new Date(row.original.datetime_add), "dd/MM/yyyy", { locale: ptBR })}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      size: 120,
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onResetPassword(row.original)}>
+                <Forward className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Resetar senha</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onEdit(row.original)}>
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Editar</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => onDelete(row.original.id)}>
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Excluir</TooltipContent>
+          </Tooltip>
+        </div>
+      ),
+    },
+  ];
+}
+
+export interface UsersPageProps {
+  config: GauthUserHookConfig;
+  renderPhones?: (idUser: number) => React.ReactNode;
+}
+
+export function UsersPage({ config, renderPhones }: UsersPageProps) {
+  const [search, setSearch] = useState("");
+  const [profileFilter, setProfileFilter] = useState("all");
+  const [page, setPage] = useState(1);
+
+  const queryParams = useMemo(() => {
+    const params: Record<string, string> = {
+      limit: String(PAGE_SIZE),
+      page: String(page),
+    };
+    if (profileFilter !== "all") params.profile = profileFilter;
+    return params;
+  }, [profileFilter, page]);
+
+  const { data, isLoading } = useUsers(config, queryParams);
+  const deleteUser = useDeleteUser(config);
+  const resetPassword = useResetPassword(config);
+  const [editUser, setEditUser] = useState<GauthUser | null>(null);
+  const [formOpen, setFormOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [resetUser, setResetUser] = useState<GauthUser | null>(null);
+
+  const users = data?.data || [];
+  const total = data?.total || 0;
+
+  // Client-side search filter
+  const filtered = useMemo(() => {
+    if (!search) return users;
+    const term = search.toLowerCase();
+    return users.filter((u) =>
+      `${u.name} ${u.last_name}`.toLowerCase().includes(term) ||
+      u.email.toLowerCase().includes(term)
+    );
+  }, [users, search]);
+
+  const columns = useColumns(
+    (u) => { setEditUser(u); setFormOpen(true); },
+    (id) => setDeleteId(id),
+    (u) => setResetUser(u),
+  );
+
+  function handleDelete() {
+    if (!deleteId) return;
+    deleteUser.mutate(deleteId, {
+      onSuccess: () => { toast.success("Usuário excluído"); setDeleteId(null); },
+      onError: () => toast.error("Erro ao excluir usuário"),
+    });
+  }
+
+  function handleResetPassword() {
+    if (!resetUser) return;
+    resetPassword.mutate(resetUser.id, {
+      onSuccess: () => { toast.success("Senha resetada e email enviado"); setResetUser(null); },
+      onError: () => { toast.error("Erro ao resetar senha"); setResetUser(null); },
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">Usuários</h1>
+          <p className="text-sm text-muted-foreground">Gestão de usuários da conta</p>
+        </div>
+        <Button onClick={() => { setEditUser(null); setFormOpen(true); }} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Novo Usuário
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Buscar por nome ou e-mail..."
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+            className="pl-9"
+          />
+        </div>
+        <Select value={profileFilter} onValueChange={(v) => { setProfileFilter(v); setPage(1); }}>
+          <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {PROFILE_FILTER_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={search ? filtered : users}
+        isLoading={isLoading}
+        emptyMessage="Nenhum usuário encontrado"
+        total={search ? filtered.length : total}
+        page={page}
+        onPageChange={setPage}
+        pageSize={PAGE_SIZE}
+      />
+
+      <UserFormDialog
+        open={formOpen}
+        onOpenChange={(open) => { setFormOpen(open); if (!open) setEditUser(null); }}
+        user={editUser ?? undefined}
+        config={config}
+        renderPhones={renderPhones}
+      />
+
+      <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir usuário?</AlertDialogTitle>
+            <AlertDialogDescription>Esta ação não pode ser desfeita. O usuário será removido permanentemente.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Excluir</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={!!resetUser} onOpenChange={(open) => !open && setResetUser(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Resetar senha?</AlertDialogTitle>
+            <AlertDialogDescription>
+              A senha de <strong>{resetUser?.name} {resetUser?.last_name}</strong> ({resetUser?.email}) será removida e um email com link para definir nova senha será enviado.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction onClick={handleResetPassword}>Resetar e enviar</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}