feat: add lock/unlock button to partner table in Einstellungen

shop/app/admin/einstellungen/page.tsx

@@ -13,9 +13,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { getPartners, createUser } from '@/lib/actions/users';
+import { getPartners, createUser, updateUserRole } from '@/lib/actions/users';
 import { getPartnerEndCustomers } from '@/lib/actions/end-customers';
-import { Plus, Users, Mail, Eye, Key, CheckCircle, ShieldAlert, Loader2 } from 'lucide-react';
+import { Plus, Users, Mail, Eye, CheckCircle, ShieldAlert, Loader2, Ban, Unlock } from 'lucide-react';
 
 export default function AdminSettings() {
   const [demoActive, setDemoActive] = useState(true);
@@ -31,6 +31,9 @@ export default function AdminSettings() {
   const [partnerCustomers, setPartnerCustomers] = useState<any[]>([]);
   const [loadingCustomers, setLoadingCustomers] = useState(false);
 
+  // Lock/Unlock State
+  const [lockingId, setLockingId] = useState<string | null>(null);
+
   // Create Partner Form States
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -87,6 +90,19 @@ export default function AdminSettings() {
     }
   };
 
+  const handleToggleLock = async (partner: any) => {
+    const newRole = partner.role === 'gesperrt' ? 'partner' : 'gesperrt';
+    setLockingId(partner.id);
+    try {
+      await updateUserRole(partner.id, newRole);
+      await loadPartners();
+    } catch (err) {
+      console.error('Fehler beim Sperren/Entsperren:', err);
+    } finally {
+      setLockingId(null);
+    }
+  };
+
   const handleShowCustomers = async (partner: any) => {
     setSelectedPartner(partner);
     setPartnerCustomers([]);
@@ -159,7 +175,10 @@ export default function AdminSettings() {
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100 dark:divide-white/5">
-                {partners.map((partner) => (
+                {partners.map((partner) => {
+                  const isGesperrt = partner.role === 'gesperrt';
+                  const isLocking = lockingId === partner.id;
+                  return (
                   <tr key={partner.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
                     <td className="py-4 font-medium text-slate-900 dark:text-white">
                       <div className="flex items-center gap-2">
@@ -168,25 +187,49 @@ export default function AdminSettings() {
                       </div>
                     </td>
                     <td className="py-4">
-                      <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-500/10 dark:text-green-400 border border-green-200 dark:border-green-500/20">
+                      {isGesperrt ? (
-                        <CheckCircle className="w-3.5 h-3.5" /> Aktiv
+                        <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400 border border-red-200 dark:border-red-500/20">
-                      </span>
+                          <Ban className="w-3.5 h-3.5" /> Gesperrt
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-500/10 dark:text-green-400 border border-green-200 dark:border-green-500/20">
+                          <CheckCircle className="w-3.5 h-3.5" /> Aktiv
+                        </span>
+                      )}
                     </td>
                     <td className="py-4 text-sm text-slate-500 dark:text-slate-400">
                       {partner.created_at ? new Date(partner.created_at).toLocaleDateString('de-DE') : '–'}
                     </td>
                     <td className="py-4 text-right">
-                      <Button
+                      <div className="flex items-center justify-end gap-2">
-                        variant="outline"
+                        <Button
-                        size="sm"
+                          variant="outline"
-                        onClick={() => handleShowCustomers(partner)}
+                          size="sm"
-                        className="border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/5 gap-1.5"
+                          onClick={() => handleShowCustomers(partner)}
-                      >
+                          className="border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/5 gap-1.5"
-                        <Eye className="w-4 h-4 text-blue-600 dark:text-blue-500" /> Kundenliste
+                        >
-                      </Button>
+                          <Eye className="w-4 h-4 text-blue-600 dark:text-blue-500" /> Kundenliste
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          disabled={isLocking}
+                          onClick={() => handleToggleLock(partner)}
+                          className={isGesperrt
+                            ? 'border-green-300 text-green-700 hover:bg-green-50 dark:border-green-500/30 dark:text-green-400 dark:hover:bg-green-500/10 gap-1.5'
+                            : 'border-red-300 text-red-700 hover:bg-red-50 dark:border-red-500/30 dark:text-red-400 dark:hover:bg-red-500/10 gap-1.5'}
+                        >
+                          {isLocking
+                            ? <Loader2 className="w-4 h-4 animate-spin" />
+                            : isGesperrt
+                              ? <><Unlock className="w-4 h-4" /> Entsperren</>
+                              : <><Ban className="w-4 h-4" /> Sperren</>}
+                        </Button>
+                      </div>
                     </td>
                   </tr>
-                ))}
+                  );
+                })}
               </tbody>
             </table>
           </div>

shop/lib/actions/users.ts

@@ -91,9 +91,14 @@ export async function getPartners() {
   const { data: dbUsers, error: dbError } = await admin
     .from('users')
     .select('id, role')
-    .eq('role', 'partner')
+    .in('role', ['partner', 'gesperrt'])
   if (dbError) throw dbError
 
+  const roleMap: Record<string, string> = {}
+  dbUsers.forEach(u => { roleMap[u.id] = u.role })
+
   const partnerIds = new Set(dbUsers.map(u => u.id))
-  return users.filter(u => partnerIds.has(u.id))
+  return users
+    .filter(u => partnerIds.has(u.id))
+    .map(u => ({ ...u, role: roleMap[u.id] || 'partner' }))
 }