@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/core.theme-config.tsx.ejs

@@ -0,0 +1,213 @@
+'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,
+  ThemeConfigWidgetData,
+} from '@/types/widget-data';
+import { Palette } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const emptyPaletteMode = {
+  primary: null,
+  primaryForeground: null,
+  secondary: null,
+  secondaryForeground: null,
+  accent: null,
+  accentForeground: null,
+  muted: null,
+  mutedForeground: null,
+  background: null,
+  backgroundForeground: null,
+  card: null,
+  cardForeground: null,
+};
+
+const defaultThemeConfigData: ThemeConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    configuredTokenCount: 0,
+  },
+  branding: {
+    systemName: null,
+    systemSlogan: null,
+    iconUrl: null,
+    imageUrl: null,
+  },
+  presentation: {
+    mode: null,
+    font: null,
+    textSize: null,
+    radius: null,
+  },
+  palette: {
+    light: emptyPaletteMode,
+    dark: emptyPaletteMode,
+  },
+};
+
+interface ThemeConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function ThemeConfig({ widget, onRemove }: ThemeConfigProps) {
+  const t = useTranslations('core.DashboardPage.themeConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    ThemeConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.themeConfig,
+  });
+
+  const themeData = data ?? defaultThemeConfigData;
+
+  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-rose-50">
+                <Palette className="h-5 w-5 text-rose-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                themeData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {themeData.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="rounded-lg border bg-muted/30 p-4">
+            <div className="flex items-center gap-3 rounded-lg border bg-background p-3">
+              <div
+                className="flex h-10 w-10 items-center justify-center rounded-lg text-sm font-bold text-white"
+                style={{
+                  backgroundColor: themeData.palette.light.primary || '#64748b',
+                }}
+              >
+                {(themeData.branding.systemName || 'S').charAt(0).toUpperCase()}
+              </div>
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold">
+                  {themeData.branding.systemName || t('notSet')}
+                </p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {themeData.branding.systemSlogan || t('notSet')}
+                </p>
+              </div>
+              <Badge variant="outline" className="ml-auto text-[10px]">
+                {themeData.presentation.mode || t('notSet')}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('tokens')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {themeData.status.configuredTokenCount}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('font')}</p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.font || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('textSize')}
+              </p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.textSize || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('radius')}</p>
+              <p className="mt-1 truncate text-sm font-medium">
+                {themeData.presentation.radius || t('notSet')}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            <div className="rounded-lg border p-3">
+              <div className="mb-2 flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">
+                  {t('lightPalette')}
+                </p>
+                <Badge variant="outline" className="text-[10px]">
+                  {themeData.palette.light.primary || t('notSet')}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-5 w-5 rounded-full border"
+                  style={{
+                    backgroundColor:
+                      themeData.palette.light.primary || 'transparent',
+                  }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('primary')}
+                </span>
+              </div>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-2 flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">
+                  {t('darkPalette')}
+                </p>
+                <Badge variant="outline" className="text-[10px]">
+                  {themeData.palette.dark.primary || t('notSet')}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-5 w-5 rounded-full border"
+                  style={{
+                    backgroundColor:
+                      themeData.palette.dark.primary || 'transparent',
+                  }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('primary')}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,132 @@
+'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 { AllWidgetsData, RoleData } from '@/types/widget-data';
+import { Crown, ShieldCheck } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const levelStyles = [
+  {
+    border: 'border-blue-200 dark:border-blue-800',
+    bg: 'bg-blue-50/50 dark:bg-blue-950/30',
+    iconBg: 'bg-blue-100 dark:bg-blue-900/50',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    badge: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400',
+  },
+  {
+    border: 'border-indigo-200 dark:border-indigo-800',
+    bg: 'bg-indigo-50/30 dark:bg-indigo-950/20',
+    iconBg: 'bg-indigo-100 dark:bg-indigo-900/50',
+    iconColor: 'text-indigo-600 dark:text-indigo-400',
+    badge:
+      'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-400',
+  },
+  {
+    border: 'border-emerald-200 dark:border-emerald-800',
+    bg: 'bg-emerald-50/30 dark:bg-emerald-950/20',
+    iconBg: 'bg-emerald-100 dark:bg-emerald-900/50',
+    iconColor: 'text-emerald-600 dark:text-emerald-400',
+    badge:
+      'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400',
+  },
+  {
+    border: 'border-amber-200 dark:border-amber-800',
+    bg: 'bg-amber-50/30 dark:bg-amber-950/20',
+    iconBg: 'bg-amber-100 dark:bg-amber-900/50',
+    iconColor: 'text-amber-600 dark:text-amber-400',
+    badge:
+      'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400',
+  },
+];
+
+function RolesContent({ roles }: { roles: RoleData[] }) {
+  const t = useTranslations('core.DashboardPage.userRoles');
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 space-y-1 pb-2">
+        <div className="flex items-center gap-1.5">
+          <Crown className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+          <div>
+            <CardTitle className="text-sm font-semibold">
+              {t('title')}
+            </CardTitle>
+            <CardDescription className="text-xs leading-tight">
+              {t('description')}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="grid content-start items-start grid-cols-1 gap-1.5 md:grid-cols-2">
+          {roles.map((role, index) => {
+            const style = levelStyles[index % levelStyles.length]!;
+            return (
+              <div
+                key={role.id}
+                className={`flex h-fit self-start items-center gap-2 rounded-lg border p-2 transition-all duration-200 hover:shadow-sm ${style.border} ${style.bg}`}
+              >
+                <div
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${style.iconBg}`}
+                >
+                  <ShieldCheck className={`h-3.5 w-3.5 ${style.iconColor}`} />
+                </div>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <span className="truncate text-xs font-medium text-foreground sm:text-[13px]">
+                    {role.name}
+                  </span>
+                  <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
+                    {role.slug}
+                  </span>
+                </div>
+                <Badge
+                  variant="secondary"
+                  className={`shrink-0 px-1.5 py-0 text-[10px] ${style.badge}`}
+                >
+                  {t('active')}
+                </Badge>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface UserRolesProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function UserRoles({ widget, onRemove }: UserRolesProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    RoleData[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.userRoles,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'user-roles'}
+      onRemove={onRemove}
+    >
+      {data && <RolesContent roles={data} />}
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,236 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData, SessionData } from '@/types/widget-data';
+import {
+  Clock,
+  Globe,
+  Info,
+  LogOut,
+  Monitor,
+  MoreHorizontal,
+  Smartphone,
+  Tablet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function detectDeviceType(ua: string): 'desktop' | 'mobile' | 'tablet' {
+  const u = ua.toLowerCase();
+  if (u.includes('ipad') || u.includes('tablet')) return 'tablet';
+  if (u.includes('mobile') || u.includes('iphone') || u.includes('android'))
+    return 'mobile';
+  return 'desktop';
+}
+
+function detectBrowser(ua: string): string {
+  if (/edg\//i.test(ua)) return 'Edge';
+  if (/chrome\//i.test(ua)) return 'Chrome';
+  if (/firefox\//i.test(ua)) return 'Firefox';
+  if (/safari\//i.test(ua)) return 'Safari';
+  if (/msie|trident/i.test(ua)) return 'IE';
+  return 'Browser';
+}
+
+function detectDevice(ua: string): string {
+  if (/ipad/i.test(ua)) return 'iPad';
+  if (/iphone/i.test(ua)) return 'iPhone';
+  if (/android/i.test(ua)) return 'Android';
+  if (/macintosh|mac os/i.test(ua)) return 'Mac';
+  if (/windows/i.test(ua)) return 'Windows';
+  if (/linux/i.test(ua)) return 'Linux';
+  return 'Dispositivo';
+}
+
+function formatRelative(
+  dateStr: string,
+  tActiveNow: string,
+  tMinsAgo: (n: number) => string,
+  tHoursAgo: (n: number) => string,
+  tDaysAgo: (n: number) => string
+): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return tActiveNow;
+  if (mins < 60) return tMinsAgo(mins);
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return tHoursAgo(hours);
+  const days = Math.floor(hours / 24);
+  return tDaysAgo(days);
+}
+
+const deviceIcons = {
+  desktop: Monitor,
+  mobile: Smartphone,
+  tablet: Tablet,
+};
+
+function SessionsContent({ sessions }: { sessions: SessionData[] }) {
+  const t = useTranslations('core.DashboardPage.userSessions');
+  const router = useRouter();
+
+  return (
+    <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-4 w-4 text-blue-600 sm:h-5 sm:w-5" />
+            <div className="min-w-0">
+              <CardTitle className="text-sm font-semibold sm:text-base">
+                {t('title')}
+              </CardTitle>
+              <CardDescription className="text-xs sm:text-sm">
+                {t('description')}
+              </CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/core/account/sessions')}
+            className="h-8 w-full shrink-0 gap-1.5 px-2.5 text-xs sm:h-9 sm:w-auto sm:text-sm"
+          >
+            <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="grid w-full items-start grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-2 sm:gap-3">
+          {sessions.map((session, index) => {
+            const ua = session.user_agent ?? '';
+            const deviceType = detectDeviceType(ua);
+            const browser = detectBrowser(ua);
+            const device = detectDevice(ua);
+            const isCurrent = index === 0;
+            const DeviceIcon = deviceIcons[deviceType];
+            const ip = session.ip_address
+              ? session.ip_address.replace(/(\d+\.\d+\.\d+\.)\d+/, '$1***')
+              : '—';
+            const relativeTime = formatRelative(
+              session.created_at,
+              t('activeNow'),
+              (n) => t('minutesAgo', { count: n }),
+              (n) => t('hoursAgo', { count: n }),
+              (n) =>
+                n === 1
+                  ? t('daysAgo', { count: n })
+                  : t('daysAgoPlural', { count: n })
+            );
+
+            return (
+              <div
+                key={session.id}
+                className={`group flex items-center gap-2.5 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3.5 ${
+                  isCurrent
+                    ? 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-800 dark:bg-emerald-950/30'
+                    : 'bg-card hover:bg-muted/30'
+                }`}
+              >
+                <div
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10 ${
+                    isCurrent
+                      ? 'bg-emerald-100 dark:bg-emerald-900/50'
+                      : 'bg-muted'
+                  }`}
+                >
+                  <DeviceIcon
+                    className={`h-4 w-4 sm:h-5 sm:w-5 ${
+                      isCurrent
+                        ? 'text-emerald-600 dark:text-emerald-400'
+                        : 'text-muted-foreground'
+                    }`}
+                  />
+                </div>
+                <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 wrap-break-word text-[13px] font-medium text-foreground sm:text-sm">
+                      {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="wrap-break-word text-[11px] text-muted-foreground sm:text-xs">
+                    {browser} &middot; {ip}
+                  </span>
+                  <div className="flex flex-wrap items-center gap-2 text-[10px] text-muted-foreground/70 sm:gap-3 sm:text-[11px]">
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {relativeTime}
+                    </span>
+                  </div>
+                </div>
+                {!isCurrent && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem className="text-destructive">
+                        <LogOut className="mr-2 h-4 w-4" />
+                        {t('terminateSession')}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface UserSessionsProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function UserSessions({ widget, onRemove }: UserSessionsProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    SessionData[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.userSessions,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'user-sessions'}
+      onRemove={onRemove}
+    >
+      {data && <SessionsContent sessions={data} />}
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.alerts.tsx.ejs

@@ -0,0 +1,108 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { AlertTriangle } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface FinanceData {
+  titulosPagar?: Array<{
+    status: string;
+    parcelas: Array<{ status: string }>;
+  }>;
+  extratos?: Array<{
+    statusConciliacao: string;
+  }>;
+  periodoAberto?: {
+    inicio?: string | null;
+  } | null;
+}
+
+interface AlertsProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function Alerts({ widget, onRemove }: AlertsProps) {
+  const t = useTranslations('finance.DashboardPage');
+  const locale = useLocale();
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-alerts',
+    });
+
+  const approvedPayables = (data?.titulosPagar || []).filter(
+    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
+  );
+
+  const overdue = approvedPayables.filter((titulo) =>
+    titulo.parcelas.some((p) => p.status === 'vencido')
+  ).length;
+
+  const pendingReconciliation = (data?.extratos || []).filter(
+    (e) => e.statusConciliacao === 'pendente'
+  ).length;
+
+  const periodBase = data?.periodoAberto?.inicio
+    ? new Date(data.periodoAberto.inicio)
+    : new Date();
+  const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(
+    periodBase
+  );
+  const currentPeriod = `${month.charAt(0).toUpperCase()}${month.slice(1)}/${periodBase.getFullYear()}`;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('alerts.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            {t('alerts.title')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {overdue > 0 && (
+              <div className="flex items-center justify-between rounded-lg bg-red-50 p-3">
+                <span className="text-sm">{t('alerts.overdueTitles')}</span>
+                <Badge variant="destructive">{overdue}</Badge>
+              </div>
+            )}
+            {pendingReconciliation > 0 && (
+              <div className="flex items-center justify-between rounded-lg bg-yellow-50 p-3">
+                <span className="text-sm">
+                  {t('alerts.pendingReconciliation')}
+                </span>
+                <Badge
+                  variant="outline"
+                  className="border-yellow-500 text-yellow-700"
+                >
+                  {pendingReconciliation}
+                </Badge>
+              </div>
+            )}
+            <div className="flex items-center justify-between rounded-lg bg-blue-50 p-3">
+              <span className="text-sm">{t('alerts.openPeriod')}</span>
+              <Badge
+                variant="outline"
+                className="border-blue-500 text-blue-700"
+              >
+                {currentPeriod}
+              </Badge>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}