@hed-hog/core 0.0.275 → 0.0.278

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>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/stat-actions-today.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatActionsToday({
       widgetName={widget?.name ?? 'stat-actions-today'}
       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-indigo-50 dark:bg-indigo-950/40">
-            <MousePointerClick className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('actionsToday')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('actionsTodaySubtitle')}
-            </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-indigo-50 dark:bg-indigo-950/40 md:h-11 md:w-11">
+            <MousePointerClick className="h-4 w-4 text-indigo-600 dark:text-indigo-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('actionsToday')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('actionsTodaySubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/stat-consecutive-days.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatConsecutiveDays({
       widgetName={widget?.name ?? 'stat-consecutive-days'}
       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-emerald-50 dark:bg-emerald-950/40">
-            <CalendarDays className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('consecutiveDays')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('consecutiveDaysSubtitle')}
-            </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-emerald-50 dark:bg-emerald-950/40 md:h-11 md:w-11">
+            <CalendarDays className="h-4 w-4 text-emerald-600 dark:text-emerald-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('consecutiveDays')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('consecutiveDaysSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/stat-online-time.tsx.ejs

@@ -34,24 +34,24 @@ export default function StatOnlineTime({
       widgetName={widget?.name ?? 'stat-online-time'}
       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-blue-50 dark:bg-blue-950/40">
-            <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-          </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-              {t('onlineTime')}
-            </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
-              {data ?? '—'}
-            </span>
-            <span className="text-[11px] text-muted-foreground">
-              {t('onlineTimeSubtitle')}
-            </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-blue-50 dark:bg-blue-950/40 md:h-11 md:w-11">
+            <Clock className="h-4 w-4 text-blue-600 dark:text-blue-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('onlineTime')}
+            </span>
+            <span className="truncate text-xl font-bold tracking-tight text-foreground md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="hidden text-[11px] text-muted-foreground sm:block">
+              {t('onlineTimeSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/user-roles.tsx.ejs

@@ -52,7 +52,7 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
   const t = useTranslations('core.DashboardPage.userRoles');
 
   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">
           <Crown className="h-5 w-5 text-amber-600 dark:text-amber-400" />
@@ -64,8 +64,8 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="grid grid-cols-2 gap-2">
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           {roles.map((role, index) => {
             const style = levelStyles[index % levelStyles.length]!;
             return (

package/hedhog/frontend/app/dashboard/components/widgets/user-sessions.tsx.ejs

@@ -86,30 +86,31 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
   const router = useRouter();
 
   return (
-    <Card className="flex h-full flex-col">
-      <CardHeader className="shrink-0 pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Globe className="h-5 w-5 text-blue-600" />
-            <div>
-              <CardTitle className="text-base font-semibold">
-                {t('title')}
-              </CardTitle>
-              <CardDescription>{t('description')}</CardDescription>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => router.push('/core/account/sessions')}
-          >
-            <Info className="h-3.5 w-3.5" />
-            {t('moreInfo')}
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="flex flex-col gap-2">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-center gap-2">
+            <Globe className="h-5 w-5 text-blue-600" />
+            <div className="min-w-0">
+              <CardTitle className="text-base font-semibold">
+                {t('title')}
+              </CardTitle>
+              <CardDescription>{t('description')}</CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/core/account/sessions')}
+            className="w-full shrink-0 sm:w-auto"
+          >
+            <Info className="h-3.5 w-3.5" />
+            {t('moreInfo')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="flex flex-col gap-2">
           {sessions.map((session, index) => {
             const ua = session.user_agent ?? '';
             const deviceType = detectDeviceType(ua);
@@ -155,21 +156,21 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
                     }`}
                   />
                 </div>
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">
-                      {device}
-                    </span>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="min-w-0 break-words text-sm font-medium text-foreground">
+                      {device}
+                    </span>
                     {isCurrent && (
                       <Badge className="bg-emerald-100 text-[10px] text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/50 dark:text-emerald-400 dark:hover:bg-emerald-900/50">
                         {t('thisSession')}
                       </Badge>
                     )}
                   </div>
-                  <span className="text-xs text-muted-foreground">
-                    {browser} &middot; {ip}
-                  </span>
-                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground/70">
+                  <span className="break-words text-xs text-muted-foreground">
+                    {browser} &middot; {ip}
+                  </span>
+                  <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground/70">
                     <span className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
                       {relativeTime}