@hed-hog/core 0.0.304 → 0.0.305

package/hedhog/frontend/app/dashboard/management/tabs/component-roles-tab.tsx.ejs

@@ -45,6 +45,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -55,9 +57,11 @@ import {
   IconPlus,
   IconTrash,
 } from '@tabler/icons-react';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { useTranslations } from 'next-intl';
-import { 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';
 
@@ -66,6 +70,13 @@ type RoleFormData = {
   role_id: number;
 };
 
+type ComponentRoleDraftPayload = {
+  values: RoleFormData;
+};
+
+const COMPONENT_ROLE_DRAFT_STORAGE_KEY =
+  'core-dashboard-component-role-form-draft';
+
 interface ComponentRole {
   id: number;
   component_id: number;
@@ -106,9 +117,25 @@ interface Role {
   }>;
 }
 
+type ComponentListResponse = {
+  data?: Component[];
+};
+
+type RoleListResponse = {
+  data?: Role[];
+};
+
+type RequestError = {
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+};
+
 export function ComponentRolesTab() {
   const t = useTranslations('core.DashboardManagement');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
   const roleSchema = z.object({
     component_id: z.coerce.number().min(1, t('selectComponentRequired')),
@@ -120,7 +147,7 @@ export function ComponentRolesTab() {
   const [roleToDelete, setRoleToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
-  const [searchQuery, setSearchQuery] = useState('');
+  const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
   const {
@@ -153,10 +180,10 @@ export function ComponentRolesTab() {
   const total = paginatedData?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
-  const { data: components } = useQuery<any>({
+  const { data: components } = useQuery<ComponentListResponse>({
     queryKey: ['dashboard-components'],
     queryFn: async () => {
-      const { data } = await request<Component[]>({
+      const { data } = await request<ComponentListResponse>({
         url: '/dashboard-component',
         method: 'GET',
       });
@@ -164,10 +191,10 @@ export function ComponentRolesTab() {
     },
   });
 
-  const { data: availableRoles } = useQuery<any>({
+  const { data: availableRoles } = useQuery<RoleListResponse>({
     queryKey: ['roles'],
     queryFn: async () => {
-      const { data } = await request<Role[]>({
+      const { data } = await request<RoleListResponse>({
         url: '/role',
         method: 'GET',
       });
@@ -183,6 +210,67 @@ export function ComponentRolesTab() {
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ComponentRoleDraftPayload>({
+    storageKey: COMPONENT_ROLE_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        component_id: Number(watchedValues.component_id ?? 0),
+        role_id: Number(watchedValues.role_id ?? 0),
+      },
+    },
+    hasData:
+      Number(watchedValues.component_id ?? 0) > 0 ||
+      Number(watchedValues.role_id ?? 0) > 0,
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.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}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const storedDraft = loadDraft();
+    form.reset({
+      component_id: storedDraft?.payload.values.component_id ?? 0,
+      role_id: storedDraft?.payload.values.role_id ?? 0,
+    });
+  }, [form, loadDraft, open]);
+
   const onSubmit = async (values: RoleFormData) => {
     try {
       await request({
@@ -194,12 +282,14 @@ export function ComponentRolesTab() {
         },
       });
       toast.success(t('roleAdded'));
+      clearDraft();
       setOpen(false);
       form.reset();
       refetch();
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Erro ao adicionar permissão:', error);
-      if (error?.response?.data?.message?.includes('already exists')) {
+      const message = (error as RequestError)?.response?.data?.message ?? '';
+      if (message.includes('already exists')) {
         toast.error(t('roleAlreadyExists'));
       } else {
         toast.error(t('errorAddingRole'));
@@ -273,8 +363,8 @@ export function ComponentRolesTab() {
                     <FormItem>
                       <FormLabel>{t('component')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={String(field.value)}
+                        value={field.value ? String(field.value) : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -311,8 +401,8 @@ export function ComponentRolesTab() {
                     <FormItem>
                       <FormLabel>{t('role')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={String(field.value)}
+                        value={field.value ? String(field.value) : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -337,6 +427,12 @@ export function ComponentRolesTab() {
                   )}
                 />
 
+                {draftStatusContent ? (
+                  <p className="text-xs text-muted-foreground">
+                    {draftStatusContent}
+                  </p>
+                ) : null}
+
                 <DialogFooter>
                   <Button type="submit">{t('save')}</Button>
                 </DialogFooter>
@@ -353,7 +449,7 @@ export function ComponentRolesTab() {
               <TableHead>ID</TableHead>
               <TableHead>{t('component')}</TableHead>
               <TableHead>{t('role')}</TableHead>
-              <TableHead className="w-[100px]">{t('actions')}</TableHead>
+              <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

package/hedhog/frontend/app/dashboard/management/tabs/dashboard-roles-tab.tsx.ejs

@@ -45,6 +45,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -55,9 +57,11 @@ import {
   IconPlus,
   IconTrash,
 } from '@tabler/icons-react';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { useTranslations } from 'next-intl';
-import { 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';
 
@@ -66,6 +70,12 @@ type RoleFormData = {
   role_id: number;
 };
 
+type DashboardRoleDraftPayload = {
+  values: RoleFormData;
+};
+
+const DASHBOARD_ROLE_DRAFT_STORAGE_KEY = 'core-dashboard-role-form-draft';
+
 interface DashboardRole {
   id: number;
   dashboard_id: number;
@@ -106,9 +116,25 @@ interface Role {
   }>;
 }
 
+type DashboardListResponse = {
+  data?: Dashboard[];
+};
+
+type RoleListResponse = {
+  data?: Role[];
+};
+
+type RequestError = {
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+};
+
 export function DashboardRolesTab() {
   const t = useTranslations('core.DashboardManagement');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
   const roleSchema = z.object({
     dashboard_id: z.coerce.number().min(1, t('selectDashboardRequired')),
@@ -120,7 +146,7 @@ export function DashboardRolesTab() {
   const [roleToDelete, setRoleToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
-  const [searchQuery, setSearchQuery] = useState('');
+  const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
   const {
@@ -153,10 +179,10 @@ export function DashboardRolesTab() {
   const total = paginatedData?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
-  const { data: dashboards } = useQuery<any>({
+  const { data: dashboards } = useQuery<DashboardListResponse>({
     queryKey: ['dashboards-list'],
     queryFn: async () => {
-      const { data } = await request<Dashboard[]>({
+      const { data } = await request<DashboardListResponse>({
         url: '/dashboard',
         method: 'GET',
       });
@@ -164,10 +190,10 @@ export function DashboardRolesTab() {
     },
   });
 
-  const { data: availableRoles } = useQuery<any>({
+  const { data: availableRoles } = useQuery<RoleListResponse>({
     queryKey: ['roles'],
     queryFn: async () => {
-      const { data } = await request<Role[]>({
+      const { data } = await request<RoleListResponse>({
         url: '/role',
         method: 'GET',
       });
@@ -183,6 +209,67 @@ export function DashboardRolesTab() {
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<DashboardRoleDraftPayload>({
+    storageKey: DASHBOARD_ROLE_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        dashboard_id: Number(watchedValues.dashboard_id ?? 0),
+        role_id: Number(watchedValues.role_id ?? 0),
+      },
+    },
+    hasData:
+      Number(watchedValues.dashboard_id ?? 0) > 0 ||
+      Number(watchedValues.role_id ?? 0) > 0,
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.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}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const storedDraft = loadDraft();
+    form.reset({
+      dashboard_id: storedDraft?.payload.values.dashboard_id ?? 0,
+      role_id: storedDraft?.payload.values.role_id ?? 0,
+    });
+  }, [form, loadDraft, open]);
+
   const onSubmit = async (values: RoleFormData) => {
     try {
       await request({
@@ -194,12 +281,14 @@ export function DashboardRolesTab() {
         },
       });
       toast.success(t('roleAdded'));
+      clearDraft();
       setOpen(false);
       form.reset();
       refetch();
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Erro ao adicionar permissão:', error);
-      if (error?.response?.data?.message?.includes('already exists')) {
+      const message = (error as RequestError)?.response?.data?.message ?? '';
+      if (message.includes('already exists')) {
         toast.error(t('roleAlreadyExists'));
       } else {
         toast.error(t('errorAddingRole'));
@@ -273,8 +362,8 @@ export function DashboardRolesTab() {
                     <FormItem>
                       <FormLabel>{t('dashboard')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={String(field.value)}
+                        value={field.value ? String(field.value) : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -311,8 +400,8 @@ export function DashboardRolesTab() {
                     <FormItem>
                       <FormLabel>{t('role')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={String(field.value)}
+                        value={field.value ? String(field.value) : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -337,6 +426,12 @@ export function DashboardRolesTab() {
                   )}
                 />
 
+                {draftStatusContent ? (
+                  <p className="text-xs text-muted-foreground">
+                    {draftStatusContent}
+                  </p>
+                ) : null}
+
                 <DialogFooter>
                   <Button type="submit">{t('save')}</Button>
                 </DialogFooter>
@@ -353,7 +448,7 @@ export function DashboardRolesTab() {
               <TableHead>ID</TableHead>
               <TableHead>{t('dashboard')}</TableHead>
               <TableHead>{t('role')}</TableHead>
-              <TableHead className="w-[100px]">{t('actions')}</TableHead>
+              <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

package/hedhog/frontend/app/dashboard/management/tabs/items-tab.tsx.ejs

@@ -45,6 +45,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -55,9 +57,11 @@ import {
   IconPlus,
   IconTrash,
 } from '@tabler/icons-react';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { useTranslations } from 'next-intl';
-import { 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';
 
@@ -70,6 +74,12 @@ type ItemFormData = {
   y_axis: number;
 };
 
+type DashboardItemDraftPayload = {
+  values: ItemFormData;
+};
+
+const DASHBOARD_ITEM_DRAFT_STORAGE_KEY = 'core-dashboard-item-form-draft';
+
 interface DashboardItem {
   id: number;
   dashboard_id: number;
@@ -108,9 +118,17 @@ interface Component {
   }>;
 }
 
+type DashboardListResponse = {
+  data?: Dashboard[];
+};
+
+type ComponentListResponse = {
+  data?: Component[];
+};
+
 export function ItemsTab() {
   const t = useTranslations('core.DashboardManagement');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
   const itemSchema = z.object({
     dashboard_id: z.coerce.number().min(1, t('selectDashboardRequired')),
@@ -126,7 +144,7 @@ export function ItemsTab() {
   const [itemToDelete, setItemToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
-  const [searchQuery, setSearchQuery] = useState('');
+  const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
   const {
@@ -159,10 +177,10 @@ export function ItemsTab() {
   const total = paginatedData?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
-  const { data: dashboards } = useQuery<any>({
+  const { data: dashboards } = useQuery<DashboardListResponse>({
     queryKey: ['dashboards'],
     queryFn: async () => {
-      const { data } = await request<Dashboard[]>({
+      const { data } = await request<DashboardListResponse>({
         url: '/dashboard',
         method: 'GET',
       });
@@ -170,10 +188,10 @@ export function ItemsTab() {
     },
   });
 
-  const { data: components } = useQuery<any>({
+  const { data: components } = useQuery<ComponentListResponse>({
     queryKey: ['dashboard-components'],
     queryFn: async () => {
-      const { data } = await request<Component[]>({
+      const { data } = await request<ComponentListResponse>({
         url: '/dashboard-component',
         method: 'GET',
       });
@@ -193,6 +211,79 @@ export function ItemsTab() {
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<DashboardItemDraftPayload>({
+    storageKey: DASHBOARD_ITEM_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        dashboard_id: Number(watchedValues.dashboard_id ?? 0),
+        component_id: Number(watchedValues.component_id ?? 0),
+        width: Number(watchedValues.width ?? 3),
+        height: Number(watchedValues.height ?? 2),
+        x_axis: Number(watchedValues.x_axis ?? 0),
+        y_axis: Number(watchedValues.y_axis ?? 0),
+      },
+    },
+    hasData:
+      Number(watchedValues.dashboard_id ?? 0) > 0 ||
+      Number(watchedValues.component_id ?? 0) > 0 ||
+      Number(watchedValues.width ?? 3) !== 3 ||
+      Number(watchedValues.height ?? 2) !== 2 ||
+      Number(watchedValues.x_axis ?? 0) !== 0 ||
+      Number(watchedValues.y_axis ?? 0) !== 0,
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.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}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const storedDraft = loadDraft();
+    form.reset({
+      dashboard_id: storedDraft?.payload.values.dashboard_id ?? 0,
+      component_id: storedDraft?.payload.values.component_id ?? 0,
+      width: storedDraft?.payload.values.width ?? 3,
+      height: storedDraft?.payload.values.height ?? 2,
+      x_axis: storedDraft?.payload.values.x_axis ?? 0,
+      y_axis: storedDraft?.payload.values.y_axis ?? 0,
+    });
+  }, [form, loadDraft, open]);
+
   const onSubmit = async (values: ItemFormData) => {
     try {
       await request({
@@ -202,6 +293,7 @@ export function ItemsTab() {
       });
 
       toast.success(t('itemAdded'));
+      clearDraft();
       setOpen(false);
       form.reset();
       refetch();
@@ -277,8 +369,8 @@ export function ItemsTab() {
                     <FormItem>
                       <FormLabel>{t('dashboard')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={field.value?.toString()}
+                        value={field.value ? field.value.toString() : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -286,7 +378,7 @@ export function ItemsTab() {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {(dashboards.data ?? []).map(
+                          {(dashboards?.data ?? []).map(
                             (dashboard: Dashboard) => {
                               const name =
                                 dashboard.dashboard_locale.find(
@@ -315,8 +407,8 @@ export function ItemsTab() {
                     <FormItem>
                       <FormLabel>{t('component')}</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
-                        defaultValue={field.value?.toString()}
+                        value={field.value ? field.value.toString() : undefined}
+                        onValueChange={(value) => field.onChange(Number(value))}
                       >
                         <FormControl>
                           <SelectTrigger className="w-full">
@@ -324,7 +416,7 @@ export function ItemsTab() {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {(components.data ?? []).map(
+                          {(components?.data ?? []).map(
                             (component: Component) => {
                               const name =
                                 component.dashboard_component_locale.find(
@@ -444,6 +536,12 @@ export function ItemsTab() {
                   </p>
                 </div>
 
+                {draftStatusContent ? (
+                  <p className="text-xs text-muted-foreground">
+                    {draftStatusContent}
+                  </p>
+                ) : null}
+
                 <DialogFooter>
                   <Button type="submit">{t('save')}</Button>
                 </DialogFooter>
@@ -460,7 +558,7 @@ export function ItemsTab() {
               <TableHead>{t('id')}</TableHead>
               <TableHead>{t('dashboard')}</TableHead>
               <TableHead>{t('component')}</TableHead>
-              <TableHead className="w-[100px]">{t('actions')}</TableHead>
+              <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>