@hed-hog/core 0.0.185 → 0.0.190

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { DashboardContent } from './dashboard-content';
+
+export default function DashboardPage() {
+  const params = useParams();
+  const dashboardSlug = params.slug as string;
+
+  return <DashboardContent dashboardSlug={dashboardSlug} />;
+}

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

@@ -0,0 +1,62 @@
+export interface WidgetLayout {
+  i: string;
+  component_id: number;
+  slug: string;
+  name: string;
+  description: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW?: number;
+  maxW?: number;
+  minH?: number;
+  maxH?: number;
+  isResizable: boolean;
+}
+
+export 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;
+    };
+  }>;
+}
+
+export interface DashboardAccessResponse {
+  hasAccess: boolean;
+  dashboard?: {
+    id: number;
+    slug: string;
+    name: string;
+  };
+}
+
+export interface LayoutItem {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW: number;
+  maxW: number;
+  minH: number;
+  maxH: number;
+  static: boolean;
+}
+
+export interface WidgetRendererProps {
+  widget: WidgetLayout;
+  onRemove: () => void;
+}

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { DynamicWidget } from '@/components/dashboard';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useEffect, useState } from 'react';
+import { WidgetRendererProps } from './types';
+
+export const WidgetRenderer = ({ widget, onRemove }: WidgetRendererProps) => {
+  const [Component, setComponent] = useState<any>(null);
+  const [useFallback, setUseFallback] = useState(false);
+
+  useEffect(() => {
+    import(`@/components/dashboard/widgets/${widget.slug}`)
+      .then((mod) => {
+        setComponent(() => mod.default);
+      })
+      .catch((error) => {
+        console.warn(
+          `Widget component not found for slug: ${widget.slug}`,
+          error
+        );
+        setUseFallback(true);
+      });
+  }, [widget.slug]);
+
+  if (useFallback) {
+    return (
+      <DynamicWidget
+        title={widget.name}
+        value={0}
+        description={widget.description || ''}
+        iconName="settings"
+        color="#000000"
+        draggable
+        onRemove={onRemove}
+      />
+    );
+  }
+
+  if (!Component) {
+    return <Skeleton className="h-full w-full" />;
+  }
+
+  return <Component widget={widget} onRemove={onRemove} />;
+};

package/hedhog/frontend/app/dashboard/dashboard.css.ejs

@@ -0,0 +1,196 @@
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top, width, height;
+}
+
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  z-index: 10;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: hsl(var(--primary));
+  border: 2px solid white;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0.3;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.react-grid-item:hover > .react-resizable-handle::after {
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw::after {
+  left: 2px;
+  bottom: 2px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se::after {
+  right: 2px;
+  bottom: 2px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw::after {
+  left: 2px;
+  top: 2px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne::after {
+  right: 2px;
+  top: 2px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+  width: 20px;
+  height: 60px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w::after {
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+  width: 20px;
+  height: 60px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e::after {
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+  width: 60px;
+  height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n::after {
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+  width: 60px;
+  height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s::after {
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Drag handle styles */
+.drag-handle {
+  cursor: grab !important;
+  user-select: none !important;
+}
+
+.drag-handle:active {
+  cursor: grabbing !important;
+}
+
+/* Prevent text selection during drag */
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 100;
+  will-change: transform;
+  opacity: 0.9;
+}
+
+.react-grid-item.resizing {
+  transition: none;
+  z-index: 100;
+  will-change: transform;
+  opacity: 0.9;
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+}
+
+/* Placeholder styling */
+.react-grid-placeholder {
+  background: hsl(var(--primary) / 0.2);
+  opacity: 0.5;
+  transition-duration: 100ms;
+  z-index: 2;
+  border-radius: 0.5rem;
+  border: 2px dashed hsl(var(--primary));
+}
+
+.react-grid-item:hover {
+  outline: 1px solid hsl(var(--primary) / 0.2);
+  outline-offset: -1px;
+}
+
+.react-grid-item:hover > .react-resizable-handle::after {
+  opacity: 1;
+  transform: scale(1.1);
+}

package/hedhog/frontend/app/dashboard/management/page.tsx.ejs

@@ -0,0 +1,63 @@
+'use client';
+
+import { PageHeader } from '@/components/entity-list';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useTranslations } from 'next-intl';
+import { ComponentRolesTab } from './tabs/component-roles-tab';
+import { ComponentsTab } from './tabs/components-tab';
+import { DashboardRolesTab } from './tabs/dashboard-roles-tab';
+import { DashboardsTab } from './tabs/dashboards-tab';
+import { ItemsTab } from './tabs/items-tab';
+
+export default function Page() {
+  const t = useTranslations('core.DashboardManagement');
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: t('description') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <div className="flex flex-1 flex-col gap-4 overflow-auto pt-0">
+        <Tabs defaultValue="dashboards" className="w-full">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="dashboards">{t('dashboardsTab')}</TabsTrigger>
+            <TabsTrigger value="components">{t('componentsTab')}</TabsTrigger>
+            <TabsTrigger value="items">{t('itemsTab')}</TabsTrigger>
+            <TabsTrigger value="componentRoles">
+              {t('componentRolesTab')}
+            </TabsTrigger>
+            <TabsTrigger value="dashboardRoles">
+              {t('dashboardRolesTab')}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="dashboards" className="mt-6">
+            <DashboardsTab />
+          </TabsContent>
+
+          <TabsContent value="components" className="mt-6">
+            <ComponentsTab />
+          </TabsContent>
+
+          <TabsContent value="items" className="mt-6">
+            <ItemsTab />
+          </TabsContent>
+
+          <TabsContent value="componentRoles" className="mt-6">
+            <ComponentRolesTab />
+          </TabsContent>
+
+          <TabsContent value="dashboardRoles" className="mt-6">
+            <DashboardRolesTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}