@hed-hog/core 0.0.321 → 0.0.322

package/hedhog/frontend/app/users/page.tsx.ejs

@@ -8,86 +8,22 @@ import {
   SearchBar,
   StatsCards,
 } from '@/components/entity-list';
-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 { PaginatedResult } from '@/types/pagination-result';
 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,
-  UserPlus,
-  Users,
-} from 'lucide-react';
+import { Mail, ShieldCheck, UserPlus, 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';
+import { useState } from 'react';
+import { UserSheet } from './user-sheet';
 
 type RequestResponse<T> = {
   paginate: PaginatedResult<T>;
@@ -98,46 +34,13 @@ type RequestResponse<T> = {
   };
 };
 
-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 USER_EDIT_DRAFT_STORAGE_KEY = 'core-user-edit-draft';
-
 export default function UserPage() {
   const t = useTranslations('core.UserPage');
-  const userActivityT = useTranslations('core.UserActivity');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
+  const { request, currentLocaleCode } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [editingUser, setEditingUser] = useState<User | null>(null);
-  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
-  const [formError, setFormError] = useState<string | null>(null);
-  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 [photo, setPhoto] = useState<number | null | undefined>(null);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
 
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(12);
@@ -175,399 +78,21 @@ export default function UserPage() {
     },
   });
 
