@hed-hog/core 0.0.303 → 0.0.305

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -42,15 +42,19 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useDebounce } from '@/hooks/use-debounce';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import useEmblaCarousel from 'embla-carousel-react';
 import * as LucideIcons from 'lucide-react';
 import {
   Check,
+  ChevronLeft,
+  ChevronRight,
   Home,
   LayoutDashboard,
   Loader2,
   Palette,
   Pencil,
   Plus,
+  Save,
   Share2,
   Trash2,
   UserPlus,
@@ -58,7 +62,12 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type DragEvent as ReactDragEvent,
+} from 'react';
 import { toast } from 'sonner';
 import { DashboardContent } from './[slug]/dashboard-content';
 
@@ -104,7 +113,22 @@ type DashboardTemplate = {
 const getDashboardName = (dashboard: DashboardTab) =>
   dashboard.name || dashboard.dashboard_locale?.[0]?.name || dashboard.slug;
 
-const DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID = 'dashboard-home-header-actions';
+const reorderDashboards = (
+  currentDashboards: DashboardTab[],
+  sourceIndex: number,
+  targetIndex: number
+) => {
+  const nextDashboards = [...currentDashboards];
+  const [movedDashboard] = nextDashboards.splice(sourceIndex, 1);
+
+  if (!movedDashboard) {
+    return currentDashboards;
+  }
+
+  nextDashboards.splice(targetIndex, 0, movedDashboard);
+  return nextDashboards;
+};
+
 const EMPTY_SHAREABLE_USERS_PAGE: PaginatedResponse<SharedUser> = {
   data: [],
   total: 0,
@@ -289,6 +313,7 @@ const getErrorMessage = (error: unknown, fallback: string) => {
 
 export function DashboardHomeTabs() {
   const t = useTranslations('core.DashboardHomeTabs');
+  const tDashboardPage = useTranslations('core.DashboardPage');
   const { request, currentLocaleCode } = useApp();
   const [activeSlug, setActiveSlug] = useState('');
   const [createOpen, setCreateOpen] = useState(false);
@@ -315,6 +340,27 @@ export function DashboardHomeTabs() {
   const [iconDashboard, setIconDashboard] = useState<DashboardTab | null>(null);
   const [iconValue, setIconValue] = useState('layout-dashboard');
   const [isSavingIcon, setIsSavingIcon] = useState(false);
+  const [requestSaveLayoutSignal, setRequestSaveLayoutSignal] = useState(0);
+  const [runtimeHeaderState, setRuntimeHeaderState] = useState({
+    hasChanges: false,
+    isSaving: false,
+    isAutosavePending: false,
+  });
+
+  const [tabsEmblaRef, tabsEmblaApi] = useEmblaCarousel({
+    dragFree: true,
+    containScroll: 'keepSnaps',
+    align: 'start',
+  });
+  const [canScrollPrevTabs, setCanScrollPrevTabs] = useState(false);
+  const [canScrollNextTabs, setCanScrollNextTabs] = useState(false);
+  const [orderedDashboards, setOrderedDashboards] = useState<DashboardTab[]>(
+    []
+  );
+  const [draggingDashboardSlug, setDraggingDashboardSlug] = useState<
+    string | null
+  >(null);
+  const [isReordering, setIsReordering] = useState(false);
 
   const debouncedShareSearch = useDebounce(shareSearch, 300);
 
@@ -349,8 +395,10 @@ export function DashboardHomeTabs() {
     });
 
   const activeDashboard = useMemo(
-    () => dashboards.find((dashboard) => dashboard.slug === activeSlug) ?? null,
-    [activeSlug, dashboards]
+    () =>
+      orderedDashboards.find((dashboard) => dashboard.slug === activeSlug) ??
+      null,
+    [activeSlug, orderedDashboards]
   );
 
   const selectedTemplate = useMemo(
@@ -372,24 +420,47 @@ export function DashboardHomeTabs() {
   );
 
   useEffect(() => {
-    if (dashboards.length === 0) {
+    setOrderedDashboards(dashboards);
+  }, [dashboards]);
+
+  useEffect(() => {
+    if (orderedDashboards.length === 0) {
       setActiveSlug('');
       return;
     }
 
-    const hasActiveDashboard = dashboards.some(
+    const hasActiveDashboard = orderedDashboards.some(
       (dashboard) => dashboard.slug === activeSlug
     );
 
     if (!activeSlug || !hasActiveDashboard) {
       const nextDashboard =
-        dashboards.find((dashboard) => dashboard.is_home) ?? dashboards[0];
+        orderedDashboards.find((dashboard) => dashboard.is_home) ??
+        orderedDashboards[0];
 
       if (nextDashboard) {
         setActiveSlug(nextDashboard.slug);
       }
     }
-  }, [activeSlug, dashboards]);
+  }, [activeSlug, orderedDashboards]);
+
+  useEffect(() => {
+    if (!tabsEmblaApi) return;
+
+    const updateScrollButtons = () => {
+      setCanScrollPrevTabs(tabsEmblaApi.canScrollPrev());
+      setCanScrollNextTabs(tabsEmblaApi.canScrollNext());
+    };
+
+    updateScrollButtons();
+    tabsEmblaApi.on('scroll', updateScrollButtons);
+    tabsEmblaApi.on('reInit', updateScrollButtons);
+
+    return () => {
+      tabsEmblaApi.off('scroll', updateScrollButtons);
+      tabsEmblaApi.off('reInit', updateScrollButtons);
+    };
+  }, [tabsEmblaApi]);
 
   const {
     data: sharedUsers = [],
@@ -462,6 +533,80 @@ export function DashboardHomeTabs() {
 
   const shareableUsers = shareableUsersPage.data ?? [];
 
+  const handleTabDragStart = (
+    event: ReactDragEvent<HTMLElement>,
+    dashboardSlug: string
+  ) => {
+    setDraggingDashboardSlug(dashboardSlug);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', dashboardSlug);
+  };
+
+  const handleTabDragOver = (event: ReactDragEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleTabDrop = async (
+    event: ReactDragEvent<HTMLElement>,
+    targetDashboardSlug: string
+  ) => {
+    event.preventDefault();
+
+    const sourceDashboardSlug =
+      draggingDashboardSlug || event.dataTransfer.getData('text/plain');
+
+    if (!sourceDashboardSlug || sourceDashboardSlug === targetDashboardSlug) {
+      setDraggingDashboardSlug(null);
+      return;
+    }
+
+    const sourceIndex = orderedDashboards.findIndex(
+      (dashboard) => dashboard.slug === sourceDashboardSlug
+    );
+    const targetIndex = orderedDashboards.findIndex(
+      (dashboard) => dashboard.slug === targetDashboardSlug
+    );
+
+    if (sourceIndex < 0 || targetIndex < 0) {
+      setDraggingDashboardSlug(null);
+      return;
+    }
+
+    const previousDashboards = orderedDashboards;
+    const nextDashboards = reorderDashboards(
+      orderedDashboards,
+      sourceIndex,
+      targetIndex
+    );
+
+    setOrderedDashboards(nextDashboards);
+
+    try {
+      setIsReordering(true);
+      await request({
+        url: '/dashboard-core/dashboard/order',
+        method: 'PATCH',
+        data: {
+          slugs: nextDashboards.map((dashboard) => dashboard.slug),
+        },
+      });
+      await refetchDashboards();
+    } catch (error) {
+      setOrderedDashboards(previousDashboards);
+      toast.error(
+        getErrorMessage(error, 'Unable to save dashboard tab order.')
+      );
+    } finally {
+      setIsReordering(false);
+      setDraggingDashboardSlug(null);
+    }
+  };
+
+  const handleTabDragEnd = () => {
+    setDraggingDashboardSlug(null);
+  };
+
   const handleSelectTemplate = (template: DashboardTemplate | null) => {
     setSelectedTemplateSlug(template?.slug ?? '');
     setNewDashboardName(template?.name ?? '');
@@ -738,34 +883,9 @@ export function DashboardHomeTabs() {
     isSettingHome ||
     isSavingIcon ||
     isSharingUsers ||
+    isReordering ||
     revokingUserId !== null;
 
-  const headerActions = (
-    <div className="flex flex-wrap items-center justify-end gap-2">
-      {activeDashboard ? (
-        <div
-          id={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
-          className="contents"
-        />
-      ) : null}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() =>
-          activeDashboard && openShareForDashboard(activeDashboard)
-        }
-        disabled={!activeDashboard || isBusy}
-      >
-        <Share2 className="size-4" />
-        {t('share')}
-      </Button>
-      <Button size="sm" onClick={() => setCreateOpen(true)} disabled={isBusy}>
-        <Plus className="size-4" />
-        {t('newDashboard')}
-      </Button>
-    </div>
-  );
-
   return (
     <Page>
       <PageHeader
@@ -777,7 +897,51 @@ export function DashboardHomeTabs() {
         ]}
         title={t('pageTitle')}
         description={t('pageDescription')}
-        actions={headerActions}
+        actions={[
+          {
+            label: t('share'),
+            onClick: () =>
+              activeDashboard && openShareForDashboard(activeDashboard),
+            icon: <Share2 className="size-4" />,
+            variant: 'outline',
+            size: 'sm',
+            disabled: !activeDashboard || isBusy,
+          },
+          {
+            label: t('addWidgets'),
+            onClick: () =>
+              activeDashboard && openAddWidgetsForDashboard(activeDashboard),
+            icon: <Plus className="size-4" />,
+            variant: 'outline',
+            size: 'sm',
+            disabled: !activeDashboard || isBusy,
+          },
+          {
+            label: runtimeHeaderState.isSaving
+              ? tDashboardPage('saving')
+              : tDashboardPage('saveLayout'),
+            onClick: () =>
+              setRequestSaveLayoutSignal((previous) => previous + 1),
+            icon: runtimeHeaderState.isSaving ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Save className="size-4" />
+            ),
+            size: 'sm',
+            disabled:
+              !activeDashboard ||
+              isBusy ||
+              runtimeHeaderState.isSaving ||
+              !runtimeHeaderState.hasChanges,
+          },
+          {
+            label: t('newDashboard'),
+            onClick: () => setCreateOpen(true),
+            icon: <Plus className="size-4" />,
+            size: 'sm',
+            disabled: isBusy,
+          },
+        ]}
       />
 
       {isLoading ? (
@@ -793,10 +957,20 @@ export function DashboardHomeTabs() {
             onValueChange={setActiveSlug}
             className="gap-0"
           >
-            <div className="bg-muted dark:bg-muted/40">
-              <ScrollArea className="w-full whitespace-nowrap">
-                <TabsList className="dashboard-tabs-list h-auto min-h-0 w-max items-end gap-0 rounded-none bg-transparent p-0 pt-1 pl-1">
-                  {dashboards.map((dashboard) => {
+            <div className="bg-muted dark:bg-muted/40 relative">
+              {canScrollPrevTabs && (
+                <button
+                  type="button"
+                  onClick={() => tabsEmblaApi?.scrollPrev()}
+                  aria-label="Scroll tabs left"
+                  className="md:hidden absolute left-0 top-0 bottom-0 z-10 flex items-center px-1.5 bg-linear-to-r from-muted dark:from-muted/40 to-transparent"
+                >
+                  <ChevronLeft className="size-4 text-muted-foreground" />
+                </button>
+              )}
+              <div ref={tabsEmblaRef} className="overflow-hidden">
+                <TabsList className="dashboard-tabs-list h-auto min-h-0 items-end gap-0 rounded-none bg-transparent p-0 pt-1 pl-1 flex w-max">
+                  {orderedDashboards.map((dashboard) => {
                     const isRenamingCurrentTab =
                       renamingSlug === dashboard.slug;
                     const isActiveTab = activeSlug === dashboard.slug;
@@ -846,13 +1020,32 @@ export function DashboardHomeTabs() {
                       <ContextMenu key={dashboard.slug}>
                         <ContextMenuTrigger asChild>
                           {isRenamingCurrentTab ? (
-                            <div className="-mb-px flex min-h-9 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none">
+                            <div
+                              onDragOver={handleTabDragOver}
+                              onDrop={(event) =>
+                                void handleTabDrop(event, dashboard.slug)
+                              }
+                              className="-mb-px flex min-h-9 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none"
+                            >
                               {tabContent}
                             </div>
                           ) : (
                             <TabsTrigger
                               value={dashboard.slug}
-                              className="dashboard-tab-trigger -mb-px cursor-pointer gap-2 rounded-b-none rounded-t-lg px-3 py-2 mt-1 border-none shadow-none data-[state=active]:shadow-none"
+                              draggable={!isBusy}
+                              onDragStart={(event) =>
+                                handleTabDragStart(event, dashboard.slug)
+                              }
+                              onDragOver={handleTabDragOver}
+                              onDrop={(event) =>
+                                void handleTabDrop(event, dashboard.slug)
+                              }
+                              onDragEnd={handleTabDragEnd}
+                              className={cn(
+                                'dashboard-tab-trigger -mb-px cursor-pointer gap-2 rounded-b-none rounded-t-lg px-3 py-2 mt-1 border-none shadow-none data-[state=active]:shadow-none',
+                                draggingDashboardSlug === dashboard.slug &&
+                                  'opacity-70'
+                              )}
                               style={
                                 isActiveTab
                                   ? {
@@ -934,7 +1127,17 @@ export function DashboardHomeTabs() {
                     <Plus className="size-4" />
                   </button>
                 </TabsList>
-              </ScrollArea>
+              </div>
+              {canScrollNextTabs && (
+                <button
+                  type="button"
+                  onClick={() => tabsEmblaApi?.scrollNext()}
+                  aria-label="Scroll tabs right"
+                  className="md:hidden absolute right-0 top-0 bottom-0 z-10 flex items-center px-1.5 bg-linear-to-l from-muted dark:from-muted/40 to-transparent"
+                >
+                  <ChevronRight className="size-4 text-muted-foreground" />
+                </button>
+              )}
             </div>
           </Tabs>
         </div>
@@ -952,7 +1155,9 @@ export function DashboardHomeTabs() {
           key={activeDashboard.slug}
           dashboardSlug={activeDashboard.slug}
           showHeader={false}
-          headerActionsTargetId={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
+          externalHeaderActions
+          requestSaveSignal={requestSaveLayoutSignal}
+          onRuntimeActionsStateChange={setRuntimeHeaderState}
           openWidgetPickerSignal={openAddWidgetSignal}
           onOpenWidgetPickerHandled={() => setOpenAddWidgetSignal(0)}
         />
@@ -1131,7 +1336,7 @@ export function DashboardHomeTabs() {
 
               <div className="space-y-2">
                 <p className="text-sm font-medium">{t('iconSuggestions')}</p>
-                <div className="grid gap-2 grid-cols-12">
+                <div className="grid grid-cols-6 gap-2 md:grid-cols-8 lg:grid-cols-12">
                   {DASHBOARD_ICON_OPTIONS.map((iconName) => {
                     const IconOption = resolveDashboardIcon(iconName);
                     const isSelected =
@@ -1241,7 +1446,7 @@ export function DashboardHomeTabs() {
 
               <div className="space-y-2">
                 <p className="text-sm font-medium">{t('suggestions')}</p>
-                <div className="grid gap-2 grid-cols-12">
+                <div className="grid grid-cols-6 gap-2 md:grid-cols-8 lg:grid-cols-12">
                   {DASHBOARD_ICON_OPTIONS.map((iconName) => {
                     const IconOption = resolveDashboardIcon(iconName);
                     const isSelected =

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>