@hed-hog/core 0.0.297 → 0.0.298

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import {
   Card,
   CardContent,
@@ -8,268 +8,206 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { ImageIcon, Palette, Upload } from 'lucide-react';
-import { useRef, useState } from 'react';
+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 PRESET_COLORS = [
-  { name: 'Azul', value: '#3b82f6' },
-  { name: 'Indigo', value: '#6366f1' },
-  { name: 'Violeta', value: '#8b5cf6' },
-  { name: 'Rosa', value: '#ec4899' },
-  { name: 'Vermelho', value: '#ef4444' },
-  { name: 'Laranja', value: '#f97316' },
-  { name: 'Amber', value: '#f59e0b' },
-  { name: 'Esmeralda', value: '#10b981' },
-  { name: 'Teal', value: '#14b8a6' },
-  { name: 'Ciano', value: '#06b6d4' },
-  { name: 'Cinza', value: '#6b7280' },
-  { name: 'Zinc', value: '#18181b' },
-];
+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,
+};
 
-export default function ThemeConfig() {
-  const [title, setTitle] = useState('HeroAdmin');
-  const [slogan, setSlogan] = useState('Painel de Controle Inteligente');
-  const [primaryColor, setPrimaryColor] = useState('#3b82f6');
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-  const [faviconPreview, setFaviconPreview] = useState<string | null>(null);
-  const logoRef = useRef<HTMLInputElement>(null);
-  const faviconRef = useRef<HTMLInputElement>(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,
+  },
+};
 
-  function handleFileChange(
-    e: React.ChangeEvent<HTMLInputElement>,
-    setter: (url: string | null) => void
-  ) {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => setter(reader.result as string);
-      reader.readAsDataURL(file);
-    }
-  }
+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 (
-    <Card className="h-full">
-      <CardHeader>
-        <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">Aparencia e Tema</CardTitle>
-            <CardDescription>
-              Personalize a identidade visual do sistema
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Preview */}
-        <div className="rounded-lg border bg-muted/30 p-4">
-          <p className="mb-3 text-xs font-medium text-muted-foreground">
-            Pre-visualizacao
-          </p>
-          <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"
-              style={{ backgroundColor: primaryColor }}
-            >
-              {logoPreview ? (
-                <img
-                  src={logoPreview}
-                  alt="Logo"
-                  className="h-6 w-6 rounded object-contain"
-                />
-              ) : (
-                <span className="text-sm font-bold text-white">
-                  {title.charAt(0)}
-                </span>
-              )}
+    <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>
-            <div>
-              <span
-                className="text-sm font-bold"
-                style={{ color: primaryColor }}
+            <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',
+                }}
               >
