@hed-hog/core 0.0.278 → 0.0.285

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 min-h-0 flex-col overflow-hidden">
+    <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 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">
+      <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>
@@ -97,48 +101,48 @@ function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
           {data.checks.map((item) => {
             const Icon = ICON_MAP[item.id] ?? ShieldCheck;
             return (
-              <div
-                key={item.id}
-                className="group flex flex-wrap items-center gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50"
-              >
+              <div
+                key={item.id}
+                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'
                     }`}
                   />
                 </div>
-                <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>
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <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 ? (
                       <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="mt-2 w-full shrink-0 gap-1 text-xs sm:mt-0 sm:w-auto"
-                  >
+                  <span className="text-[11px] text-muted-foreground sm:text-xs">
+                    {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-1 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,24 +119,26 @@ function TimelineContent({ events }: { events: ActivityEvent[] }) {
   let lastDate = '';
 
   return (
-    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+    <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="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">
+                        <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-[10px] tabular-nums text-muted-foreground sm:text-[11px]">
                           {formatTime(event.created_at)}
                         </span>
                       </div>

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

@@ -40,6 +40,7 @@ const chartConfig = {
 const emailStats = [
   {
     label: 'Recebidos',
+    shortLabel: 'Rec.',
     value: '35',
     icon: Mail,
     color: 'text-blue-600 dark:text-blue-400',
@@ -47,6 +48,7 @@ const emailStats = [
   },
   {
     label: 'Lidos',
+    shortLabel: 'Lid.',
     value: '26',
     icon: MailCheck,
     color: 'text-emerald-600 dark:text-emerald-400',
@@ -54,6 +56,7 @@ const emailStats = [
   },
   {
     label: 'Nao lidos',
+    shortLabel: 'N. lid.',
     value: '9',
     icon: MailWarning,
     color: 'text-amber-600 dark:text-amber-400',
@@ -61,6 +64,7 @@ const emailStats = [
   },
   {
     label: 'Com erro',
+    shortLabel: 'Erro',
     value: '2',
     icon: MailX,
     color: 'text-red-600 dark:text-red-400',
@@ -85,63 +89,66 @@ export default function EmailNotifications({
       widgetName={widget?.name ?? 'email-notifications'}
       onRemove={onRemove}
     >
-      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <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" />
+            <Mail className="h-4 w-4 text-rose-600 dark:text-rose-400 sm:h-5 sm:w-5" />
             <div>
-              <CardTitle className="text-base font-semibold">
+              <CardTitle className="text-sm font-semibold sm:text-base">
                 Notificacoes por E-mail
               </CardTitle>
-              <CardDescription>
+              <CardDescription className="text-xs sm:text-sm">
                 E-mails do sistema nos ultimos 14 dias
               </CardDescription>
             </div>
           </div>
         </CardHeader>
-        <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"
-                >
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="grid grid-cols-2 gap-1.5 sm:gap-2 md: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 text-center transition-colors hover:bg-muted/30 sm:p-2.5"
+                >
                   <div
-                    className={`flex h-7 w-7 items-center justify-center rounded-md ${stat.bg}`}
+                    className={`flex h-6 w-6 items-center justify-center rounded-md sm:h-7 sm:w-7 ${stat.bg}`}
                   >
-                    <Icon className={`h-3.5 w-3.5 ${stat.color}`} />
+                    <Icon
+                      className={`h-3 w-3 sm:h-3.5 sm:w-3.5 ${stat.color}`}
+                    />
                   </div>
-                  <span className="text-lg font-bold text-foreground">
+                  <span className="text-base font-bold text-foreground sm:text-lg">
                     {stat.value}
                   </span>
-                  <span className="text-[10px] text-muted-foreground">
-                    {stat.label}
+                  <span className="truncate text-[9px] text-muted-foreground sm:text-[10px]">
+                    <span className="sm:hidden">{stat.shortLabel}</span>
+                    <span className="hidden sm:inline">{stat.label}</span>
                   </span>
                 </div>
               );
             })}
           </div>
 
-          <ChartContainer
-            config={chartConfig}
-            className="min-h-[220px] w-full flex-1 overflow-hidden"
-          >
-            <AreaChart data={data}>
+          <ChartContainer
+            config={chartConfig}
+            className="min-h-[170px] w-full flex-1 overflow-hidden sm:min-h-[220px]"
+          >
+            <AreaChart data={data}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" />
-              <XAxis
-                dataKey="date"
-                tickLine={false}
-                axisLine={false}
-                fontSize={11}
-                tickMargin={8}
-                minTickGap={24}
-              />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                fontSize={10}
+                tickMargin={4}
+                minTickGap={20}
+              />
               <YAxis
                 tickLine={false}
                 axisLine={false}
-                fontSize={11}
+                fontSize={10}
                 tickMargin={4}
                 allowDecimals={false}
               />

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

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

package/hedhog/frontend/app/dashboard/components/widgets/menus-card.tsx.ejs

@@ -0,0 +1,58 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { LayoutList } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface MenusCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface SystemStatsData {
+  cards?: {
+    menus?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function MenusCard({ widget, onRemove }: MenusCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<SystemStatsData>({
+      endpoint: '/dashboard-core/stats/overview/system',
+      queryKey: 'dashboard-stats-system',
+    });
+
+  const value = data?.cards?.menus?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.menus?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('menus')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('menus')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<LayoutList className="h-6 w-6 text-green-500" />}
+        iconBg="bg-green-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/routes-card.tsx.ejs

@@ -0,0 +1,58 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Route } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface RoutesCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface SystemStatsData {
+  cards?: {
+    routes?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function RoutesCard({ widget, onRemove }: RoutesCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<SystemStatsData>({
+      endpoint: '/dashboard-core/stats/overview/system',
+      queryKey: 'dashboard-stats-system',
+    });
+
+  const value = data?.cards?.routes?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.routes?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('routes')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('routes')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<Route className="h-6 w-6 text-orange-500" />}
+        iconBg="bg-orange-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}

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-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>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-amber-50 dark:bg-amber-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <Zap className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
+              {t('accessLevel')}
+            </span>
+            <span className="truncate text-base font-bold tracking-tight text-foreground sm:text-lg md:text-2xl">
+              {data ? t('accessLevelValue', { level: data }) : '—'}
+            </span>
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+              {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-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>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <MousePointerClick className="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
+              {t('actionsToday')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+              {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-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>
+      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <CalendarDays className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
+              {t('consecutiveDays')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
+              {data ?? '—'}
+            </span>
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+              {t('consecutiveDaysSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
     </WidgetWrapper>
   );
 }