@hed-hog/core 0.0.298 → 0.0.300

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

@@ -13,11 +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,
@@ -33,6 +37,21 @@ import { WidgetRenderer } from './widget-renderer';
 
 interface DashboardContentProps {
   dashboardSlug: string;
+  showHeader?: boolean;
+  headerActionsTargetId?: string;
+  openWidgetPickerSignal?: number;
+  onOpenWidgetPickerHandled?: () => void;
+}
+
+interface DashboardComponentsPage {
+  data: DashboardComponent[];
+  total: number;
+  lastPage: number;
+  page: number;
+  pageSize: number;
+  prev: number | null;
+  next: number | null;
+  modules?: string[];
 }
 
 const USER_STATS_WIDGETS = new Set([
@@ -48,8 +67,44 @@ 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('.');
+  return parts[parts.length - 1] || slug;
+};
+
+const getWidgetIdentityKey = ({
+  slug,
+  library_slug,
+}: {
+  slug: string;
+  library_slug?: string;
+}) => {
+  const baseSlug = getWidgetBaseSlug(slug);
+
+  if (library_slug) {
+    return `${library_slug}.${baseSlug}`;
+  }
+
+  return slug.includes('.') ? slug : baseSlug;
+};
 
 const normalizeUserDashboardLayout = (item: WidgetLayout): LayoutItem => {
+  const baseSlug = getWidgetBaseSlug(item.slug);
+
   const layoutItem: LayoutItem = {
     i: item.i,
     x: item.x,
@@ -63,26 +118,26 @@ const normalizeUserDashboardLayout = (item: WidgetLayout): LayoutItem => {
     static: false,
   };
 
-  if (item.slug === 'profile-card') {
+  if (baseSlug === 'profile-card') {
     layoutItem.h = Math.max(item.h, 4);
   }
 
-  if (USER_STATS_WIDGETS.has(item.slug)) {
+  if (USER_STATS_WIDGETS.has(baseSlug)) {
     layoutItem.y = Math.max(item.y, 4);
     return layoutItem;
   }
 
-  if (item.slug === 'login-history-chart') {
+  if (baseSlug === 'login-history-chart') {
     layoutItem.y = Math.max(item.y, 5);
     return layoutItem;
   }
 
-  if (USER_POST_HISTORY_WIDGETS.has(item.slug)) {
+  if (USER_POST_HISTORY_WIDGETS.has(baseSlug)) {
     layoutItem.y = Math.max(item.y, 9);
     return layoutItem;
   }
 
-  if (USER_BOTTOM_WIDGETS.has(item.slug)) {
+  if (USER_BOTTOM_WIDGETS.has(baseSlug)) {
     layoutItem.y = Math.max(item.y, 14);
     layoutItem.h = item.h + 1;
     return layoutItem;
@@ -95,16 +150,47 @@ 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';
 
   const [layout, setLayout] = useState<LayoutItem[]>([]);
   const [widgets, setWidgets] = useState<WidgetLayout[]>([]);
   const [hasChanges, setHasChanges] = useState(false);
   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>({
@@ -128,18 +214,45 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     }
   }, [dashboardAccess, dashboardSlug, router]);
 
+  useEffect(() => {
+    setComponentsPage(1);
+    setComponentsSearchQuery('');
+    setComponentsModuleFilter('all');
+  }, [dashboardSlug]);
+
   const {
-    data: availableComponents,
+    data: availableComponentsResponse,
     isLoading: isLoadingComponents,
     refetch: refetchComponents,
-  } = useQuery<any>({
-    queryKey: ['dashboard-components'],
+  } = useQuery<DashboardComponentsPage>({
+    queryKey: [
+      'dashboard-components',
+      dashboardSlug,
+      componentsPage,
+      componentsPageSize,
+      debouncedComponentsSearch,
+      componentsModuleFilter,
+      excludedComponentKeys.join(','),
+    ],
     queryFn: async () => {
-      const { data } = await request<any>({
+      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.data;
+      return data;
     },
     enabled: dashboardAccess?.hasAccess ?? false,
   });
@@ -180,25 +293,62 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
               }
         );
 
+        lastSavedLayoutSignatureRef.current = getLayoutSignature(gridLayout);
         setLayout(gridLayout);
         setWidgets(userLayout);
       } else {
+        lastSavedLayoutSignatureRef.current = '[]';
         setLayout([]);
         setWidgets([]);
       }
       setHasChanges(false);
     }
-  }, [userLayout]);
+  }, [userLayout, dashboardSlug]);
+
+  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;
+    }
 
-  const componentsToFilter = availableComponents?.data?.length
-    ? availableComponents.data
-    : availableComponents || [];
+    startProgress(isSaving ? 0.55 : 0.2, 0, true);
+    setProgress(isSaving ? 0.8 : 0.35);
+  }, [isAutosavePending, isSaving, setProgress, startProgress, stopProgress]);
 
