@hed-hog/core 0.0.296 → 0.0.298

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -9,301 +8,161 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Calendar, CheckCircle2, Clock, Globe, Type } from 'lucide-react';
-import { useState } from 'react';
-
-interface Language {
-  code: string;
-  label: string;
-  flag: string;
-  enabled: boolean;
-}
-
-const availableLanguages: Language[] = [
-  { code: 'pt-BR', label: 'Portugues (Brasil)', flag: '🇧🇷', enabled: true },
-  { code: 'en-US', label: 'Ingles (EUA)', flag: '🇺🇸', enabled: true },
-  { code: 'es-ES', label: 'Espanhol (Espanha)', flag: '🇪🇸', enabled: false },
-  { code: 'fr-FR', label: 'Frances (Franca)', flag: '🇫🇷', enabled: false },
-  { code: 'de-DE', label: 'Alemao (Alemanha)', flag: '🇩🇪', enabled: false },
-  { code: 'it-IT', label: 'Italiano (Italia)', flag: '🇮🇹', enabled: false },
-  { code: 'ja-JP', label: 'Japones (Japao)', flag: '🇯🇵', enabled: false },
-  { code: 'zh-CN', label: 'Chines (Simplificado)', flag: '🇨🇳', enabled: false },
-];
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type {
+  DashboardCoreConfigOverviewData,
+  LocaleConfigWidgetData,
+} from '@/types/widget-data';
+import { Calendar, Clock, Globe, Languages } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
 
