@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/core.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/app/dashboard/components/widgets/core.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/app/dashboard/components/widgets/core.storage-config.tsx.ejs

@@ -0,0 +1,196 @@
+'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,
+  StorageConfigWidgetData,
+} from '@/types/widget-data';
+import { CheckCircle2, HardDrive } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const defaultStorageConfigData: StorageConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    totalProfiles: 0,
+    activeProfiles: 0,
+    defaultProfileId: null,
+  },
+  providers: [],
+  profiles: [],
+};
+
+interface StorageConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function StorageConfig({
+  widget,
+  onRemove,
+}: StorageConfigProps) {
+  const t = useTranslations('core.DashboardPage.storageConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    StorageConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.storageConfig,
+  });
+
+  const storageData = data ?? defaultStorageConfigData;
+  const defaultProfile = storageData.profiles.find(
+    (profile) => profile.id === storageData.status.defaultProfileId
+  );
+
+  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-violet-50">
+                <HardDrive className="h-5 w-5 text-violet-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                storageData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {storageData.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('profiles')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.status.totalProfiles}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('active')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.status.activeProfiles}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('providers')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {storageData.providers.length}
+              </p>
+            </div>
+          </div>
+
+          <div className="rounded-lg border p-3">
+            <p className="mb-1 text-xs text-muted-foreground">
+              {t('defaultProfile')}
+            </p>
+            <p className="truncate text-sm font-medium">
+              {defaultProfile?.name || t('notSet')}
+            </p>
+            {defaultProfile && (
+              <p className="mt-1 text-[11px] text-muted-foreground">
+                {defaultProfile.providerType.toUpperCase()} |{' '}
+                {defaultProfile.bucketName}
+              </p>
+            )}
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            {storageData.providers.map((provider) => (
+              <div
+                key={provider.providerType}
+                className="rounded-lg border p-3"
+              >
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-medium">
+                    {provider.providerType.toUpperCase()}
+                  </p>
+                  <Badge variant="outline" className="text-[10px]">
+                    {provider.defaults} {t('defaults')}
+                  </Badge>
+                </div>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  {t('providerSummary', {
+                    total: provider.total,
+                    active: provider.active,
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="min-h-0 flex-1 space-y-2 overflow-auto">
+            {storageData.profiles.slice(0, 4).map((profile) => (
+              <div key={profile.id} className="rounded-lg border p-3">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-sm font-medium">{profile.name}</p>
+                  <div className="flex items-center gap-1.5">
+                    {profile.isDefault && (
+                      <Badge variant="outline" className="text-[10px]">
+                        {t('defaultTag')}
+                      </Badge>
+                    )}
+                    <Badge
+                      variant="secondary"
+                      className={
+                        profile.isActive
+                          ? 'bg-emerald-50 text-emerald-700'
+                          : 'bg-muted text-muted-foreground'
+                      }
+                    >
+                      {profile.isActive ? (
+                        <>
+                          <CheckCircle2 className="mr-1 h-3 w-3" />
+                          {t('active')}
+                        </>
+                      ) : (
+                        t('inactive')
+                      )}
+                    </Badge>
+                  </div>
+                </div>
+                <p className="mt-1 truncate text-[11px] text-muted-foreground">
+                  {profile.providerType.toUpperCase()} | {profile.bucketName}
+                </p>
+              </div>
+            ))}
+            {storageData.profiles.length === 0 && (
+              <p className="text-xs text-muted-foreground">{t('noProfiles')}</p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}