-  const filteredComponents =
-    componentsToFilter.filter(
-      (component: DashboardComponent) =>
-        !widgets.some((widget) => widget.slug === component.slug)
-    ) || [];
+  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;
+    }
+
+    setHeaderActionsTarget(document.getElementById(headerActionsTargetId));
+  }, [headerActionsTargetId, showHeader]);
 
   const handleLayoutChange = useCallback((newLayout: LayoutItem[]) => {
     setLayout((prevLayout) => {
@@ -212,35 +362,69 @@ 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;
     }
-  };
 
-  const handleAddWidget = async (slug: string) => {
+    void handleSaveLayout(debouncedLayout);
+  }, [debouncedLayout, handleSaveLayout, hasChanges, isSaving]);
+
+  const handleAddWidget = async (slugs: string[]) => {
+    if (!slugs.length) return;
+
     try {
-      await request({
-        url: `/dashboard-core/widget/${dashboardSlug}`,
-        method: 'POST',
-        data: { componentSlug: slug },
-      });
+      for (const slug of slugs) {
+        await request({
+          url: `/dashboard-core/widget/${dashboardSlug}`,
+          method: 'POST',
+          data: { componentSlug: slug },
+        });
+      }
 
       await new Promise((resolve) => setTimeout(resolve, 300));
       await Promise.all([refetchLayout(), refetchComponents()]);
       setHasChanges(false);
     } catch (error) {
-      console.error('Erro ao adicionar widget:', error);
+      console.error('Erro ao adicionar widgets:', error);
     }
   };
 
@@ -257,11 +441,69 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     }
   };
 
+  const handleCaptureWidgetPreview = async (
+    widgetInstanceId: string,
+    componentId: number
+  ) => {
+    if (!isDevelopment) {
+      return;
+    }
+
+    try {
+      const widgetElement = document.querySelector(
+        `[data-widget-instance-id="${widgetInstanceId}"]`
+      ) as HTMLElement | null;
+
+      if (!widgetElement) {
+        throw new Error('Widget element not found for screenshot');
+      }
+
+      const screenshot = await toBlob(widgetElement, {
+        cacheBust: true,
+        pixelRatio: 2,
+        backgroundColor: '#ffffff',
+        filter: (node) =>
+          !(
+            node instanceof HTMLElement && node.dataset.widgetAction === 'true'
+          ),
+      });
+
+      if (!screenshot) {
+        throw new Error('Failed to generate screenshot blob');
+      }
+
+      const formData = new FormData();
+      formData.append(
+        'file',
+        screenshot,
+        `dashboard-widget-${componentId}-${Date.now()}.png`
+      );
+
+      await request({
+        url: `/dashboard-component/${componentId}/preview`,
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      await refetchComponents();
+    } catch (error) {
+      console.error('Erro ao capturar preview do widget:', error);
+    }
+  };
+
   const renderWidget = (widget: WidgetLayout) => {
     return (
       <WidgetRenderer
         widget={widget}
         onRemove={() => handleRemoveWidget(widget.i)}
+        onCapture={
+          isDevelopment
+            ? () => handleCaptureWidgetPreview(widget.i, widget.component_id)
+            : undefined
+        }
       />
     );
   };
@@ -269,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" />
@@ -303,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>
@@ -338,65 +584,118 @@ 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}
-              isLoading={isLoadingComponents}
-              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-[420px] sm:min-h-[520px] lg:min-h-[600px]">
+          <div className="min-h-105 sm:min-h-130 lg:min-h-150">
             <DraggableGrid
               className="dashboard-grid"
               layout={layout}
               onLayoutChange={handleLayoutChange}
               cols={12}
               rowHeight={80}
+              compactType={null}
               preventCollision
               isDraggable={!isMobile}
               isResizable={!isMobile}
@@ -408,17 +707,40 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
             </DraggableGrid>
           </div>
         ) : (
-          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+          <div className="flex min-h-100 flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
             <h3 className="text-lg font-semibold">{t('noWidgetAdded')}</h3>
             <p className="text-muted-foreground mt-2 text-sm">
               {t('startAddingWidgets')}
             </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>