feat: add first_name and last_name to users and implement inline editing in user-list
All checks were successful
Staging Build / build (push) Successful in 2m40s

This commit is contained in:
DanielS
2026-06-25 01:38:07 +02:00
parent 30a9de0e6d
commit 07c2758b73
3 changed files with 121 additions and 5 deletions

View File

@@ -31,6 +31,8 @@ const userSchema = z.object({
email: z.string().email('Ungültige E-Mail-Adresse'),
role: z.enum(['admin', 'partner']),
company_id: z.string().optional().or(z.literal('')),
first_name: z.string().optional().or(z.literal('')),
last_name: z.string().optional().or(z.literal('')),
})
type UserFormValues = z.infer<typeof userSchema>
@@ -63,6 +65,8 @@ export function UserDialog({ companies }: UserDialogProps) {
email: '',
role: 'partner',
company_id: '',
first_name: '',
last_name: '',
},
})
@@ -72,6 +76,8 @@ export function UserDialog({ companies }: UserDialogProps) {
email: values.email,
role: values.role,
company_id: values.company_id || undefined,
first_name: values.first_name || undefined,
last_name: values.last_name || undefined,
}
await createUser(payload)
setOpen(false)
@@ -119,6 +125,34 @@ export function UserDialog({ companies }: UserDialogProps) {
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="first_name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Vorname</FormLabel>
<FormControl>
<Input placeholder="Vorname" className="bg-white/5 border-white/10 text-white" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="last_name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Nachname</FormLabel>
<FormControl>
<Input placeholder="Nachname" className="bg-white/5 border-white/10 text-white" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="role"

View File

@@ -13,7 +13,7 @@ import {
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
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 { deleteUser, resetPassword, updateUserRole, updateUserProfile } from '@/lib/actions/users'
import { assignCompanyToUser } from '@/lib/actions/companies'
import { Badge } from '@/components/ui/badge'
@@ -208,9 +208,57 @@ export function UserList({ initialUsers, companies }: UserListProps) {
)}
<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 className="flex flex-col">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-slate-500" />
<span>{user.email}</span>
</div>
<div className="flex gap-2 mt-1 pl-6">
<input
type="text"
defaultValue={user.first_name || ''}
placeholder="Vorname"
onBlur={async (e) => {
const val = e.target.value.trim()
if (val !== (user.first_name || '')) {
try {
await updateUserProfile(user.id, { first_name: val || null, last_name: user.last_name })
router.refresh()
} catch (err) {
console.error('Failed to update first name:', err)
}
}
}}
onKeyDown={async (e) => {
if (e.key === 'Enter') {
(e.target as HTMLInputElement).blur()
}
}}
className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-20 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
/>
<input
type="text"
defaultValue={user.last_name || ''}
placeholder="Nachname"
onBlur={async (e) => {
const val = e.target.value.trim()
if (val !== (user.last_name || '')) {
try {
await updateUserProfile(user.id, { first_name: user.first_name, last_name: val || null })
router.refresh()
} catch (err) {
console.error('Failed to update last name:', err)
}
}
}}
onKeyDown={async (e) => {
if (e.key === 'Enter') {
(e.target as HTMLInputElement).blur()
}
}}
className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-24 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
/>
</div>
</div>
</TableCell>
<TableCell>