@hed-hog/core 0.0.215 → 0.0.216

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

@@ -0,0 +1,309 @@
+'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 { 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 },
+];
+
+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',
+  },
+];
+
+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);
+
+  const enabledLanguages = languages.filter((l) => l.enabled);
+
+  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;
+      })
+    );
+  }
+
+  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" />
+            </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>
+          </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>
+            ))}
+          </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>
+          <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>
+            <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>
+                    </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>
+            </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>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/login-history-chart.tsx.ejs

@@ -0,0 +1,111 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData, LoginDay } from '@/types/widget-data';
+import { LogIn } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function LoginChart({ data }: { data: LoginDay[] }) {
+  const t = useTranslations('core.DashboardPage.loginHistory');
+
+  const chartConfig = {
+    logins: { label: t('logins'), color: 'hsl(221, 83%, 53%)' },
+    failed: { label: t('failed'), color: 'hsl(0, 84%, 60%)' },
+  };
+
+  return (
+    <Card className="flex h-full flex-col">
+      <CardHeader className="shrink-0 pb-2">
+        <div className="flex items-center gap-2">
+          <LogIn className="h-5 w-5 text-blue-600" />
+          <div>
+            <CardTitle className="text-base font-semibold">
+              {t('title')}
+            </CardTitle>
+            <CardDescription>{t('description')}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-1 flex-col pt-0">
+        <ChartContainer
+          config={chartConfig}
+          className="h-full min-h-[120px] w-full flex-1"
+        >
+          <BarChart data={data as any} barGap={2}>
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              axisLine={false}
+              fontSize={12}
+              tickMargin={8}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              fontSize={12}
+              tickMargin={4}
+              allowDecimals={false}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar
+              dataKey="logins"
+              fill="hsl(221, 83%, 53%)"
+              radius={[4, 4, 0, 0]}
+            />
+            <Bar
+              dataKey="failed"
+              fill="hsl(0, 84%, 60%)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface LoginHistoryChartProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function LoginHistoryChart({
+  widget,
+  onRemove,
+}: LoginHistoryChartProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    LoginDay[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.loginHistory,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'login-history-chart'}
+      onRemove={onRemove}
+    >
+      {data && <LoginChart data={data} />}
+    </WidgetWrapper>
+  );
+}