@hed-hog/core 0.0.215 → 0.0.216

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

@@ -0,0 +1,340 @@
+'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 { 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';
+
+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',
+  },
+  {
+    value: 'azure',
+    label: 'Azure Blob',
+    icon: <Cloud className="h-4 w-4" />,
+    description: 'Azure Blob Storage',
+  },
+];
+
+export default function StorageConfig() {
+  const [provider, setProvider] = useState<StorageProvider>('local');
+  const [localPath, setLocalPath] = useState('/var/data/uploads');
+  const [localMaxSize, setLocalMaxSize] = useState('50');
+
+  const [s3Bucket, setS3Bucket] = useState('');
+  const [s3Region, setS3Region] = useState('us-east-1');
+  const [s3AccessKey, setS3AccessKey] = useState('');
+  const [s3SecretKey, setS3SecretKey] = useState('');
+  const [s3Prefix, setS3Prefix] = useState('uploads/');
+
+  const [gcsBucket, setGcsBucket] = useState('');
+  const [gcsProjectId, setGcsProjectId] = useState('');
+  const [gcsKeyFile, setGcsKeyFile] = useState('');
+
+  const [azureAccount, setAzureAccount] = useState('');
+  const [azureKey, setAzureKey] = useState('');
+  const [azureContainer, setAzureContainer] = useState('');
+  const [azureEndpoint, setAzureEndpoint] = useState('');
+
+  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}
+              </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>
+            </div>
+          </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"
+              />
+            </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>
+            <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>
+          </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>
+        )}
+
+        {/* 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>
+            </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>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,275 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ImageIcon, Palette, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+const PRESET_COLORS = [
+  { name: 'Azul', value: '#3b82f6' },
+  { name: 'Indigo', value: '#6366f1' },
+  { name: 'Violeta', value: '#8b5cf6' },
+  { name: 'Rosa', value: '#ec4899' },
+  { name: 'Vermelho', value: '#ef4444' },
+  { name: 'Laranja', value: '#f97316' },
+  { name: 'Amber', value: '#f59e0b' },
+  { name: 'Esmeralda', value: '#10b981' },
+  { name: 'Teal', value: '#14b8a6' },
+  { name: 'Ciano', value: '#06b6d4' },
+  { name: 'Cinza', value: '#6b7280' },
+  { name: 'Zinc', value: '#18181b' },
+];
+
+export default function ThemeConfig() {
+  const [title, setTitle] = useState('HeroAdmin');
+  const [slogan, setSlogan] = useState('Painel de Controle Inteligente');
+  const [primaryColor, setPrimaryColor] = useState('#3b82f6');
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [faviconPreview, setFaviconPreview] = useState<string | null>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const faviconRef = useRef<HTMLInputElement>(null);
+
+  function handleFileChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    setter: (url: string | null) => void
+  ) {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => setter(reader.result as string);
+      reader.readAsDataURL(file);
+    }
+  }
+
+  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-rose-50">
+            <Palette className="h-5 w-5 text-rose-600" />
+          </div>
+          <div>
+            <CardTitle className="text-base">Aparencia e Tema</CardTitle>
+            <CardDescription>
+              Personalize a identidade visual do sistema
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Preview */}
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <p className="mb-3 text-xs font-medium text-muted-foreground">
+            Pre-visualizacao
+          </p>
+          <div className="flex items-center gap-3 rounded-lg border bg-background p-3">
+            <div
+              className="flex h-10 w-10 items-center justify-center rounded-lg"
+              style={{ backgroundColor: primaryColor }}
+            >
+              {logoPreview ? (
+                <img
+                  src={logoPreview}
+                  alt="Logo"
+                  className="h-6 w-6 rounded object-contain"
+                />
+              ) : (
+                <span className="text-sm font-bold text-white">
+                  {title.charAt(0)}
+                </span>
+              )}
+            </div>
+            <div>
+              <span
+                className="text-sm font-bold"
+                style={{ color: primaryColor }}
+              >
+                {title || 'Titulo do Sistema'}
+              </span>
+              <p className="text-xs text-muted-foreground">
+                {slogan || 'Slogan do sistema'}
+              </p>
+            </div>
+            {faviconPreview && (
+              <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+                <img
+                  src={faviconPreview}
+                  alt="Favicon"
+                  className="h-4 w-4 object-contain"
+                />
+                Favicon
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Logo + Favicon */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label>Logo do sistema</Label>
+            <div
+              onClick={() => logoRef.current?.click()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') logoRef.current?.click();
+              }}
+              role="button"
+              tabIndex={0}
+              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
+            >
+              {logoPreview ? (
+                <img
+                  src={logoPreview}
+                  alt="Logo"
+                  className="h-12 w-12 object-contain"
+                />
+              ) : (
+                <>
+                  <Upload className="h-5 w-5 text-muted-foreground" />
+                  <span className="text-xs text-muted-foreground">
+                    Clique para enviar
+                  </span>
+                </>
+              )}
+            </div>
+            <input
+              ref={logoRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(e) => handleFileChange(e, setLogoPreview)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Favicon</Label>
+            <div
+              onClick={() => faviconRef.current?.click()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') faviconRef.current?.click();
+              }}
+              role="button"
+              tabIndex={0}
+              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
+            >
+              {faviconPreview ? (
+                <img
+                  src={faviconPreview}
+                  alt="Favicon"
+                  className="h-8 w-8 object-contain"
+                />
+              ) : (
+                <>
+                  <ImageIcon className="h-5 w-5 text-muted-foreground" />
+                  <span className="text-xs text-muted-foreground">
+                    16x16 ou 32x32 px
+                  </span>
+                </>
+              )}
+            </div>
+            <input
+              ref={faviconRef}
+              type="file"
+              accept="image/png,image/ico,image/x-icon,image/svg+xml"
+              className="hidden"
+              onChange={(e) => handleFileChange(e, setFaviconPreview)}
+            />
+          </div>
+        </div>
+
+        {/* Title + Slogan */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="sys-title">Titulo do sistema</Label>
+            <Input
+              id="sys-title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Meu Sistema"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="sys-slogan">Slogan</Label>
+            <Input
+              id="sys-slogan"
+              value={slogan}
+              onChange={(e) => setSlogan(e.target.value)}
+              placeholder="Seu slogan aqui"
+            />
+          </div>
+        </div>
+
+        {/* Color Picker */}
+        <div className="space-y-3">
+          <Label>Cor primaria</Label>
+          <div className="flex items-center gap-3">
+            <div
+              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border"
+              style={{ backgroundColor: primaryColor }}
+            >
+              <input
+                type="color"
+                value={primaryColor}
+                onChange={(e) => setPrimaryColor(e.target.value)}
+                className="h-full w-full cursor-pointer opacity-0"
+                title="Selecionar cor"
+              />
+            </div>
+            <Input
+              value={primaryColor}
+              onChange={(e) => setPrimaryColor(e.target.value)}
+              className="w-28 font-mono text-sm uppercase"
+              maxLength={7}
+            />
+          </div>
+          <div className="flex flex-wrap gap-2 pt-1">
+            {PRESET_COLORS.map((c) => (
+              <button
+                key={c.value}
+                type="button"
+                onClick={() => setPrimaryColor(c.value)}
+                className={`group relative flex h-7 w-7 items-center justify-center rounded-full border-2 transition-all ${
+                  primaryColor === c.value
+                    ? 'border-foreground scale-110'
+                    : 'border-transparent hover:scale-105'
+                }`}
+                title={c.name}
+              >
+                <span
+                  className="h-5 w-5 rounded-full"
+                  style={{ backgroundColor: c.value }}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end border-t pt-4">
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setTitle('HeroAdmin');
+                setSlogan('Painel de Controle Inteligente');
+                setPrimaryColor('#3b82f6');
+                setLogoPreview(null);
+                setFaviconPreview(null);
+              }}
+            >
+              Restaurar padrao
+            </Button>
+            <Button size="sm">Salvar</Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}