feat: add first_name and last_name to users and implement inline editing in user-list

shop/components/admin/user-dialog.tsx

@@ -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"

shop/components/admin/user-list.tsx

@@ -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>

shop/lib/actions/users.ts

@@ -13,6 +13,10 @@ export async function getUsers() {
     .from('users')
     .select('id, role, company_id, companies(id, name)');
 
+  const { data: dbProfiles, error: profilesError } = await admin
+    .from('profiles')
+    .select('id, first_name, last_name');
+
   const userMap: Record<string, { role: string; company_id: string | null; company_name: string | null }> = {};
   if (!dbError && dbUsers) {
     dbUsers.forEach((u: any) => {
@@ -24,15 +28,27 @@ export async function getUsers() {
     });
   }
 
+  const profileMap: Record<string, { first_name: string | null; last_name: string | null }> = {};
+  if (!profilesError && dbProfiles) {
+    dbProfiles.forEach((p: any) => {
+      profileMap[p.id] = {
+        first_name: p.first_name || null,
+        last_name: p.last_name || null,
+      };
+    });
+  }
+
   return users.map((u) => ({
     ...u,
     role: userMap[u.id]?.role || 'partner',
     company_id: userMap[u.id]?.company_id || null,
     company_name: userMap[u.id]?.company_name || null,
+    first_name: profileMap[u.id]?.first_name || null,
+    last_name: profileMap[u.id]?.last_name || null,
   }));
 }
 
-export async function createUser(data: { email: string; role?: 'admin' | 'partner'; email_confirm?: boolean; company_id?: string }) {
+export async function createUser(data: { email: string; role?: 'admin' | 'partner'; email_confirm?: boolean; company_id?: string; first_name?: string; last_name?: string }) {
   const admin = createAdminClient();
   const { data: { user }, error } = await admin.auth.admin.createUser({
     email: data.email,
@@ -48,6 +64,15 @@ export async function createUser(data: { email: string; role?: 'admin' | 'partne
     .upsert({ id: user.id, role, company_id: data.company_id || null }, { onConflict: 'id' });
   if (dbError) throw dbError;
 
+  const { error: profileError } = await admin
+    .from('profiles')
+    .upsert({
+      id: user.id,
+      first_name: data.first_name || null,
+      last_name: data.last_name || null,
+    }, { onConflict: 'id' });
+  if (profileError) throw profileError;
+
   // Generate recovery link to let user set password
   try {
     const { data: linkData, error: linkError } = await admin.auth.admin.generateLink({
@@ -196,3 +221,12 @@ export async function getPartners() {
       company_name: userMap[u.id]?.company_name || null,
     }));
 }
+
+export async function updateUserProfile(id: string, data: { first_name: string | null; last_name: string | null }) {
+  const admin = createAdminClient();
+  const { error } = await admin
+    .from('profiles')
+    .upsert({ id, first_name: data.first_name, last_name: data.last_name }, { onConflict: 'id' });
+  if (error) throw error;
+  revalidatePath('/admin/users');
+}