-const timezones = [
-  { value: 'America/Sao_Paulo', label: 'America/Sao_Paulo (GMT-3)' },
-  { value: 'America/New_York', label: 'America/New_York (GMT-5)' },
-  { value: 'America/Chicago', label: 'America/Chicago (GMT-6)' },
-  { value: 'America/Denver', label: 'America/Denver (GMT-7)' },
-  { value: 'America/Los_Angeles', label: 'America/Los_Angeles (GMT-8)' },
-  { value: 'Europe/London', label: 'Europe/London (GMT+0)' },
-  { value: 'Europe/Paris', label: 'Europe/Paris (GMT+1)' },
-  { value: 'Europe/Berlin', label: 'Europe/Berlin (GMT+1)' },
-  { value: 'Asia/Tokyo', label: 'Asia/Tokyo (GMT+9)' },
-  { value: 'Asia/Shanghai', label: 'Asia/Shanghai (GMT+8)' },
-  { value: 'Australia/Sydney', label: 'Australia/Sydney (GMT+11)' },
-];
-
-const dateFormats = [
-  { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY', example: '14/02/2026' },
-  { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY', example: '02/14/2026' },
-  { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD', example: '2026-02-14' },
-  { value: 'DD.MM.YYYY', label: 'DD.MM.YYYY', example: '14.02.2026' },
-  { value: 'DD-MM-YYYY', label: 'DD-MM-YYYY', example: '14-02-2026' },
-];
-
-const timeFormats = [
-  { value: 'HH:mm', label: '24 horas', example: '14:30' },
-  { value: 'hh:mm A', label: '12 horas', example: '02:30 PM' },
-  { value: 'HH:mm:ss', label: '24 horas com segundos', example: '14:30:45' },
-  {
-    value: 'hh:mm:ss A',
-    label: '12 horas com segundos',
-    example: '02:30:45 PM',
+const defaultLocaleConfigData: LocaleConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    enabledLocaleCount: 0,
+    disabledLocaleCount: 0,
+  },
+  settings: {
+    dateFormat: null,
+    timeFormat: null,
+    timezone: null,
   },
-];
+  locales: [],
+};
 
-export default function LocaleConfig() {
-  const [languages, setLanguages] = useState<Language[]>(availableLanguages);
-  const [defaultLang, setDefaultLang] = useState('pt-BR');
-  const [timezone, setTimezone] = useState('America/Sao_Paulo');
-  const [dateFormat, setDateFormat] = useState('DD/MM/YYYY');
-  const [timeFormat, setTimeFormat] = useState('HH:mm');
-  const [autoDetect, setAutoDetect] = useState(true);
+interface LocaleConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function LocaleConfig({ widget, onRemove }: LocaleConfigProps) {
+  const t = useTranslations('core.DashboardPage.localeConfig');
 
-  const enabledLanguages = languages.filter((l) => l.enabled);
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    LocaleConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.localeConfig,
+  });
 
-  function toggleLanguage(code: string) {
-    setLanguages((prev) =>
-      prev.map((l) => {
-        if (l.code === code) {
-          if (l.enabled && l.code === defaultLang) return l;
-          return { ...l, enabled: !l.enabled };
-        }
-        return l;
-      })
-    );
-  }
+  const localeData = data ?? defaultLocaleConfigData;
+  const enabledLocales = localeData.locales.filter((locale) => locale.enabled);
 
   return (
-    <Card className="h-full">
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50">
-              <Globe className="h-5 w-5 text-indigo-600" />
+    <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-indigo-50">
+                <Globe className="h-5 w-5 text-indigo-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
             </div>
-            <div>
-              <CardTitle className="text-base">Localizacao</CardTitle>
-              <CardDescription>
-                Idiomas, fuso horario e formatos regionais
-              </CardDescription>
-            </div>
-          </div>
-          <Badge variant="secondary" className="bg-indigo-50 text-indigo-700">
-            {enabledLanguages.length} idioma
-            {enabledLanguages.length !== 1 ? 's' : ''}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Languages */}
-        <div className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Type className="h-4 w-4 text-muted-foreground" />
-            <Label className="text-sm font-medium">Idiomas habilitados</Label>
+            <Badge
+              variant="secondary"
+              className={
+                localeData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {localeData.status.isConfigured ? t('configured') : t('pending')}
+            </Badge>
           </div>
-          <div className="grid grid-cols-2 gap-2">
-            {languages.map((lang) => (
-              <label
-                key={lang.code}
-                className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
-                  lang.enabled
-                    ? 'border-foreground/20 bg-foreground/2'
-                    : 'border-border hover:border-foreground/10'
-                }`}
-              >
-                <Checkbox
-                  checked={lang.enabled}
-                  onCheckedChange={() => toggleLanguage(lang.code)}
-                  disabled={lang.enabled && lang.code === defaultLang}
-                />
-                <span className="text-base leading-none">{lang.flag}</span>
-                <div className="flex flex-1 flex-col">
-                  <span className="text-sm font-medium">{lang.label}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {lang.code}
-                  </span>
-                </div>
-                {lang.code === defaultLang && (
-                  <Badge variant="outline" className="text-[10px] h-5">
-                    Padrao
-                  </Badge>
-                )}
-              </label>
-            ))}
+        </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('enabled')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.status.enabledLocaleCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('disabled')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.status.disabledLocaleCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('total')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.locales.length}
+              </p>
+            </div>
           </div>
-        </div>
 
-        {/* Default Language */}
-        <div className="space-y-2">
-          <Label>Idioma padrao</Label>
-          <Select value={defaultLang} onValueChange={setDefaultLang}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {enabledLanguages.map((lang) => (
-                <SelectItem key={lang.code} value={lang.code}>
-                  <span className="flex items-center gap-2">
-                    <span>{lang.flag}</span>
-                    <span>{lang.label}</span>
-                  </span>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <p className="text-xs text-muted-foreground">
-            Idioma exibido quando o idioma do usuario nao esta disponivel.
-          </p>
-        </div>
-
-        {/* Timezone */}
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <Clock className="h-4 w-4 text-muted-foreground" />
-            <Label>Fuso horario do sistema</Label>
+          <div className="grid gap-2 sm:grid-cols-3">
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Clock className="h-3.5 w-3.5" />
+                {t('timezone')}
+              </div>
+              <p className="truncate font-mono text-xs">
+                {localeData.settings.timezone || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Calendar className="h-3.5 w-3.5" />
+                {t('dateFormat')}
+              </div>
+              <p className="font-mono text-xs">
+                {localeData.settings.dateFormat || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Clock className="h-3.5 w-3.5" />
+                {t('timeFormat')}
+              </div>
+              <p className="font-mono text-xs">
+                {localeData.settings.timeFormat || t('notSet')}
+              </p>
+            </div>
           </div>
-          <Select value={timezone} onValueChange={setTimezone}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {timezones.map((tz) => (
-                <SelectItem key={tz.value} value={tz.value}>
-                  {tz.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
 
-        {/* Date & Time Formats */}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Calendar className="h-4 w-4 text-muted-foreground" />
-              <Label>Formato de data</Label>
+          <div className="min-h-0 flex-1 rounded-lg border p-3">
+            <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+              <Languages className="h-3.5 w-3.5" />
+              <span>{t('enabledLocales')}</span>
             </div>
-            <Select value={dateFormat} onValueChange={setDateFormat}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {dateFormats.map((df) => (
-                  <SelectItem key={df.value} value={df.value}>
-                    <span className="flex items-center gap-2">
-                      <span className="font-mono text-xs">{df.value}</span>
-                      <span className="text-muted-foreground">
-                        {'('}
-                        {df.example}
-                        {')'}
-                      </span>
+            <div className="flex flex-wrap gap-1.5">
+              {enabledLocales.length > 0 ? (
+                enabledLocales.map((locale) => (
+                  <Badge key={locale.id} variant="outline" className="gap-1">
+                    <span className="font-mono text-[10px]">{locale.code}</span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {locale.name}
                     </span>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Clock className="h-4 w-4 text-muted-foreground" />
-              <Label>Formato de hora</Label>
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-xs text-muted-foreground">
+                  {t('noneEnabled')}
+                </span>
+              )}
             </div>
-            <Select value={timeFormat} onValueChange={setTimeFormat}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {timeFormats.map((tf) => (
-                  <SelectItem key={tf.value} value={tf.value}>
-                    <span className="flex items-center gap-2">
-                      <span>{tf.label}</span>
-                      <span className="text-muted-foreground font-mono text-xs">
-                        {'('}
-                        {tf.example}
-                        {')'}
-                      </span>
-                    </span>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        {/* Preview */}
-        <div className="rounded-lg border bg-muted/50 p-4">
-          <p className="mb-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
-            Pre-visualizacao
-          </p>
-          <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm">
-            <span>
-              <span className="text-muted-foreground">Data: </span>
-              <span className="font-medium font-mono">
-                {dateFormats.find((d) => d.value === dateFormat)?.example}
-              </span>
-            </span>
-            <span>
-              <span className="text-muted-foreground">Hora: </span>
-              <span className="font-medium font-mono">
-                {timeFormats.find((t) => t.value === timeFormat)?.example}
-              </span>
-            </span>
-            <span>
-              <span className="text-muted-foreground">Fuso: </span>
-              <span className="font-medium font-mono">
-                {
-                  timezones
-                    .find((t) => t.value === timezone)
-                    ?.label.split(' ')[0]
-                }
-              </span>
-            </span>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center justify-between border-t pt-4">
-          <div className="flex items-center gap-2">
-            <Switch
-              id="auto-detect-lang"
-              checked={autoDetect}
-              onCheckedChange={setAutoDetect}
-            />
-            <Label
-              htmlFor="auto-detect-lang"
-              className="text-sm text-muted-foreground"
-            >
-              Detectar idioma do navegador
-            </Label>
           </div>
-          <Button size="sm">
-            <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" />
-            Salvar
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
   );
 }