@hed-hog/core 0.0.276 → 0.0.278

package/hedhog/frontend/app/dashboard/components/widgets/stat-actions-today.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatActionsToday({
       widgetName={widget?.name ?? 'stat-actions-today'}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-950/40">
-            <MousePointerClick className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('actionsToday')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('actionsTodaySubtitle')}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-3 p-3 md:gap-4 md:p-4">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-950/40 md:h-11 md:w-11">
+            <MousePointerClick className="h-4 w-4 text-indigo-600 dark:text-indigo-400 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('actionsToday')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('actionsTodaySubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/stat-consecutive-days.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatConsecutiveDays({
       widgetName={widget?.name ?? 'stat-consecutive-days'}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/40">
-            <CalendarDays className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('consecutiveDays')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('consecutiveDaysSubtitle')}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-3 p-3 md:gap-4 md:p-4">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/40 md:h-11 md:w-11">
+            <CalendarDays className="h-4 w-4 text-emerald-600 dark:text-emerald-400 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('consecutiveDays')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('consecutiveDaysSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/stat-online-time.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatOnlineTime({
       widgetName={widget?.name ?? 'stat-online-time'}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40">
-            <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('onlineTime')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('onlineTimeSubtitle')}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-3 p-3 md:gap-4 md:p-4">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40 md:h-11 md:w-11">
+            <Clock className="h-4 w-4 text-blue-600 dark:text-blue-400 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('onlineTime')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('onlineTimeSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/user-roles.tsx.ejs

@@ -52,7 +52,7 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
   const t = useTranslations('core.DashboardPage.userRoles');
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
         <div className="flex items-center gap-2">
           <Crown className="h-5 w-5 text-amber-600 dark:text-amber-400" />
