@hed-hog/core 0.0.215 → 0.0.216

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

@@ -0,0 +1,296 @@
+'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 {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import {
+  CheckCircle2,
+  ChevronDown,
+  ExternalLink,
+  KeyRound,
+  XCircle,
+} from 'lucide-react';
+import { useState } from 'react';
+
+interface OAuthProvider {
+  id: string;
+  name: string;
+  color: string;
+  bgColor: string;
+  icon: React.ReactNode;
+  enabled: boolean;
+  clientId: string;
+  clientSecret: string;
+  callbackUrl: string;
+  scopes: string;
+  docUrl: string;
+}
+
+const googleSvg = (
+  <svg className="h-4 w-4" viewBox="0 0 24 24">
+    <path
+      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+      fill="#4285F4"
+    />
+    <path
+      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      fill="#34A853"
+    />
+    <path
+      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      fill="#EA4335"
+    />
+  </svg>
+);
+
+const githubSvg = (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.02 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.82.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+  </svg>
+);
+
+const facebookSvg = (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="#1877F2">
+    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+  </svg>
+);
+
+const microsoftSvg = (
+  <svg className="h-4 w-4" viewBox="0 0 24 24">
+    <rect width="10.5" height="10.5" x="1" y="1" fill="#F25022" />
+    <rect width="10.5" height="10.5" x="12.5" y="1" fill="#7FBA00" />
+    <rect width="10.5" height="10.5" x="1" y="12.5" fill="#00A4EF" />
+    <rect width="10.5" height="10.5" x="12.5" y="12.5" fill="#FFB900" />
+  </svg>
+);
+
+const initialProviders: OAuthProvider[] = [
+  {
+    id: 'google',
+    name: 'Google',
+    color: 'text-foreground',
+    bgColor: 'bg-red-50',
+    icon: googleSvg,
+    enabled: true,
+    clientId: '123456789.apps.googleusercontent.com',
+    clientSecret: '',
+    callbackUrl: 'https://app.heroadmin.com/auth/callback/google',
+    scopes: 'openid email profile',
+    docUrl: 'https://console.cloud.google.com/apis/credentials',
+  },
+  {
+    id: 'github',
+    name: 'GitHub',
+    color: 'text-foreground',
+    bgColor: 'bg-gray-50',
+    icon: githubSvg,
+    enabled: true,
+    clientId: 'Iv1.abc123def456',
+    clientSecret: '',
+    callbackUrl: 'https://app.heroadmin.com/auth/callback/github',
+    scopes: 'read:user user:email',
+    docUrl: 'https://github.com/settings/developers',
+  },
+  {
+    id: 'facebook',
+    name: 'Facebook',
+    color: 'text-foreground',
+    bgColor: 'bg-blue-50',
+    icon: facebookSvg,
+    enabled: false,
+    clientId: '',
+    clientSecret: '',
+    callbackUrl: 'https://app.heroadmin.com/auth/callback/facebook',
+    scopes: 'email public_profile',
+    docUrl: 'https://developers.facebook.com/apps/',
+  },
+  {
+    id: 'microsoft',
+    name: 'Microsoft',
+    color: 'text-foreground',
+    bgColor: 'bg-sky-50',
+    icon: microsoftSvg,
+    enabled: false,
+    clientId: '',
+    clientSecret: '',
+    callbackUrl: 'https://app.heroadmin.com/auth/callback/microsoft',
+    scopes: 'openid email profile User.Read',
+    docUrl:
+      'https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade',
+  },
+];
+
+export default function OAuthConfig() {
+  const [providers, setProviders] = useState(initialProviders);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  function updateProvider(id: string, updates: Partial<OAuthProvider>) {
+    setProviders((prev) =>
+      prev.map((p) => (p.id === id ? { ...p, ...updates } : p))
+    );
+  }
+
+  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-amber-50">
+            <KeyRound className="h-5 w-5 text-amber-600" />
+          </div>
+          <div>
+            <CardTitle className="text-base">Autenticacao OAuth2</CardTitle>
+            <CardDescription>
+              Configure provedores de login social
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {providers.map((p) => (
+          <Collapsible
+            key={p.id}
+            open={openId === p.id}
+            onOpenChange={(isOpen) => setOpenId(isOpen ? p.id : null)}
+          >
+            <div className="rounded-lg border">
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-3 p-4 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div
+                    className={`flex h-9 w-9 items-center justify-center rounded-lg ${p.bgColor}`}
+                  >
+                    {p.icon}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">{p.name}</span>
+                      {p.enabled ? (
+                        <Badge
+                          variant="secondary"
+                          className="bg-emerald-50 text-emerald-700 text-[10px]"
+                        >
+                          <CheckCircle2 className="mr-1 h-2.5 w-2.5" />
+                          Ativo
+                        </Badge>
+                      ) : (
+                        <Badge
+                          variant="secondary"
+                          className="text-[10px] text-muted-foreground"
+                        >
+                          <XCircle className="mr-1 h-2.5 w-2.5" />
+                          Inativo
+                        </Badge>
+                      )}
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {p.clientId
+                        ? `Client ID: ${p.clientId.slice(0, 16)}...`
+                        : 'Nao configurado'}
+                    </span>
+                  </div>
+                  <ChevronDown
+                    className={`h-4 w-4 text-muted-foreground transition-transform ${openId === p.id ? 'rotate-180' : ''}`}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="border-t px-4 pb-4 pt-4 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor={`${p.id}-enabled`} className="text-sm">
+                      Habilitar {p.name}
+                    </Label>
+                    <Switch
+                      id={`${p.id}-enabled`}
+                      checked={p.enabled}
+                      onCheckedChange={(checked) =>
+                        updateProvider(p.id, { enabled: checked })
+                      }
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor={`${p.id}-client-id`}>Client ID</Label>
+                    <Input
+                      id={`${p.id}-client-id`}
+                      value={p.clientId}
+                      onChange={(e) =>
+                        updateProvider(p.id, { clientId: e.target.value })
+                      }
+                      className="font-mono text-sm"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor={`${p.id}-client-secret`}>
+                      Client Secret
+                    </Label>
+                    <Input
+                      id={`${p.id}-client-secret`}
+                      type="password"
+                      value={p.clientSecret}
+                      onChange={(e) =>
+                        updateProvider(p.id, { clientSecret: e.target.value })
+                      }
+                      className="font-mono text-sm"
+                      placeholder="********"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor={`${p.id}-callback`}>Callback URL</Label>
+                    <Input
+                      id={`${p.id}-callback`}
+                      value={p.callbackUrl}
+                      readOnly
+                      className="bg-muted font-mono text-sm"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor={`${p.id}-scopes`}>Scopes</Label>
+                    <Input
+                      id={`${p.id}-scopes`}
+                      value={p.scopes}
+                      onChange={(e) =>
+                        updateProvider(p.id, { scopes: e.target.value })
+                      }
+                      className="font-mono text-sm"
+                    />
+                  </div>
+                  <div className="flex items-center justify-between border-t pt-3">
+                    <a
+                      href={p.docUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Abrir console do provedor
+                    </a>
+                    <Button size="sm">Salvar</Button>
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </div>
+          </Collapsible>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/dashboard/components/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/app/dashboard/components/widgets/permissions-chart.tsx.ejs

@@ -0,0 +1,152 @@
+'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?: any;
+  onRemove?: () => void;
+}
+
+interface UserStatsData {
+  charts?: {
+    permissionDistribution?: Array<{
+      name: string;
+      value: number;
+      color: string;
+    }>;
+  };
+}
+
+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: number, item: any) => 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 justify-between items-center gap-4">
+            <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: any, 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 grid-cols-2 gap-3">
+              {data.map((item: any) => (
+                <div key={item.name} className="flex items-center gap-3">
+                  <div
+                    className="h-3 w-3 rounded-sm"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-foreground">
+                      {item.name}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {item.value} ({Math.round((item.value / total) * 100)}%)
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/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-24 bg-linear-to-br from-muted to-muted/50" />
+      <CardContent className="relative flex flex-col flex-1 overflow-hidden pt-6 pb-10">
+        <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-5" />
+
+        <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>
+  );
+}