@hed-hog/core 0.0.215 → 0.0.216

package/hedhog/frontend/app/dashboard/components/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/app/dashboard/components/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/app/dashboard/components/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-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>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/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-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>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/stat-consecutive-days.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 { CalendarDays } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface StatConsecutiveDaysProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StatConsecutiveDays({
+  widget,
+  onRemove,
+}: StatConsecutiveDaysProps) {
+  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.consecutiveDays,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      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>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/stat-online-time.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 { Clock } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface StatOnlineTimeProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StatOnlineTime({
+  widget,
+  onRemove,
+}: StatOnlineTimeProps) {
+  const t = useTranslations('core.DashboardPage.quickStats');
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    string
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.quickStats.onlineTime,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      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>
+    </WidgetWrapper>
+  );
+}