@hed-hog/core 0.0.298 → 0.0.299

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

@@ -15,6 +15,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useIsMobile } from '@/components/ui/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { IconDeviceFloppy } 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';
@@ -35,6 +36,16 @@ interface DashboardContentProps {
   dashboardSlug: string;
 }
 
+interface DashboardComponentsPage {
+  data: DashboardComponent[];
+  total: number;
+  lastPage: number;
+  page: number;
+  pageSize: number;
+  prev: number | null;
+  next: number | null;
+}
+
 const USER_STATS_WIDGETS = new Set([
   'stat-online-time',
   'stat-actions-today',
@@ -49,7 +60,30 @@ const USER_POST_HISTORY_WIDGETS = new Set([
 
 const USER_BOTTOM_WIDGETS = new Set(['user-roles', 'activity-timeline']);
 
+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 +97,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;
@@ -100,11 +134,14 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   const { request } = useApp();
   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 { data: dashboardAccess, isLoading: isCheckingAccess } =
     useQuery<DashboardAccessResponse>({
@@ -129,17 +166,26 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   }, [dashboardAccess, dashboardSlug, router]);
 
   const {
-    data: availableComponents,
+    data: availableComponentsResponse,
     isLoading: isLoadingComponents,
     refetch: refetchComponents,
-  } = useQuery<any>({
-    queryKey: ['dashboard-components'],
+  } = useQuery<DashboardComponentsPage>({
+    queryKey: [
+      'dashboard-components',
+      dashboardSlug,
+      componentsPage,
+      componentsPageSize,
+    ],
     queryFn: async () => {
-      const { data } = await request<any>({
+      const { data } = await request<DashboardComponentsPage>({
         url: '/dashboard-component/user',
         method: 'GET',
+        params: {
+          page: componentsPage,
+          pageSize: componentsPageSize,
+        },
       });
-      return data.data;
+      return data;
     },
     enabled: dashboardAccess?.hasAccess ?? false,
   });
@@ -188,16 +234,19 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
       }
       setHasChanges(false);
     }
-  }, [userLayout]);
+  }, [userLayout, dashboardSlug]);
 
-  const componentsToFilter = availableComponents?.data?.length
-    ? availableComponents.data
-    : availableComponents || [];
+  const componentsToFilter = availableComponentsResponse?.data || [];
+  const totalAvailableComponents =
+    availableComponentsResponse?.total ?? componentsToFilter.length;
 
   const filteredComponents =
     componentsToFilter.filter(
       (component: DashboardComponent) =>
-        !widgets.some((widget) => widget.slug === component.slug)
+        !widgets.some(
+          (widget) =>
+            getWidgetIdentityKey(widget) === getWidgetIdentityKey(component)
+        )
     ) || [];
 
   const handleLayoutChange = useCallback((newLayout: LayoutItem[]) => {
@@ -228,19 +277,23 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
     }
   };
 
-  const handleAddWidget = async (slug: string) => {
+  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 +310,65 @@ 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',
+      });
+
+      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
+        }
       />
     );
   };
@@ -381,7 +488,17 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
             )}
             <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}
             />
@@ -390,7 +507,7 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
       </header>
       <div className="flex flex-1 flex-col gap-4 overflow-auto p-4 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}
@@ -408,7 +525,7 @@ 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')}

package/hedhog/frontend/app/dashboard/[slug]/types.ts.ejs

