@hed-hog/core 0.0.296 → 0.0.298

package/hedhog/frontend/app/dashboard/components/widgets/storage-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,332 +8,189 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  AlertCircle,
-  CheckCircle2,
-  Cloud,
-  FolderOpen,
-  HardDrive,
-} from 'lucide-react';
-import { useState } from 'react';
-
-type StorageProvider = 'local' | 's3' | 'gcs' | 'azure';
+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 providerList: {
-  value: StorageProvider;
-  label: string;
-  icon: React.ReactNode;
-  description: string;
-}[] = [
-  {
-    value: 'local',
-    label: 'Local',
-    icon: <FolderOpen className="h-4 w-4" />,
-    description: 'Disco do servidor',
-  },
-  {
-    value: 's3',
-    label: 'AWS S3',
-    icon: <Cloud className="h-4 w-4" />,
-    description: 'Amazon S3 Bucket',
-  },
-  {
-    value: 'gcs',
-    label: 'Google Cloud',
-    icon: <Cloud className="h-4 w-4" />,
-    description: 'Google Cloud Storage',
+const defaultStorageConfigData: StorageConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    totalProfiles: 0,
+    activeProfiles: 0,
+    defaultProfileId: null,
   },
-  {
-    value: 'azure',
-    label: 'Azure Blob',
-    icon: <Cloud className="h-4 w-4" />,
-    description: 'Azure Blob Storage',
-  },
-];
+  providers: [],
+  profiles: [],
+};
 
-export default function StorageConfig() {
-  const [provider, setProvider] = useState<StorageProvider>('local');
-  const [localPath, setLocalPath] = useState('/var/data/uploads');
-  const [localMaxSize, setLocalMaxSize] = useState('50');
+interface StorageConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
 
-  const [s3Bucket, setS3Bucket] = useState('');
-  const [s3Region, setS3Region] = useState('us-east-1');
-  const [s3AccessKey, setS3AccessKey] = useState('');
-  const [s3SecretKey, setS3SecretKey] = useState('');
-  const [s3Prefix, setS3Prefix] = useState('uploads/');
+export default function StorageConfig({
+  widget,
+  onRemove,
+}: StorageConfigProps) {
+  const t = useTranslations('core.DashboardPage.storageConfig');
 
-  const [gcsBucket, setGcsBucket] = useState('');
-  const [gcsProjectId, setGcsProjectId] = useState('');
-  const [gcsKeyFile, setGcsKeyFile] = useState('');
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    StorageConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.storageConfig,
+  });
 