-  const addUserSchema = z.object({
-    name: z.string().min(2, t('errorName')),
-    email: z.string().email(t('errorEmail')),
-    password: z
-      .string()
-      .min(6, t('errorPassword'))
-      .optional()
-      .or(z.literal('')),
-  });
-
-  const form = useForm<z.infer<typeof addUserSchema>>({
-    resolver: zodResolver(addUserSchema),
-    defaultValues: {
-      name: '',
-      email: '',
-      password: '',
-    },
-  });
-
-  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 watchedCreateValues = useWatch({
-    control: form.control,
-  });
-  const watchedEditValues = useWatch({
-    control: editForm.control,
-  });
-
-  const {
-    clearDraft: clearCreateDraft,
-    loadDraft: loadCreateDraft,
-    hasDraft: hasCreateDraft,
-    savedAt: createDraftSavedAt,
-  } = useFormDraft<UserCreateDraftPayload>({
-    storageKey: USER_CREATE_DRAFT_STORAGE_KEY,
-    value: {
-      values: {
-        name: watchedCreateValues.name ?? '',
-        email: watchedCreateValues.email ?? '',
-      },
-    },
-    hasData: Boolean(
-      (watchedCreateValues.name ?? '').trim() ||
-      (watchedCreateValues.email ?? '').trim()
-    ),
-    enabled: isDialogOpen,
-  });
-
-  const {
-    clearDraft: clearEditDraft,
-    loadDraft: loadEditDraft,
-    hasDraft: hasEditDraft,
-    savedAt: editDraftSavedAt,
-  } = useFormDraft<UserEditDraftPayload>({
-    storageKey: USER_EDIT_DRAFT_STORAGE_KEY,
-    value: {
-      userId: editingUser?.id ? Number(editingUser.id) : null,
-      values: {
-        name: watchedEditValues.name ?? '',
-        email: watchedEditValues.email ?? '',
-      },
-    },
-    hasData: Boolean(
-      (watchedEditValues.name ?? '').trim() ||
-      (watchedEditValues.email ?? '').trim()
-    ),
-    enabled: Boolean(editingUser),
-  });
-
-  const createDraftStatusContent = useMemo(() => {
-    if (!hasCreateDraft || !createDraftSavedAt) {
-      return null;
-    }
-
-    const savedDate = new Date(createDraftSavedAt);
-
-    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}`;
-  }, [createDraftSavedAt, currentLocaleCode, getSettingValue, hasCreateDraft]);
-
-  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]);
-
-  const [activeTab, setActiveTab] = useState('overview');
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-
-  const 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('');
+  const handleOpenCreate = () => {
+    setSelectedUserId(null);
+    setIsSheetOpen(true);
   };
 
-  const openResetPasswordDialog = () => {
-    const generatedPassword = generateRandomPassword();
-    resetPasswordForm.reset({ password: generatedPassword });
-    setResetFormError(null);
-    setShowResetPassword(false);
-    setIsResetPasswordDialogOpen(true);
+  const handleOpenEdit = (user: User) => {
+    setSelectedUserId(Number(user.id));
+    setIsSheetOpen(true);
   };
 
-  useEffect(() => {
-    if (editingUser) {
-      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');
-    }
-  }, [editForm, editingUser, loadEditDraft]);
-
-  useEffect(() => {
-    if (!isDialogOpen) {
-      return;
-    }
-
-    const storedDraft = loadCreateDraft();
-
-    form.reset({
-      name: storedDraft?.payload.values.name ?? '',
-      email: storedDraft?.payload.values.email ?? '',
-      password: '',
-    });
-  }, [form, isDialogOpen, loadCreateDraft]);
-
-  const onSubmit = async (values: z.infer<typeof addUserSchema>) => {
-    try {
-      await request({
-        url: '/user',
-        method: 'POST',
-        data: values,
-      });
-      clearCreateDraft();
-      form.reset();
-      refetch();
-      setIsDialogOpen(false);
-      setFormError(null);
-    } catch (err) {
-      const e: any = err;
-      const msg =
-        e?.response?.data?.message ||
-        e?.response?.data?.error ||
-        e?.message ||
-        'Server error';
-      setFormError(String(msg));
-    }
-  };
-
-  const handleEdit = (user: User) => {
-    setEditFormError(null);
-    setEditingUser(user);
-  };
-
-  const onDelete = async () => {
-    try {
-      await request({
-        url: `/user`,
-        method: 'DELETE',
-        data: {
-          ids: [Number(editingUser?.id)],
-        },
-      });
-      refetch();
-      setOpenDeleteModal(false);
-      setEditingUser(null);
-      setEditFormError(null);
-      toast.success(t('userDeletedSuccess'));
-    } catch (err) {
-      const e: any = err;
-      const msg =
-        e?.response?.data?.message ||
-        e?.response?.data?.error ||
-        e?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
-    }
-  };
-
-  const handleRefreshEditingUser = async () => {
-    const updated = await refetch();
-    const freshUser = updated.data?.paginate?.data.find(
-      (u: User) => u.id === editingUser?.id
-    );
-
-    if (freshUser) {
-      setEditingUser(freshUser);
-    }
-  };
-
-  const onEditSubmit = async (values: z.infer<typeof editUserSchema>) => {
-    try {
-      await request({
-        url: `/user/${editingUser?.id}`,
-        method: 'PATCH',
-        data: values,
-      });
-      clearEditDraft();
-      refetch();
-      setEditFormError(null);
-      toast.success(t('userUpdatedSuccess'));
-    } catch (err) {
-      const e: any = err;
-      const msg =
-        e?.response?.data?.message ||
-        e?.response?.data?.error ||
-        e?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
-    }
-  };
-
-  const onResetPasswordSubmit = async () => {
-    if (!editingUser?.id) {
-      return;
-    }
-
-    setIsResettingPassword(true);
-    setResetFormError(null);
-    try {
-      const { password } = resetPasswordForm.getValues();
-      const response = await request<{ password: string }>({
-        url: `/user/${editingUser.id}/reset-password`,
-        method: 'PATCH',
-        data: {
-          password,
-        },
-      });
-
-      setResetPasswordResult(response.data.password);
-      setIsResetPasswordDialogOpen(false);
-      setIsResetResultDialogOpen(true);
-      refetch();
-      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 && editingUser) {
-        setIsUploadingAvatar(true);
-        try {
-          const formData = new FormData();
-          formData.append('avatar', file);
-
-          const response: any = await request({
-            url: `/user/${editingUser.id}/avatar`,
-            method: 'POST',
-            data: formData,
-            headers: {
-              'Content-Type': 'multipart/form-data',
-            },
-          });
-
-          setPhoto(response.data.id);
-          toast.success(t('pictureUpdatedSuccess'));
-          refetch();
-        } catch (err) {
-          console.error(err);
-        } finally {
-          setIsUploadingAvatar(false);
-        }
-      }
-    };
-    input.click();
+  const handleSheetClose = (open: boolean) => {
+    setIsSheetOpen(open);
+    if (!open) setSelectedUserId(null);
   };
 
-  const accountProviders = [
-    { name: 'Google', icon: '/google.svg' },
-    { name: 'GitHub', icon: '/github.svg' },
-    { name: 'Facebook', icon: '/facebook.svg' },
-  ];
-
   return (
     <Page>
       <PageHeader
@@ -575,7 +100,7 @@ export default function UserPage() {
         actions={[
           {
             label: t('buttonAddUser'),
-            onClick: () => setIsDialogOpen(true),
+            onClick: handleOpenCreate,
             variant: 'default',
           },
         ]}
@@ -673,14 +198,14 @@ export default function UserPage() {
             title={t('noUsersFound')}
             description={t('description')}
             actionLabel={t('buttonAddUser')}
-            onAction={() => setIsDialogOpen(true)}
+            onAction={handleOpenCreate}
           />
         ) : (
           <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
             {paginate?.data?.map((user: User) => (
               <Card
                 key={user.id}
-                onDoubleClick={() => handleEdit(user)}
+                onDoubleClick={() => handleOpenEdit(user)}
                 className="cursor-pointer rounded-md flex flex-col justify-between gap-2 border border-border/60 bg-card p-4 shadow-sm transition hover:border-primary"
               >
                 <CardHeader className="flex items-start justify-between gap-4 p-0">
@@ -705,7 +230,7 @@ export default function UserPage() {
                     <Button
                       variant="outline"
                       size="sm"
-                      onClick={() => handleEdit(user)}
+                      onClick={() => handleOpenEdit(user)}
                     >
                       {t('buttonEditUser')}
                     </Button>
@@ -831,895 +356,12 @@ export default function UserPage() {
           />
         </div>
 
-        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <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={createDraftStatusContent}
-                  submitLabel={t('buttonAddUser')}
-                  submitType="submit"
-                  sheetClassName="px-0 pb-0"
-                />
-              </form>
-            </Form>
-          </SheetContent>
-        </Sheet>
-
-        {editingUser && (
-          <Sheet
-            open={!!editingUser}
-            onOpenChange={(open) => {
-              setEditingUser(null);
-              setPhoto(null);
-              setIsResetPasswordDialogOpen(false);
-              setIsResetResultDialogOpen(false);
-              setResetPasswordResult('');
-            }}
-          >
-            <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>
-
-                <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>
-
-                <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={() => setEditingUser(null)}
-                        submitLabel={t('saveChanges')}
-                        submitType="submit"
-                        className="pt-2"
-                      />
-                    </form>
-                  </Form>
-                </TabsContent>
-
-                <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: any) => {
-                        const isConnected = editingUser.user_account?.includes(
-                          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(
-                                            (state) => !state
-                                          )
-                                        }
-                                        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((state) => !state)
-                            }
-                            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>
-
-                <TabsContent
-                  value="identifiers"
-                  className="space-y-4 mt-4 p-4 pt-0"
-                >
-                  <UserIdentifiersSection editingUser={editingUser} />
-                </TabsContent>
-
-                <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!}
-                      onRoleChange={handleRefreshEditingUser}
-                    />
-                  </div>
-                </TabsContent>
-
-                <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>
-
-                <TabsContent
-                  value="sessions"
-                  className="space-y-4 mt-4 p-4 pt-0"
-                >
-                  <ActiveSessions
-                    editingUser={editingUser}
-                    refetch={handleRefreshEditingUser}
-                  />
-                </TabsContent>
-              </Tabs>
-            </SheetContent>
-          </Sheet>
-        )}
+        <UserSheet
+          open={isSheetOpen}
+          onOpenChange={handleSheetClose}
+          userId={selectedUserId}
+          onSuccess={refetch}
+        />
       </div>
     </Page>
   );