@hed-hog/core 0.0.299 → 0.0.300

package/hedhog/frontend/app/dashboard/components/add-widget-selector-dialog.tsx.ejs

@@ -3,27 +3,17 @@
 import { PaginationFooter } from '@/components/entity-list/pagination-footer';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { Card, CardDescription, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import {
   Sheet,
   SheetContent,
@@ -34,16 +24,9 @@ import {
 } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  IconArrowsRightLeft,
-  IconLayoutDashboard,
-  IconPlus,
-  IconSettings,
-} from '@tabler/icons-react';
+import { IconLayoutDashboard, IconPlus } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface DashboardComponent {
   id: number;
@@ -65,27 +48,24 @@ interface DashboardComponent {
   }>;
 }
 
-interface Dashboard {
-  id: number;
-  slug: string;
-  dashboard_locale?: Array<{
-    name: string;
-    locale: {
-      code: string;
-    };
-  }>;
-}
-
 interface AddWidgetSelectorDialogProps {
   availableComponents: DashboardComponent[];
   totalItems: number;
   currentPage: number;
   pageSize: number;
   isLoading: boolean;
+  searchQuery: string;
+  moduleFilter: string;
+  modules: string[];
+  onSearchQueryChange: (value: string) => void;
+  onModuleFilterChange: (value: string) => void;
   onPageChange: (page: number) => void;
   onPageSizeChange: (pageSize: number) => void;
   onAdd: (slugs: string[]) => Promise<void> | void;
-  currentSlug?: string;
+  buttonLabel?: string;
+  buttonVariant?: 'default' | 'outline';
+  openSignal?: number;
+  onOpenSignalHandled?: () => void;
 }
 
 const getWidgetLookupKey = (slug: string, librarySlug?: string): string => {
@@ -104,6 +84,12 @@ const getWidgetPreviewSlug = (slug: string): string => {
   return parts[parts.length - 1] || slug;
 };
 
+const formatModuleLabel = (moduleSlug?: string): string => {
+  const normalized = (moduleSlug || 'core').replace(/[._-]+/g, ' ').trim();
+
+  return normalized.replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
 function WidgetPreview({
   name,
   slug,
@@ -125,33 +111,27 @@ function WidgetPreview({
   const previewUrl = `/libraries/core/dashboard-previews/${previewSlug}.png`;
 
   return (
-    <div className="h-44 overflow-hidden rounded-xl border bg-background p-3">
-      <div className="flex h-full flex-col rounded-lg border border-dashed bg-muted/20 p-3">
+    <div className="overflow-hidden rounded-lg border bg-background/80 p-2">
+      <div className="flex items-center gap-2">
         <img
           src={previewUrl}
           alt={name}
-          className="mb-2 h-full w-full rounded-md border object-cover"
-          onError={(e) => {
-            e.currentTarget.style.display = 'none';
+          className="h-16 w-24 shrink-0 rounded-md border object-cover"
+          onError={(event) => {
+            event.currentTarget.style.display = 'none';
           }}
         />
-        <div className="mb-2 flex items-center gap-2">
-          <div className="size-2 rounded-full bg-primary/70" />
-          <div className="h-2.5 w-20 rounded bg-muted" />
-        </div>
-        <div className="h-3 w-2/3 rounded bg-muted" />
-        <div className="mt-2 h-2.5 w-1/2 rounded bg-muted" />
-        <div className="mt-auto flex items-center gap-2">
-          <Badge variant="secondary" className="text-[10px]">
-            {width}x{height}
-          </Badge>
-          <Badge variant="outline" className="text-[10px]">
-            {isResizable ? resizableLabel : fixedLabel}
-          </Badge>
+        <div className="min-w-0 flex-1">
+          <div className="mb-1.5 flex flex-wrap items-center gap-1.5">
+            <Badge variant="secondary" className="px-1.5 py-0 text-[10px]">
+              {width}x{height}
+            </Badge>
+            <Badge variant="outline" className="px-1.5 py-0 text-[10px]">
+              {isResizable ? resizableLabel : fixedLabel}
+            </Badge>
+          </div>
+          <p className="truncate text-[10px] text-muted-foreground">{name}</p>
         </div>
-        <p className="mt-2 truncate text-[10px] text-muted-foreground">
-          {name}
-        </p>
       </div>
     </div>
   );
@@ -163,54 +143,61 @@ export function AddWidgetSelectorDialog({
   currentPage,
   pageSize,
   isLoading,
+  searchQuery,
+  moduleFilter,
+  modules,
+  onSearchQueryChange,
+  onModuleFilterChange,
   onPageChange,
   onPageSizeChange,
   onAdd,
-  currentSlug = 'default',
+  buttonLabel,
+  buttonVariant = 'outline',
+  openSignal,
+  onOpenSignalHandled,
 }: AddWidgetSelectorDialogProps) {
   const tWidget = useTranslations('core.AddWidgetDialog');
   const tMenu = useTranslations('core.DashboardMenu');
-  const { request } = useApp();
-  const router = useRouter();
 
   const [openWidgets, setOpenWidgets] = useState(false);
-  const [openDashboards, setOpenDashboards] = useState(false);
   const [selectedWidgets, setSelectedWidgets] = useState<Set<string>>(
     new Set()
   );
   const [isAdding, setIsAdding] = useState(false);
-  const [selectedDashboard, setSelectedDashboard] = useState<string | null>(
-    null
-  );
+  const lastHandledOpenSignalRef = useRef<number | null>(null);
+
+  const availableModuleOptions = Array.from(new Set(modules.filter(Boolean)));
 
-  // Buscar dashboards disponíveis para o usuário
-  const { data: userDashboards, isLoading: isLoadingDashboards } = useQuery<
-    Dashboard[]
-  >({
-    queryKey: ['user-dashboards'],
-    queryFn: async () => {
-      const { data } = await request<Dashboard[]>({
-        url: '/dashboard-core/user-dashboards',
-        method: 'GET',
-      });
-      return data;
-    },
-  });
+  useEffect(() => {
+    if (!openSignal) {
+      lastHandledOpenSignalRef.current = 0;
+      return;
+    }
+
+    if (openSignal !== lastHandledOpenSignalRef.current) {
+      lastHandledOpenSignalRef.current = openSignal;
+      setOpenWidgets(true);
+      onOpenSignalHandled?.();
+    }
+  }, [onOpenSignalHandled, openSignal]);
 
   const toggleSelectedWidget = (slug: string) => {
     setSelectedWidgets((prev) => {
       const next = new Set(prev);
+
       if (next.has(slug)) {
         next.delete(slug);
       } else {
         next.add(slug);
       }
+
       return next;
     });
   };
 
   const handleAdd = async () => {
     if (selectedWidgets.size === 0 || isAdding) return;
+
     setIsAdding(true);
     try {
       await onAdd(Array.from(selectedWidgets));
@@ -221,34 +208,18 @@ export function AddWidgetSelectorDialog({
     }
   };
 
-  const handleSwitchDashboard = () => {
-    if (selectedDashboard && selectedDashboard !== currentSlug) {
-      router.push(`/core/dashboard/${selectedDashboard}`);
-      setOpenDashboards(false);
-    }
-  };
-
   return (
     <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="sm" className="gap-2" variant="outline">
-            <IconSettings className="size-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={() => setOpenWidgets(true)}>
-            <IconPlus className="mr-2 size-4" />
-            {tMenu('addWidgets')}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setOpenDashboards(true)}>
-            <IconArrowsRightLeft className="mr-2 size-4" />
-            {tMenu('switchDashboard')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <Button
+        size="sm"
+        variant={buttonVariant}
+        className="cursor-pointer gap-2"
+        onClick={() => setOpenWidgets(true)}
+      >
+        <IconPlus className="size-4" />
+        {buttonLabel || tMenu('addWidgets')}
+      </Button>
 
-      {/* Sheet de Adicionar Widgets */}
       <Sheet
         open={openWidgets}
         onOpenChange={(open) => {
@@ -270,16 +241,61 @@ export function AddWidgetSelectorDialog({
               </SheetDescription>
             </SheetHeader>
 
+            <div className="grid gap-3 border-b px-4 py-4 md:grid-cols-[minmax(0,1fr)_220px]">
+              <div className="space-y-2">
+                <label
+                  htmlFor="dashboard-widget-search"
+                  className="text-sm font-medium"
+                >
+                  {tWidget('search')}
+                </label>
+                <Input
+                  id="dashboard-widget-search"
+                  value={searchQuery}
+                  onChange={(event) => onSearchQueryChange(event.target.value)}
+                  placeholder={tWidget('searchPlaceholder')}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  htmlFor="dashboard-widget-module-filter"
+                  className="text-sm font-medium"
+                >
+                  {tWidget('moduleFilterLabel')}
+                </label>
+                <Select
+                  value={moduleFilter}
+                  onValueChange={onModuleFilterChange}
+                >
+                  <SelectTrigger
+                    id="dashboard-widget-module-filter"
+                    className="w-full"
+                  >
+                    <SelectValue placeholder={tWidget('allModules')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{tWidget('allModules')}</SelectItem>
+                    {availableModuleOptions.map((module) => (
+                      <SelectItem key={module} value={module}>
+                        {formatModuleLabel(module)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
             <div className="grid min-h-0 flex-1 gap-4 p-4">
               <ScrollArea className="min-h-0 pr-4">
                 {isLoading ? (
-                  <div className="grid gap-3">
-                    <Skeleton className="h-28 w-full" />
-                    <Skeleton className="h-28 w-full" />
-                    <Skeleton className="h-28 w-full" />
+                  <div className="grid gap-2.5">
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
                   </div>
                 ) : (
-                  <div className="grid gap-3">
+                  <div className="grid gap-2.5">
                     {availableComponents.length === 0 ? (
                       <div className="flex min-h-55 flex-col items-center justify-center rounded-xl border border-dashed text-center">
                         <p className="text-sm text-muted-foreground">
@@ -295,64 +311,84 @@ export function AddWidgetSelectorDialog({
                           component.slug,
                           component.library_slug
                         );
+                        const isSelected = selectedWidgets.has(selectionKey);
+                        const moduleLabel = formatModuleLabel(
+                          component.library_slug
+                        );
 
                         return (
                           <Card
                             key={selectionKey}
+                            role="checkbox"
+                            tabIndex={0}
+                            aria-checked={isSelected}
                             className={cn(
-                              'cursor-pointer border p-4 transition-all hover:border-primary/40 hover:bg-accent/40',
-                              selectedWidgets.has(selectionKey) &&
-                                'border-primary bg-accent/50'
+                              'cursor-pointer border px-3 py-2.5 transition-all hover:border-primary/40 hover:bg-accent/30',
+                              isSelected &&
+                                'border-primary bg-primary/10 shadow-sm ring-1 ring-primary/25'
                             )}
                             onClick={() => toggleSelectedWidget(selectionKey)}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter' || event.key === ' ') {
+                                event.preventDefault();
+                                toggleSelectedWidget(selectionKey);
+                              }
+                            }}
                           >
-                            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px]">
+                            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_180px] lg:items-center">
                               <div className="flex items-start gap-3">
-                                <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl">
-                                  <IconLayoutDashboard className="size-5" />
+                                <div
+                                  className={cn(
+                                    'flex size-9 items-center justify-center rounded-lg',
+                                    isSelected
+                                      ? 'bg-primary text-primary-foreground'
+                                      : 'bg-primary/10 text-primary'
+                                  )}
+                                >
+                                  <IconLayoutDashboard className="size-4" />
                                 </div>
                                 <div className="min-w-0 flex-1">
-                                  <CardTitle className="truncate text-base">
-                                    {name}
-                                  </CardTitle>
-                                  <CardDescription className="mt-1 text-xs">
-                                    {selectionKey}
-                                  </CardDescription>
-                                  <div className="mt-3 flex flex-wrap items-center gap-2">
+                                  <div className="flex items-start justify-between gap-3">
+                                    <div className="min-w-0">
+                                      <CardTitle className="truncate text-sm">
+                                        {name}
+                                      </CardTitle>
+                                      <CardDescription className="mt-0.5 truncate text-[11px]">
+                                        {selectionKey}
+                                      </CardDescription>
+                                    </div>
+                                    <Checkbox
+                                      checked={isSelected}
+                                      aria-label={name}
+                                      className="pointer-events-none mt-0.5"
+                                    />
+                                  </div>
+                                  <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                                    <Badge
+                                      variant="outline"
+                                      className="px-1.5 py-0 text-[10px]"
+                                    >
+                                      {tWidget('module')}: {moduleLabel}
+                                    </Badge>
                                     <Badge
                                       variant="secondary"
-                                      className="text-[11px]"
+                                      className="px-1.5 py-0 text-[10px]"
                                     >
                                       {tWidget('dimensions')}: {component.width}
                                       x{component.height}
                                     </Badge>
                                     <Badge
                                       variant="outline"
-                                      className="text-[11px]"
+                                      className="px-1.5 py-0 text-[10px]"
                                     >
                                       {component.is_resizable
                                         ? tWidget('resizable')
                                         : tWidget('fixedSize')}
                                     </Badge>
                                   </div>
-                                  <div className="mt-3">
-                                    <Button
-                                      type="button"
-                                      size="sm"
-                                      className="cursor-pointer"
-                                      onClick={(event) => {
-                                        event.stopPropagation();
-                                        toggleSelectedWidget(selectionKey);
-                                      }}
-                                    >
-                                      {selectedWidgets.has(selectionKey)
-                                        ? tWidget('selected')
-                                        : tWidget('select')}
-                                    </Button>
-                                  </div>
                                 </div>
                               </div>
-                              <div className="hidden lg:block">
+                              <div className="lg:block">
                                 <WidgetPreview
                                   name={name}
                                   slug={component.slug}
@@ -400,94 +436,6 @@ export function AddWidgetSelectorDialog({
           </div>
         </SheetContent>
       </Sheet>
-
-      {/* Diálogo de Trocar Dashboard */}
-      <Dialog open={openDashboards} onOpenChange={setOpenDashboards}>
-        <DialogContent className="sm:max-w-150">
-          <DialogHeader>
-            <DialogTitle>{tMenu('selectDashboardTitle')}</DialogTitle>
-            <DialogDescription>
-              {tMenu('selectDashboardDescription')}
-            </DialogDescription>
-          </DialogHeader>
-          <ScrollArea className="max-h-100 pr-4">
-            {isLoadingDashboards ? (
-              <div className="grid gap-3">
-                <Skeleton className="h-24 w-full" />
-                <Skeleton className="h-24 w-full" />
-                <Skeleton className="h-24 w-full" />
-              </div>
-            ) : (
-              <div className="grid gap-3">
-                {!userDashboards || userDashboards.length === 0 ? (
-                  <div className="flex min-h-50 flex-col items-center justify-center text-center">
-                    <p className="text-muted-foreground text-sm">
-                      {tMenu('noDashboardsAvailable')}
-                    </p>
-                  </div>
-                ) : (
-                  userDashboards.map((dashboard) => {
-                    const name =
-                      dashboard.dashboard_locale?.[0]?.name || dashboard.slug;
-                    const isCurrent = dashboard.slug === currentSlug;
-                    return (
-                      <Card
-                        key={dashboard.slug}
-                        className={cn(
-                          'cursor-pointer transition-colors py-4 hover:bg-accent',
-                          selectedDashboard === dashboard.slug &&
-                            'border-primary bg-accent',
-                          isCurrent && 'opacity-50'
-                        )}
-                        onClick={() =>
-                          !isCurrent && setSelectedDashboard(dashboard.slug)
-                        }
-                      >
-                        <CardHeader>
-                          <div className="flex items-start gap-3">
-                            <div className="bg-primary/10 flex size-10 items-center justify-center rounded-lg">
-                              <IconArrowsRightLeft className="text-primary size-5" />
-                            </div>
-                            <div className="flex-1">
-                              <CardTitle className="text-base">
-                                {name}
-                                {isCurrent && ' (atual)'}
-                              </CardTitle>
-                              <CardDescription className="text-sm">
-                                {dashboard.slug}
-                              </CardDescription>
-                            </div>
-                          </div>
-                        </CardHeader>
-                      </Card>
-                    );
-                  })
-                )}
-              </div>
-            )}
-          </ScrollArea>
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setOpenDashboards(false)}
-            >
-              {tWidget('cancel')}
-            </Button>
-            <Button
-              type="button"
-              onClick={handleSwitchDashboard}
-              disabled={
-                !selectedDashboard ||
-                isLoadingDashboards ||
-                selectedDashboard === currentSlug
-              }
-            >
-              {tMenu('switch')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </>
   );
 }

package/hedhog/frontend/app/dashboard/components/draggable-grid.tsx.ejs

@@ -84,6 +84,60 @@ const deriveResponsiveLayout = (
   });
 };
 
+const scaleToColumnCount = (
+  value: number,
+  sourceCols: number,
+  targetCols: number
+) => {
+  if (sourceCols === targetCols) {
+    return value;
+  }
+
+  return Math.round((value * targetCols) / sourceCols);
+};
+
+const mapLayoutToBaseColumns = (
+  nextLayout: RGLLayout,
+  sourceCols: number,
+  targetCols: number,
+  previousLayout: Layout
+): Layout => {
+  const previousItems = new Map(previousLayout.map((item) => [item.i, item]));
+
+  return nextLayout.map((item) => {
+    const previousItem = previousItems.get(item.i);
+    const nextW =
+      sourceCols === 1
+        ? (previousItem?.w ?? 1)
+        : clamp(
+            scaleToColumnCount(item.w, sourceCols, targetCols),
+            1,
+            targetCols
+          );
+    const nextX =
+      sourceCols === 1
+        ? clamp(previousItem?.x ?? 0, 0, Math.max(0, targetCols - nextW))
+        : clamp(
+            scaleToColumnCount(item.x, sourceCols, targetCols),
+            0,
+            Math.max(0, targetCols - nextW)
+          );
+
+    return {
+      i: item.i,
+      x: nextX,
+      y: item.y,
+      w: nextW,
+      h: item.h,
+      minW: previousItem?.minW ?? item.minW,
+      maxW: previousItem?.maxW ?? item.maxW,
+      minH: previousItem?.minH ?? item.minH,
+      maxH: previousItem?.maxH ?? item.maxH,
+      static: previousItem?.static ?? item.static,
+    } satisfies LayoutItem;
+  });
+};
+
 // Simple compaction function for grid layout
 const compactLayout = (
   layout: RGLLayout,
@@ -161,24 +215,15 @@ export function DraggableGrid({
     };
   }, []);
 
-  const handleLayoutChange = (newLayout: RGLLayout) => {
-    if (effectiveCols !== cols) {
-      return;
-    }
-
+  const emitUserLayoutChange = (newLayout: RGLLayout) => {
     const layouts = Array.isArray(newLayout) ? newLayout : [newLayout];
-    const convertedLayout = layouts.map((item: any) => ({
-      i: item.i,
-      x: item.x,
-      y: item.y,
-      w: item.w,
-      h: item.h,
-      minW: item.minW,
-      maxW: item.maxW,
-      minH: item.minH,
-      maxH: item.maxH,
-      static: item.static,
-    })) as LayoutItem[];
+    const convertedLayout = mapLayoutToBaseColumns(
+      layouts,
+      effectiveCols,
+      cols,
+      layout
+    );
+
     onLayoutChange(convertedLayout);
   };
 
@@ -208,7 +253,8 @@ export function DraggableGrid({
           allowOverlap: !preventCollision,
           compact: (layout, cols) => compactLayout(layout, cols, compactType),
         }}
-        onLayoutChange={handleLayoutChange}
+        onDragStop={(nextLayout) => emitUserLayoutChange(nextLayout)}
+        onResizeStop={(nextLayout) => emitUserLayoutChange(nextLayout)}
       >
         {children}
       </GridLayout>