@greatapps/greatauth-ui 0.3.6 → 0.3.8

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

@@ -0,0 +1,169 @@
+"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 DEFAULT_PROFILES = [
+  { 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;
+  profileOptions?: { value: string; label: string }[];
+  renderPhones?: (idUser: number) => React.ReactNode;
+}
+
+export function UserFormDialog({
+  open,
+  onOpenChange,
+  user,
+  config,
+  profileOptions,
+  renderPhones,
+}: UserFormDialogProps) {
+  const isEditing = !!user;
+  const createUser = useCreateUser(config);
+  const updateUser = useUpdateUser(config);
+  const profiles = profileOptions || DEFAULT_PROFILES;
+
+  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>
+                {profiles.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,273 @@
+"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;
+  profileOptions?: { value: string; label: string }[];
+  renderPhones?: (idUser: number) => React.ReactNode;
+}
+
+export function UsersPage({ config, profileOptions, 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}
+        profileOptions={profileOptions}
+        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>
+  );
+}

package/src/hooks/use-users.ts

@@ -0,0 +1,82 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GauthUser, GauthUserHookConfig, ApiResponse } from "../types/users";
+
+function buildUrl(config: GauthUserHookConfig, path: string): string {
+  const lang = config.language || "pt-br";
+  const idWl = config.idWl || "1";
+  return `${config.gauthApiUrl}/v1/${lang}/${idWl}/accounts/${config.accountId}/${path}`;
+}
+
+async function request<T>(url: string, token: string, options?: RequestInit): Promise<ApiResponse<T>> {
+  const res = await fetch(url, {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    ...options,
+  });
+  if (!res.ok) {
+    let message = `HTTP ${res.status}`;
+    try { const b = await res.json(); message = b.message || message; } catch {}
+    throw new Error(message);
+  }
+  const json = await res.json();
+  if (json.status === 0) throw new Error(json.message || "Operação falhou");
+  return json;
+}
+
+export function useUsers(config: GauthUserHookConfig, params?: Record<string, string>) {
+  return useQuery({
+    queryKey: ["greatauth", "users", config.accountId, params],
+    queryFn: () => {
+      const qs = params ? "?" + new URLSearchParams(params).toString() : "";
+      return request<GauthUser[]>(buildUrl(config, `users${qs}`), config.token!);
+    },
+    enabled: !!config.token && !!config.accountId,
+    select: (res) => ({ data: res.data || [], total: res.total || 0 }),
+  });
+}
+
+export function useCreateUser(config: GauthUserHookConfig) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { name: string; last_name?: string; email: string; password?: string; profile?: string; photo?: string | null }) =>
+      request<GauthUser>(buildUrl(config, "users"), config.token!, {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["greatauth", "users"] }),
+  });
+}
+
+export function useUpdateUser(config: GauthUserHookConfig) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, body }: { id: number; body: Record<string, unknown> }) =>
+      request<GauthUser>(buildUrl(config, `users/${id}`), config.token!, {
+        method: "PUT",
+        body: JSON.stringify(body),
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["greatauth", "users"] }),
+  });
+}
+
+export function useDeleteUser(config: GauthUserHookConfig) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      request<void>(buildUrl(config, `users/${id}`), config.token!, { method: "DELETE" }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["greatauth", "users"] }),
+  });
+}
+
+export function useResetPassword(config: GauthUserHookConfig) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      request<{ message: string }>(buildUrl(config, `users/${id}/reset-password`), config.token!, { method: "POST" }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["greatauth", "users"] }),
+  });
+}

package/src/index.ts

@@ -15,10 +15,30 @@ export { AppSidebar } from "./components";
 export { AppHeader } from "./components";
 export { LoginForm } from "./components";
 export { ThemeToggle } from "./components";
+export { EntityAvatar } from "./components";
+export type { EntityAvatarProps } from "./components";
+export { ImageCropUpload } from "./components";
+export type { ImageCropUploadProps } from "./components";
 
 // UI Primitives (consuming apps may need)
 export { SidebarProvider, SidebarInset, SidebarTrigger, useSidebar } from "./components/ui/sidebar";
 export { TooltipProvider } from "./components/ui/tooltip";
 
+// User Types
+export type { GauthUser, UserProfile, UserPhone, PhoneLabel, GauthUserHookConfig } from "./types/users";
+
+// User Hooks
+export { useUsers, useCreateUser, useUpdateUser, useDeleteUser, useResetPassword } from "./hooks/use-users";
+
+// User Components
+export { UsersPage } from "./components/users/users-page";
+export type { UsersPageProps } from "./components/users/users-page";
+export { UserFormDialog } from "./components/users/user-form-dialog";
+export type { UserFormDialogProps } from "./components/users/user-form-dialog";
+export { UserProfileBadge } from "./components/users/user-profile-badge";
+export type { UserProfileBadgeProps } from "./components/users/user-profile-badge";
+export { DataTable } from "./components/users/data-table";
+export type { DataTableProps } from "./components/users/data-table";
+
 // Utils
 export { cn } from "./lib/utils";

package/src/lib/image-utils.ts

@@ -0,0 +1,82 @@
+import type { Area } from "react-easy-crop";
+
+export async function getCroppedImage(
+  imageSrc: string,
+  cropArea: Area,
+  outputSize = 400,
+  quality = 0.85,
+): Promise<string> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) throw new Error("Canvas context not available");
+
+  ctx.drawImage(
+    image,
+    cropArea.x,
+    cropArea.y,
+    cropArea.width,
+    cropArea.height,
+    0,
+    0,
+    outputSize,
+    outputSize,
+  );
+
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error("Failed to create blob"))),
+      "image/webp",
+      quality,
+    );
+  });
+
+  return blobToBase64(blob);
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      resolve(result.split(",")[1]);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+const MAX_SIZE_BYTES = 5 * 1024 * 1024;
+
+export function validateImageFile(file: File): string | null {
+  if (!ACCEPTED_TYPES.includes(file.type)) {
+    return "Formato não suportado. Use PNG, JPG ou WEBP";
+  }
+  if (file.size > MAX_SIZE_BYTES) {
+    return "Imagem muito grande. Máximo: 5MB";
+  }
+  return null;
+}
+
+export function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}