@hed-hog/core 0.0.276 → 0.0.279

package/hedhog/data/route.yaml

@@ -28,6 +28,22 @@
           slug: admin
       - where:
           slug: admin-access
+- url: /auth/refresh
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-access
+- url: /auth/logout
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-access
 - url: /sessions/revoke-all
   method: DELETE
   relations:
@@ -344,60 +360,86 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId/role
   method: GET
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId/role
   method: PATCH
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId/role/:roleId
   method: DELETE
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId/role/:roleId
   method: POST
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId
   method: GET
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user
   method: POST
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId/avatar
   method: POST
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /user/:userId
   method: PATCH
   relations:
     role:
       - where:
           slug: admin
+- url: /user/:userId/reset-password
+  method: PATCH
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-user
 - url: /user
   method: DELETE
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user
 - url: /locale
   method: GET
   relations:
@@ -652,12 +694,16 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/user-dashboards
   method: GET
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/stats/overview/users
   method: GET
   relations:
@@ -670,18 +716,30 @@
     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:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/layout/:slug
   method: POST
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/widgets/me
   method: GET
   relations:
@@ -694,12 +752,16 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-core/widget/:slug/:widgetId
   method: DELETE
   relations:
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard
   method: GET
   relations:
@@ -742,6 +804,8 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-component
   method: POST
   relations:
@@ -1325,4 +1389,4 @@
       - where:
           slug: admin
       - where:
-          slug: admin-access
+          slug: admin-access

package/hedhog/frontend/app/account/components/change-password-form.tsx.ejs

@@ -25,7 +25,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 export function ChangePasswordForm() {
-  const { request, showToastHandler, getSettingValue } = useApp();
+  const { request, showToastHandler, getSettingValue, refetchUser } = useApp();
   const t = useTranslations('core.ChangePasswordForm');
   const minPasswordLength = getSettingValue('password-min-length') || 6;
   const minPasswordSymbols = getSettingValue('password-min-symbols') || 0;
@@ -105,6 +105,7 @@ export function ChangePasswordForm() {
       });
 
       showToastHandler('success', t('updateSuccess'));
+      await refetchUser();
 
       form.reset();
     } catch (error) {

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

@@ -115,7 +115,7 @@ export default function AiAgentPage() {
     },
   });
 
