@hed-hog/core 0.0.298 → 0.0.299

package/hedhog/frontend/widgets/oauth-config.tsx.ejs

@@ -0,0 +1,175 @@
+'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,
+  OAuthConfigWidgetData,
+} from '@/types/widget-data';
+import { CheckCircle2, KeyRound, XCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const defaultOAuthConfigData: OAuthConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    enabledProviderCount: 0,
+    configuredProviderCount: 0,
+    connectedAccountCount: 0,
+  },
+  providers: [],
+};
+
+interface OAuthConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function OAuthConfig({ widget, onRemove }: OAuthConfigProps) {
+  const t = useTranslations('core.DashboardPage.oauthConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    OAuthConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.oauthConfig,
+  });
+
+  const oauthData = data ?? defaultOAuthConfigData;
+
+  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-amber-50">
+                <KeyRound className="h-5 w-5 text-amber-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                oauthData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {oauthData.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('enabled')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {oauthData.status.enabledProviderCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('configuredProviders')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {oauthData.status.configuredProviderCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('connectedAccounts')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {oauthData.status.connectedAccountCount}
+              </p>
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 space-y-2 overflow-auto">
+            {oauthData.providers.length > 0 ? (
+              oauthData.providers.map((provider) => (
+                <div key={provider.id} className="rounded-lg border p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-medium">{provider.label}</p>
+                    <div className="flex items-center gap-1.5">
+                      <Badge
+                        variant="secondary"
+                        className={
+                          provider.enabled
+                            ? 'bg-emerald-50 text-emerald-700'
+                            : 'bg-muted text-muted-foreground'
+                        }
+                      >
+                        {provider.enabled ? (
+                          <>
+                            <CheckCircle2 className="mr-1 h-3 w-3" />
+                            {t('enabled')}
+                          </>
+                        ) : (
+                          <>
+                            <XCircle className="mr-1 h-3 w-3" />
+                            {t('disabled')}
+                          </>
+                        )}
+                      </Badge>
+                      <Badge
+                        variant="outline"
+                        className={
+                          provider.configured
+                            ? 'border-emerald-200 text-emerald-700'
+                            : 'text-muted-foreground'
+                        }
+                      >
+                        {provider.configured ? t('configured') : t('pending')}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-3 text-[11px] text-muted-foreground">
+                    <span>
+                      {t('scopesCount', { count: provider.scopesCount })}
+                    </span>
+                    <span>
+                      {t('connectedUsers', { count: provider.connectedUsers })}
+                    </span>
+                    <span>
+                      {provider.missingKeys.length > 0
+                        ? t('missingKeys', {
+                            count: provider.missingKeys.length,
+                          })
+                        : t('allKeysPresent')}
+                    </span>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {t('noProviders')}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/permissions-card.tsx.ejs

@@ -0,0 +1,61 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Shield } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface PermissionsCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  cards?: {
+    roles?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function PermissionsCard({
+  widget,
+  onRemove,
+}: PermissionsCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<UserStatsData>({
+      endpoint: '/dashboard-core/stats/overview/users',
+      queryKey: 'dashboard-stats-users',
+    });
+
+  const value = data?.cards?.roles?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.roles?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('permissions')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('permissions')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<Shield className="h-6 w-6 text-rose-500" />}
+        iconBg="bg-rose-500/10"
+        delay={200}
+      />
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/permissions-chart.tsx.ejs

@@ -0,0 +1,156 @@
+'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 { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{ name: string; value: number; payload: { color: string } }>;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  const entry = payload[0];
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="text-xs text-muted-foreground">
+        <span
+          className="mr-1.5 inline-block h-2 w-2 rounded-full"
+          style={{ backgroundColor: entry?.payload.color }}
+        />
+        {entry?.name}: {entry?.value} {t('permissionsLowercase')}
+      </p>
+    </div>
+  );
+}
+
+interface PermissionsChartProps {
+  widget?: {
+    name?: string;
+  } | null;
+  onRemove?: () => void;
+}
+
+interface PermissionDistributionItem {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface UserStatsData {
+  charts?: {
+    permissionDistribution?: PermissionDistributionItem[];
+  };
+}
+
+export default function PermissionsChart({
+  widget,
+  onRemove,
+}: PermissionsChartProps) {
+  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?.permissionDistribution || [];
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('permissionsDistributionTitle')}
+      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="pb-2 pt-4 pl-10">
+          <CardTitle className="text-base font-semibold">
+            {t('permissionsDistributionTitle')}
+          </CardTitle>
+          <CardDescription>
+            {t('permissionsDistributionDescription')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="flex h-full items-center justify-between gap-4 overflow-hidden">
+            <div className="relative h-[280px] w-[280px] shrink-0">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={data}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={70}
+                    outerRadius={110}
+                    paddingAngle={4}
+                  dataKey="value"
+                  animationDuration={1200}
+                  strokeWidth={0}
+                >
+                    {data.map((entry, index: number) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip content={<CustomTooltip />} />
+                </PieChart>
+              </ResponsiveContainer>
+              <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <span className="text-2xl font-bold text-foreground">
+                  {total}
+                </span>
+                <span className="text-[10px] text-muted-foreground">
+                  {t('total')}
+                </span>
+              </div>
+            </div>
+            <div className="grid max-h-[280px] min-w-0 flex-1 grid-cols-2 content-start gap-x-4 gap-y-2 overflow-y-auto pr-2">
+              {data.map((item) => (
+                <div key={item.name} className="flex min-w-0 items-start gap-2.5">
+                  <div
+                    className="mt-1 h-2.5 w-2.5 shrink-0 rounded-sm"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <div className="flex min-w-0 flex-col">
+                    <span className="break-words text-xs font-medium leading-tight text-foreground">
+                      {item.name}
+                    </span>
+                    <span className="text-[11px] text-muted-foreground">
+                      {item.value} ({total ? Math.round((item.value / total) * 100) : 0}%)
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/profile-card.tsx.ejs

@@ -0,0 +1,186 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { formatDateTime } from '@/lib/format-date';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import type { AllWidgetsData, ProfileData } from '@/types/widget-data';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Calendar,
+  CheckCircle2,
+  Clock,
+  Edit3,
+  Globe,
+  Mail,
+  Shield,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((n) => n[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
+function ProfileContent({ profile }: { profile: ProfileData }) {
+  const { getSettingValue } = useApp();
+  const router = useRouter();
+  const t = useTranslations('core.DashboardPage.profileCard');
+
+  return (
+    <Card className="relative flex h-full flex-col overflow-hidden">
+      <div className="absolute inset-x-0 top-0 h-28 bg-linear-to-br from-muted to-muted/50" />
+      <CardContent className="relative flex flex-1 flex-col overflow-hidden pt-7 pb-12">
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-end">
+          <div className="relative">
+            <Avatar className="h-20 w-20 border-4 border-card shadow-md">
+              {profile.photo_id && (
+                <AvatarImage
+                  src={getPhotoUrl(profile.photo_id)}
+                  alt={profile.name}
+                />
+              )}
+              <AvatarFallback className="bg-foreground text-background text-xl font-bold">
+                {getInitials(profile.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="absolute -bottom-0.5 -right-0.5 h-5 w-5 rounded-full border-2 border-card bg-emerald-500" />
+          </div>
+          <div className="flex flex-1 flex-col items-center gap-1 text-center sm:items-start sm:text-left">
+            <div className="flex items-center gap-2">
+              <h2 className="text-xl font-bold text-foreground">
+                {profile.name}
+              </h2>
+              <CheckCircle2 className="h-4 w-4 text-blue-500" />
+            </div>
+            <p className="text-sm text-muted-foreground">{profile.role}</p>
+            <div className="flex flex-wrap items-center gap-2 pt-1">
+              <Badge
+                variant="outline"
+                className="border-emerald-200 bg-emerald-50 text-xs text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400"
+              >
+                {t('online')}
+              </Badge>
+            </div>
+          </div>
+          <Button
+            onClick={() => router.push('/core/account/profile')}
+            variant="outline"
+            size="sm"
+            className="shrink-0 gap-1.5"
+          >
+            <Edit3 className="h-3.5 w-3.5" />
+            {t('editProfile')}
+          </Button>
+        </div>
+
+        <Separator className="my-6" />
+
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div className="flex items-center gap-2.5 rounded-lg p-2 transition-colors hover:bg-muted/50">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
+              <Mail className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="text-[11px] text-muted-foreground">
+                {t('email')}
+              </span>
+              <span className="truncate text-xs font-medium text-foreground">
+                {profile.email}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2.5 rounded-lg p-2 transition-colors hover:bg-muted/50">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="text-[11px] text-muted-foreground">
+                {t('memberSinceLabel')}
+              </span>
+              <span className="truncate text-xs font-medium text-foreground">
+                {formatDateTime(profile.memberSince, getSettingValue)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2.5 rounded-lg p-2 transition-colors hover:bg-muted/50">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-blue-50 dark:bg-blue-950/40">
+              <Globe className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="text-[11px] text-muted-foreground">
+                {t('activeSessions')}
+              </span>
+              <span className="text-xs font-semibold text-foreground">
+                {profile.totalSessions}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2.5 rounded-lg p-2 transition-colors hover:bg-muted/50">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-amber-50 dark:bg-amber-950/40">
+              <Shield className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="text-[11px] text-muted-foreground">
+                {t('roles')}
+              </span>
+              <span className="text-xs font-semibold text-foreground">
+                {profile.totalRoles}
+              </span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      <div className="absolute bottom-0 inset-x-0 flex items-center gap-2 border-t bg-card px-4 py-2">
+        <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate text-xs text-muted-foreground">
+          {t('lastLogin', {
+            date: formatDateTime(profile.lastLogin, getSettingValue),
+          })}
+        </span>
+      </div>
+    </Card>
+  );
+}
+
+interface ProfileCardProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function ProfileCard({ widget, onRemove }: ProfileCardProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    ProfileData
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.profile,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'profile-card'}
+      onRemove={onRemove}
+    >
+      {data && <ProfileContent profile={data} />}
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/routes-card.tsx.ejs

@@ -0,0 +1,58 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Route } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface RoutesCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface SystemStatsData {
+  cards?: {
+    routes?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function RoutesCard({ widget, onRemove }: RoutesCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<SystemStatsData>({
+      endpoint: '/dashboard-core/stats/overview/system',
+      queryKey: 'dashboard-stats-system',
+    });
+
+  const value = data?.cards?.routes?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.routes?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('routes')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('routes')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<Route className="h-6 w-6 text-orange-500" />}
+        iconBg="bg-orange-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}