@hed-hog/core 0.0.278 → 0.0.285

package/hedhog/data/dashboard_item.yaml

@@ -68,6 +68,26 @@
   height: 2
   x_axis: 2
   y_axis: 0
+- component_id:
+    where:
+      slug: menus-card
+  dashboard_id:
+    where:
+      slug: default
+  width: 2
+  height: 2
+  x_axis: 8
+  y_axis: 0
+- component_id:
+    where:
+      slug: routes-card
+  dashboard_id:
+    where:
+      slug: default
+  width: 2
+  height: 2
+  x_axis: 10
+  y_axis: 0
 - component_id:
     where:
       slug: user-growth-chart
@@ -86,109 +106,109 @@
     where:
       slug: user
   width: 12
-  height: 2
+  height: 3
   x_axis: 0
   y_axis: 0
-- component_id:
-    where:
-      slug: stat-online-time
-  dashboard_id:
-    where:
-      slug: user
-  width: 3
-  height: 1
-  x_axis: 0
-  y_axis: 2
-- component_id:
-    where:
-      slug: stat-actions-today
-  dashboard_id:
-    where:
-      slug: user
-  width: 3
-  height: 1
-  x_axis: 3
-  y_axis: 2
-- component_id:
-    where:
-      slug: stat-consecutive-days
-  dashboard_id:
-    where:
-      slug: user
-  width: 3
-  height: 1
-  x_axis: 6
-  y_axis: 2
-- component_id:
-    where:
-      slug: stat-access-level
-  dashboard_id:
-    where:
-      slug: user
-  width: 3
-  height: 1
-  x_axis: 9
-  y_axis: 2
-- component_id:
-    where:
-      slug: account-security
-  dashboard_id:
-    where:
-      slug: user
-  width: 5
-  height: 5
-  x_axis: 0
-  y_axis: 7
-- component_id:
-    where:
-      slug: login-history-chart
-  dashboard_id:
-    where:
-      slug: user
-  width: 7
-  height: 4
-  x_axis: 0
-  y_axis: 3
-- component_id:
-    where:
-      slug: email-notifications
-  dashboard_id:
-    where:
-      slug: user
-  width: 7
-  height: 5
-  x_axis: 5
-  y_axis: 7
-- component_id:
-    where:
-      slug: activity-timeline
-  dashboard_id:
-    where:
-      slug: user
-  width: 5
-  height: 3
-  x_axis: 7
-  y_axis: 12
-- component_id:
-    where:
-      slug: user-sessions
-  dashboard_id:
-    where:
-      slug: user
-  width: 5
-  height: 4
-  x_axis: 7
-  y_axis: 3
-- component_id:
-    where:
-      slug: user-roles
-  dashboard_id:
-    where:
-      slug: user
-  width: 7
-  height: 3
-  x_axis: 0
-  y_axis: 12
+- component_id:
+    where:
+      slug: stat-online-time
+  dashboard_id:
+    where:
+      slug: user
+  width: 3
+  height: 1
+  x_axis: 0
+  y_axis: 3
+- component_id:
+    where:
+      slug: stat-actions-today
+  dashboard_id:
+    where:
+      slug: user
+  width: 3
+  height: 1
+  x_axis: 3
+  y_axis: 3
+- component_id:
+    where:
+      slug: stat-consecutive-days
+  dashboard_id:
+    where:
+      slug: user
+  width: 3
+  height: 1
+  x_axis: 6
+  y_axis: 3
+- component_id:
+    where:
+      slug: stat-access-level
+  dashboard_id:
+    where:
+      slug: user
+  width: 3
+  height: 1
+  x_axis: 9
+  y_axis: 3
+- component_id:
+    where:
+      slug: account-security
+  dashboard_id:
+    where:
+      slug: user
+  width: 5
+  height: 5
+  x_axis: 0
+  y_axis: 7
+- component_id:
+    where:
+      slug: login-history-chart
+  dashboard_id:
+    where:
+      slug: user
+  width: 7
+  height: 4
+  x_axis: 0
+  y_axis: 3
+- component_id:
+    where:
+      slug: email-notifications
+  dashboard_id:
+    where:
+      slug: user
+  width: 7
+  height: 5
+  x_axis: 5
+  y_axis: 7
+- component_id:
+    where:
+      slug: activity-timeline
+  dashboard_id:
+    where:
+      slug: user
+  width: 5
+  height: 3
+  x_axis: 7
+  y_axis: 13
+- component_id:
+    where:
+      slug: user-sessions
+  dashboard_id:
+    where:
+      slug: user
+  width: 5
+  height: 4
+  x_axis: 7
+  y_axis: 4
+- component_id:
+    where:
+      slug: user-roles
+  dashboard_id:
+    where:
+      slug: user
+  width: 7
+  height: 3
+  x_axis: 0
+  y_axis: 13
 
 - component_id:
     where:

