@hed-hog/core 0.0.296 → 0.0.298

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -9,288 +8,168 @@ import {
   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';
+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';
 
-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 defaultOAuthConfigData: OAuthConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    enabledProviderCount: 0,
+    configuredProviderCount: 0,
+    connectedAccountCount: 0,
+  },
+  providers: [],
+};
 
-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>
-);
+interface OAuthConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
 
-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>
-);
+export default function OAuthConfig({ widget, onRemove }: OAuthConfigProps) {
+  const t = useTranslations('core.DashboardPage.oauthConfig');
 
-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 { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    OAuthConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.oauthConfig,
+  });
 
-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))
-    );
-  }
+  const oauthData = data ?? defaultOAuthConfigData;
 
   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" />
+    <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>
-          <div>
-            <CardTitle className="text-base">Autenticacao OAuth2</CardTitle>
-            <CardDescription>
-              Configure provedores de login social
-            </CardDescription>
+        </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>
-      </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 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>
-                    <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 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>
-              </CollapsibleContent>
-            </div>
-          </Collapsible>
-        ))}
-      </CardContent>
-    </Card>
+              ))
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {t('noProviders')}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
   );
 }

package/hedhog/frontend/app/dashboard/components/widgets/profile-card.tsx.ejs

@@ -39,8 +39,8 @@ function ProfileContent({ profile }: { profile: ProfileData }) {
 
   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="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">
@@ -84,7 +84,7 @@ function ProfileContent({ profile }: { profile: ProfileData }) {
           </Button>
         </div>
 
-        <Separator className="my-5" />
+        <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">