-                {title || 'Titulo do Sistema'}
-              </span>
-              <p className="text-xs text-muted-foreground">
-                {slogan || 'Slogan do sistema'}
-              </p>
-            </div>
-            {faviconPreview && (
-              <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
-                <img
-                  src={faviconPreview}
-                  alt="Favicon"
-                  className="h-4 w-4 object-contain"
-                />
-                Favicon
+                {(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>
 
-        {/* Logo + Favicon */}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label>Logo do sistema</Label>
-            <div
-              onClick={() => logoRef.current?.click()}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') logoRef.current?.click();
-              }}
-              role="button"
-              tabIndex={0}
-              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-            >
-              {logoPreview ? (
-                <img
-                  src={logoPreview}
-                  alt="Logo"
-                  className="h-12 w-12 object-contain"
-                />
-              ) : (
-                <>
-                  <Upload className="h-5 w-5 text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">
-                    Clique para enviar
-                  </span>
-                </>
-              )}
+          <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>
-            <input
-              ref={logoRef}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={(e) => handleFileChange(e, setLogoPreview)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label>Favicon</Label>
-            <div
-              onClick={() => faviconRef.current?.click()}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') faviconRef.current?.click();
-              }}
-              role="button"
-              tabIndex={0}
-              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-            >
-              {faviconPreview ? (
-                <img
-                  src={faviconPreview}
-                  alt="Favicon"
-                  className="h-8 w-8 object-contain"
-                />
-              ) : (
-                <>
-                  <ImageIcon className="h-5 w-5 text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">
-                    16x16 ou 32x32 px
-                  </span>
-                </>
-              )}
+            <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>
-            <input
-              ref={faviconRef}
-              type="file"
-              accept="image/png,image/ico,image/x-icon,image/svg+xml"
-              className="hidden"
-              onChange={(e) => handleFileChange(e, setFaviconPreview)}
-            />
-          </div>
-        </div>
-
-        {/* Title + Slogan */}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label htmlFor="sys-title">Titulo do sistema</Label>
-            <Input
-              id="sys-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Meu Sistema"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="sys-slogan">Slogan</Label>
-            <Input
-              id="sys-slogan"
-              value={slogan}
-              onChange={(e) => setSlogan(e.target.value)}
-              placeholder="Seu slogan aqui"
-            />
           </div>
-        </div>
 
-        {/* Color Picker */}
-        <div className="space-y-3">
-          <Label>Cor primaria</Label>
-          <div className="flex items-center gap-3">
-            <div
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border"
-              style={{ backgroundColor: primaryColor }}
-            >
-              <input
-                type="color"
-                value={primaryColor}
-                onChange={(e) => setPrimaryColor(e.target.value)}
-                className="h-full w-full cursor-pointer opacity-0"
-                title="Selecionar cor"
-              />
+          <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>
-            <Input
-              value={primaryColor}
-              onChange={(e) => setPrimaryColor(e.target.value)}
-              className="w-28 font-mono text-sm uppercase"
-              maxLength={7}
-            />
-          </div>
-          <div className="flex flex-wrap gap-2 pt-1">
-            {PRESET_COLORS.map((c) => (
-              <button
-                key={c.value}
-                type="button"
-                onClick={() => setPrimaryColor(c.value)}
-                className={`group relative flex h-7 w-7 items-center justify-center rounded-full border-2 transition-all ${
-                  primaryColor === c.value
-                    ? 'border-foreground scale-110'
-                    : 'border-transparent hover:scale-105'
-                }`}
-                title={c.name}
-              >
+            <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"
-                  style={{ backgroundColor: c.value }}
+                  className="h-5 w-5 rounded-full border"
+                  style={{
+                    backgroundColor:
+                      themeData.palette.dark.primary || 'transparent',
+                  }}
                 />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center justify-end border-t pt-4">
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setTitle('HeroAdmin');
-                setSlogan('Painel de Controle Inteligente');
-                setPrimaryColor('#3b82f6');
-                setLogoPreview(null);
-                setFaviconPreview(null);
-              }}
-            >
-              Restaurar padrao
-            </Button>
-            <Button size="sm">Salvar</Button>
+                <span className="text-xs text-muted-foreground">
+                  {t('primary')}
+                </span>
+              </div>
+            </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
   );
 }

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

@@ -53,46 +53,44 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
 
   return (
     <Card className="flex h-full min-h-0 flex-col overflow-hidden">
-      <CardHeader className="shrink-0 pb-3">
-        <div className="flex items-center gap-2">
-          <Crown className="h-4 w-4 text-amber-600 dark:text-amber-400 sm:h-5 sm:w-5" />
+      <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 sm:text-base">
+            <CardTitle className="text-sm font-semibold">
               {t('title')}
             </CardTitle>
-            <CardDescription className="text-xs sm:text-sm">
+            <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 grid-cols-1 gap-2 md:grid-cols-2">
+        <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 items-center gap-2.5 rounded-xl border p-2.5 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3 ${style.border} ${style.bg}`}
+                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-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${style.iconBg}`}
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${style.iconBg}`}
                 >
-                  <ShieldCheck
-                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${style.iconColor}`}
-                  />
+                  <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-[13px] font-medium text-foreground sm:text-sm">
+                  <span className="truncate text-xs font-medium text-foreground sm:text-[13px]">
                     {role.name}
                   </span>
