@hed-hog/core 0.0.299 → 0.0.300

package/hedhog/frontend/app/dashboard/[slug]/dashboard-content.tsx.ejs

@@ -13,12 +13,15 @@ import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useIsMobile } from '@/components/ui/use-mobile';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useProgress } from '@bprogress/next';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { IconDeviceFloppy } from '@tabler/icons-react';
+import { IconDeviceFloppy, IconLoader2 } from '@tabler/icons-react';
 import { toBlob } from 'html-to-image';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   AddWidgetSelectorDialog,
   DraggableGrid,
@@ -34,6 +37,10 @@ import { WidgetRenderer } from './widget-renderer';
 
 interface DashboardContentProps {
   dashboardSlug: string;
+  showHeader?: boolean;
+  headerActionsTargetId?: string;
+  openWidgetPickerSignal?: number;
+  onOpenWidgetPickerHandled?: () => void;
 }
 
 interface DashboardComponentsPage {
@@ -44,6 +51,7 @@ interface DashboardComponentsPage {
   pageSize: number;
   prev: number | null;
   next: number | null;
+  modules?: string[];
 }
 
 const USER_STATS_WIDGETS = new Set([
@@ -59,6 +67,19 @@ const USER_POST_HISTORY_WIDGETS = new Set([
 ]);
 
 const USER_BOTTOM_WIDGETS = new Set(['user-roles', 'activity-timeline']);
+const LAYOUT_AUTOSAVE_DELAY = 1000;
+
+const normalizeLayoutForSave = (layout: LayoutItem[]) =>
+  layout.map(({ i, x, y, w, h }) => ({
+    i,
+    x,
+    y,
+    w,
+    h,
+  }));
+
+const getLayoutSignature = (layout: LayoutItem[]) =>
+  JSON.stringify(normalizeLayoutForSave(layout));
 
 const getWidgetBaseSlug = (slug: string): string => {
   const parts = slug.split('.');
@@ -129,9 +150,20 @@ const normalizeUserDashboardLayout = (item: WidgetLayout): LayoutItem => {
   return layoutItem;
 };
 
-export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
+export const DashboardContent = ({
+  dashboardSlug,
+  showHeader = true,
+  headerActionsTargetId,
+  openWidgetPickerSignal,
+  onOpenWidgetPickerHandled,
+}: DashboardContentProps) => {
   const t = useTranslations('core.DashboardPage');
   const { request } = useApp();
+  const {
+    start: startProgress,
+    stop: stopProgress,
+    set: setProgress,
+  } = useProgress();
   const router = useRouter();
   const isMobile = useIsMobile();
   const isDevelopment = process.env.NODE_ENV === 'development';
@@ -142,6 +174,23 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   const [isSaving, setIsSaving] = useState(false);
   const [componentsPage, setComponentsPage] = useState(1);
   const [componentsPageSize, setComponentsPageSize] = useState(12);
+  const [componentsSearchQuery, setComponentsSearchQuery] = useState('');
+  const [componentsModuleFilter, setComponentsModuleFilter] = useState('all');
+  const [headerActionsTarget, setHeaderActionsTarget] =
+    useState<HTMLElement | null>(null);
+  const lastSavedLayoutSignatureRef = useRef('[]');
+  const latestLayoutRef = useRef(layout);
+
+  const debouncedComponentsSearch = useDebounce(componentsSearchQuery, 400);
+  const debouncedLayout = useDebounce(layout, LAYOUT_AUTOSAVE_DELAY);
+
+  useEffect(() => {
+    latestLayoutRef.current = layout;
+  }, [layout]);
+  const excludedComponentKeys = useMemo(
+    () => widgets.map((widget) => getWidgetIdentityKey(widget)),
+    [widgets]
+  );
 
   const { data: dashboardAccess, isLoading: isCheckingAccess } =
     useQuery<DashboardAccessResponse>({
@@ -165,6 +214,12 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     }
   }, [dashboardAccess, dashboardSlug, router]);
 
+  useEffect(() => {
+    setComponentsPage(1);
+    setComponentsSearchQuery('');
+    setComponentsModuleFilter('all');
+  }, [dashboardSlug]);
+
   const {
     data: availableComponentsResponse,
     isLoading: isLoadingComponents,
@@ -175,14 +230,26 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
       dashboardSlug,
       componentsPage,
       componentsPageSize,
+      debouncedComponentsSearch,
+      componentsModuleFilter,
+      excludedComponentKeys.join(','),
     ],
     queryFn: async () => {
+      const trimmedSearch = debouncedComponentsSearch.trim();
+
       const { data } = await request<DashboardComponentsPage>({
         url: '/dashboard-component/user',
         method: 'GET',
         params: {
           page: componentsPage,
           pageSize: componentsPageSize,
+          ...(trimmedSearch ? { search: trimmedSearch } : {}),
+          ...(componentsModuleFilter !== 'all'
+            ? { librarySlug: componentsModuleFilter }
+            : {}),
+          ...(excludedComponentKeys.length > 0
+            ? { exclude: excludedComponentKeys.join(',') }
+            : {}),
         },
       });
       return data;
@@ -226,9 +293,11 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
               }
         );
 
+        lastSavedLayoutSignatureRef.current = getLayoutSignature(gridLayout);
         setLayout(gridLayout);
         setWidgets(userLayout);
       } else {
+        lastSavedLayoutSignatureRef.current = '[]';
         setLayout([]);
         setWidgets([]);
       }
@@ -236,18 +305,50 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     }
   }, [userLayout, dashboardSlug]);
 
