@hed-hog/core 0.0.276 → 0.0.278

package/hedhog/data/menu.yaml

@@ -19,6 +19,8 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-mail
 - menu_id:
     where:
       slug: /core/management
@@ -89,6 +91,8 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-mail
 - menu_id:
     where:
       slug: /core/management
@@ -128,3 +132,5 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-user

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:
@@ -676,12 +722,16 @@
     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 +744,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 +796,8 @@
     role:
       - where:
           slug: admin
+      - where:
+          slug: admin-access
 - url: /dashboard-component
   method: POST
   relations:
@@ -1325,4 +1381,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/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,8 +71,8 @@ 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 overflow-auto pt-0">
+        <div className="mb-5 flex flex-col items-center gap-3 rounded-xl bg-muted/50 p-4 sm:p-5">
           <div className="flex items-baseline gap-1">
             <span className={`text-5xl font-bold tracking-tight ${scoreColor}`}>
               {score}
@@ -97,10 +97,10 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
           {data.checks.map((item) => {
             const Icon = ICON_MAP[item.id] ?? ShieldCheck;
             return (
-              <div
-                key={item.id}
-                className="group flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50"
-              >
+              <div
+                key={item.id}
+                className="group flex flex-wrap items-center gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50"
+              >
                 <div
                   className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
                     item.enabled
@@ -116,29 +116,29 @@ 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">
-                      {t(`labels.${item.labelKey}` as any) || item.labelKey}
-                    </span>
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="break-words text-sm font-medium text-foreground">
+                      {t(`labels.${item.labelKey}` as any) || item.labelKey}
+                    </span>
                     {item.enabled ? (
                       <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                     ) : (
                       <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
                     )}
                   </div>
-                  <span className="text-xs text-muted-foreground">
-                    {t(`descriptions.${item.descriptionKey}` as any) ||
-                      item.descriptionKey}
-                  </span>
-                </div>
-                {!item.enabled && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => router.push('/core/account/2fa')}
-                    className="shrink-0 gap-1 text-xs"
-                  >
+                  <span className="text-xs text-muted-foreground">
+                    {t(`descriptions.${item.descriptionKey}` as any) ||
+                      item.descriptionKey}
+                  </span>
+                </div>
+                {!item.enabled && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => router.push('/core/account/2fa')}
+                    className="mt-2 w-full shrink-0 gap-1 text-xs sm:mt-0 sm:w-auto"
+                  >
                     {t('activate')}
                     <ChevronRight className="h-3 w-3" />
                   </Button>

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

@@ -119,7 +119,7 @@ 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>
@@ -168,9 +168,9 @@ function TimelineContent({ events }: { events: ActivityEvent[] }) {
                     </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 items-center justify-between gap-2">
-                        <span className="text-sm font-medium leading-snug text-foreground">
-                          {event.action}
-                        </span>
+                        <span className="min-w-0 break-words text-sm font-medium leading-snug text-foreground">
+                          {event.action}
+                        </span>
                         <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
                           {formatTime(event.created_at)}
                         </span>

package/hedhog/frontend/app/dashboard/components/widgets/email-notifications.tsx.ejs

@@ -85,7 +85,7 @@ export default function EmailNotifications({
       widgetName={widget?.name ?? 'email-notifications'}
       onRemove={onRemove}
     >
-      <Card className="flex h-full flex-col">
+      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
         <CardHeader className="shrink-0 pb-2">
           <div className="flex items-center gap-2">
             <Mail className="h-5 w-5 text-rose-600 dark:text-rose-400" />
@@ -99,15 +99,15 @@ export default function EmailNotifications({
             </div>
           </div>
         </CardHeader>
-        <CardContent className="flex-1 overflow-auto pt-0">
-          <div className="mb-4 grid grid-cols-4 gap-2">
-            {emailStats.map((stat) => {
-              const Icon = stat.icon;
-              return (
-                <div
-                  key={stat.label}
-                  className="flex flex-col items-center gap-1 rounded-lg border p-2.5 transition-colors hover:bg-muted/30"
-                >
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-4">
+            {emailStats.map((stat) => {
+              const Icon = stat.icon;
+              return (
+                <div
+                  key={stat.label}
+                  className="flex min-w-0 flex-col items-center gap-1 rounded-lg border p-2.5 text-center transition-colors hover:bg-muted/30"
+                >
                   <div
                     className={`flex h-7 w-7 items-center justify-center rounded-md ${stat.bg}`}
                   >
@@ -124,16 +124,20 @@ export default function EmailNotifications({
             })}
           </div>
 
-          <ChartContainer config={chartConfig} className="h-[180px] w-full">
-            <AreaChart data={data}>
+          <ChartContainer
+            config={chartConfig}
+            className="min-h-[220px] w-full flex-1 overflow-hidden"
+          >
+            <AreaChart data={data}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" />
-              <XAxis
-                dataKey="date"
-                tickLine={false}
-                axisLine={false}
-                fontSize={11}
-                tickMargin={8}
-              />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                fontSize={11}
+                tickMargin={8}
+                minTickGap={24}
+              />
               <YAxis
                 tickLine={false}
                 axisLine={false}

package/hedhog/frontend/app/dashboard/components/widgets/login-history-chart.tsx.ejs

@@ -28,7 +28,7 @@ function LoginChart({ data }: { data: LoginDay[] }) {
   };
 
   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-2">
         <div className="flex items-center gap-2">
           <LogIn className="h-5 w-5 text-blue-600" />
@@ -40,20 +40,21 @@ function LoginChart({ data }: { data: LoginDay[] }) {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex flex-1 flex-col pt-0">
-        <ChartContainer
-          config={chartConfig}
-          className="h-full min-h-[120px] w-full flex-1"
-        >
-          <BarChart data={data as any} barGap={2}>
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden pt-0">
+        <ChartContainer
+          config={chartConfig}
+          className="h-full min-h-[160px] w-full flex-1 overflow-hidden"
+        >
+          <BarChart data={data as any} barGap={2}>
             <CartesianGrid vertical={false} strokeDasharray="3 3" />
-            <XAxis
-              dataKey="day"
-              tickLine={false}
-              axisLine={false}
-              fontSize={12}
-              tickMargin={8}
-            />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              axisLine={false}
+              fontSize={12}
+              tickMargin={8}
+              minTickGap={16}
+            />
             <YAxis
               tickLine={false}
               axisLine={false}

package/hedhog/frontend/app/dashboard/components/widgets/permissions-chart.tsx.ejs

@@ -37,20 +37,24 @@ function CustomTooltip({
   );
 }
 
-interface PermissionsChartProps {
-  widget?: any;
-  onRemove?: () => void;
-}
-
-interface UserStatsData {
-  charts?: {
-    permissionDistribution?: Array<{
-      name: string;
-      value: number;
-      color: string;
-    }>;
-  };
-}
+interface PermissionsChartProps {
+  widget?: {
+    name?: string;
+  } | null;
+  onRemove?: () => void;
+}
+
+interface PermissionDistributionItem {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface UserStatsData {
+  charts?: {
+    permissionDistribution?: PermissionDistributionItem[];
+  };
+}
 
 export default function PermissionsChart({
   widget,
@@ -66,10 +70,10 @@ export default function PermissionsChart({
   } = useWidgetData<UserStatsData>({
     endpoint: '/dashboard-core/stats/overview/users',
     queryKey: 'dashboard-stats-users',
-  });
-
-  const data = statsData?.charts?.permissionDistribution || [];
-  const total = data.reduce((sum: number, item: any) => sum + item.value, 0);
+  });
+
+  const data = statsData?.charts?.permissionDistribution || [];
+  const total = data.reduce((sum, item) => sum + item.value, 0);
 
   return (
     <WidgetWrapper
@@ -86,19 +90,19 @@ export default function PermissionsChart({
         >
           <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
         </div>
-        <CardHeader className="pb-2 pt-4 pl-10">
-          <CardTitle className="text-base font-semibold">
-            {t('permissionsDistributionTitle')}
-          </CardTitle>
+        <CardHeader className="pb-2 pt-4 pl-10">
+          <CardTitle className="text-base font-semibold">
+            {t('permissionsDistributionTitle')}
+          </CardTitle>
           <CardDescription>
             {t('permissionsDistributionDescription')}
           </CardDescription>
-        </CardHeader>
-        <CardContent className="flex-1 pt-0">
-          <div className="flex justify-between items-center gap-4">
-            <div className="relative h-[280px] w-[280px] shrink-0">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="flex h-full items-center justify-between gap-4 overflow-hidden">
+            <div className="relative h-[280px] w-[280px] shrink-0">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
                   <Pie
                     data={data}
                     cx="50%"
@@ -106,14 +110,14 @@ export default function PermissionsChart({
                     innerRadius={70}
                     outerRadius={110}
                     paddingAngle={4}
-                    dataKey="value"
-                    animationDuration={1200}
-                    strokeWidth={0}
-                  >
-                    {data.map((entry: any, index: number) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
+                  dataKey="value"
+                  animationDuration={1200}
+                  strokeWidth={0}
+                >
+                    {data.map((entry, index: number) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
                   <Tooltip content={<CustomTooltip />} />
                 </PieChart>
               </ResponsiveContainer>
@@ -121,28 +125,28 @@ export default function PermissionsChart({
                 <span className="text-2xl font-bold text-foreground">
                   {total}
                 </span>
-                <span className="text-[10px] text-muted-foreground">
-                  {t('total')}
-                </span>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              {data.map((item: any) => (
-                <div key={item.name} className="flex items-center gap-3">
-                  <div
-                    className="h-3 w-3 rounded-sm"
-                    style={{ backgroundColor: item.color }}
-                  />
-                  <div className="flex flex-col">
-                    <span className="text-sm font-medium text-foreground">
-                      {item.name}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {item.value} ({Math.round((item.value / total) * 100)}%)
-                    </span>
-                  </div>
-                </div>
-              ))}
+                <span className="text-[10px] text-muted-foreground">
+                  {t('total')}
+                </span>
+              </div>
+            </div>
+            <div className="grid max-h-[280px] min-w-0 flex-1 grid-cols-2 content-start gap-x-4 gap-y-2 overflow-y-auto pr-2">
+              {data.map((item) => (
+                <div key={item.name} className="flex min-w-0 items-start gap-2.5">
+                  <div
+                    className="mt-1 h-2.5 w-2.5 shrink-0 rounded-sm"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <div className="flex min-w-0 flex-col">
+                    <span className="break-words text-xs font-medium leading-tight text-foreground">
+                      {item.name}
+                    </span>
+                    <span className="text-[11px] text-muted-foreground">
+                      {item.value} ({total ? Math.round((item.value / total) * 100) : 0}%)
+                    </span>
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         </CardContent>

package/hedhog/frontend/app/dashboard/components/widgets/stat-access-level.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatAccessLevel({
       widgetName={widget?.name ?? 'stat-access-level'}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-amber-50 dark:bg-amber-950/40">
-            <Zap className="h-5 w-5 text-amber-600 dark:text-amber-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('accessLevel')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ? t('accessLevelValue', { level: data }) : '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('accessLevelSubtitle')}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-3 p-3 md:gap-4 md:p-4">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-50 dark:bg-amber-950/40 md:h-11 md:w-11">
+            <Zap className="h-4 w-4 text-amber-600 dark:text-amber-400 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('accessLevel')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ? t('accessLevelValue', { level: data }) : '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('accessLevelSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }