@hed-hog/core 0.0.304 → 0.0.305

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

@@ -52,9 +52,13 @@ import {
 } from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { Role } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import {
   FileText,
   Menu,
@@ -65,8 +69,8 @@ import {
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 import { RoleMenusSection } from './menus';
@@ -107,9 +111,53 @@ type RoleDetail = {
   locale?: Record<string, RoleLocale>;
 };
 
+type RoleListItem = Role & {
+  role_id: number;
+  user_count?: number;
+  menu_count?: number;
+  route_count?: number;
+};
+
+type RoleDraftPayload = {
+  mode: 'create' | 'edit';
+  roleId: number | null;
+  localeCode: string;
+  values: {
+    slug: string;
+    name: string;
+    description: string;
+  };
+};
+
+const ROLE_CREATE_DRAFT_STORAGE_KEY = 'core-role-create-draft';
+const ROLE_EDIT_DRAFT_STORAGE_KEY = 'core-role-edit-draft';
+
+function getErrorMessage(error: unknown, fallbackMessage: string) {
+  if (error && typeof error === 'object') {
+    const record = error as {
+      message?: string;
+      response?: {
+        data?: {
+          message?: string;
+          error?: string;
+        };
+      };
+    };
+
+    return (
+      record.response?.data?.message ||
+      record.response?.data?.error ||
+      record.message ||
+      fallbackMessage
+    );
+  }
+
+  return fallbackMessage;
+}
+
 export default function RolePage() {
   const t = useTranslations('core.RolePage');
-  const { request, currentLocaleCode, locales } = useApp();
+  const { request, currentLocaleCode, locales, getSettingValue } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -127,7 +175,7 @@ export default function RolePage() {
     data: rolesResponse,
     isLoading,
     refetch,
-  } = useQuery<PaginatedResponse<Role>>({
+  } = useQuery<PaginatedResponse<RoleListItem>>({
     queryKey: ['roles', page, pageSize, searchQuery, currentLocaleCode],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -135,7 +183,7 @@ export default function RolePage() {
       params.set('pageSize', String(pageSize));
       if (searchQuery) params.set('search', searchQuery);
 
-      const response = await request<PaginatedResponse<Role>>({
+      const response = await request<PaginatedResponse<RoleListItem>>({
         url: `/role?${params.toString()}`,
         method: 'GET',
       });
@@ -177,23 +225,151 @@ export default function RolePage() {
     },
   });
 
+  const watchedCreateValues = useWatch({
+    control: form.control,
+  });
+  const watchedEditValues = useWatch({
+    control: editForm.control,
+  });
+
+  const {
+    clearDraft: clearCreateDraft,
+    loadDraft: loadCreateDraft,
+    hasDraft: hasCreateDraft,
+    savedAt: createDraftSavedAt,
+  } = useFormDraft<RoleDraftPayload>({
+    storageKey: ROLE_CREATE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      roleId: null,
+      localeCode: currentLocaleCode,
+      values: {
+        slug: watchedCreateValues.slug ?? '',
+        name: watchedCreateValues.name ?? '',
+        description: watchedCreateValues.description ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedCreateValues.slug ?? '').trim() ||
+      (watchedCreateValues.name ?? '').trim() ||
+      (watchedCreateValues.description ?? '').trim()
+    ),
+    enabled: isDialogOpen,
+  });
+
+  const {
+    clearDraft: clearEditDraft,
+    loadDraft: loadEditDraft,
+    hasDraft: hasEditDraft,
+    savedAt: editDraftSavedAt,
+  } = useFormDraft<RoleDraftPayload>({
+    storageKey: ROLE_EDIT_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      roleId: editingRole?.id ?? null,
+      localeCode: selectedLocale,
+      values: {
+        slug: watchedEditValues.slug ?? '',
+        name: watchedEditValues.name ?? '',
+        description: watchedEditValues.description ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedEditValues.slug ?? '').trim() ||
+      (watchedEditValues.name ?? '').trim() ||
+      (watchedEditValues.description ?? '').trim()
+    ),
+    enabled: Boolean(editingRole),
+  });
+
+  const createDraftStatusContent = useMemo(() => {
+    if (!hasCreateDraft || !createDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(createDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${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.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [editDraftSavedAt, currentLocaleCode, getSettingValue, hasEditDraft]);
+
+  const openCreateDialog = () => {
+    const storedDraft = loadCreateDraft();
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            slug: '',
+            name: '',
+            description: '',
+          }
+    );
+    setFormError(null);
+    setIsDialogOpen(true);
+  };
+
   useEffect(() => {
     if (editingRole && editingRole.locale && selectedLocale) {
+      const storedDraft = loadEditDraft();
+      const shouldRestoreDraft =
+        storedDraft?.payload.mode === 'edit' &&
+        storedDraft.payload.roleId === editingRole.id &&
+        storedDraft.payload.localeCode === selectedLocale;
       const localeData = editingRole.locale[selectedLocale];
-      editForm.reset({
-        slug: editingRole.slug || '',
-        name: localeData?.name || '',
-        description: localeData?.description || '',
-      });
-    }
-  }, [editingRole, selectedLocale]);
 
-  useEffect(() => {
-    if (editingRole) {
-      setSelectedLocale(currentLocaleCode);
-      setActiveTab('basic-info');
+      editForm.reset(
+        shouldRestoreDraft
+          ? storedDraft.payload.values
+          : {
+              slug: editingRole.slug || '',
+              name: localeData?.name || '',
+              description: localeData?.description || '',
+            }
+      );
     }
-  }, [editingRole?.id]);
+  }, [editForm, editingRole, loadEditDraft, selectedLocale]);
 
   const onSubmit = async (values: z.infer<typeof addRoleSchema>) => {
     try {
@@ -212,23 +388,18 @@ export default function RolePage() {
         },
       });
 
+      clearCreateDraft();
       form.reset();
       refetch();
       setIsDialogOpen(false);
       setFormError(null);
       toast.success(t('roleCreatedSuccess'));
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-
-      setFormError(String(msg));
+    } catch (err: unknown) {
+      setFormError(String(getErrorMessage(err, t('serverError'))));
     }
   };
 
-  const handleEdit = async (role: Role & { role_id: number }) => {
+  const handleEdit = async (role: RoleListItem) => {
     setEditFormError(null);
 
     try {
@@ -240,7 +411,7 @@ export default function RolePage() {
       const fullRole = response.data;
       const localeData: Record<string, RoleLocale> = {};
       if (fullRole.role_locale && Array.isArray(fullRole.role_locale)) {
-        fullRole.role_locale.forEach((rl: any) => {
+        fullRole.role_locale.forEach((rl) => {
           const localeCode = rl.locale?.code;
           if (localeCode) {
             localeData[localeCode] = {
@@ -260,6 +431,15 @@ export default function RolePage() {
         }
       });
 
+      const storedDraft = loadEditDraft();
+      const nextLocale =
+        storedDraft?.payload.mode === 'edit' &&
+        storedDraft.payload.roleId === fullRole.id
+          ? storedDraft.payload.localeCode
+          : currentLocaleCode;
+
+      setSelectedLocale(nextLocale);
+      setActiveTab('basic-info');
       setEditingRole({
         ...fullRole,
         locale: localeData,
@@ -291,17 +471,13 @@ export default function RolePage() {
         },
       });
 
+      clearEditDraft();
       toast.success(t('roleUpdatedSuccess'));
       setEditFormError(null);
       await refetch();
       setEditingRole(null);
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
+    } catch (err: unknown) {
+      setEditFormError(String(getErrorMessage(err, t('serverError'))));
     }
   };
 
@@ -319,13 +495,8 @@ export default function RolePage() {
       setEditingRole(null);
       setEditFormError(null);
       toast.success(t('roleDeletedSuccess'));
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
+    } catch (err: unknown) {
+      setEditFormError(String(getErrorMessage(err, t('serverError'))));
     }
   };
 
@@ -342,7 +513,7 @@ export default function RolePage() {
       const localeData: Record<string, RoleLocale> = {};
 
       if (fullRole.role_locale && Array.isArray(fullRole.role_locale)) {
-        fullRole.role_locale.forEach((rl: any) => {
+        fullRole.role_locale.forEach((rl) => {
           const localeCode = rl.locale?.code;
           if (localeCode) {
             localeData[localeCode] = {
@@ -378,7 +549,7 @@ export default function RolePage() {
         actions={[
           {
             label: t('buttonAddRole'),
-            onClick: () => setIsDialogOpen(true),
+            onClick: openCreateDialog,
             variant: 'default',
           },
         ]}
@@ -433,71 +604,65 @@ export default function RolePage() {
             title={t('noRolesFound')}
             description={t('description')}
             actionLabel={t('buttonAddRole')}
-            onAction={() => setIsDialogOpen(true)}
+            onAction={openCreateDialog}
           />
         ) : (
           <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-            {(rolesResponse?.data as (Role & { role_id: number })[])?.map(
-              (role: Role & { role_id: number }) => (
-                <Card
-                  key={String(role.role_id)}
-                  onDoubleClick={() => handleEdit(role)}
-                  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 flex-1">
-                      <div className="h-12 w-12 shrink-0 rounded-full bg-primary/10 flex items-center justify-center">
-                        <ShieldCheck className="h-6 w-6 text-primary" />
+            {(rolesResponse?.data as RoleListItem[])?.map((role) => (
+              <Card
+                key={String(role.role_id)}
+                onDoubleClick={() => handleEdit(role)}
+                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 flex-1">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-primary/10 flex items-center justify-center">
+                      <ShieldCheck className="h-6 w-6 text-primary" />
+                    </div>
+                    <div className="flex-1">
+                      <CardTitle className="text-sm font-semibold">
+                        {role.name}
+                      </CardTitle>
+                      <CardDescription className="text-xs text-muted-foreground">
+                        {role.slug}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEdit(role)}
+                  >
+                    {t('buttonEditRole')}
+                  </Button>
+                </CardHeader>
+                {role.description && (
+                  <CardContent className="p-0">
+                    <p className="text-xs text-muted-foreground line-clamp-2">
+                      {role.description}
+                    </p>
+                    <div className="text-xs line-clamp-2 flex gap-2 py-2">
+                      <div>
+                        {role.user_count ?? 0}{' '}
+                        {(role.user_count ?? 0) === 1 ? t('user') : t('users')}
                       </div>
-                      <div className="flex-1">
-                        <CardTitle className="text-sm font-semibold">
-                          {role.name}
-                        </CardTitle>
-                        <CardDescription className="text-xs text-muted-foreground">
-                          {role.slug}
-                        </CardDescription>
+                      <div>•</div>
+                      <div>
+                        {role.menu_count ?? 0}{' '}
+                        {(role.menu_count ?? 0) === 1 ? t('menu') : t('menus')}
                       </div>
-                    </div>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleEdit(role)}
-                    >
-                      {t('buttonEditRole')}
-                    </Button>
-                  </CardHeader>
-                  {role.description && (
-                    <CardContent className="p-0">
-                      <p className="text-xs text-muted-foreground line-clamp-2">
-                        {role.description}
-                      </p>
-                      <div className="text-xs line-clamp-2 flex gap-2 py-2">
-                        <div>
-                          {(role as any).user_count}{' '}
-                          {(role as any).user_count === 1
-                            ? t('user')
-                            : t('users')}
-                        </div>
-                        <div>•</div>
-                        <div>
-                          {(role as any).menu_count}{' '}
-                          {(role as any).menu_count === 1
-                            ? t('menu')
-                            : t('menus')}
-                        </div>
-                        <div>•</div>
-                        <div>
-                          {(role as any).route_count}{' '}
-                          {(role as any).route_count === 1
-                            ? t('route')
-                            : t('routes')}
-                        </div>
+                      <div>•</div>
+                      <div>
+                        {role.route_count ?? 0}{' '}
+                        {(role.route_count ?? 0) === 1
+                          ? t('route')
+                          : t('routes')}
                       </div>
-                    </CardContent>
-                  )}
-                </Card>
-              )
-            )}
+                    </div>
+                  </CardContent>
+                )}
+              </Card>
+            ))}
           </div>
         )}
 
@@ -515,7 +680,15 @@ export default function RolePage() {
           />
         </div>
 
-        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <Sheet
+          open={isDialogOpen}
+          onOpenChange={(open) => {
+            setIsDialogOpen(open);
+            if (!open) {
+              setFormError(null);
+            }
+          }}
+        >
           <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
             <SheetHeader>
               <SheetTitle>{t('dialogAddRoleTitle')}</SheetTitle>
@@ -591,6 +764,12 @@ export default function RolePage() {
                   </Alert>
                 )}
 
+                {createDraftStatusContent ? (
+                  <p className="text-xs text-muted-foreground">
+                    {createDraftStatusContent}
+                  </p>
+                ) : null}
+
                 <Button type="submit" className="w-full">
                   {t('buttonAddRole')}
                 </Button>
@@ -671,7 +850,7 @@ export default function RolePage() {
                           <SelectValue placeholder={t('selectLocale')} />
                         </SelectTrigger>
                         <SelectContent>
-                          {locales?.map((locale: any) => (
+                          {locales?.map((locale: Locale) => (
                             <SelectItem key={locale.code} value={locale.code}>
                               {locale.name}
                             </SelectItem>
@@ -740,6 +919,11 @@ export default function RolePage() {
                         )}
 
                         <div className="flex flex-col w-full gap-2 pt-2">
+                          {editDraftStatusContent ? (
+                            <p className="text-xs text-muted-foreground">
+                              {editDraftStatusContent}
+                            </p>
+                          ) : null}
                           <Button type="submit" className="w-full">
                             {t('saveChanges')}
                           </Button>