-  const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
+  const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
     queryKey: ['ai-agents', page, pageSize, debouncedSearch],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -130,14 +130,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) {
@@ -280,12 +280,12 @@ export default function AiAgentPage() {
                 <TableRow>
                   <TableCell colSpan={5}>{t('loading')}</TableCell>
                 </TableRow>
-              ) : data.data.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5}>{t('empty')}</TableCell>
-                </TableRow>
-              ) : (
-                data.data.map((agent) => (
+              ) : agentList.data.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5}>{t('empty')}</TableCell>
+                </TableRow>
+              ) : (
+                agentList.data.map((agent) => (
                   <TableRow key={agent.id}>
                     <TableCell>{agent.slug}</TableCell>
                     <TableCell className="uppercase">
@@ -322,8 +322,8 @@ export default function AiAgentPage() {
       <PaginationFooter
         currentPage={page}
         pageSize={pageSize}
-        totalItems={data.total}
-        onPageChange={setPage}
+        totalItems={agentList.total}
+        onPageChange={setPage}
         onPageSizeChange={(value) => {
           setPageSize(value);
           setPage(1);

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,

package/hedhog/frontend/app/dashboard/components/widgets/account-security.tsx.ejs

@@ -59,7 +59,7 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
         : 'hsl(0, 84%, 60%)';
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
         <div className="flex items-center gap-2">
           <ShieldCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
@@ -71,13 +71,17 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="mb-5 flex flex-col items-center gap-3 rounded-xl bg-muted/50 p-5">
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-auto pt-0">
+        <div className="mb-4 flex flex-col items-center gap-2.5 rounded-xl bg-muted/50 p-3 sm:mb-5 sm:gap-3 sm:p-5">
           <div className="flex items-baseline gap-1">
-            <span className={`text-5xl font-bold tracking-tight ${scoreColor}`}>
+            <span
+              className={`text-4xl font-bold tracking-tight sm:text-5xl ${scoreColor}`}
+            >
               {score}
             </span>
-            <span className="text-lg text-muted-foreground">/100</span>
+            <span className="text-base text-muted-foreground sm:text-lg">
+              /100
+            </span>
           </div>
           <Progress
             value={score}
@@ -88,7 +92,7 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
               } as any
             }
           />
-          <p className="text-xs text-muted-foreground">
+          <p className="text-[11px] text-muted-foreground sm:text-xs">
             {score >= 80 ? t('wellProtected') : t('recommendProtections')}
           </p>
         </div>
@@ -99,17 +103,17 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
             return (
               <div
                 key={item.id}
-                className="group flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50"
+                className="group flex flex-wrap items-start gap-2.5 rounded-lg p-2.5 transition-colors hover:bg-muted/50 sm:items-center sm:gap-3 sm:p-3"
               >
                 <div
-                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${
                     item.enabled
                       ? 'bg-emerald-50 dark:bg-emerald-950/40'
                       : 'bg-muted'
                   }`}
                 >
                   <Icon
-                    className={`h-4 w-4 ${
+                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${
                       item.enabled
                         ? 'text-emerald-600 dark:text-emerald-400'
                         : 'text-muted-foreground'
@@ -117,8 +121,8 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
                   />
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="wrap-break-word text-[13px] font-medium text-foreground sm:text-sm">
                       {t(`labels.${item.labelKey}` as any) || item.labelKey}
                     </span>
                     {item.enabled ? (
@@ -127,7 +131,7 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
                       <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
                     )}
                   </div>
-                  <span className="text-xs text-muted-foreground">
+                  <span className="text-[11px] text-muted-foreground sm:text-xs">
                     {t(`descriptions.${item.descriptionKey}` as any) ||
                       item.descriptionKey}
                   </span>
@@ -137,7 +141,7 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
                     variant="ghost"
                     size="sm"
                     onClick={() => router.push('/core/account/2fa')}
-                    className="shrink-0 gap-1 text-xs"
+                    className="mt-1 w-full shrink-0 gap-1 text-xs sm:mt-0 sm:w-auto"
                   >
                     {t('activate')}
                     <ChevronRight className="h-3 w-3" />

package/hedhog/frontend/app/dashboard/components/widgets/activity-timeline.tsx.ejs

@@ -119,24 +119,26 @@ function TimelineContent({ events }: { events: ActivityEvent[] }) {
   let lastDate = '';
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-base font-semibold">
+            <CardTitle className="text-sm font-semibold sm:text-base">
               {t('title')}
             </CardTitle>
-            <CardDescription>{t('description')}</CardDescription>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
           </div>
-          <Badge variant="secondary">
+          <Badge variant="secondary" className="text-[10px] sm:text-xs">
             {t('events', { count: events.length })}
           </Badge>
         </div>
       </CardHeader>
       <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden pt-0">
-        <ScrollArea className="h-full pr-3">
+        <ScrollArea className="h-full pr-2 sm:pr-3">
           <div className="relative flex flex-col pb-2">
-            <div className="absolute bottom-0 left-[15px] top-0 w-px bg-border/60" />
+            <div className="absolute bottom-0 left-[13px] top-0 w-px bg-border/60 sm:left-[15px]" />
             {events.map((event, index) => {
               const type = detectType(event.action);
               const config =
@@ -155,23 +157,25 @@ function TimelineContent({ events }: { events: ActivityEvent[] }) {
                 <div key={event.id}>
                   {showDate && (
                     <div className="relative z-10 mb-1 mt-4 first:mt-0">
-                      <span className="ml-11 inline-block rounded-md border border-border bg-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                      <span className="ml-9 inline-block rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:ml-11 sm:px-2 sm:text-[11px]">
                         {dateLabel}
                       </span>
                     </div>
                   )}
                   <div className="group relative flex items-start gap-3 py-1.5">
                     <div
-                      className={`relative z-10 mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${config.bg}`}
+                      className={`relative z-10 mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg sm:h-8 sm:w-8 ${config.bg}`}
                     >
-                      <Icon className={`h-3.5 w-3.5 ${config.color}`} />
+                      <Icon
+                        className={`h-3 w-3 sm:h-3.5 sm:w-3.5 ${config.color}`}
+                      />
                     </div>
-                    <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg px-2 py-1.5 transition-colors group-hover:bg-muted/40">
+                    <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg px-1.5 py-1.5 transition-colors group-hover:bg-muted/40 sm:px-2">
                       <div className="flex items-center justify-between gap-2">
-                        <span className="text-sm font-medium leading-snug text-foreground">
+                        <span className="min-w-0 wrap-break-word text-xs font-medium leading-snug text-foreground sm:text-sm">
                           {event.action}
                         </span>
-                        <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
+                        <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground sm:text-[11px]">
                           {formatTime(event.created_at)}
                         </span>
                       </div>