@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/widgets/permissions-card.tsx.ejs

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

package/hedhog/frontend/widgets/permissions-chart.tsx.ejs

@@ -0,0 +1,156 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{ name: string; value: number; payload: { color: string } }>;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  const entry = payload[0];
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="text-xs text-muted-foreground">
+        <span
+          className="mr-1.5 inline-block h-2 w-2 rounded-full"
+          style={{ backgroundColor: entry?.payload.color }}
+        />
+        {entry?.name}: {entry?.value} {t('permissionsLowercase')}
+      </p>
+    </div>
+  );
+}
+
+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,
+  onRemove,
+}: PermissionsChartProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const {
+    data: statsData,
+    isLoading,
+    isAccessDenied,
+    isError,
+  } = useWidgetData<UserStatsData>({
+    endpoint: '/dashboard-core/stats/overview/users',
+    queryKey: 'dashboard-stats-users',
+  });
+
+  const data = statsData?.charts?.permissionDistribution || [];
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('permissionsDistributionTitle')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col group">
+        <div
+          className="drag-handle absolute top-3 left-4 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <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>
+          <CardDescription>
+            {t('permissionsDistributionDescription')}
+          </CardDescription>
+        </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%"
+                    cy="50%"
+                    innerRadius={70}
+                    outerRadius={110}
+                    paddingAngle={4}
+                  dataKey="value"
+                  animationDuration={1200}
+                  strokeWidth={0}
+                >
+                    {data.map((entry, index: number) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip content={<CustomTooltip />} />
+                </PieChart>
+              </ResponsiveContainer>
+              <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <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 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>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/profile-card.tsx.ejs

@@ -39,8 +39,8 @@ function ProfileContent({ profile }: { profile: ProfileData }) {
 
   return (
     <Card className="relative flex h-full flex-col overflow-hidden">
-      <div className="absolute inset-x-0 top-0 h-24 bg-linear-to-br from-muted to-muted/50" />
-      <CardContent className="relative flex flex-col flex-1 overflow-hidden pt-6 pb-10">
+      <div className="absolute inset-x-0 top-0 h-28 bg-linear-to-br from-muted to-muted/50" />
+      <CardContent className="relative flex flex-1 flex-col overflow-hidden pt-7 pb-12">
         <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-end">
           <div className="relative">
             <Avatar className="h-20 w-20 border-4 border-card shadow-md">
@@ -84,7 +84,7 @@ function ProfileContent({ profile }: { profile: ProfileData }) {
           </Button>
         </div>
 
-        <Separator className="my-5" />
+        <Separator className="my-6" />
 
         <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
           <div className="flex items-center gap-2.5 rounded-lg p-2 transition-colors hover:bg-muted/50">

package/hedhog/frontend/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/widgets/session-activity-chart.tsx.ejs

@@ -0,0 +1,183 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ value: number; dataKey: string }>;
+  label?: string;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="mb-1 text-xs font-medium text-card-foreground">{label}</p>
+      {payload.map((entry) => (
+        <p key={entry.dataKey} className="text-xs text-muted-foreground">
+          <span
+            className="mr-1.5 inline-block h-2 w-2 rounded-full"
+            style={{
+              backgroundColor:
+                entry.dataKey === 'active' ? '#10b981' : '#f59e0b',
+            }}
+          />
+          {entry.dataKey === 'active' ? t('active') : t('expired')}:{' '}
+          {entry.value}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+interface SessionActivityChartProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  charts?: {
+    sessionActivity?: Array<{
+      hour: string;
+      active: number;
+      expired: number;
+    }>;
+  };
+}
+
+export default function SessionActivityChart({
+  widget,
+  onRemove,
+}: SessionActivityChartProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const {
+    data: statsData,
+    isLoading,
+    isAccessDenied,
+    isError,
+  } = useWidgetData<UserStatsData>({
+    endpoint: '/dashboard-core/stats/overview/users',
+    queryKey: 'dashboard-stats-users',
+  });
+
+  const data = statsData?.charts?.sessionActivity || [];
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('sessionActivityTitle')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col group">
+        <div
+          className="drag-handle absolute top-3 left-4 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
+        </div>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-4">
+          <div className="pl-6">
+            <CardTitle className="text-base font-semibold">
+              {t('sessionActivityTitle')}
+            </CardTitle>
+            <CardDescription>{t('sessionActivityDescription')}</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="h-[200px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart
+                data={data}
+                margin={{ top: 5, right: 10, left: -20, bottom: 0 }}
+              >
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke="currentColor"
+                  opacity={0.1}
+                />
+                <XAxis
+                  dataKey="hour"
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Line
+                  type="monotone"
+                  dataKey="active"
+                  stroke="#10b981"
+                  strokeWidth={3}
+                  dot={false}
+                  activeDot={{ r: 5, fill: '#10b981' }}
+                  animationDuration={1500}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="expired"
+                  stroke="#f59e0b"
+                  strokeWidth={2.5}
+                  dot={false}
+                  strokeDasharray="5 5"
+                  activeDot={{ r: 4, fill: '#f59e0b' }}
+                  animationDuration={1500}
+                  animationBegin={300}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-2 flex items-center justify-center gap-6">
+            <div className="flex items-center gap-2">
+              <div
+                className="h-0.5 w-4 rounded-full"
+                style={{ backgroundColor: '#10b981' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('active')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div
+                className="h-0.5 w-4 rounded-full"
+                style={{ backgroundColor: '#f59e0b' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('expired')}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/sessions-today-card.tsx.ejs

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

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData } from '@/types/widget-data';
+import { Zap } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface StatAccessLevelProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StatAccessLevel({
+  widget,
+  onRemove,
+}: StatAccessLevelProps) {
+  const t = useTranslations('core.DashboardPage.quickStats');
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    number
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.quickStats.securityLevel,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      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-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/widgets/stat-actions-today.tsx.ejs

@@ -0,0 +1,57 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData } from '@/types/widget-data';
+import { MousePointerClick } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface StatActionsTodayProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StatActionsToday({
+  widget,
+  onRemove,
+}: StatActionsTodayProps) {
+  const t = useTranslations('core.DashboardPage.quickStats');
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    number
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.quickStats.actionsToday,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      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-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>
+  );
+}