@hed-hog/core 0.0.214 → 0.0.216

package/hedhog/data/dashboard_item.yaml

@@ -207,10 +207,10 @@
   dashboard_id:
     where:
       slug: config
-  width: 6
-  height: 4
-  x_axis: 6
-  y_axis: 0
+  width: 12
+  height: 6
+  x_axis: 0
+  y_axis: 9
 
 - component_id:
     where:
@@ -219,7 +219,7 @@
     where:
       slug: config
   width: 6
-  height: 4
+  height: 5
   x_axis: 0
   y_axis: 4
 
@@ -232,7 +232,7 @@
   width: 6
   height: 4
   x_axis: 6
-  y_axis: 4
+  y_axis: 0
 
 - component_id:
     where:
@@ -241,6 +241,6 @@
     where:
       slug: config
   width: 6
-  height: 4
-  x_axis: 0
-  y_axis: 8
+  height: 5
+  x_axis: 6
+  y_axis: 4

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

@@ -1,10 +1,5 @@
 'use client';
 
-import {
-  AddWidgetSelectorDialog,
-  DraggableGrid,
-  LayoutItem,
-} from '@/components/dashboard';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -22,6 +17,11 @@ import { IconDeviceFloppy } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
+import {
+  AddWidgetSelectorDialog,
+  DraggableGrid,
+  LayoutItem,
+} from '../components';
 import '../dashboard.css';
 import {
   DashboardAccessResponse,

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { DynamicWidget } from '@/components/dashboard';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useEffect, useState } from 'react';
+import { DynamicWidget } from '../components';
 import { WidgetRendererProps } from './types';
 
 export const WidgetRenderer = ({ widget, onRemove }: WidgetRendererProps) => {

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

@@ -0,0 +1,312 @@
+'use client';
+
+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 { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  IconArrowsRightLeft,
+  IconPlus,
+  IconSettings,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+interface DashboardComponent {
+  id: number;
+  slug: string;
+  path: string;
+  min_width: number;
+  max_width?: number;
+  min_height: number;
+  max_height?: number;
+  width: number;
+  height: number;
+  is_resizable: boolean;
+  dashboard_component_locale?: Array<{
+    name: string;
+    locale: {
+      code: string;
+    };
+  }>;
+}
+
+interface Dashboard {
+  id: number;
+  slug: string;
+  dashboard_locale?: Array<{
+    name: string;
+    locale: {
+      code: string;
+    };
+  }>;
+}
+
+interface AddWidgetSelectorDialogProps {
+  availableComponents: DashboardComponent[];
+  isLoading: boolean;
+  onAdd: (slug: string) => void;
+  currentSlug?: string;
+}
+
+export function AddWidgetSelectorDialog({
+  availableComponents,
+  isLoading,
+  onAdd,
+  currentSlug = 'default',
+}: 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 [selectedWidget, setSelectedWidget] = useState<string | null>(null);
+  const [selectedDashboard, setSelectedDashboard] = useState<string | null>(
+    null
+  );
+
+  // 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;
+    },
+  });
+
+  const handleAdd = () => {
+    if (selectedWidget) {
+      onAdd(selectedWidget);
+      setSelectedWidget(null);
+      setOpenWidgets(false);
+    }
+  };
+
+  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>
+
+      {/* Diálogo de Adicionar Widgets */}
+      <Dialog open={openWidgets} onOpenChange={setOpenWidgets}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>{tWidget('title')}</DialogTitle>
+            <DialogDescription>{tWidget('description')}</DialogDescription>
+          </DialogHeader>
+          <ScrollArea className="max-h-[400px] pr-4">
+            {isLoading ? (
+              <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">
+                {availableComponents.length === 0 ? (
+                  <div className="flex min-h-[200px] flex-col items-center justify-center text-center">
+                    <p className="text-muted-foreground text-sm">
+                      {tWidget('noComponentsAvailable')}
+                    </p>
+                  </div>
+                ) : (
+                  availableComponents.map((component) => {
+                    const name =
+                      component.dashboard_component_locale?.[0]?.name ||
+                      component.slug;
+                    return (
+                      <Card
+                        key={component.slug}
+                        className={cn(
+                          'cursor-pointer py-4 transition-colors hover:bg-accent',
+                          selectedWidget === component.slug &&
+                            'border-primary bg-accent'
+                        )}
+                        onClick={() => setSelectedWidget(component.slug)}
+                      >
+                        <CardHeader>
+                          <div className="flex items-start gap-3">
+                            <div className="bg-primary/10 flex size-10 items-center justify-center rounded-lg">
+                              <IconPlus className="text-primary size-5" />
+                            </div>
+                            <div className="flex-1">
+                              <CardTitle className="text-base">
+                                {name}
+                              </CardTitle>
+                              <CardDescription className="text-sm">
+                                {tWidget('dimensions')}: {component.width}x
+                                {component.height} |
+                                {component.is_resizable
+                                  ? ` ${tWidget('resizable')}`
+                                  : ` ${tWidget('fixedSize')}`}
+                              </CardDescription>
+                            </div>
+                          </div>
+                        </CardHeader>
+                      </Card>
+                    );
+                  })
+                )}
+              </div>
+            )}
+          </ScrollArea>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpenWidgets(false)}
+            >
+              {tWidget('cancel')}
+            </Button>
+            <Button
+              type="button"
+              onClick={handleAdd}
+              disabled={!selectedWidget || isLoading}
+            >
+              {tWidget('add')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Diálogo de Trocar Dashboard */}
+      <Dialog open={openDashboards} onOpenChange={setOpenDashboards}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>{tMenu('selectDashboardTitle')}</DialogTitle>
+            <DialogDescription>
+              {tMenu('selectDashboardDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <ScrollArea className="max-h-[400px] 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-[200px] 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/dashboard-grid.tsx.ejs

@@ -0,0 +1,54 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { ReactNode } from 'react';
+
+interface DashboardGridProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function DashboardGrid({ children, className }: DashboardGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface DashboardGridItemProps {
+  children: ReactNode;
+  className?: string;
+  colSpan?: 1 | 2 | 3 | 4;
+  rowSpan?: 1 | 2 | 3 | 4;
+}
+
+export function DashboardGridItem({
+  children,
+  className,
+  colSpan = 1,
+  rowSpan = 1,
+}: DashboardGridItemProps) {
+  const colSpanClass = {
+    1: 'col-span-1',
+    2: 'md:col-span-2',
+    3: 'lg:col-span-3',
+    4: 'xl:col-span-4',
+  }[colSpan];
+
+  const rowSpanClass = {
+    1: 'row-span-1',
+    2: 'md:row-span-2',
+    3: 'lg:row-span-3',
+    4: 'xl:row-span-4',
+  }[rowSpan];
+
+  return (
+    <div className={cn(colSpanClass, rowSpanClass, className)}>{children}</div>
+  );
+}

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

@@ -0,0 +1,132 @@
+'use client';
+
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import GridLayout, { Layout as RGLLayout } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+export interface LayoutItem {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW?: number;
+  maxW?: number;
+  minH?: number;
+  maxH?: number;
+  static?: boolean;
+}
+
+export type Layout = LayoutItem[];
+
+interface DraggableGridProps {
+  layout: Layout;
+  onLayoutChange: (layout: Layout) => void;
+  children: ReactNode;
+  className?: string;
+  cols?: number;
+  rowHeight?: number;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  compactType?: 'vertical' | 'horizontal' | null;
+  preventCollision?: boolean;
+  margin?: [number, number];
+  containerPadding?: [number, number];
+}
+
+export function DraggableGrid({
+  layout,
+  onLayoutChange,
+  children,
+  className = '',
+  cols = 12,
+  rowHeight = 100,
+  isDraggable = true,
+  isResizable = true,
+  compactType = 'vertical',
+  preventCollision = false,
+  margin = [16, 16],
+  containerPadding = [0, 0],
+}: DraggableGridProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(1200);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth);
+      }
+    };
+
+    updateWidth();
+    const resizeObserver = new ResizeObserver(updateWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const handleLayoutChange = (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[];
+    onLayoutChange(convertedLayout);
+  };
+
+  return (
+    <div ref={containerRef} className="w-full">
+      <GridLayout
+        className={`layout ${className}`}
+        layout={layout}
+        cols={cols}
+        rowHeight={rowHeight}
+        width={containerWidth}
+        isDraggable={isDraggable}
+        isResizable={isResizable}
+        compactType={compactType}
+        preventCollision={preventCollision}
+        margin={margin}
+        containerPadding={containerPadding}
+        onLayoutChange={handleLayoutChange}
+        useCSSTransforms={true}
+        draggableHandle=".drag-handle"
+        resizeHandles={['se', 's', 'e', 'sw', 'w', 'n', 'ne', 'nw']}
+        draggableCancel="button,.no-drag"
+      >
+        {children}
+      </GridLayout>
+    </div>
+  );
+}
+
+interface DraggableGridItemProps {
+  id: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function DraggableGridItem({
+  id,
+  children,
+  className = '',
+}: DraggableGridItemProps) {
+  return (
+    <div key={id} className={className} style={{ position: 'relative' }}>
+      {children}
+    </div>
+  );
+}

package/hedhog/frontend/app/dashboard/components/dynamic-widget.tsx.ejs

@@ -0,0 +1,88 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import * as TablerIcons from '@tabler/icons-react';
+import { IconGripVertical, IconX } from '@tabler/icons-react';
+import { ComponentType } from 'react';
+
+interface DynamicWidgetProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  iconName?: string;
+  color?: string;
+  draggable?: boolean;
+  onRemove?: () => void;
+  className?: string;
+}
+
+export function DynamicWidget({
+  title,
+  value,
+  description,
+  iconName,
+  color,
+  draggable = false,
+  onRemove,
+  className,
+}: DynamicWidgetProps) {
+  // Dynamically get icon from Tabler Icons
+  const Icon: ComponentType<{ className?: string }> | null = iconName
+    ? (TablerIcons as any)[iconName] || null
+    : null;
+
+  return (
+    <Card className={cn('h-full flex flex-col', className)}>
+      <CardHeader
+        className={cn(
+          'flex flex-row items-center justify-between space-y-0 pb-2',
+          draggable && 'drag-handle'
+        )}
+        style={draggable ? { cursor: 'grab', userSelect: 'none' } : undefined}
+        onMouseDown={(e) =>
+          draggable && (e.currentTarget.style.cursor = 'grabbing')
+        }
+        onMouseUp={(e) => draggable && (e.currentTarget.style.cursor = 'grab')}
+      >
+        <div className="flex items-center gap-2">
+          {draggable && (
+            <IconGripVertical className="text-muted-foreground size-4 shrink-0" />
+          )}
+          <CardTitle className="text-md font-medium">{title}</CardTitle>
+        </div>
+        <div className="flex items-center gap-2">
+          {onRemove && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-6 shrink-0 no-drag"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onRemove();
+              }}
+            >
+              <IconX className="size-3" />
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="text-2xl font-bold">{value}</div>
+        {description && (
+          <p className="text-muted-foreground text-xs mt-1">{description}</p>
+        )}
+        {Icon && (
+          <Icon
+            className={cn(
+              'size-6 absolute bottom-4 right-4 shrink-0',
+              color ? `text-${color}` : 'text-muted-foreground'
+            )}
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/dashboard/components/index.ts.ejs

@@ -0,0 +1,6 @@
+export { AddWidgetSelectorDialog } from './add-widget-selector-dialog';
+export { DashboardGrid, DashboardGridItem } from './dashboard-grid';
+export { DraggableGrid, DraggableGridItem } from './draggable-grid';
+export type { Layout, LayoutItem } from './draggable-grid';
+export { DynamicWidget } from './dynamic-widget';
+export { WidgetWrapper } from './widget-wrapper';