@hed-hog/core 0.0.215 → 0.0.216

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

@@ -0,0 +1,210 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ value: number; dataKey: string }>;
+  label?: string;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="mb-1 text-xs font-medium text-card-foreground">{label}</p>
+      {payload.map((entry) => (
+        <p key={entry.dataKey} className="text-xs text-muted-foreground">
+          <span
+            className="mr-1.5 inline-block h-2 w-2 rounded-full"
+            style={{
+              backgroundColor:
+                entry.dataKey === 'users' ? '#6366f1' : '#10b981',
+            }}
+          />
+          {entry.dataKey === 'users' ? t('users') : t('sessions')}:{' '}
+          {entry.value.toLocaleString('pt-BR')}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+interface UserGrowthChartProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  charts?: {
+    userGrowth?: Array<{
+      month: string;
+      users: number;
+      sessions: number;
+    }>;
+  };
+}
+
+export default function UserGrowthChart({
+  widget,
+  onRemove,
+}: UserGrowthChartProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const {
+    data: statsData,
+    isLoading,
+    isAccessDenied,
+    isError,
+  } = useWidgetData<UserStatsData>({
+    endpoint: '/dashboard-core/stats/overview/users',
+    queryKey: 'dashboard-stats-users',
+  });
+
+  const data = statsData?.charts?.userGrowth || [];
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('userGrowthTitle')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col group">
+        <div
+          className="drag-handle absolute top-3 left-4 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
+        </div>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-4">
+          <div className="pl-6">
+            <CardTitle className="text-base font-semibold">
+              {t('userGrowthTitle')}
+            </CardTitle>
+            <CardDescription>{t('userGrowthDescription')}</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="h-[280px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart
+                data={data}
+                margin={{ top: 5, right: 10, left: -20, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="gradientUsuarios"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop offset="0%" stopColor="#6366f1" stopOpacity={0.5} />
+                    <stop
+                      offset="100%"
+                      stopColor="#6366f1"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                  <linearGradient
+                    id="gradientSessoes"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop offset="0%" stopColor="#10b981" stopOpacity={0.4} />
+                    <stop
+                      offset="100%"
+                      stopColor="#10b981"
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke="currentColor"
+                  opacity={0.1}
+                />
+                <XAxis
+                  dataKey="month"
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Area
+                  type="monotone"
+                  dataKey="sessions"
+                  stroke="#10b981"
+                  strokeWidth={2.5}
+                  fill="url(#gradientSessoes)"
+                  animationDuration={1500}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="users"
+                  stroke="#6366f1"
+                  strokeWidth={2.5}
+                  fill="url(#gradientUsuarios)"
+                  animationDuration={1500}
+                  animationBegin={200}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-3 flex items-center justify-center gap-6">
+            <div className="flex items-center gap-2">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: '#6366f1' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('users')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: '#10b981' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('sessions')}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,130 @@
+'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 flex-col">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex items-center gap-2">
+          <Crown className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          <div>
+            <CardTitle className="text-base font-semibold">
+              {t('title')}
+            </CardTitle>
+            <CardDescription>{t('description')}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 overflow-auto pt-0">
+        <div className="grid grid-cols-2 gap-2">
+          {roles.map((role, index) => {
+            const style = levelStyles[index % levelStyles.length]!;
+            return (
+              <div
+                key={role.id}
+                className={`flex items-center gap-3 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm ${style.border} ${style.bg}`}
+              >
+                <div
+                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${style.iconBg}`}
+                >
+                  <ShieldCheck className={`h-4 w-4 ${style.iconColor}`} />
+                </div>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <span className="text-sm font-medium text-foreground">
+                    {role.name}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {role.slug}
+                  </span>
+                </div>
+                <Badge
+                  variant="secondary"
+                  className={`shrink-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/user-sessions.tsx.ejs

@@ -0,0 +1,233 @@
+'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 flex-col">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Globe className="h-5 w-5 text-blue-600" />
+            <div>
+              <CardTitle className="text-base font-semibold">
+                {t('title')}
+              </CardTitle>
+              <CardDescription>{t('description')}</CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/core/account/sessions')}
+          >
+            <Info className="h-3.5 w-3.5" />
+            {t('moreInfo')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 overflow-auto pt-0">
+        <div className="flex flex-col gap-2">
+          {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-3 rounded-xl border p-3.5 transition-all duration-200 hover:shadow-sm ${
+                  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-10 w-10 shrink-0 items-center justify-center rounded-lg ${
+                    isCurrent
+                      ? 'bg-emerald-100 dark:bg-emerald-900/50'
+                      : 'bg-muted'
+                  }`}
+                >
+                  <DeviceIcon
+                    className={`h-5 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 items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">
+                      {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="text-xs text-muted-foreground">
+                    {browser} &middot; {ip}
+                  </span>
+                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground/70">
+                    <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>
+  );
+}