-  const [azureAccount, setAzureAccount] = useState('');
-  const [azureKey, setAzureKey] = useState('');
-  const [azureContainer, setAzureContainer] = useState('');
-  const [azureEndpoint, setAzureEndpoint] = useState('');
+  const storageData = data ?? defaultStorageConfigData;
+  const defaultProfile = storageData.profiles.find(
+    (profile) => profile.id === storageData.status.defaultProfileId
+  );
 
   return (
-    <Card className="h-full">
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <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">
-                Armazenamento de Arquivos
-              </CardTitle>
-              <CardDescription>
-                Configure onde os arquivos do sistema serao armazenados
-              </CardDescription>
-            </div>
-          </div>
-          <Badge variant="secondary" className="bg-emerald-50 text-emerald-700">
-            <CheckCircle2 className="mr-1 h-3 w-3" />
-            Configurado
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Provider Selector */}
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-          {providerList.map((p) => (
-            <button
-              key={p.value}
-              type="button"
-              onClick={() => setProvider(p.value)}
-              className={`flex flex-col items-center gap-1.5 rounded-lg border-2 p-3 text-center transition-all ${
-                provider === p.value
-                  ? 'border-foreground bg-foreground/3'
-                  : 'border-border hover:border-foreground/20'
-              }`}
-            >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full ${
-                  provider === p.value
-                    ? 'bg-foreground text-background'
-                    : 'bg-muted text-muted-foreground'
-                }`}
-              >
-                {p.icon}
+    <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>
-              <span className="text-xs font-medium">{p.label}</span>
-            </button>
-          ))}
-        </div>
-
-        {/* Local Fields */}
-        {provider === 'local' && (
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="local-path">Caminho do diretorio</Label>
-              <Input
-                id="local-path"
-                value={localPath}
-                onChange={(e) => setLocalPath(e.target.value)}
-                placeholder="/var/data/uploads"
-                className="font-mono text-sm"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="local-max-size">
-                Tamanho maximo por arquivo (MB)
-              </Label>
-              <Input
-                id="local-max-size"
-                type="number"
-                value={localMaxSize}
-                onChange={(e) => setLocalMaxSize(e.target.value)}
-              />
-            </div>
-            <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
-              <div className="flex items-start gap-2">
-                <AlertCircle className="mt-0.5 h-4 w-4 text-blue-600" />
-                <p className="text-xs text-blue-800">
-                  Certifique-se de que o diretorio existe e que o servidor tem
-                  permissoes de leitura e escrita.
-                </p>
+              <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>
-        )}
-
-        {/* AWS S3 Fields */}
-        {provider === 's3' && (
-          <div className="space-y-4">
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="s3-bucket">Bucket</Label>
-                <Input
-                  id="s3-bucket"
-                  value={s3Bucket}
-                  onChange={(e) => setS3Bucket(e.target.value)}
-                  placeholder="meu-bucket"
-                  className="font-mono text-sm"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Regiao</Label>
-                <Select value={s3Region} onValueChange={setS3Region}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="us-east-1">
-                      US East (N. Virginia)
-                    </SelectItem>
-                    <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
-                    <SelectItem value="eu-west-1">EU (Ireland)</SelectItem>
-                    <SelectItem value="eu-central-1">EU (Frankfurt)</SelectItem>
-                    <SelectItem value="sa-east-1">
-                      South America (Sao Paulo)
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="s3-access-key">Access Key ID</Label>
-              <Input
-                id="s3-access-key"
-                value={s3AccessKey}
-                onChange={(e) => setS3AccessKey(e.target.value)}
-                placeholder="AKIAIOSFODNN7EXAMPLE"
-                className="font-mono text-sm"
-              />
+        </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="space-y-2">
-              <Label htmlFor="s3-secret-key">Secret Access Key</Label>
-              <Input
-                id="s3-secret-key"
-                type="password"
-                value={s3SecretKey}
-                onChange={(e) => setS3SecretKey(e.target.value)}
-                className="font-mono text-sm"
-              />
+            <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="space-y-2">
-              <Label htmlFor="s3-prefix">Prefixo (pasta)</Label>
-              <Input
-                id="s3-prefix"
-                value={s3Prefix}
-                onChange={(e) => setS3Prefix(e.target.value)}
-                placeholder="uploads/"
-                className="font-mono text-sm"
-              />
+            <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>
-        )}
 
-        {/* Google Cloud Storage Fields */}
-        {provider === 'gcs' && (
-          <div className="space-y-4">
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="gcs-project-id">Project ID</Label>
-                <Input
-                  id="gcs-project-id"
-                  value={gcsProjectId}
-                  onChange={(e) => setGcsProjectId(e.target.value)}
-                  placeholder="meu-projeto-123"
-                  className="font-mono text-sm"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="gcs-bucket">Bucket</Label>
-                <Input
-                  id="gcs-bucket"
-                  value={gcsBucket}
-                  onChange={(e) => setGcsBucket(e.target.value)}
-                  placeholder="meu-bucket-gcs"
-                  className="font-mono text-sm"
-                />
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="gcs-key-file">
-                Chave JSON da Service Account
-              </Label>
-              <textarea
-                id="gcs-key-file"
-                className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                value={gcsKeyFile}
-                onChange={(e) => setGcsKeyFile(e.target.value)}
-                placeholder='{"type": "service_account", ...}'
-              />
-            </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>
-        )}
 
-        {/* Azure Blob Storage Fields */}
-        {provider === 'azure' && (
-          <div className="space-y-4">
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="azure-account">Storage Account Name</Label>
-                <Input
-                  id="azure-account"
-                  value={azureAccount}
-                  onChange={(e) => setAzureAccount(e.target.value)}
-                  placeholder="meuaccount"
-                  className="font-mono text-sm"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="azure-container">Container</Label>
-                <Input
-                  id="azure-container"
-                  value={azureContainer}
-                  onChange={(e) => setAzureContainer(e.target.value)}
-                  placeholder="arquivos"
-                  className="font-mono text-sm"
-                />
+          <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="space-y-2">
-              <Label htmlFor="azure-key">Access Key</Label>
-              <Input
-                id="azure-key"
-                type="password"
-                value={azureKey}
-                onChange={(e) => setAzureKey(e.target.value)}
-                className="font-mono text-sm"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="azure-endpoint">
-                Endpoint personalizado (opcional)
-              </Label>
-              <Input
-                id="azure-endpoint"
-                value={azureEndpoint}
-                onChange={(e) => setAzureEndpoint(e.target.value)}
-                placeholder="https://meuaccount.blob.core.windows.net"
-                className="font-mono text-sm"
-              />
-            </div>
+            ))}
           </div>
-        )}
 
-        {/* Actions */}
-        <div className="flex items-center justify-end border-t pt-4">
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm">
-              Testar conexao
-            </Button>
-            <Button size="sm">Salvar</Button>
+          <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>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
   );
 }