@@ -2,6 +2,7 @@ export interface WidgetLayout {
   i: string;
   component_id: number;
   slug: string;
+  library_slug?: string;
   name: string;
   description: string;
   x: number;
@@ -18,6 +19,7 @@ export interface WidgetLayout {
 export interface DashboardComponent {
   id: number;
   slug: string;
+  library_slug?: string;
   path: string;
   min_width: number;
   max_width?: number;
@@ -59,4 +61,5 @@ export interface LayoutItem {
 export interface WidgetRendererProps {
   widget: WidgetLayout;
   onRemove: () => void;
+  onCapture?: () => void;
 }

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

@@ -1,45 +1,158 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
+import { IconCamera } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { DynamicWidget } from '../components';
 import { WidgetRendererProps } from './types';
 
-export const WidgetRenderer = ({ widget, onRemove }: WidgetRendererProps) => {
+const getWidgetBaseSlug = (slug: string): string => {
+  const parts = slug.split('.');
+  return parts[parts.length - 1] || slug;
+};
+
+const getWidgetLibrarySlug = (
+  slug: string,
+  librarySlug?: string
+): string | undefined => {
+  if (librarySlug) {
+    return librarySlug;
+  }
+
+  const parts = slug.split('.');
+  return parts.length > 1 ? parts[0] : 'core';
+};
+
+const getWidgetImportCandidates = (
+  slug: string,
+  librarySlug?: string
+): string[] => {
+  const baseSlug = getWidgetBaseSlug(slug);
+  const effectiveLibrarySlug = getWidgetLibrarySlug(slug, librarySlug);
+  const libraryPrefixedSlug = effectiveLibrarySlug
+    ? `${effectiveLibrarySlug}.${baseSlug}`
+    : null;
+
+  return Array.from(
+    new Set(
+      [libraryPrefixedSlug, slug, baseSlug].filter(
+        (candidate): candidate is string => Boolean(candidate)
+      )
+    )
+  );
+};
+
+export const WidgetRenderer = ({
+  widget,
+  onRemove,
+  onCapture,
+}: WidgetRendererProps) => {
   const [Component, setComponent] = useState<any>(null);
   const [useFallback, setUseFallback] = useState(false);
 
   useEffect(() => {
-    import(`../components/widgets/${widget.slug}`)
-      .then((mod) => {
-        setComponent(() => mod.default);
-      })
-      .catch((error) => {
-        console.warn(
-          `Widget component not found for slug: ${widget.slug}`,
-          error
-        );
+    let cancelled = false;
+
+    setComponent(null);
+    setUseFallback(false);
+
+    const loadWidgetComponent = async () => {
+      const candidates = getWidgetImportCandidates(
+        widget.slug,
+        widget.library_slug
+      );
+
+      for (const candidate of candidates) {
+        try {
+          const mod = await import(`../components/widgets/${candidate}`);
+          if (!cancelled) {
+            setComponent(() => mod.default);
+          }
+          return;
+        } catch {
+          // Try next candidate.
+        }
+      }
+
+      if (!cancelled) {
+        console.warn(`Widget component not found for slug: ${widget.slug}`, {
+          candidates,
+        });
         setUseFallback(true);
-      });
-  }, [widget.slug]);
+      }
+    };
+
+    void loadWidgetComponent();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [widget.slug, widget.library_slug]);
 
   if (useFallback) {
     return (
-      <DynamicWidget
-        title={widget.name}
-        value={0}
-        description={widget.description || ''}
-        iconName="settings"
-        color="#000000"
-        draggable
-        onRemove={onRemove}
-      />
+      <div
+        className="group relative h-full w-full"
+        data-widget-instance-id={widget.i}
+      >
+        {onCapture ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="no-drag absolute right-10 top-3 z-20 size-6 cursor-pointer shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              onCapture();
+            }}
+          >
+            <IconCamera className="size-3" />
+          </Button>
+        ) : null}
+        <DynamicWidget
+          title={widget.name}
+          value={0}
+          description={widget.description || ''}
+          iconName="settings"
+          color="#000000"
+          draggable
+          onRemove={onRemove}
+        />
+      </div>
     );
   }
 
   if (!Component) {
-    return <Skeleton className="h-full w-full" />;
+    return (
+      <div className="h-full w-full" data-widget-instance-id={widget.i}>
+        <Skeleton className="h-full w-full" />
+      </div>
+    );
   }
 
-  return <Component widget={widget} onRemove={onRemove} />;
+  return (
+    <div
+      className="group relative h-full w-full"
+      data-widget-instance-id={widget.i}
+    >
+      {onCapture ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="no-drag absolute right-10 top-3 z-20 size-6 cursor-pointer shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            onCapture();
+          }}
+        >
+          <IconCamera className="size-3" />
+        </Button>
+      ) : null}
+      <Component widget={widget} onRemove={onRemove} />
+    </div>
+  );
 };