-  const componentsToFilter = availableComponentsResponse?.data || [];
-  const totalAvailableComponents =
-    availableComponentsResponse?.total ?? componentsToFilter.length;
+  const availableComponents = availableComponentsResponse?.data ?? [];
+  const totalAvailableComponents = availableComponentsResponse?.total ?? 0;
+  const availableComponentModules = availableComponentsResponse?.modules ?? [];
+  const layoutSignature = useMemo(() => getLayoutSignature(layout), [layout]);
+  const debouncedLayoutSignature = useMemo(
+    () => getLayoutSignature(debouncedLayout),
+    [debouncedLayout]
+  );
+  const isAutosavePending =
+    hasChanges && !isSaving && layoutSignature !== debouncedLayoutSignature;
+
+  useEffect(() => {
+    if (!isAutosavePending && !isSaving) {
+      stopProgress(150);
+      return;
+    }
+
+    startProgress(isSaving ? 0.55 : 0.2, 0, true);
+    setProgress(isSaving ? 0.8 : 0.35);
+  }, [isAutosavePending, isSaving, setProgress, startProgress, stopProgress]);
+
+  useEffect(() => {
+    const lastAvailablePage = Math.max(
+      availableComponentsResponse?.lastPage ?? 1,
+      1
+    );
+
+    if (componentsPage > lastAvailablePage) {
+      setComponentsPage(lastAvailablePage);
+    }
+  }, [availableComponentsResponse?.lastPage, componentsPage]);
+
+  useEffect(() => {
+    if (
+      !headerActionsTargetId ||
+      showHeader ||
+      typeof document === 'undefined'
+    ) {
+      setHeaderActionsTarget(null);
+      return;
+    }
 
-  const filteredComponents =
-    componentsToFilter.filter(
-      (component: DashboardComponent) =>
-        !widgets.some(
-          (widget) =>
-            getWidgetIdentityKey(widget) === getWidgetIdentityKey(component)
-        )
-    ) || [];
+    setHeaderActionsTarget(document.getElementById(headerActionsTargetId));
+  }, [headerActionsTargetId, showHeader]);
 
   const handleLayoutChange = useCallback((newLayout: LayoutItem[]) => {
     setLayout((prevLayout) => {
@@ -261,21 +362,51 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     });
   }, []);
 
