@hed-hog/core 0.0.297 → 0.0.299

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

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