@@ -64,8 +64,8 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="grid grid-cols-2 gap-2">
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           {roles.map((role, index) => {
             const style = levelStyles[index % levelStyles.length]!;
             return (

package/hedhog/frontend/app/dashboard/components/widgets/user-sessions.tsx.ejs

@@ -86,30 +86,31 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
   const router = useRouter();
 
   return (
-    <Card className="flex h-full flex-col">
-      <CardHeader className="shrink-0 pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Globe className="h-5 w-5 text-blue-600" />
-            <div>
-              <CardTitle className="text-base font-semibold">
-                {t('title')}
-              </CardTitle>
-              <CardDescription>{t('description')}</CardDescription>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => router.push('/core/account/sessions')}
-          >
-            <Info className="h-3.5 w-3.5" />
-            {t('moreInfo')}
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="flex flex-col gap-2">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-center gap-2">
+            <Globe className="h-5 w-5 text-blue-600" />
+            <div className="min-w-0">
+              <CardTitle className="text-base font-semibold">
+                {t('title')}
+              </CardTitle>
+              <CardDescription>{t('description')}</CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/core/account/sessions')}
+            className="w-full shrink-0 sm:w-auto"
+          >
+            <Info className="h-3.5 w-3.5" />
+            {t('moreInfo')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="flex flex-col gap-2">
           {sessions.map((session, index) => {
             const ua = session.user_agent ?? '';
             const deviceType = detectDeviceType(ua);
@@ -155,21 +156,21 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
                     }`}
                   />
                 </div>
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">
-                      {device}
-                    </span>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="min-w-0 break-words text-sm font-medium text-foreground">
+                      {device}
+                    </span>
                     {isCurrent && (
                       <Badge className="bg-emerald-100 text-[10px] text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/50 dark:text-emerald-400 dark:hover:bg-emerald-900/50">
                         {t('thisSession')}
                       </Badge>
                     )}
                   </div>
-                  <span className="text-xs text-muted-foreground">
-                    {browser} &middot; {ip}
-                  </span>
-                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground/70">
+                  <span className="break-words text-xs text-muted-foreground">
+                    {browser} &middot; {ip}
+                  </span>
+                  <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground/70">
                     <span className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
                       {relativeTime}

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

@@ -1,14 +1,29 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-
-export default function DashboardRedirectPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.replace('/core/dashboard/default');
-  }, [router]);
-
-  return null;
-}
+'use client';
+
+import { Dashboard } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function DashboardRedirectPage() {
+  const router = useRouter();
+  const { request, currentLocaleCode } = useApp();
+
+  const { data: dashboardData, isLoading } = useQuery<Dashboard | null>({
+    queryKey: ['dashboard-home-redirect', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<Dashboard | null>({
+        url: '/dashboard-core/home',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (isLoading) return;
+
+    router.replace(`/core/dashboard/${dashboardData?.slug ?? 'default'}`);
+  }, [dashboardData?.slug, isLoading, router]);
+
+  return null;
+}

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

@@ -7,6 +7,16 @@ import {
   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,
@@ -95,6 +105,7 @@ 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 [searchQuery, setSearchQuery] = useState('');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -103,6 +114,14 @@ export default function UserPage() {
   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 [page, setPage] = useState(1);
@@ -173,9 +192,57 @@ export default function UserPage() {
     },
   });
 
+  const resetPasswordSchema = z.object({
+    password: z.string().min(minPasswordLength, t('errorPassword')),
+  });
+
+  const resetPasswordForm = useForm<z.infer<typeof resetPasswordSchema>>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      password: '',
+    },
+  });
+
   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) => {
+      chars.push(group[randomValues[index] % group.length]);
+    });
+
+    for (let i = groups.length; i < randomValues.length; i++) {
+      chars.push(allChars[randomValues[i] % allChars.length]);
+    }
+
+    for (let i = chars.length - 1; i > 0; i--) {
+      const j = randomValues[i] % (i + 1);
+      [chars[i], chars[j]] = [chars[j], chars[i]];
+    }
+
+    return chars.slice(0, length).join('');
+  };
+
+  const openResetPasswordDialog = () => {
+    const generatedPassword = generateRandomPassword();
+    resetPasswordForm.reset({ password: generatedPassword });
+    setResetFormError(null);
+    setShowResetPassword(false);
+    setIsResetPasswordDialogOpen(true);
+  };
+
   useEffect(() => {
     if (editingUser) {
       editForm.reset({
@@ -270,6 +337,50 @@ export default function UserPage() {
     }
   };
 
+  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';
@@ -667,9 +778,12 @@ export default function UserPage() {
         {editingUser && (
           <Sheet
             open={!!editingUser}
-            onOpenChange={() => {
+            onOpenChange={(open) => {
               setEditingUser(null);
               setPhoto(null);
+              setIsResetPasswordDialogOpen(false);
+              setIsResetResultDialogOpen(false);
+              setResetPasswordResult('');
             }}
           >
             <SheetContent className="w-full sm:max-w-4xl overflow-y-auto gap-0">
@@ -1118,6 +1232,28 @@ export default function UserPage() {
                   value="credentials"
                   className="space-y-4 mt-4  p-4 pt-0"
                 >
+                  <Card className="border-amber-200 bg-amber-50/50">
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm">
+                        {t('passwordResetTitle')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('passwordResetDescription')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex flex-col gap-3">
+                      <div className="text-xs text-muted-foreground">
+                        {t('passwordResetNotice')}
+                      </div>
+                      <div>
+                        <Button type="button" onClick={openResetPasswordDialog}>
+                          <RefreshCcw className="h-4 w-4 mr-2" />
+                          {t('buttonResetPassword')}
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+
                   <div className="space-y-3">
                     <h4 className="text-sm font-medium">
                       {t('connectedAccountsTitle')}
@@ -1165,6 +1301,191 @@ export default function UserPage() {
                       })}
                     </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>
+
+                  <Dialog
+                    open={isResetResultDialogOpen}
+                    onOpenChange={(open) => {
+                      setIsResetResultDialogOpen(open);
+                      if (!open) {
+                        setResetPasswordResult('');
+                        setShowResetPasswordResult(false);
+                      }
+                    }}
+                  >
+                    <DialogContent className="sm:max-w-lg">
+                      <DialogHeader>
+                        <DialogTitle>{t('passwordResultTitle')}</DialogTitle>
+                        <DialogDescription>
+                          {t('passwordResultDescription')}
+                        </DialogDescription>
+                      </DialogHeader>
+
+                      <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>
+                    </DialogContent>
+                  </Dialog>
                 </TabsContent>
 
                 <TabsContent