feat: add company selection to user dialog, require email password link on user creation, password validation with confirmation, and company grouping with search

shop/components/admin/user-list.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useRef, useEffect, Fragment } from 'react'
 import { useRouter } from 'next/navigation'
 import {
   Table,
@@ -11,7 +11,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Key, Trash2, Mail, Loader2, Building2, Ban, Unlock } from 'lucide-react'
+import { Key, Trash2, Mail, Loader2, Building2, Ban, Unlock, Search } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { deleteUser, resetPassword, updateUserRole } from '@/lib/actions/users'
 import { assignCompanyToUser } from '@/lib/actions/companies'
@@ -39,6 +39,22 @@ interface UserListProps {
 export function UserList({ initialUsers, companies }: UserListProps) {
   const router = useRouter()
   const [loadingId, setLoadingId] = useState<string | null>(null)
+  const [companyDropdownOpen, setCompanyDropdownOpen] = useState<string | null>(null)
+  const [companySearch, setCompanySearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [groupByCompany, setGroupByCompany] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setCompanyDropdownOpen(null)
+        setCompanySearch('')
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
 
   const handleDelete = async (id: string) => {
     if (confirm('Möchten Sie diesen Benutzer wirklich löschen?')) {
@@ -95,6 +111,25 @@ export function UserList({ initialUsers, companies }: UserListProps) {
     }
   }
 
+  const filteredUsers = initialUsers.filter((user) => {
+    const emailMatch = user.email?.toLowerCase().includes(searchQuery.toLowerCase())
+    const companyMatch = user.company_name?.toLowerCase().includes(searchQuery.toLowerCase())
+    const roleMatch = user.role?.toLowerCase().includes(searchQuery.toLowerCase())
+    return emailMatch || companyMatch || roleMatch
+  })
+
+  const displayUsers = groupByCompany
+    ? [...filteredUsers].sort((a, b) => {
+        const nameA = a.company_name || 'Keine Firma'
+        const nameB = b.company_name || 'Keine Firma'
+        if (!a.company_name && b.company_name) return 1
+        if (a.company_name && !b.company_name) return -1
+        return nameA.localeCompare(nameB)
+      })
+    : filteredUsers
+
+  let lastCompanyName: string | null = null
+
   return (
     <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
       <CardHeader>
@@ -104,6 +139,30 @@ export function UserList({ initialUsers, companies }: UserListProps) {
         </CardDescription>
       </CardHeader>
       <CardContent>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+          <div className="relative w-full max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+            <input
+              type="text"
+              placeholder="Benutzer suchen (E-Mail, Firma, Rolle)..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-950 transition-all"
+            />
+          </div>
+          <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
+            <input
+              type="checkbox"
+              id="groupByCompany"
+              checked={groupByCompany}
+              onChange={(e) => setGroupByCompany(e.target.checked)}
+              className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
+            />
+            <label htmlFor="groupByCompany" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
+              Nach Firma gruppieren
+            </label>
+          </div>
+        </div>
         <Table>
           <TableHeader>
             <TableRow className="border-white/10 hover:bg-white/5">
@@ -115,96 +174,154 @@ export function UserList({ initialUsers, companies }: UserListProps) {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {initialUsers.map((user) => {
+            {displayUsers.map((user: any) => {
               const role: Role = (['admin', 'partner', 'gesperrt'].includes(user.role) ? user.role : 'partner') as Role
               const isLoadingRole = loadingId === user.id + '-role'
               const isLoadingCompany = loadingId === user.id + '-company'
               const isLoadingDelete = loadingId === user.id
 
+              const currentCompanyName = user.company_name || 'Keine Firma'
+              const showGroupHeader = groupByCompany && currentCompanyName !== lastCompanyName
+              lastCompanyName = currentCompanyName
+
               return (
-                <TableRow key={user.id} className="border-white/5 hover:bg-white/5 transition-colors">
-                  <TableCell className="font-medium text-white">
-                    <div className="flex items-center gap-2">
-                      <Mail className="w-4 h-4 text-slate-500" />
-                      {user.email}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Badge className={ROLE_BADGE_CLASSES[role]}>
-                        {ROLE_LABELS[role]}
-                      </Badge>
-                      {isLoadingRole ? (
-                        <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
-                      ) : (
-                        <select
-                          value={role}
-                          onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
-                          className="ml-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50"
-                        >
-                          <option value="admin">Admin</option>
-                          <option value="partner">Partner</option>
-                          <option value="gesperrt">Gesperrt</option>
-                        </select>
-                      )}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Building2 className="w-4 h-4 text-slate-500 shrink-0" />
-                      {isLoadingCompany ? (
-                        <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
-                      ) : (
-                        <select
-                          value={user.company_id || ''}
-                          onChange={(e) => handleCompanyChange(user.id, e.target.value)}
-                          className="text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[150px]"
-                        >
-                          <option value="">Keine Firma</option>
-                          {companies.map((c) => (
-                            <option key={c.id} value={c.id}>{c.name}</option>
-                          ))}
-                        </select>
-                      )}
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-slate-400 text-sm">
-                    {user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleString('de-DE') : 'Noch nie'}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex justify-end gap-2">
-                       <Button
-                         variant="ghost"
-                         size="icon"
-                         className="h-8 w-8 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10"
-                         title="Passwort zurücksetzen"
-                         onClick={() => handleResetPassword(user.email)}
-                       >
-                         <Key className="h-4 w-4" />
-                       </Button>
-                       <Button
-                         variant="ghost"
-                         size="icon"
-                         className={role === 'gesperrt' ? 'h-8 w-8 text-green-500 hover:text-green-400 hover:bg-green-500/10' : 'h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10'}
-                         title={role === 'gesperrt' ? 'Entsperren' : 'Sperren'}
-                         onClick={() => handleToggleLock(user.id, role)}
-                         disabled={loadingId === user.id + '-lock'}
-                       >
-                         {loadingId === user.id + '-lock' ? <Loader2 className="h-4 w-4 animate-spin" /> : role === 'gesperrt' ? <Unlock className="h-4 w-4" /> : <Ban className="h-4 w-4" />}
-                       </Button>
-                       <Button
-                         variant="ghost"
-                         size="icon"
-                         className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
-                         title="Löschen"
-                         onClick={() => handleDelete(user.id)}
-                         disabled={isLoadingDelete}
-                       >
-                         {isLoadingDelete ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
-                       </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
+                <Fragment key={user.id}>
+                  {showGroupHeader && (
+                    <TableRow className="bg-white/5 border-y border-white/10 hover:bg-white/5">
+                      <TableCell colSpan={5} className="font-semibold text-primary py-2 px-4 text-xs tracking-wider uppercase">
+                        Firma: {currentCompanyName}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  <TableRow className="border-white/5 hover:bg-white/5 transition-colors">
+                    <TableCell className="font-medium text-white">
+                      <div className="flex items-center gap-2">
+                        <Mail className="w-4 h-4 text-slate-500" />
+                        {user.email}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {isLoadingRole ? (
+                          <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
+                        ) : (
+                          <select
+                            value={role}
+                            onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
+                            className={`text-xs font-semibold rounded px-3 py-1.5 cursor-pointer focus:outline-none focus:ring-2 transition-colors ${
+                              role === 'admin'
+                                ? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 focus:ring-purple-500/50'
+                                : role === 'gesperrt'
+                                ? 'bg-red-500/20 text-red-300 border border-red-500/40 focus:ring-red-500/50'
+                                : 'bg-blue-500/20 text-blue-300 border border-blue-500/40 focus:ring-blue-500/50'
+                            }`}
+                            style={{ appearance: 'auto' }}
+                          >
+                            <option value="admin">Admin</option>
+                            <option value="partner">Partner</option>
+                            <option value="gesperrt">Gesperrt</option>
+                          </select>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="relative" ref={companyDropdownOpen === user.id ? dropdownRef : undefined}>
+                        <div className="flex items-center gap-2">
+                          <Building2 className="w-4 h-4 text-slate-500 shrink-0" />
+                          {isLoadingCompany ? (
+                            <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
+                          ) : (
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setCompanyDropdownOpen(companyDropdownOpen === user.id ? null : user.id)
+                                setCompanySearch('')
+                              }}
+                              className="text-xs bg-white/5 border border-white/10 rounded px-3 py-1.5 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[180px] truncate text-left"
+                            >
+                              {user.company_name || 'Keine Firma'}
+                            </button>
+                          )}
+                        </div>
+                        {companyDropdownOpen === user.id && (
+                          <div className="absolute z-50 mt-1 left-0 w-56 bg-slate-900 border border-white/10 rounded-lg shadow-xl overflow-hidden">
+                            <div className="p-2 border-b border-white/10">
+                              <input
+                                type="text"
+                                placeholder="Firma suchen..."
+                                value={companySearch}
+                                onChange={(e) => setCompanySearch(e.target.value)}
+                                className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                                autoFocus
+                              />
+                            </div>
+                            <div className="max-h-40 overflow-y-auto">
+                              <button
+                                type="button"
+                                onClick={() => { handleCompanyChange(user.id, ''); setCompanyDropdownOpen(null); setCompanySearch(''); }}
+                                className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
+                                  !user.company_id ? 'text-primary font-semibold' : 'text-slate-300'
+                                }`}
+                              >
+                                Keine Firma
+                              </button>
+                              {companies
+                                .filter((c) => c.name.toLowerCase().includes(companySearch.toLowerCase()))
+                                .map((c) => (
+                                  <button
+                                    key={c.id}
+                                    type="button"
+                                    onClick={() => { handleCompanyChange(user.id, c.id); setCompanyDropdownOpen(null); setCompanySearch(''); }}
+                                    className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
+                                      user.company_id === c.id ? 'text-primary font-semibold' : 'text-slate-300'
+                                    }`}
+                                  >
+                                    {c.name}
+                                  </button>
+                                ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-slate-400 text-sm">
+                      {user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleString('de-DE') : 'Noch nie'}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                         <Button
+                           variant="ghost"
+                           size="icon"
+                           className="h-8 w-8 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10"
+                           title="Passwort zurücksetzen"
+                           onClick={() => handleResetPassword(user.email)}
+                         >
+                           <Key className="h-4 w-4" />
+                         </Button>
+                         <Button
+                           variant="ghost"
+                           size="icon"
+                           className={role === 'gesperrt' ? 'h-8 w-8 text-green-500 hover:text-green-400 hover:bg-green-500/10' : 'h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10'}
+                           title={role === 'gesperrt' ? 'Entsperren' : 'Sperren'}
+                           onClick={() => handleToggleLock(user.id, role)}
+                           disabled={loadingId === user.id + '-lock'}
+                         >
+                           {loadingId === user.id + '-lock' ? <Loader2 className="h-4 w-4 animate-spin" /> : role === 'gesperrt' ? <Unlock className="h-4 w-4" /> : <Ban className="h-4 w-4" />}
+                         </Button>
+                         <Button
+                           variant="ghost"
+                           size="icon"
+                           className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                           title="Löschen"
+                           onClick={() => handleDelete(user.id)}
+                           disabled={isLoadingDelete}
+                         >
+                           {isLoadingDelete ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                         </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                </Fragment>
               )
             })}
           </TableBody>