@hed-hog/core 0.0.185 → 0.0.190

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

@@ -0,0 +1,1257 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { formatDateTime } from '@/lib/format-date';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { getUserEmail } from '@/lib/get-user-email';
+import { PaginatedResult } from '@hed-hog/api-pagination';
+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 { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } 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';
+
+type RequestResponse<T> = {
+  paginate: PaginatedResult<T>;
+  stats: {
+    total: number;
+    newLast7Days: number;
+    blocked: number;
+  };
+};
+
+export default function UserPage() {
+  const t = useTranslations('core.UserPage');
+  const userActivityT = useTranslations('core.UserActivity');
+  const { request, currentLocaleCode, getSettingValue } = 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 [photo, setPhoto] = useState<number | null | undefined>(null);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  const {
+    data: { paginate, stats } = {
+      paginate: {},
+      stats: { total: 0, newLast7Days: 0, blocked: 0 },
+    },
+    isLoading,
+    refetch,
+  } = useQuery<RequestResponse<User>>({
+    queryKey: [
+      'users',
+      page,
+      pageSize,
+      searchQuery,
+      statusFilter,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (searchQuery) params.set('search', searchQuery);
+      if (statusFilter && statusFilter !== 'all')
+        params.set('filter', statusFilter);
+
+      const response = await request<RequestResponse<User>>({
+        url: `/user?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  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 [activeTab, setActiveTab] = useState('overview');
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+
+  useEffect(() => {
+    if (editingUser) {
+      editForm.reset({
+        name: editingUser.name || '',
+        email: getUserEmail(editingUser),
+      });
+      setActiveTab('overview');
+    }
+  }, [editingUser]);
+
+  const onSubmit = async (values: z.infer<typeof addUserSchema>) => {
+    try {
+      await request({
+        url: '/user',
+        method: 'POST',
+        data: values,
+      });
+      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,
+      });
+      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 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 accountProviders = [
+    { name: 'Google', icon: '/google.svg' },
+    { name: 'GitHub', icon: '/github.svg' },
+    { name: 'Facebook', icon: '/facebook.svg' },
+  ];
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('users') }]}
+        actions={[
+          {
+            label: t('buttonAddUser'),
+            onClick: () => setIsDialogOpen(true),
+            variant: 'default',
+          },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <StatsCards
+        stats={[
+          {
+            title: t('totalUsers'),
+            value: String(stats?.total || 0),
+            icon: <Users className="h-5 w-5" />,
+            iconBgColor: 'bg-purple-50',
+            iconColor: 'text-purple-600',
+          },
+          {
+            title: t('totalNewUsers7Days'),
+            value: String(stats?.newLast7Days || 0),
+            icon: <UserPlus className="h-5 w-5" />,
+            iconBgColor: 'bg-rose-50',
+            iconColor: 'text-rose-600',
+          },
+          {
+            title: t('totalValidatedUsers'),
+            value: '0',
+            icon: <Mail className="h-5 w-5" />,
+            iconBgColor: 'bg-green-50',
+            iconColor: 'text-green-600',
+          },
+          {
+            title: t('totalBlockedUsers'),
+            value: String(stats?.blocked || 0),
+            icon: <ShieldCheck className="h-5 w-5" />,
+            iconBgColor: 'bg-amber-50',
+            iconColor: 'text-amber-600',
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onSearch={() => refetch()}
+        placeholder={t('searchPlaceholder')}
+        filters={{
+          value: statusFilter,
+          onChange: (value) => {
+            setStatusFilter(value);
+            setPage(1);
+          },
+          placeholder: t('filterPlaceholder'),
+          options: [
+            { label: t('filterOptionAll'), value: 'all' },
+            { label: t('filterOptionNew'), value: 'new' },
+            { label: t('filterOptionBlocked'), value: 'blocked' },
+          ],
+        }}
+        className="mt-4"
+      />
+
+      <div className="flex-1 pt-4">
+        {isLoading && (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Card
+                key={`skeleton-${i}`}
+                className="flex flex-col justify-between gap-2 rounded-2xl border border-border/60 bg-card p-4 shadow-sm animate-pulse"
+              >
+                <CardHeader className="flex items-start justify-between gap-4 p-0">
+                  <div className="flex items-center gap-3">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-muted" />
+                    <div className="space-y-2 py-1">
+                      <div className="h-4 w-40 rounded bg-muted" />
+                      <div className="h-3 w-32 rounded bg-muted" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end gap-2">
+                    <div className="h-8 w-20 rounded bg-muted" />
+                    <div className="mt-1 h-5 w-20 rounded bg-muted" />
+                  </div>
+                </CardHeader>
+                <div className="mt-3 space-y-2 text-sm">
+                  <div className="h-3 w-full rounded bg-muted" />
+                  <div className="h-3 w-full rounded bg-muted" />
+                  <div className="h-3 w-1/2 rounded bg-muted" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {(paginate?.data?.length || 0) === 0 ? (
+          <p className="text-sm text-muted-foreground">{t('noUsersFound')}</p>
+        ) : (
+          <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)}
+                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">
+                  <div className="flex items-center gap-3">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-muted">
+                      <img
+                        src={getPhotoUrl(user.photo_id)}
+                        alt={user.name}
+                        className="h-12 w-12 rounded-full object-cover"
+                      />
+                    </div>
+                    <div>
+                      <CardTitle className="text-sm font-semibold">
+                        {user.name || '—'}
+                      </CardTitle>
+                      <CardDescription className="text-xs text-muted-foreground">
+                        {getUserEmail(user)}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleEdit(user)}
+                    >
+                      {t('buttonEditUser')}
+                    </Button>
+
+                    <div className="mt-1">
+                      {user.suspended_until ? (
+                        <span className="inline-flex items-center gap-2 rounded-full bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-700">
+                          <ShieldCheck className="h-3 w-3" />
+                          {t('blocked')}
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-2 rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
+                          <Users className="h-3 w-3" />
+                          {t('active')}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </CardHeader>
+                <div className="mt-3 space-y-2 text-sm text-muted-foreground">
+                  <div className="flex flex-wrap items-center gap-2">
+                    {(user as any).user_account?.includes('google') && (
+                      <div
+                        title={t('googleConnected')}
+                        className="inline-flex items-center gap-2 rounded-md bg-slate-50 px-2 py-1 text-xs text-slate-700"
+                      >
+                        <svg
+                          className="h-4 w-4"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          aria-hidden
+                        />
+                        {t('google')}
+                      </div>
+                    )}
+                    {(user as any).connectedAccounts?.includes('github') && (
+                      <div
+                        title={t('githubConnected')}
+                        className="inline-flex items-center gap-2 rounded-md bg-slate-50 px-2 py-1 text-xs text-slate-700"
+                      >
+                        <svg
+                          className="h-4 w-4"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          aria-hidden
+                        />
+                        {t('github')}
+                      </div>
+                    )}
+                    {(user as any).connectedAccounts?.includes('facebook') && (
+                      <div
+                        title={t('facebookConnected')}
+                        className="inline-flex items-center gap-2 rounded-md bg-slate-50 px-2 py-1 text-xs text-slate-700"
+                      >
+                        <svg
+                          className="h-4 w-4"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          aria-hidden
+                        />
+                        {t('facebook')}
+                      </div>
+                    )}
+                    {(!(user as any).connectedAccounts ||
+                      (user as any).connectedAccounts.length === 0) && (
+                      <div className="text-xs text-muted-foreground">
+                        {t('noConnectedAccounts')}
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    {user.user_mfa && user.user_mfa.length > 0 ? (
+                      user.user_mfa.map((mfa: UserMfa) => (
+                        <span
+                          key={String(mfa.id)}
+                          className="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700"
+                          title={`MFA: ${mfa}`}
+                        >
+                          {mfa.name}
+                        </span>
+                      ))
+                    ) : (
+                      <span className="text-xs text-muted-foreground">
+                        {t('noMfaMethods')}
+                      </span>
+                    )}
+                  </div>
+                  {user.suspended_reason && (
+                    <div className="text-xs text-muted-foreground">
+                      <span className="font-medium text-foreground">
+                        {t('reason')}:
+                      </span>{' '}
+                      {user.suspended_reason}
+                    </div>
+                  )}
+                  {user.suspended_until && (
+                    <div className="text-xs text-muted-foreground">
+                      <span className="font-medium text-foreground">
+                        {t('until')}:
+                      </span>{' '}
+                      {user.suspended_until}
+                    </div>
+                  )}
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        <div className="w-full border-t pt-2 mt-4">
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={
+              (paginate as any)?.total ?? (paginate as any)?.count ?? 0
+            }
+            onPageChange={setPage}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setPage(1);
+            }}
+            pageSizeOptions={[6, 12, 24, 48]}
+          />
+        </div>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{t('dialogAddUserTitle')}</DialogTitle>
+              <DialogDescription>{t('description')}</DialogDescription>
+            </DialogHeader>
+            <div className="w-full border-t pt-1 mt-1" />
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <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>
+                )}
+
+                <Button type="submit" className="w-full">
+                  {t('buttonAddUser')}
+                </Button>
+              </form>
+            </Form>
+          </DialogContent>
+        </Dialog>
+
+        {editingUser && (
+          <Sheet
+            open={!!editingUser}
+            onOpenChange={() => {
+              setEditingUser(null);
+              setPhoto(null);
+            }}
+          >
+            <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>
+
+                  <Dialog
+                    open={openDeleteModal}
+                    onOpenChange={setOpenDeleteModal}
+                  >
+                    <DialogContent className="sm:max-w-lg">
+                      <DialogHeader>
+                        <DialogTitle>{t('dialogDeleteUserTitle')}</DialogTitle>
+                        <DialogDescription>
+                          {t('dialogDeleteUserDescription')}
+                        </DialogDescription>
+                      </DialogHeader>
+                      <hr className="mt-4" />
+                      <div className="flex justify-end">
+                        <Button
+                          type="button"
+                          className="px-4 w-28 h-12 py-2 bg-gray-300 text-black hover:bg-gray-300 hover:text-black rounded-sm mr-2 text-md"
+                          onClick={() => setOpenDeleteModal(false)}
+                        >
+                          {t('deleteUserCancel')}
+                        </Button>
+                        <Button
+                          onClick={onDelete}
+                          variant="destructive"
+                          className="px-4 w-32 h-12 py-2 text-white hover:text-white rounded-sm text-md cursor-pointer"
+                        >
+                          {t('deleteUserConfirm')}
+                        </Button>
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </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>
+                        )}
+                      />
+                      <div className="flex flex-col w-full gap-2 pt-2">
+                        <Button type="submit" className="w-full">
+                          {t('saveChanges')}
+                        </Button>
+                        <Button
+                          className="w-full"
+                          type="button"
+                          variant="outline"
+                          onClick={() => setEditingUser(null)}
+                        >
+                          {t('cancel')}
+                        </Button>
+                      </div>
+                    </form>
+                  </Form>
+                </TabsContent>
+
+                <TabsContent
+                  value="credentials"
+                  className="space-y-4 mt-4  p-4 pt-0"
+                >
+                  <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>
+                </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>
+        )}
+      </div>
+    </div>
+  );
+}