@hed-hog/core 0.0.298 → 0.0.299

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

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

package/hedhog/frontend/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-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-blue-50 dark:bg-blue-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-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('onlineTime')}
+            </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('onlineTimeSubtitle')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/storage-config.tsx.ejs

@@ -0,0 +1,196 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type {
+  DashboardCoreConfigOverviewData,
+  StorageConfigWidgetData,
+} from '@/types/widget-data';
+import { CheckCircle2, HardDrive } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const defaultStorageConfigData: StorageConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    totalProfiles: 0,
+    activeProfiles: 0,
+    defaultProfileId: null,
+  },
+  providers: [],
+  profiles: [],
+};
+
+interface StorageConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StorageConfig({
+  widget,
+  onRemove,
+}: StorageConfigProps) {
+  const t = useTranslations('core.DashboardPage.storageConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    StorageConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.storageConfig,
+  });
+
+  const storageData = data ?? defaultStorageConfigData;
+  const defaultProfile = storageData.profiles.find(
+    (profile) => profile.id === storageData.status.defaultProfileId
+  );
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? t('title')}
+      onRemove={onRemove}
+    >
+      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+        <CardHeader className="shrink-0">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-50">
+                <HardDrive className="h-5 w-5 text-violet-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                storageData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {storageData.status.isConfigured ? t('configured') : t('pending')}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="grid grid-cols-3 gap-2">
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('profiles')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.status.totalProfiles}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('active')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.status.activeProfiles}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('providers')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.providers.length}
+              </p>
+            </div>
+          </div>
+
+          <div className="rounded-lg border p-3">
+            <p className="mb-1 text-xs text-muted-foreground">
+              {t('defaultProfile')}
+            </p>
+            <p className="truncate text-sm font-medium">
+              {defaultProfile?.name || t('notSet')}
+            </p>
+            {defaultProfile && (
+              <p className="mt-1 text-[11px] text-muted-foreground">
+                {defaultProfile.providerType.toUpperCase()} |{' '}
+                {defaultProfile.bucketName}
+              </p>
+            )}
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            {storageData.providers.map((provider) => (
+              <div
+                key={provider.providerType}
+                className="rounded-lg border p-3"
+              >
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-medium">
+                    {provider.providerType.toUpperCase()}
+                  </p>
+                  <Badge variant="outline" className="text-[10px]">
+                    {provider.defaults} {t('defaults')}
+                  </Badge>
+                </div>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  {t('providerSummary', {
+                    total: provider.total,
+                    active: provider.active,
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="min-h-0 flex-1 space-y-2 overflow-auto">
+            {storageData.profiles.slice(0, 4).map((profile) => (
+              <div key={profile.id} className="rounded-lg border p-3">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-sm font-medium">{profile.name}</p>
+                  <div className="flex items-center gap-1.5">
+                    {profile.isDefault && (
+                      <Badge variant="outline" className="text-[10px]">
+                        {t('defaultTag')}
+                      </Badge>
+                    )}
+                    <Badge
+                      variant="secondary"
+                      className={
+                        profile.isActive
+                          ? 'bg-emerald-50 text-emerald-700'
+                          : 'bg-muted text-muted-foreground'
+                      }
+                    >
+                      {profile.isActive ? (
+                        <>
+                          <CheckCircle2 className="mr-1 h-3 w-3" />
+                          {t('active')}
+                        </>
+                      ) : (
+                        t('inactive')
+                      )}
+                    </Badge>
+                  </div>
+                </div>
+                <p className="mt-1 truncate text-[11px] text-muted-foreground">
+                  {profile.providerType.toUpperCase()} | {profile.bucketName}
+                </p>
+              </div>
+            ))}
+            {storageData.profiles.length === 0 && (
+              <p className="text-xs text-muted-foreground">{t('noProfiles')}</p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}