refactor(admin): redesign general settings into bento grid

shop/app/admin/einstellungen/page.tsx

@@ -1,16 +1,43 @@
-/* Admin Settings with Database Import / Export functionality */
+/* Admin Settings with Bento Grid Layout & Motion Animations */
 'use client';
 
 import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
 import { Switch } from '@/components/ui/switch';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Download, Upload, Database, AlertTriangle, Loader2, KeyRound, Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi } from 'lucide-react';
+import {
+  Download, Upload, Database, AlertTriangle, Loader2, KeyRound,
+  Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi, Sliders, ShieldAlert, FileArchive
+} from 'lucide-react';
 import { createClient } from '@/lib/supabase/client';
 import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
 import { useRouter } from 'next/navigation';
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring' as const,
+      stiffness: 80,
+      damping: 15
+    }
+  }
+};
+
 export default function AdminSettings() {
   const [demoActive, setDemoActive] = useState(true);
   const [exporting, setExporting] = useState(false);
@@ -40,13 +67,14 @@ export default function AdminSettings() {
           router.push('/auth/login');
           return;
         }
-        const { data: userData, error: userError } = await supabase
-          .from('users')
-          .select('role')
-          .eq('id', user.id)
-          .single();
 
-        if (userError || !userData || userData.role === 'verwaltung') {
+        // Parallele Abfrage von User-Rolle & LicServer Settings
+        const [userRes, licRes] = await Promise.all([
+          supabase.from('users').select('role').eq('id', user.id).single(),
+          supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle()
+        ]);
+
+        if (userRes.error || !userRes.data || userRes.data.role === 'verwaltung') {
           router.push('/admin');
           return;
         }
@@ -54,19 +82,9 @@ export default function AdminSettings() {
         const state = localStorage.getItem('demo_banner_disabled') !== 'true';
         setDemoActive(state);
 
-        // Load current LicServer config from DB
+        if (licRes.data) {
-        try {
+          setLicUrl(licRes.data.licserver_base_url || '');
-          const { data: licRow } = await supabase
+          setLicKey(licRes.data.licserver_api_key || '');
-            .from('settings')
-            .select('licserver_base_url, licserver_api_key')
-            .eq('id', 'licserver')
-            .single();
-          if (licRow) {
-            setLicUrl(licRow.licserver_base_url || '');
-            setLicKey(licRow.licserver_api_key || '');
-          }
-        } catch (dbErr) {
-          console.error("Fehler beim Laden der LicServer-Einstellungen:", dbErr);
         }
       } catch (err) {
         console.error("Fehler bei checkAccess in Einstellungen:", err);
@@ -148,92 +166,121 @@ export default function AdminSettings() {
   }
 
   return (
-    <div className="p-6 max-w-4xl mx-auto text-slate-900 dark:text-white space-y-8">
+    <div className="p-6 max-w-7xl mx-auto text-slate-900 dark:text-white space-y-6">
-      {/* Page Header */}
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex items-center justify-between"
+      >
         <div>
           <h1 className="text-3xl font-extrabold tracking-tight">Admin Einstellungen</h1>
-        <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
+          <p className="text-slate-400 text-xs mt-1">
-          Verwalten Sie globale Shopeinstellungen.
+            Zentrales Bento-Dashboard für System-, Backup- und Lizenz-Konfigurationen.
-        </p>
-      </div>
-
-      {/* Allgemeine Einstellungen */}
-      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-4">
-        <h2 className="text-lg font-bold flex items-center gap-2">
-          Allgemeine Einstellungen
-        </h2>
-        <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/5 rounded-lg border border-slate-100 dark:border-white/5">
-          <div>
-            <p className="font-medium text-sm text-slate-900 dark:text-white">Demo-Warnmeldungen</p>
-            <p className="text-xs text-slate-500 dark:text-slate-400">Schaltet gelbe Banner ein oder aus.</p>
-          </div>
-          <Switch checked={demoActive} onCheckedChange={toggleDemo} />
-        </div>
-      </div>
-
-      {/* Datenimport & -export */}
-      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-6">
-        <div>
-          <h2 className="text-lg font-bold flex items-center gap-2">
-            <Database className="w-5 h-5 text-primary" />
-            Datenimport & -export
-          </h2>
-          <p className="text-slate-500 dark:text-slate-400 text-xs mt-1">
-            Sichern Sie Ihre gesamte Instanz oder stellen Sie Daten wieder her.
           </p>
         </div>
+      </motion.div>
 
+      {/* Dynamic Status Notification */}
       {statusMsg && (
-          <div className={`p-4 rounded-lg text-sm border ${statusType === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400' :
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          className={`p-3 rounded-xl text-sm border ${
+            statusType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
             statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
-              'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400'
+            'bg-sky-500/10 border-sky-500/20 text-sky-400'
-            }`}>
+          }`}
+        >
           {statusMsg}
-          </div>
+        </motion.div>
       )}
 
-        <div className="grid md:grid-cols-2 gap-6">
+      {/* Bento Grid Container */}
-          {/* Export Card */}
+      <motion.div
-          <div className="p-5 bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-xl flex flex-col justify-between space-y-4">
+        variants={containerVariants}
-            <div className="space-y-2">
+        initial="hidden"
-              <h3 className="font-bold text-sm flex items-center gap-2 text-slate-800 dark:text-white">
+        animate="visible"
-                <Download className="w-4 h-4 text-primary" />
+        className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-5"
-                Daten exportieren
+      >
-              </h3>
+        {/* Bento Item 1: System Modus & Banner (1 Spalte) */}
-              <p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+        <motion.div
-                Lädt alle Kategorien, Produkte, Module, Firmen, Endkunden, Bestellungen und SMTP-Einstellungen als ZIP-Datei herunter.
+          variants={cardVariants}
+          whileHover={{ y: -3 }}
+          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-sky-500/30 transition-all duration-300 shadow-md"
+        >
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center">
+              <Sliders className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">System Banner</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Gelbe Demo-Warnmeldungen im gesamten Shop aktivieren oder stummschalten.
               </p>
             </div>
+          </div>
+          <div className="flex items-center justify-between pt-3 border-t border-slate-800/80">
+            <span className="text-xs font-semibold text-slate-300">Banner aktiv</span>
+            <Switch checked={demoActive} onCheckedChange={toggleDemo} />
+          </div>
+        </motion.div>
+
+        {/* Bento Item 2: Daten Export (1 Spalte) */}
+        <motion.div
+          variants={cardVariants}
+          whileHover={{ y: -3 }}
+          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-blue-500/30 transition-all duration-300 shadow-md"
+        >
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
+              <Download className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">DB Backup</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Lädt alle Produkte, Firmen, Lizenzen & Einstellungen als ZIP-Archiv herunter.
+              </p>
+            </div>
+          </div>
           <Button
             onClick={handleExport}
             disabled={exporting || importing}
-              className="w-full bg-primary hover:bg-primary/90 text-white"
+            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold"
           >
             {exporting ? (
               <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
             ) : (
-                <><Download className="w-4 h-4 mr-2" /> ZIP-Backup herunterladen</>
+              <><Download className="w-4 h-4 mr-2" /> ZIP Export</>
             )}
           </Button>
-          </div>
+        </motion.div>
 
-          {/* Import Card */}
+        {/* Bento Item 3: Daten Import (2 Spalten / Span 2 auf Desktop) */}
-          <div className="p-5 bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-xl flex flex-col justify-between space-y-4">
+        <motion.div
-            <div className="space-y-2">
+          variants={cardVariants}
-              <h3 className="font-bold text-sm flex items-center gap-2 text-slate-800 dark:text-white">
+          whileHover={{ y: -3 }}
-                <Upload className="w-4 h-4 text-amber-500" />
+          className="md:col-span-1 lg:col-span-2 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-amber-500/30 transition-all duration-300 shadow-md"
-                Daten importieren
+        >
-              </h3>
+          <div className="space-y-3">
-              <div className="flex items-start gap-2 bg-amber-500/10 border border-amber-500/20 p-2.5 rounded-lg text-amber-600 dark:text-amber-400 text-[11px] leading-snug">
+            <div className="flex items-center justify-between">
-                <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
-                <span>
+                <Upload className="w-5 h-5" />
-                  <strong>Warnung:</strong> Der Import überschreibt alle Daten dieser Instanz unwiderruflich!
+              </div>
+              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 flex items-center gap-1">
+                <ShieldAlert className="w-3 h-3" /> Überschreibt DB
               </span>
             </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Daten Wiederherstellung</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Spielen Sie eine gesicherte ZIP-Sicherungsdatei ein. Warnung: Überschreibt aktuelle Datenbankinhalte.
+              </p>
+            </div>
           </div>
 
-            <div className="space-y-3">
+          <div className="grid sm:grid-cols-2 gap-3 pt-2">
-              <div className="relative border border-dashed border-slate-200 dark:border-white/10 rounded-lg p-3 hover:bg-slate-100/50 dark:hover:bg-white/5 transition">
+            <div className="relative border border-dashed border-slate-700/80 rounded-xl p-3 hover:bg-slate-800/50 transition cursor-pointer flex items-center justify-center text-center">
               <input
                 type="file"
                 accept=".zip"
@@ -241,70 +288,69 @@ export default function AdminSettings() {
                 disabled={exporting || importing}
                 className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
               />
-                <div className="text-center text-xs text-slate-500 dark:text-slate-400">
+              <span className="text-xs font-medium text-slate-300 truncate px-2 flex items-center gap-1.5">
-                  {selectedFile ? (
+                <FileArchive className="w-4 h-4 text-amber-400 shrink-0" />
-                    <span className="text-primary font-semibold">{selectedFile.name}</span>
+                {selectedFile ? selectedFile.name : 'ZIP-Datei auswählen'}
-                  ) : (
+              </span>
-                    "ZIP-Datei auswählen oder hierher ziehen"
-                  )}
-                </div>
             </div>
 
             <Button
               onClick={handleImport}
               disabled={!selectedFile || exporting || importing}
-                variant="secondary"
+              variant="outline"
-                className="w-full border border-slate-200 dark:border-white/10"
+              className="w-full border-amber-500/30 text-amber-300 hover:bg-amber-500/10 rounded-xl h-10 text-xs font-bold"
             >
               {importing ? (
-                  <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Import läuft...</>
+                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Importiert...</>
               ) : (
-                  <><Upload className="w-4 h-4 mr-2" /> ZIP-Backup einspielen</>
+                <><Upload className="w-4 h-4 mr-2" /> ZIP Einspielen</>
               )}
             </Button>
           </div>
+        </motion.div>
+
+        {/* Bento Item 4: LicServer Konfiguration (Breites Bento: 4 Spalten auf Large) */}
+        <motion.div
+          variants={cardVariants}
+          whileHover={{ y: -3 }}
+          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-violet-500/30 transition-all duration-300 shadow-md"
+        >
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 text-violet-400 flex items-center justify-center">
+                <KeyRound className="w-5 h-5" />
               </div>
-        </div>
-      </div>
-      {/* LicServer Konfiguration */}
-      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-5">
               <div>
-          <h2 className="text-lg font-bold flex items-center gap-2">
+                <h3 className="font-bold text-lg text-white">CASPOS Lizenzserver (LicServer)</h3>
-            <KeyRound className="w-5 h-5 text-violet-500" />
+                <p className="text-xs text-slate-400">REST API-Anbindung für automatisierte Lizenzierung</p>
-            LicServer Konfiguration
+              </div>
-          </h2>
-          <p className="text-slate-500 dark:text-slate-400 text-xs mt-1">
-            Verbindungseinstellungen zum CASPOS Lizenzserver.
-          </p>
             </div>
 
-        {/* Status Message */}
+            {/* LicServer Status Pill */}
-        {licMsg && (
+            {licStatus && (
-          <div className={`p-3 rounded-lg text-sm border ${licMsgType === 'success'
+              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
-            ? 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400'
+                licStatus.ok
-            : 'bg-destructive/10 border-destructive/20 text-destructive'
+                  ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+                  : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
               }`}>
-            {licMsg}
+                {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
+                {licStatus.message}
               </div>
             )}
+          </div>
 
-        {/* Connection Test Result */}
+          {licMsg && (
-        {licStatus && (
+            <div className={`p-3 rounded-xl text-xs font-medium border ${
-          <div className={`flex items-center gap-2 p-3 rounded-lg text-sm border ${licStatus.ok
+              licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
-            ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
-            : 'bg-amber-500/10 border-amber-500/20 text-amber-600 dark:text-amber-400'
             }`}>
-            {licStatus.ok
+              {licMsg}
-              ? <CheckCircle2 className="w-4 h-4 shrink-0" />
-              : <XCircle className="w-4 h-4 shrink-0" />}
-            {licStatus.message}
             </div>
           )}
 
           <div className="grid md:grid-cols-2 gap-4">
             {/* Base URL */}
             <div className="space-y-1.5">
-            <Label htmlFor="lic-url" className="text-xs font-medium flex items-center gap-1.5">
+              <Label htmlFor="lic-url" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                 <Server className="w-3.5 h-3.5 text-slate-400" /> Server URL
               </Label>
               <Input
@@ -312,14 +358,13 @@ export default function AdminSettings() {
                 value={licUrl}
                 onChange={e => setLicUrl(e.target.value)}
                 placeholder="http://192.168.178.174:9980"
-              className="text-sm font-mono"
+                className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
               />
-            <p className="text-[10px] text-slate-400">URL des CASPOS Lizenzservers</p>
             </div>
 
             {/* API Key */}
             <div className="space-y-1.5">
-            <Label htmlFor="lic-key" className="text-xs font-medium flex items-center gap-1.5">
+              <Label htmlFor="lic-key" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
                 <KeyRound className="w-3.5 h-3.5 text-slate-400" /> API-Key
               </Label>
               <div className="relative">
@@ -329,23 +374,22 @@ export default function AdminSettings() {
                   value={licKey}
                   onChange={e => setLicKey(e.target.value)}
                   placeholder="Ihr X-Api-Key"
-                className="text-sm font-mono pr-10"
+                  className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
                 />
                 <button
                   type="button"
                   onClick={() => setShowKey(v => !v)}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
                   aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
                 >
                   {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                 </button>
               </div>
-
             </div>
           </div>
 
-          {/* Actions */}
+          {/* Action Buttons */}
-          <div className="flex gap-3 pt-1">
+          <div className="flex items-center justify-end gap-3 pt-2">
             <Button
               id="lic-save-btn"
               disabled={licSaving || licTesting}
@@ -358,7 +402,7 @@ export default function AdminSettings() {
                 setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
                 setLicSaving(false);
               }}
-              className="bg-violet-600 hover:bg-violet-500 text-white"
+              className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
             >
               {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
               Speichern
@@ -371,20 +415,19 @@ export default function AdminSettings() {
               onClick={async () => {
                 setLicTesting(true);
                 setLicStatus(null);
-                // Save first, then test
                 await saveLicServerConfig(licUrl, licKey);
                 const result = await testLicServerConnection();
                 setLicStatus(result);
                 setLicTesting(false);
               }}
-              className="border-white/10"
+              className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
             >
               {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
               Verbindung testen
             </Button>
           </div>
-      </div>
+        </motion.div>
+      </motion.div>
     </div>
   );
 }
-