package/hedhog/data/route.yaml

@@ -716,6 +716,14 @@
     role:
       - where:
           slug: admin-mail
+- url: /dashboard-core/stats/overview/system
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/layout/:slug
   method: GET
   relations:

package/hedhog/frontend/app/ai_agent/page.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -130,14 +131,14 @@ export default function AiAgentPage() {
 
       return response.data;
     },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-      totalPages: 1,
-    },
   });
+  const agentList = data ?? {
+    data: [],
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    totalPages: 1,
+  };
 
   useEffect(() => {
     if (editingAgent) {
@@ -261,68 +262,74 @@ export default function AiAgentPage() {
         placeholder={t('searchPlaceholder')}
       />
 
-      <Card>
-        <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Slug</TableHead>
-                <TableHead>{t('columnProvider')}</TableHead>
-                <TableHead>{t('columnModel')}</TableHead>
-                <TableHead>{t('columnExternalId')}</TableHead>
-                <TableHead className="text-right">
-                  {t('columnActions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
+      {isLoading || agentList.data.length > 0 ? (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
                 <TableRow>
-                  <TableCell colSpan={5}>{t('loading')}</TableCell>
+                  <TableHead>Slug</TableHead>
+                  <TableHead>{t('columnProvider')}</TableHead>
+                  <TableHead>{t('columnModel')}</TableHead>
+                  <TableHead>{t('columnExternalId')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('columnActions')}
+                  </TableHead>
                 </TableRow>
-              ) : data.data.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5}>{t('empty')}</TableCell>
-                </TableRow>
-              ) : (
-                data.data.map((agent) => (
-                  <TableRow key={agent.id}>
-                    <TableCell>{agent.slug}</TableCell>
-                    <TableCell className="uppercase">
-                      {agent.provider}
-                    </TableCell>
-                    <TableCell>{agent.model || '-'}</TableCell>
-                    <TableCell>{agent.external_agent_id || '-'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end gap-2">
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onClick={() => handleOpenEdit(agent)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="icon"
-                          onClick={() => setAgentToDelete(agent)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={5}>{t('loading')}</TableCell>
                   </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
+                ) : (
+                  agentList.data.map((agent) => (
+                    <TableRow key={agent.id}>
+                      <TableCell>{agent.slug}</TableCell>
+                      <TableCell className="uppercase">
+                        {agent.provider}
+                      </TableCell>
+                      <TableCell>{agent.model || '-'}</TableCell>
+                      <TableCell>{agent.external_agent_id || '-'}</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            onClick={() => handleOpenEdit(agent)}
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="destructive"
+                            size="icon"
+                            onClick={() => setAgentToDelete(agent)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<Bot className="h-12 w-12" />}
+          title={t('empty')}
+          description={t('description')}
+          actionLabel={t('newAgent')}
+          onAction={handleOpenCreate}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}
         pageSize={pageSize}
-        totalItems={data.total}
+        totalItems={agentList.total}
         onPageChange={setPage}
         onPageSizeChange={(value) => {
           setPageSize(value);

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

@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button';
 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 { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { IconDeviceFloppy } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
@@ -38,6 +39,7 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
   const t = useTranslations('core.DashboardPage');
   const { request } = useApp();
   const router = useRouter();
+  const isMobile = useIsMobile();
 
   const [layout, setLayout] = useState<LayoutItem[]>([]);
   const [widgets, setWidgets] = useState<WidgetLayout[]>([]);
@@ -106,7 +108,10 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
           x: item.x,
           y: item.y,
           w: item.w,
-          h: item.h,
+          h:
+            dashboardSlug === 'user' && item.slug === 'profile-card'
+              ? Math.max(item.h, 3)
+              : item.h,
           minW: item.minW || 1,
           maxW: item.maxW || 12,
           minH: item.minH || 1,
@@ -277,37 +282,42 @@ export const DashboardContent = ({ dashboardSlug }: DashboardContentProps) => {
 
   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">
+      <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>
+            <Breadcrumb className="min-w-0">
               <BreadcrumbList>
                 <BreadcrumbItem className="hidden md:block">
                   <BreadcrumbLink href="#">{t('dashboard')}</BreadcrumbLink>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator className="hidden md:block" />
                 <BreadcrumbItem>
-                  <BreadcrumbPage>{dashboardName}</BreadcrumbPage>
+                  <BreadcrumbPage className="truncate">
+                    {dashboardName}
+                  </BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex w-full items-center justify-end gap-2 sm:w-auto">
             {hasChanges && (
               <Button
                 size="sm"
                 variant="default"
-                className="gap-2"
+                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" />
-                {isSaving ? t('saving') : t('saveLayout')}
+                <span className="hidden sm:inline">
+                  {isSaving ? t('saving') : t('saveLayout')}
+                </span>
               </Button>
             )}
             <AddWidgetSelectorDialog
@@ -321,15 +331,16 @@ 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-[600px]">
+          <div className="min-h-[420px] sm:min-h-[520px] lg:min-h-[600px]">
             <DraggableGrid
               className="dashboard-grid"
               layout={layout}
               onLayoutChange={handleLayoutChange}
               cols={12}
               rowHeight={80}
-              isDraggable={true}
-              isResizable={true}
+              preventCollision
+              isDraggable={!isMobile}
+              isResizable={!isMobile}
               resizeHandles={['se']}
             >
               {widgets.map((widget) => (

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

@@ -36,6 +36,54 @@ interface DraggableGridProps {
   resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>;
 }
 
+const MOBILE_WIDTH = 640;
+const TABLET_WIDTH = 1024;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value));
+
+const deriveResponsiveLayout = (
+  layout: Layout,
+  effectiveCols: number,
+  cols: number
+): Layout => {
+  const sorted = [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
+  const ratio = effectiveCols / cols;
+
+  let cursorX = 0;
+  let cursorY = 0;
+  let rowHeight = 0;
+
+  return sorted.map((item) => {
+    const nextW =
+      effectiveCols === 1
+        ? 1
+        : clamp(Math.round(item.w * ratio), 1, effectiveCols);
+    const nextH = Math.max(1, item.h || 1);
+
+    if (cursorX + nextW > effectiveCols) {
+      cursorY += Math.max(1, rowHeight);
+      cursorX = 0;
+      rowHeight = 0;
+    }
+
+    const mappedItem: LayoutItem = {
+      ...item,
+      x: cursorX,
+      y: cursorY,
+      w: nextW,
+      h: nextH,
+      minW: clamp(Math.min(item.minW || 1, nextW), 1, nextW),
+      maxW: clamp(item.maxW || effectiveCols, nextW, effectiveCols),
+    };
+
+    cursorX += nextW;
+    rowHeight = Math.max(rowHeight, nextH);
+
+    return mappedItem;
+  });
+};
+
 // Simple compaction function for grid layout
 const compactLayout = (
   layout: RGLLayout,
@@ -64,7 +112,7 @@ export function DraggableGrid({
   isDraggable = true,
   isResizable = true,
   compactType = 'vertical',
-  preventCollision = false,
+  preventCollision = true,
   margin = [16, 16],
   containerPadding = [0, 0],
   resizeHandles = ['se'],
@@ -72,6 +120,29 @@ export function DraggableGrid({
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(1200);
 
+  const effectiveCols =
+    containerWidth < MOBILE_WIDTH
+      ? 1
+      : containerWidth < TABLET_WIDTH
+        ? Math.min(6, cols)
+        : cols;
+
+  const effectiveRowHeight =
+    containerWidth < MOBILE_WIDTH ? Math.max(76, rowHeight - 4) : rowHeight;
+
+  const effectiveMargin: [number, number] =
+    containerWidth < MOBILE_WIDTH
+      ? [Math.min(10, margin[0]), Math.min(10, margin[1])]
+      : margin;
+
+  const responsiveLayout = (() => {
+    if (effectiveCols === cols) {
+      return layout;
+    }
+
+    return deriveResponsiveLayout(layout, effectiveCols, cols);
+  })();
+
   useEffect(() => {
     const updateWidth = () => {
       if (containerRef.current) {
@@ -91,6 +162,10 @@ export function DraggableGrid({
   }, []);
 
   const handleLayoutChange = (newLayout: RGLLayout) => {
+    if (effectiveCols !== cols) {
+      return;
+    }
+
     const layouts = Array.isArray(newLayout) ? newLayout : [newLayout];
     const convertedLayout = layouts.map((item: any) => ({
       i: item.i,
@@ -111,12 +186,12 @@ export function DraggableGrid({
     <div ref={containerRef} className="w-full">
       <GridLayout
         className={`layout ${className}`}
-        layout={layout}
+        layout={responsiveLayout}
         gridConfig={{
-          cols,
-          rowHeight,
+          cols: effectiveCols,
+          rowHeight: effectiveRowHeight,
           containerPadding,
-          margin,
+          margin: effectiveMargin,
         }}
         dragConfig={{
           enabled: isDraggable,