-  const handleSaveLayout = async () => {
-    setIsSaving(true);
-    try {
-      await request({
-        url: `/dashboard-core/layout/${dashboardSlug}`,
-        method: 'POST',
-        data: { layout },
-      });
-      setHasChanges(false);
-    } catch (error) {
-      console.error('❌ Erro ao salvar layout:', error);
-    } finally {
-      setIsSaving(false);
+  const handleSaveLayout = useCallback(
+    async (layoutToSave: LayoutItem[] = layout) => {
+      const normalizedLayout = normalizeLayoutForSave(layoutToSave);
+      const nextLayoutSignature = JSON.stringify(normalizedLayout);
+
+      if (
+        isSaving ||
+        nextLayoutSignature === lastSavedLayoutSignatureRef.current
+      ) {
+        return;
+      }
+
+      setIsSaving(true);
+      try {
+        await request({
+          url: `/dashboard-core/layout/${dashboardSlug}`,
+          method: 'POST',
+          data: { layout: normalizedLayout },
+        });
+        lastSavedLayoutSignatureRef.current = nextLayoutSignature;
+        setHasChanges(
+          getLayoutSignature(latestLayoutRef.current) !== nextLayoutSignature
+        );
+      } catch (error) {
+        console.error('❌ Erro ao salvar layout:', error);
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [dashboardSlug, isSaving, layout, request]
+  );
+
+  useEffect(() => {
+    if (!hasChanges || isSaving) {
+      return;
     }
-  };
+
+    const nextLayoutSignature = getLayoutSignature(debouncedLayout);
+
+    if (nextLayoutSignature === lastSavedLayoutSignatureRef.current) {
+      return;
+    }
+
+    void handleSaveLayout(debouncedLayout);
+  }, [debouncedLayout, handleSaveLayout, hasChanges, isSaving]);
 
   const handleAddWidget = async (slugs: string[]) => {
     if (!slugs.length) return;
@@ -331,6 +462,10 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
         cacheBust: true,
         pixelRatio: 2,
         backgroundColor: '#ffffff',
+        filter: (node) =>
+          !(
+            node instanceof HTMLElement && node.dataset.widgetAction === 'true'
+          ),
       });
 
       if (!screenshot) {
@@ -376,28 +511,30 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   if (isCheckingAccess || isLoadingLayout) {
     return (
       <>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex w-full items-center justify-between gap-2 px-4">
-            <div className="flex items-center gap-2">
-              <SidebarTrigger className="-ml-1" />
-              <Separator
-                orientation="vertical"
-                className="mr-2 data-[orientation=vertical]:h-4"
-              />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem className="hidden md:block">
-                    <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator className="hidden md:block" />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>{t('overview')}</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </BreadcrumbList>
-              </Breadcrumb>
+        {showHeader ? (
+          <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+            <div className="flex w-full items-center justify-between gap-2 px-4">
+              <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1" />
+                <Separator
+                  orientation="vertical"
+                  className="mr-2 data-[orientation=vertical]:h-4"
+                />
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>{t('overview')}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
             </div>
-          </div>
-        </header>
+          </header>
+        ) : null}
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <Skeleton className="h-32 w-full" />
           <Skeleton className="h-32 w-full" />
@@ -410,28 +547,30 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   if (!dashboardAccess?.hasAccess) {
     return (
       <>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex w-full items-center justify-between gap-2 px-4">
-            <div className="flex items-center gap-2">
-              <SidebarTrigger className="-ml-1" />
-              <Separator
-                orientation="vertical"
-                className="mr-2 data-[orientation=vertical]:h-4"
-              />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem className="hidden md:block">
-                    <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator className="hidden md:block" />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>{t('accessDenied')}</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </BreadcrumbList>
-              </Breadcrumb>
+        {showHeader ? (
+          <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+            <div className="flex w-full items-center justify-between gap-2 px-4">
+              <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1" />
+                <Separator
+                  orientation="vertical"
+                  className="mr-2 data-[orientation=vertical]:h-4"
+                />
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>{t('accessDenied')}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
             </div>
-          </div>
-        </header>
+          </header>
+        ) : null}
         <div className="flex flex-1 flex-col items-center justify-center gap-4 p-4 pt-0">
           <div className="text-center">
             <h2 className="text-2xl font-bold">{t('accessDenied')}</h2>
@@ -445,67 +584,109 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   }
 
   const dashboardName = dashboardAccess?.dashboard?.name || dashboardSlug;
+  const autosaveStatusLabel = isSaving
+    ? 'Salvando layout...'
+    : isAutosavePending
+      ? 'Salvando automaticamente...'
+      : null;
+
+  const dashboardActions = (
+    <>
+      {autosaveStatusLabel ? (
+        <div className="text-muted-foreground bg-muted inline-flex items-center gap-2 rounded-md px-2.5 py-1 text-xs">
+          <IconLoader2 className="size-3.5 animate-spin" />
+          <span>{autosaveStatusLabel}</span>
+        </div>
+      ) : null}
+      {hasChanges ? (
+        <Button
+          size="sm"
+          variant="default"
+          className="gap-1 px-2 sm:gap-2 sm:px-3"
+          onClick={() => void handleSaveLayout()}
+          disabled={isSaving}
+          aria-label={isSaving ? t('saving') : t('saveLayout')}
+        >
+          {isSaving ? (
+            <IconLoader2 className="size-4 animate-spin" />
+          ) : (
+            <IconDeviceFloppy className="size-4" />
+          )}
+          <span className="hidden sm:inline">
+            {isSaving ? t('saving') : t('saveLayout')}
+          </span>
+        </Button>
+      ) : null}
+      <AddWidgetSelectorDialog
+        availableComponents={availableComponents}
+        totalItems={totalAvailableComponents}
+        currentPage={availableComponentsResponse?.page ?? componentsPage}
+        pageSize={availableComponentsResponse?.pageSize ?? componentsPageSize}
+        isLoading={isLoadingComponents}
+        searchQuery={componentsSearchQuery}
+        onSearchQueryChange={(value) => {
+          setComponentsSearchQuery(value);
+          setComponentsPage(1);
+        }}
+        moduleFilter={componentsModuleFilter}
+        modules={availableComponentModules}
+        onModuleFilterChange={(value) => {
+          setComponentsModuleFilter(value);
+          setComponentsPage(1);
+        }}
+        onPageChange={setComponentsPage}
+        onPageSizeChange={(nextPageSize) => {
+          setComponentsPageSize(nextPageSize);
+          setComponentsPage(1);
+        }}
+        onAdd={handleAddWidget}
+        openSignal={openWidgetPickerSignal}
+        onOpenSignalHandled={onOpenWidgetPickerHandled}
+      />
+    </>
+  );
+
+  const hasExternalActionTarget = !showHeader && Boolean(headerActionsTarget);
 
   return (
     <>
-      <header className="flex min-h-16 shrink-0 items-center gap-2 py-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 sm:h-16 sm:py-0">
-        <div className="flex w-full flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex min-w-0 items-center gap-2">
-            <SidebarTrigger className="-ml-1" />
-            <Separator
-              orientation="vertical"
-              className="mr-2 data-[orientation=vertical]:h-4"
-            />
-            <Breadcrumb className="min-w-0">
-              <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
-                <BreadcrumbItem>
-                  <BreadcrumbPage className="truncate">
-                    {dashboardName}
-                  </BreadcrumbPage>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
-          </div>
-          <div className="flex w-full items-center justify-end gap-2 sm:w-auto">
-            {hasChanges && (
-              <Button
-                size="sm"
-                variant="default"
-                className="gap-1 px-2 sm:gap-2 sm:px-3"
-                onClick={handleSaveLayout}
-                disabled={isSaving}
-                aria-label={isSaving ? t('saving') : t('saveLayout')}
-              >
-                <IconDeviceFloppy className="size-4" />
-                <span className="hidden sm:inline">
-                  {isSaving ? t('saving') : t('saveLayout')}
-                </span>
-              </Button>
-            )}
-            <AddWidgetSelectorDialog
-              availableComponents={filteredComponents}
-              totalItems={totalAvailableComponents}
-              currentPage={availableComponentsResponse?.page ?? componentsPage}
-              pageSize={
-                availableComponentsResponse?.pageSize ?? componentsPageSize
-              }
-              isLoading={isLoadingComponents}
-              onPageChange={setComponentsPage}
-              onPageSizeChange={(nextPageSize) => {
-                setComponentsPageSize(nextPageSize);
-                setComponentsPage(1);
-              }}
-              onAdd={handleAddWidget}
-              currentSlug={dashboardSlug}
-            />
+      {showHeader ? (
+        <header className="flex min-h-16 shrink-0 items-center gap-2 py-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 sm:h-16 sm:py-0">
+          <div className="flex w-full flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex min-w-0 items-center gap-2">
+              <SidebarTrigger className="-ml-1" />
+              <Separator
+                orientation="vertical"
+                className="mr-2 data-[orientation=vertical]:h-4"
+              />
+              <Breadcrumb className="min-w-0">
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage className="truncate">
+                      {dashboardName}
+                    </BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+            <div className="flex w-full items-center justify-end gap-2 sm:w-auto">
+              {dashboardActions}
+            </div>
           </div>
+        </header>
+      ) : !hasExternalActionTarget ? (
+        <div className="flex w-full items-center justify-end gap-2 px-4 pt-2">
+          {dashboardActions}
         </div>
-      </header>
-      <div className="flex flex-1 flex-col gap-4 overflow-auto p-4 pt-0">
+      ) : null}
+      {hasExternalActionTarget && headerActionsTarget
+        ? createPortal(dashboardActions, headerActionsTarget)
+        : null}
+      <div className="flex flex-1 flex-col gap-4 overflow-auto pt-0">
         {widgets.length > 0 ? (
           <div className="min-h-105 sm:min-h-130 lg:min-h-150">
             <DraggableGrid
@@ -514,6 +695,7 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
               onLayoutChange={handleLayoutChange}
               cols={12}
               rowHeight={80}
+              compactType={null}
               preventCollision
               isDraggable={!isMobile}
               isResizable={!isMobile}
@@ -532,10 +714,33 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
             </p>
             <div className="mt-4">
               <AddWidgetSelectorDialog
-                availableComponents={filteredComponents}
+                availableComponents={availableComponents}
+                totalItems={totalAvailableComponents}
+                currentPage={
+                  availableComponentsResponse?.page ?? componentsPage
+                }
+                pageSize={
+                  availableComponentsResponse?.pageSize ?? componentsPageSize
+                }
                 isLoading={isLoadingComponents}
+                searchQuery={componentsSearchQuery}
+                onSearchQueryChange={(value) => {
+                  setComponentsSearchQuery(value);
+                  setComponentsPage(1);
+                }}
+                moduleFilter={componentsModuleFilter}
+                modules={availableComponentModules}
+                onModuleFilterChange={(value) => {
+                  setComponentsModuleFilter(value);
+                  setComponentsPage(1);
+                }}
+                onPageChange={setComponentsPage}
+                onPageSizeChange={(nextPageSize) => {
+                  setComponentsPageSize(nextPageSize);
+                  setComponentsPage(1);
+                }}
                 onAdd={handleAddWidget}
-                currentSlug={dashboardSlug}
+                buttonVariant="default"
               />
             </div>
           </div>