Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add lock/unlock button to partner table in Einstellungen
All checks were successful
Staging Build / build (push) Successful in 2m34s
Details

Browse Source
This commit is contained in:
DanielS
2026-06-24 17:05:16 +02:00
parent cd04309e3e
commit 6b66cc5c41
2 changed files with 65 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
shop/app/admin/einstellungen/page.tsx
View File

@@ -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">
<CheckCircle className="w-3.5 h-3.5" /> Aktiv
</span>
{isGesperrt ? (
<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">
<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
variant="outline"
size="sm"
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>
<div className="flex items-center justify-end gap-2">
<Button
variant="outline"
size="sm"
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>
<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>

9
shop/lib/actions/users.ts
View File

@@ -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' }))
}