@hed-hog/core 0.0.321 → 0.0.322

package/hedhog/frontend/app/users/user-sheet.tsx.ejs

@@ -0,0 +1,1385 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FormActions } from '@/components/ui/form-actions';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { getUserEmail } from '@/lib/get-user-email';
+import { User, UserMfa } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@radix-ui/react-tabs';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  Activity,
+  Camera,
+  Clock,
+  Eye,
+  EyeOff,
+  Fingerprint,
+  Key,
+  KeyRound,
+  LogOut,
+  LucideIcon,
+  Mail,
+  Monitor,
+  RefreshCcw,
+  Save,
+  Shield,
+  ShieldCheck,
+  ShieldOff,
+  Trash2,
+  UserCircle,
+  UserIcon,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { ActiveSessions } from './active-session';
+import { UserIdentifiersSection } from './identifiers';
+import { PermissionsSection } from './permissions';
+
+export type UserSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userId?: number | null;
+  onSuccess?: () => void;
+};
+
+type UserCreateDraftPayload = {
+  values: {
+    name: string;
+    email: string;
+  };
+};
+
+type UserEditDraftPayload = {
+  userId: number | null;
+  values: {
+    name: string;
+    email: string;
+  };
+};
+
+const USER_CREATE_DRAFT_STORAGE_KEY = 'core-user-create-draft';
+
+const accountProviders = [
+  { name: 'Google', icon: '/google.svg' },
+  { name: 'GitHub', icon: '/github.svg' },
+  { name: 'Facebook', icon: '/facebook.svg' },
+];
+
+function generateRandomPassword(length = 16) {
+  const lowercase = 'abcdefghijkmnopqrstuvwxyz';
+  const uppercase = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
+  const numbers = '23456789';
+  const symbols = '@#$%&*!?-_+';
+  const allChars = `${lowercase}${uppercase}${numbers}${symbols}`;
+
+  const groups = [lowercase, uppercase, numbers, symbols];
+  const randomValues = new Uint32Array(length + groups.length);
+  globalThis.crypto.getRandomValues(randomValues);
+
+  const chars: string[] = [];
+
+  groups.forEach((group, index) => {
+    const randomValue = randomValues[index] ?? 0;
+    chars.push(group.charAt(randomValue % group.length));
+  });
+
+  for (let i = groups.length; i < randomValues.length; i++) {
+    const randomValue = randomValues[i] ?? 0;
+    chars.push(allChars.charAt(randomValue % allChars.length));
+  }
+
+  for (let i = chars.length - 1; i > 0; i--) {
+    const randomValue = randomValues[i] ?? 0;
+    const j = randomValue % (i + 1);
+    const currentChar = chars[i]!;
+    const swapChar = chars[j]!;
+    chars[i] = swapChar;
+    chars[j] = currentChar;
+  }
+
+  return chars.slice(0, length).join('');
+}
+
+// ─── Create Sheet ────────────────────────────────────────────────────────────
+
+function UserCreateSheet({
+  open,
+  onOpenChange,
+  onSuccess,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}) {
+  const t = useTranslations('core.UserPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const addUserSchema = z.object({
+    name: z.string().min(2, t('errorName')),
+    email: z.string().email(t('errorEmail')),
+    password: z
+      .string()
+      .min(minPasswordLength, t('errorPassword'))
+      .optional()
+      .or(z.literal('')),
+  });
+
+  const form = useForm<z.infer<typeof addUserSchema>>({
+    resolver: zodResolver(addUserSchema),
+    defaultValues: { name: '', email: '', password: '' },
+  });
+
+  const watchedValues = useWatch({ control: form.control });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<UserCreateDraftPayload>({
+    storageKey: USER_CREATE_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        name: watchedValues.name ?? '',
+        email: watchedValues.email ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.name ?? '').trim() || (watchedValues.email ?? '').trim()
+    ),
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) return null;
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) return null;
+    const locale = currentLocaleCode === 'en' ? enUS : ptBR;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+    return currentLocaleCode === 'en'
+      ? `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`
+      : `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
+  useEffect(() => {
+    if (!open) return;
+    const storedDraft = loadDraft();
+    form.reset({
+      name: storedDraft?.payload.values.name ?? '',
+      email: storedDraft?.payload.values.email ?? '',
+      password: '',
+    });
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onSubmit = async (values: z.infer<typeof addUserSchema>) => {
+    try {
+      await request({ url: '/user', method: 'POST', data: values });
+      clearDraft();
+      form.reset();
+      onOpenChange(false);
+      setFormError(null);
+      onSuccess?.();
+    } catch (err) {
+      const e: any = err;
+      const msg =
+        e?.response?.data?.message ||
+        e?.response?.data?.error ||
+        e?.message ||
+        'Server error';
+      setFormError(String(msg));
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
+        <SheetHeader>
+          <SheetTitle>{t('dialogAddUserTitle')}</SheetTitle>
+          <SheetDescription>{t('description')}</SheetDescription>
+        </SheetHeader>
+        <div className="w-full border-t pt-1 mt-1" />
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="px-4 gap-4 w-full flex flex-col pt-2"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('formNameLabel')}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('formEmailLabel')}</FormLabel>
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('formPasswordLabel')}</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Input
+                        type={showPassword ? 'text' : 'password'}
+                        {...field}
+                        className="pr-10"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword((s) => !s)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-sm text-muted-foreground hover:bg-muted/50"
+                        aria-label={
+                          showPassword ? t('hidePassword') : t('showPassword')
+                        }
+                      >
+                        {showPassword ? (
+                          <EyeOff className="h-4 w-4" />
+                        ) : (
+                          <Eye className="h-4 w-4" />
+                        )}
+                      </button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {formError && (
+              <Alert
+                variant="destructive"
+                className="border-red-300 bg-red-50 rounded-md p-4"
+              >
+                <AlertTitle className="text-sm">
+                  {t('verifyYourInput')}
+                </AlertTitle>
+                <AlertDescription className="text-sm">
+                  {formError}
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <FormActions
+              sheet
+              statusContent={draftStatusContent}
+              submitLabel={t('buttonAddUser')}
+              submitType="submit"
+              sheetClassName="px-0 pb-0"
+            />
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ─── Edit Sheet ───────────────────────────────────────────────────────────────
+
+function UserEditSheet({
+  open,
+  onOpenChange,
+  userId,
+  onSuccess,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userId: number;
+  onSuccess?: () => void;
+}) {
+  const t = useTranslations('core.UserPage');
+  const userActivityT = useTranslations('core.UserActivity');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
+
+  const [activeTab, setActiveTab] = useState('overview');
+  const [photo, setPhoto] = useState<number | null | undefined>(null);
+  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
+  const [editFormError, setEditFormError] = useState<string | null>(null);
+  const [resetFormError, setResetFormError] = useState<string | null>(null);
+  const [isResetPasswordDialogOpen, setIsResetPasswordDialogOpen] =
+    useState(false);
+  const [isResetResultDialogOpen, setIsResetResultDialogOpen] = useState(false);
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+  const [showResetPassword, setShowResetPassword] = useState(false);
+  const [showResetPasswordResult, setShowResetPasswordResult] = useState(false);
+  const [resetPasswordResult, setResetPasswordResult] = useState('');
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+
+  const {
+    data: editingUser,
+    isLoading,
+    refetch: refetchUser,
+  } = useQuery<User>({
+    queryKey: ['user', userId],
+    queryFn: async () => {
+      const response = await request<User>({
+        url: `/user/${userId}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: open && !!userId,
+  });
+
+  const editUserSchema = z.object({
+    name: z.string().min(2, t('errorName')),
+    email: z.string().email(t('errorEmail')),
+  });
+
+  const editForm = useForm({
+    resolver: zodResolver(editUserSchema),
+    defaultValues: { name: '', email: '' },
+  });
+
+  const resetPasswordSchema = z.object({
+    password: z.string().min(minPasswordLength, t('errorPassword')),
+  });
+
+  const resetPasswordForm = useForm<z.infer<typeof resetPasswordSchema>>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: { password: '' },
+  });
+
+  const watchedEditValues = useWatch({ control: editForm.control });
+
+  const editDraftStorageKey = `core-user-edit-draft-${userId}`;
+
+  const {
+    clearDraft: clearEditDraft,
+    loadDraft: loadEditDraft,
+    hasDraft: hasEditDraft,
+    savedAt: editDraftSavedAt,
+  } = useFormDraft<UserEditDraftPayload>({
+    storageKey: editDraftStorageKey,
+    value: {
+      userId: userId ?? null,
+      values: {
+        name: watchedEditValues.name ?? '',
+        email: watchedEditValues.email ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedEditValues.name ?? '').trim() ||
+      (watchedEditValues.email ?? '').trim()
+    ),
+    enabled: open && !!editingUser,
+  });
+
+  const editDraftStatusContent = useMemo(() => {
+    if (!hasEditDraft || !editDraftSavedAt) return null;
+    const savedDate = new Date(editDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) return null;
+    const locale = currentLocaleCode === 'en' ? enUS : ptBR;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+    return currentLocaleCode === 'en'
+      ? `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`
+      : `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`;
+  }, [editDraftSavedAt, currentLocaleCode, getSettingValue, hasEditDraft]);
+
+  useEffect(() => {
+    if (!editingUser) return;
+    const storedDraft = loadEditDraft();
+    const shouldRestoreDraft =
+      storedDraft?.payload.userId === Number(editingUser.id);
+    editForm.reset(
+      shouldRestoreDraft
+        ? storedDraft.payload.values
+        : {
+            name: editingUser.name || '',
+            email: getUserEmail(editingUser),
+          }
+    );
+    setActiveTab('overview');
+  }, [editingUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleClose = (open: boolean) => {
+    if (!open) {
+      setPhoto(null);
+      setIsResetPasswordDialogOpen(false);
+      setIsResetResultDialogOpen(false);
+      setResetPasswordResult('');
+    }
+    onOpenChange(open);
+  };
+
+  const handleRefreshUser = async () => {
+    await refetchUser();
+  };
+
+  const onEditSubmit = async (values: z.infer<typeof editUserSchema>) => {
+    try {
+      await request({
+        url: `/user/${userId}`,
+        method: 'PATCH',
+        data: values,
+      });
+      clearEditDraft();
+      await refetchUser();
+      setEditFormError(null);
+      toast.success(t('userUpdatedSuccess'));
+      onSuccess?.();
+    } catch (err) {
+      const e: any = err;
+      const msg =
+        e?.response?.data?.message ||
+        e?.response?.data?.error ||
+        e?.message ||
+        t('serverError');
+      setEditFormError(String(msg));
+    }
+  };
+
+  const onDelete = async () => {
+    try {
+      await request({
+        url: `/user`,
+        method: 'DELETE',
+        data: { ids: [Number(userId)] },
+      });
+      setOpenDeleteModal(false);
+      handleClose(false);
+      toast.success(t('userDeletedSuccess'));
+      onSuccess?.();
+    } catch (err) {
+      const e: any = err;
+      const msg =
+        e?.response?.data?.message ||
+        e?.response?.data?.error ||
+        e?.message ||
+        t('serverError');
+      setEditFormError(String(msg));
+    }
+  };
+
+  const openResetPasswordDialog = () => {
+    const generatedPassword = generateRandomPassword();
+    resetPasswordForm.reset({ password: generatedPassword });
+    setResetFormError(null);
+    setShowResetPassword(false);
+    setIsResetPasswordDialogOpen(true);
+  };
+
+  const onResetPasswordSubmit = async () => {
+    setIsResettingPassword(true);
+    setResetFormError(null);
+    try {
+      const { password } = resetPasswordForm.getValues();
+      const response = await request<{ password: string }>({
+        url: `/user/${userId}/reset-password`,
+        method: 'PATCH',
+        data: { password },
+      });
+      setResetPasswordResult(response.data.password);
+      setIsResetPasswordDialogOpen(false);
+      setIsResetResultDialogOpen(true);
+      await refetchUser();
+      toast.success(t('passwordResetSuccess'));
+    } catch (err) {
+      const e: any = err;
+      const msg =
+        e?.response?.data?.message ||
+        e?.response?.data?.error ||
+        e?.message ||
+        t('serverError');
+      setResetFormError(String(msg));
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
+  const copyResetPassword = async () => {
+    try {
+      await navigator.clipboard.writeText(resetPasswordResult);
+      toast.success(t('passwordCopied'));
+    } catch {
+      toast.error(t('passwordCopyError'));
+    }
+  };
+
+  const handleAvatarClick = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async (e: any) => {
+      const file = e.target?.files?.[0];
+      if (file) {
+        setIsUploadingAvatar(true);
+        try {
+          const formData = new FormData();
+          formData.append('avatar', file);
+          const response: any = await request({
+            url: `/user/${userId}/avatar`,
+            method: 'POST',
+            data: formData,
+            headers: { 'Content-Type': 'multipart/form-data' },
+          });
+          setPhoto(response.data.id);
+          toast.success(t('pictureUpdatedSuccess'));
+          await refetchUser();
+          onSuccess?.();
+        } catch (err) {
+          console.error(err);
+        } finally {
+          setIsUploadingAvatar(false);
+        }
+      }
+    };
+    input.click();
+  };
+
+  if (!open) return null;
+
+  if (isLoading || !editingUser) {
+    return (
+      <Sheet open={open} onOpenChange={handleClose}>
+        <SheetContent className="w-full sm:max-w-4xl overflow-y-auto gap-0">
+          <SheetHeader>
+            <SheetTitle>{t('titleEditUser')}</SheetTitle>
+            <SheetDescription>{t('description')}</SheetDescription>
+          </SheetHeader>
+          <div className="flex items-center justify-center h-40">
+            <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={handleClose}>
+      <SheetContent className="w-full sm:max-w-4xl overflow-y-auto gap-0">
+        <SheetHeader>
+          <SheetTitle>{t('titleEditUser')}</SheetTitle>
+          <SheetDescription>{t('description')}</SheetDescription>
+        </SheetHeader>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid w-full grid-cols-7 bg-muted rounded-md text-muted-foreground text-sm">
+            <TabsTrigger
+              value="overview"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <UserCircle className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabOverview')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="edit"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <Save className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabEdit')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="credentials"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <Key className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabCredentials')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="identifiers"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <Fingerprint className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabIdentifiers')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="permissions"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <ShieldCheck className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabPermissions')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="mfa"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <Shield className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabMfa')}</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="sessions"
+              className="flex items-center justify-center gap-2 px-3 py-4 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+            >
+              <Monitor className="h-4 w-4 min-h-4 min-w-4" />
+              <span className="hidden md:inline">{t('tabSessions')}</span>
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Overview Tab */}
+          <TabsContent value="overview" className="space-y-4 mt-4 p-4 pt-0">
+            <div className="flex flex-col items-center gap-3 py-4">
+              <div className="relative group">
+                <Avatar className="h-24 w-24 shadow-md">
+                  <AvatarImage
+                    src={getPhotoUrl(photo || editingUser.photo_id)}
+                    alt={editingUser.name}
+                    className="object-cover h-24 w-24 rounded-full"
+                  />
+                  <AvatarFallback className="text-2xl font-semibold bg-linear-to-br from-purple-500 to-pink-500 text-white">
+                    {editingUser.name?.charAt(0)?.toUpperCase() || 'U'}
+                  </AvatarFallback>
+                </Avatar>
+                <button
+                  onClick={handleAvatarClick}
+                  disabled={isUploadingAvatar}
+                  className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:cursor-not-allowed"
+                >
+                  {isUploadingAvatar ? (
+                    <div className="h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  ) : (
+                    <Camera className="h-6 w-6 text-white" />
+                  )}
+                </button>
+                <div className="absolute -bottom-1 -right-1">
+                  {editingUser.suspended_until ? (
+                    <div className="rounded-full bg-rose-500 p-1.5 shadow-md">
+                      <ShieldCheck className="h-3.5 w-3.5 text-white" />
+                    </div>
+                  ) : (
+                    <div className="rounded-full bg-green-500 p-1.5 shadow-md">
+                      <Users className="h-3.5 w-3.5 text-white" />
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="text-center space-y-0.5">
+                <h3 className="text-xl font-bold bg-linear-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+                  {editingUser.name}
+                </h3>
+                <p className="text-sm text-muted-foreground flex items-center gap-2 justify-center">
+                  <Mail className="h-4 w-4" />
+                  {getUserEmail(editingUser)}
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <Card
+                className={`border-l-4 ${editingUser.suspended_until ? 'border-l-red-500' : 'border-l-green-500'} py-2`}
+              >
+                <CardHeader className="p-2">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardDescription className="text-xs">
+                        {t('status')}
+                      </CardDescription>
+                      <CardTitle className="text-sm">
+                        {editingUser.suspended_until ? (
+                          <span className="text-rose-600">{t('blocked')}</span>
+                        ) : (
+                          <span className="text-green-600">{t('active')}</span>
+                        )}
+                      </CardTitle>
+                    </div>
+                    <div
+                      className={`rounded-full p-1 ${editingUser.suspended_until ? 'bg-rose-100' : 'bg-green-100'}`}
+                    >
+                      <Activity
+                        className={`h-6 w-6 ${editingUser.suspended_until ? 'text-rose-600' : 'text-green-600'}`}
+                      />
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+
+              <Card className="border-l-4 border-l-primary-500 py-2">
+                <CardHeader className="p-2">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardDescription className="text-xs">
+                        {t('cardLastLoginDescription')}
+                      </CardDescription>
+                      {Boolean(editingUser.user_session?.length) ? (
+                        <CardTitle className="text-sm truncate">
+                          {editingUser.user_session?.[0]?.created_at &&
+                            formatDistanceToNow(
+                              new Date(
+                                editingUser.user_session?.[0]?.created_at
+                              ),
+                              {
+                                addSuffix: true,
+                                locale:
+                                  currentLocaleCode === 'en' ? enUS : ptBR,
+                              }
+                            )}
+                          <small className="text-xs ml-2 text-muted-foreground">
+                            {formatDateTime(
+                              String(editingUser.user_session?.[0]?.created_at),
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </small>
+                        </CardTitle>
+                      ) : (
+                        <CardTitle>{t('cardLastLoginTitle')}</CardTitle>
+                      )}
+                    </div>
+                    <div className="rounded-full bg-primary-100 p-1">
+                      <Clock className="h-6 w-6 text-primary-600" />
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-semibold flex items-center gap-2">
+                  <Shield className="h-4 w-4" />
+                  {t('securityTitle')}
+                </h4>
+              </div>
+
+              <div className="grid grid-cols-3 gap-2">
+                <Card className="border-l-4 border-l-amber-500 py-2">
+                  <CardHeader className="p-2">
+                    <div className="flex flex-col items-center text-center">
+                      <div className="rounded-full bg-amber-100 p-1 mb-1">
+                        <Shield className="h-4 w-4 text-amber-600" />
+                      </div>
+                      <CardDescription className="text-xs">
+                        {t('securityDescription')}
+                      </CardDescription>
+                      <CardTitle className="text-sm font-bold">
+                        {editingUser.user_mfa &&
+                        editingUser.user_mfa.length > 0 ? (
+                          <span className="text-amber-600">
+                            {t('securityLevelHight')}
+                          </span>
+                        ) : (
+                          <span className="text-orange-600">
+                            {t('securityLevelMedium')}
+                          </span>
+                        )}
+                      </CardTitle>
+                    </div>
+                  </CardHeader>
+                </Card>
+
+                <Card className="border-l-4 border-l-purple-500 py-2">
+                  <CardHeader className="p-2">
+                    <div className="flex flex-col items-center text-center">
+                      <div className="rounded-full bg-purple-100 p-1 mb-1">
+                        <Shield className="h-4 w-4 text-purple-600" />
+                      </div>
+                      <CardDescription className="text-xs">
+                        {t('cardMfaMethods')}
+                      </CardDescription>
+                      <CardTitle className="text-sm font-bold text-purple-600">
+                        {editingUser.user_mfa?.length || 0}
+                      </CardTitle>
+                    </div>
+                  </CardHeader>
+                </Card>
+
+                <Card className="border-l-4 border-l-blue-500 py-2">
+                  <CardHeader className="p-2">
+                    <div className="flex flex-col items-center text-center">
+                      <div className="rounded-full bg-blue-100 p-1 mb-1">
+                        <Fingerprint className="h-4 w-4 text-blue-600" />
+                      </div>
+                      <CardDescription className="text-xs">
+                        {t('cardUserId')}
+                      </CardDescription>
+                      <CardTitle className="text-xs font-bold text-blue-600">
+                        #{editingUser.id}
+                      </CardTitle>
+                    </div>
+                  </CardHeader>
+                </Card>
+              </div>
+            </div>
+
+            {editingUser.suspended_until && (
+              <Card className="border-rose-200 bg-rose-50/50">
+                <CardHeader className="p-2">
+                  <div className="flex items-start gap-2">
+                    <div className="rounded-full bg-rose-100 p-1">
+                      <ShieldCheck className="h-3 w-3 text-rose-600" />
+                    </div>
+                    <div className="flex-1 space-y-2">
+                      <div>
+                        <p className="text-sm font-semibold text-rose-900">
+                          {t('accountSuspended')}
+                        </p>
+                        <p className="text-xs text-rose-700 flex items-center gap-1 mt-1">
+                          <Clock className="h-3 w-3" />
+                          {t('until')}: {editingUser.suspended_until}
+                        </p>
+                      </div>
+                      {editingUser.suspended_reason && (
+                        <div className="rounded-md bg-rose-100 p-2">
+                          <p className="text-xs font-medium text-rose-900">
+                            {t('reason')}
+                          </p>
+                          <p className="text-xs text-rose-700">
+                            {editingUser.suspended_reason}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+            )}
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-semibold flex items-center gap-2">
+                  <Shield className="h-4 w-4" />
+                  {t('recentActivityTitle')}
+                </h4>
+              </div>
+
+              <Card className="rounded-md p-0">
+                <CardContent className="p-4 gap-2 flex flex-col">
+                  {editingUser.user_activity?.length ? (
+                    <div className="space-y-3">
+                      {editingUser.user_activity
+                        ?.slice(0, 5)
+                        .map((activity, index) => {
+                          const actionIcons: Record<string, LucideIcon> = {
+                            login: UserIcon,
+                            forgotPassword: KeyRound,
+                            logout: LogOut,
+                            resetPassword: RefreshCcw,
+                            revokeAllSessions: ShieldOff,
+                            revokeSession: Shield,
+                          };
+                          const Icon = actionIcons[activity.action] || UserIcon;
+
+                          return (
+                            <div
+                              key={index}
+                              className="flex items-start gap-3 border-b pb-3 last:border-none"
+                            >
+                              <div className="rounded-md bg-blue-50 p-2">
+                                <Icon className="w-4 h-4 text-gray-600" />
+                              </div>
+                              <div className="flex-1">
+                                <p className="text-sm font-medium">
+                                  {userActivityT(activity.action)}
+                                </p>
+                                <p className="text-[11px] text-gray-500 mt-1">
+                                  {activity.created_at &&
+                                    formatDistanceToNow(
+                                      new Date(activity.created_at),
+                                      {
+                                        addSuffix: true,
+                                        locale:
+                                          currentLocaleCode === 'en'
+                                            ? enUS
+                                            : ptBR,
+                                      }
+                                    )}
+                                </p>
+                              </div>
+                            </div>
+                          );
+                        })}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-muted-foreground">
+                      {t('noRecentActivity')}
+                    </span>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="flex justify-end">
+              <Button
+                className="cursor-pointer"
+                variant="destructive"
+                onClick={() => setOpenDeleteModal(true)}
+              >
+                <Trash2 className="w-4 h-4" />
+                <span>{t('buttonDeleteUser')}</span>
+              </Button>
+            </div>
+
+            <AlertDialog
+              open={openDeleteModal}
+              onOpenChange={setOpenDeleteModal}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t('dialogDeleteUserTitle')}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('dialogDeleteUserDescription')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('deleteUserCancel')}</AlertDialogCancel>
+                  <AlertDialogAction onClick={onDelete}>
+                    {t('deleteUserConfirm')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </TabsContent>
+
+          {/* Edit Tab */}
+          <TabsContent value="edit" className="space-y-4 mt-4 p-4 pt-0">
+            <Form {...editForm}>
+              <form
+                onSubmit={editForm.handleSubmit(onEditSubmit)}
+                className="space-y-4"
+              >
+                <FormField
+                  control={editForm.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('editNameLabel')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('editNamePlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormActions
+                  statusContent={editDraftStatusContent}
+                  cancelLabel={t('cancel')}
+                  onCancel={() => onOpenChange(false)}
+                  submitLabel={t('saveChanges')}
+                  submitType="submit"
+                  className="pt-2"
+                />
+              </form>
+            </Form>
+          </TabsContent>
+
+          {/* Credentials Tab */}
+          <TabsContent value="credentials" className="space-y-4 mt-4 p-4 pt-0">
+            <div className="space-y-3 rounded-lg border p-4">
+              <div>
+                <h4 className="text-sm font-semibold">
+                  {t('passwordResetTitle')}
+                </h4>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('passwordResetDescription')}
+                </p>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t('passwordResetNotice')}
+              </p>
+              <div className="flex flex-col gap-2">
+                <Button
+                  type="button"
+                  onClick={openResetPasswordDialog}
+                  className="w-full sm:w-fit"
+                >
+                  <RefreshCcw className="h-4 w-4 mr-2" />
+                  {t('buttonResetPassword')}
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">
+                {t('connectedAccountsTitle')}
+              </h4>
+              <div className="space-y-2">
+                {accountProviders.map((provider) => {
+                  const isConnected = editingUser.user_account?.some(
+                    (account) =>
+                      account.provider?.toLowerCase() ===
+                      provider.name.toLowerCase()
+                  );
+                  return (
+                    <div
+                      key={provider.name}
+                      className={`flex items-center justify-between rounded-lg border p-3 ${isConnected ? '' : 'border-dashed'}`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="rounded-md bg-slate-50 p-2">
+                          <img
+                            src={provider.icon}
+                            alt={`${provider.name} icon`}
+                            className={`h-5 w-5 ${isConnected ? 'opacity-100' : 'opacity-50'}`}
+                          />
+                        </div>
+                        <div>
+                          <p
+                            className={`text-sm font-medium ${isConnected ? '' : 'text-muted-foreground'}`}
+                          >
+                            {provider.name}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {isConnected ? t('connected') : t('notConnected')}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <AlertDialog
+              open={isResetPasswordDialogOpen}
+              onOpenChange={(open) => {
+                setIsResetPasswordDialogOpen(open);
+                if (!open) setResetFormError(null);
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t('passwordResetDialogTitle')}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('passwordResetDialogDescription')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+
+                <Form {...resetPasswordForm}>
+                  <form className="space-y-4">
+                    <FormField
+                      control={resetPasswordForm.control}
+                      name="password"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('passwordResetFieldLabel')}</FormLabel>
+                          <FormControl>
+                            <div className="space-y-2">
+                              <div className="relative">
+                                <Input
+                                  type={showResetPassword ? 'text' : 'password'}
+                                  {...field}
+                                  className="pr-10"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    setShowResetPassword((s) => !s)
+                                  }
+                                  className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-sm text-muted-foreground hover:bg-muted/50"
+                                  aria-label={
+                                    showResetPassword
+                                      ? t('hidePassword')
+                                      : t('showPassword')
+                                  }
+                                >
+                                  {showResetPassword ? (
+                                    <EyeOff className="h-4 w-4" />
+                                  ) : (
+                                    <Eye className="h-4 w-4" />
+                                  )}
+                                </button>
+                              </div>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => {
+                                  resetPasswordForm.setValue(
+                                    'password',
+                                    generateRandomPassword(),
+                                    {
+                                      shouldValidate: true,
+                                      shouldDirty: true,
+                                    }
+                                  );
+                                }}
+                              >
+                                <RefreshCcw className="h-4 w-4 mr-2" />
+                                {t('buttonRegeneratePassword')}
+                              </Button>
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {resetFormError && (
+                      <Alert variant="destructive">
+                        <AlertTitle>{t('verifyYourInput')}</AlertTitle>
+                        <AlertDescription>{resetFormError}</AlertDescription>
+                      </Alert>
+                    )}
+                  </form>
+                </Form>
+
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                  <AlertDialogAction
+                    disabled={isResettingPassword}
+                    onClick={async (event) => {
+                      event.preventDefault();
+                      const valid = await resetPasswordForm.trigger();
+                      if (!valid) return;
+                      await onResetPasswordSubmit();
+                    }}
+                  >
+                    {isResettingPassword
+                      ? t('passwordResetSubmitting')
+                      : t('passwordResetConfirm')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
+            <AlertDialog
+              open={isResetResultDialogOpen}
+              onOpenChange={(open) => {
+                setIsResetResultDialogOpen(open);
+                if (!open) {
+                  setResetPasswordResult('');
+                  setShowResetPasswordResult(false);
+                }
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t('passwordResultTitle')}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('passwordResultDescription')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+
+                <div className="space-y-3">
+                  <div className="relative">
+                    <Input
+                      readOnly
+                      value={resetPasswordResult}
+                      type={showResetPasswordResult ? 'text' : 'password'}
+                      className="pr-10"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowResetPasswordResult((s) => !s)}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-sm text-muted-foreground hover:bg-muted/50"
+                      aria-label={
+                        showResetPasswordResult
+                          ? t('hidePassword')
+                          : t('showPassword')
+                      }
+                    >
+                      {showResetPasswordResult ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={copyResetPassword}
+                    >
+                      {t('buttonCopyPassword')}
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={() => setIsResetResultDialogOpen(false)}
+                    >
+                      {t('close')}
+                    </Button>
+                  </div>
+                </div>
+              </AlertDialogContent>
+            </AlertDialog>
+          </TabsContent>
+
+          {/* Identifiers Tab */}
+          <TabsContent value="identifiers" className="space-y-4 mt-4 p-4 pt-0">
+            <UserIdentifiersSection editingUser={editingUser} />
+          </TabsContent>
+
+          {/* Permissions Tab */}
+          <TabsContent value="permissions" className="space-y-4 mt-4 p-4 pt-0">
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="text-sm font-semibold flex items-center gap-2">
+                    <ShieldCheck className="h-4 w-4" />
+                    {t('permissionsTitle')}
+                  </h4>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {t('permissionsDescription')}
+                  </p>
+                </div>
+              </div>
+              <PermissionsSection
+                userId={editingUser.id!}
+                userName={editingUser.name ?? undefined}
+                onRoleChange={handleRefreshUser}
+              />
+            </div>
+          </TabsContent>
+
+          {/* MFA Tab */}
+          <TabsContent value="mfa" className="space-y-4 mt-4 p-4 pt-0">
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">{t('mfaTitle')}</h4>
+              {editingUser.user_mfa && editingUser.user_mfa.length > 0 ? (
+                <div className="space-y-2">
+                  {editingUser.user_mfa.map((mfa: UserMfa) => (
+                    <div
+                      key={String(mfa.id)}
+                      className="flex items-center justify-between rounded-lg border p-3"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="rounded-md bg-amber-50 p-2">
+                          <Shield className="h-5 w-5 text-amber-600" />
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium">{mfa.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {t('mfaEnabled')}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded-lg border border-dashed p-6 text-center">
+                  <Shield className="h-12 w-12 text-muted-foreground mx-auto mb-3" />
+                  <p className="text-sm font-medium mb-1">
+                    {t('noMfaEnabled')}
+                  </p>
+                  <p className="text-xs text-muted-foreground mb-4">
+                    {t('enhanceSecurity')}
+                  </p>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+
+          {/* Sessions Tab */}
+          <TabsContent value="sessions" className="space-y-4 mt-4 p-4 pt-0">
+            <ActiveSessions
+              editingUser={editingUser}
+              refetch={handleRefreshUser}
+            />
+          </TabsContent>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ─── Public component ─────────────────────────────────────────────────────────
+
+export function UserSheet({
+  open,
+  onOpenChange,
+  userId,
+  onSuccess,
+}: UserSheetProps) {
+  if (!open) return null;
+
+  if (userId != null) {
+    return (
+      <UserEditSheet
+        open={open}
+        onOpenChange={onOpenChange}
+        userId={userId}
+        onSuccess={onSuccess}
+      />
+    );
+  }
+
+  return (
+    <UserCreateSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      onSuccess={onSuccess}
+    />
+  );
+}