-                  <span className="truncate text-[11px] text-muted-foreground sm:text-xs">
+                  <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
                     {role.slug}
                   </span>
                 </div>
                 <Badge
                   variant="secondary"
-                  className={`shrink-0 text-[10px] ${style.badge}`}
+                  className={`shrink-0 px-1.5 py-0 text-[10px] ${style.badge}`}
                 >
                   {t('active')}
                 </Badge>

package/hedhog/frontend/messages/en.json

@@ -1026,6 +1026,96 @@
       "hoursAgo": "{count}h ago",
       "daysAgo": "{count} day ago",
       "daysAgoPlural": "{count} days ago"
+    },
+    "emailNotifications": {
+      "title": "Email Notifications",
+      "description": "System email flow in the last 14 days",
+      "received": "Received",
+      "read": "Read",
+      "unread": "Unread",
+      "error": "Error",
+      "receivedShort": "Recv.",
+      "readShort": "Read",
+      "unreadShort": "Unrd.",
+      "errorShort": "Err."
+    },
+    "localeConfig": {
+      "title": "Localization",
+      "description": "Locale and regional format summary",
+      "configured": "Configured",
+      "pending": "Pending",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "total": "Total",
+      "timezone": "Timezone",
+      "dateFormat": "Date format",
+      "timeFormat": "Time format",
+      "enabledLocales": "Enabled locales",
+      "noneEnabled": "No locale enabled",
+      "notSet": "Not set"
+    },
+    "mailConfig": {
+      "title": "Mail Configuration",
+      "description": "Provider and delivery overview",
+      "configured": "Configured",
+      "pending": "Pending",
+      "templates": "Templates",
+      "sentTotal": "Sent total",
+      "sent30Days": "Sent (30d)",
+      "sender": "Default sender",
+      "providers": "Providers",
+      "selectedProvider": "Selected: {provider}",
+      "selected": "Selected",
+      "missingKeys": "Missing keys: {count}",
+      "allKeysPresent": "All required keys present",
+      "noProviders": "No providers found",
+      "none": "None",
+      "notSet": "Not set"
+    },
+    "oauthConfig": {
+      "title": "OAuth Providers",
+      "description": "Social login readiness summary",
+      "configured": "Configured",
+      "pending": "Pending",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "configuredProviders": "Configured",
+      "connectedAccounts": "Connected",
+      "scopesCount": "Scopes: {count}",
+      "connectedUsers": "Users: {count}",
+      "missingKeys": "Missing keys: {count}",
+      "allKeysPresent": "All required keys present",
+      "noProviders": "No providers found"
+    },
+    "storageConfig": {
+      "title": "Storage Profiles",
+      "description": "Active providers and profile health",
+      "configured": "Configured",
+      "pending": "Pending",
+      "profiles": "Profiles",
+      "active": "Active",
+      "providers": "Providers",
+      "defaultProfile": "Default profile",
+      "defaults": "defaults",
+      "providerSummary": "{active} active of {total}",
+      "defaultTag": "Default",
+      "inactive": "Inactive",
+      "noProfiles": "No profiles found",
+      "notSet": "Not set"
+    },
+    "themeConfig": {
+      "title": "Theme and Branding",
+      "description": "Visual identity configuration snapshot",
+      "configured": "Configured",
+      "pending": "Pending",
+      "tokens": "Tokens",
+      "font": "Font",
+      "textSize": "Text size",
+      "radius": "Radius",
+      "lightPalette": "Light palette",
+      "darkPalette": "Dark palette",
+      "primary": "Primary",
+      "notSet": "Not set"
     }
   },
   "HomePage": {