From 85df92249850922c93a54940f310f3739c8f0f16 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 25 Jun 2026 01:43:53 +0200
Subject: [PATCH] feat: make company selection mandatory for partner role and
 add inline company creation in UserDialog

---
 shop/components/admin/user-dialog.tsx | 195 ++++++++++++++++++--------
 shop/lib/actions/companies.ts         |   4 +-
 2 files changed, 139 insertions(+), 60 deletions(-)

diff --git a/shop/components/admin/user-dialog.tsx b/shop/components/admin/user-dialog.tsx
index 1c37d98..1f99f20 100644
--- a/shop/components/admin/user-dialog.tsx
+++ b/shop/components/admin/user-dialog.tsx
@@ -25,6 +25,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { createUser } from '@/lib/actions/users'
+import { createCompany } from '@/lib/actions/companies'
 import { Plus, Building2 } from 'lucide-react'
 
 const userSchema = z.object({
@@ -33,6 +34,14 @@ const userSchema = z.object({
   company_id: z.string().optional().or(z.literal('')),
   first_name: z.string().optional().or(z.literal('')),
   last_name: z.string().optional().or(z.literal('')),
+}).refine((data) => {
+  if (data.role === 'partner' && !data.company_id) {
+    return false
+  }
+  return true
+}, {
+  message: 'Für Partner-Benutzer ist eine Firmenauswahl erforderlich.',
+  path: ['company_id'],
 })
 
 type UserFormValues = z.infer<typeof userSchema>
@@ -45,9 +54,17 @@ export function UserDialog({ companies }: UserDialogProps) {
   const [open, setOpen] = useState(false)
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const [search, setSearch] = useState('')
+  const [localCompanies, setLocalCompanies] = useState<{ id: string; name: string }[]>(companies)
+  const [showNewCompanyInput, setShowNewCompanyInput] = useState(false)
+  const [newCompanyName, setNewCompanyName] = useState('')
+  const [isCreatingCompany, setIsCreatingCompany] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const router = useRouter()
 
+  useEffect(() => {
+    setLocalCompanies(companies)
+  }, [companies])
+
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -95,6 +112,8 @@ export function UserDialog({ companies }: UserDialogProps) {
         form.reset()
         setDropdownOpen(false)
         setSearch('')
+        setShowNewCompanyInput(false)
+        setNewCompanyName('')
       }
     }}>
       <DialogTrigger asChild>
@@ -176,71 +195,131 @@ export function UserDialog({ companies }: UserDialogProps) {
               control={form.control}
               name="company_id"
               render={({ field }) => {
-                const selectedCompany = companies.find((c) => c.id === field.value)
+                const selectedCompany = localCompanies.find((c) => c.id === field.value)
                 return (
                   <FormItem className="flex flex-col">
-                    <FormLabel className="text-white">Firma (optional)</FormLabel>
+                    <FormLabel className="text-white">Firma</FormLabel>
                     <FormControl>
-                      <div className="relative" ref={dropdownRef}>
-                        <div className="flex items-center gap-2">
-                          <Building2 className="w-4 h-4 text-slate-500 shrink-0" />
+                      <div className="flex flex-col gap-2">
+                        <div className="relative" ref={dropdownRef}>
+                          <div className="flex items-center gap-2">
+                            <Building2 className="w-4 h-4 text-slate-500 shrink-0" />
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setDropdownOpen(!dropdownOpen)
+                                setSearch('')
+                              }}
+                              className="w-full text-left text-sm bg-white/5 border border-white/10 rounded-md px-3 py-2 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
+                            >
+                              {selectedCompany ? selectedCompany.name : 'Keine Firma'}
+                            </button>
+                          </div>
+                          {dropdownOpen && (
+                            <div className="absolute z-50 mt-1 left-0 w-full 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={search}
+                                  onChange={(e) => setSearch(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={() => {
+                                    field.onChange('')
+                                    setDropdownOpen(false)
+                                    setSearch('')
+                                  }}
+                                  className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
+                                    !field.value ? 'text-primary font-semibold' : 'text-slate-300'
+                                  }`}
+                                >
+                                  Keine Firma
+                                </button>
+                                {localCompanies
+                                  .filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+                                  .map((c) => (
+                                    <button
+                                      key={c.id}
+                                      type="button"
+                                      onClick={() => {
+                                        field.onChange(c.id)
+                                        setDropdownOpen(false)
+                                        setSearch('')
+                                      }}
+                                      className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
+                                        field.value === c.id ? 'text-primary font-semibold' : 'text-slate-300'
+                                      }`}
+                                    >
+                                      {c.name}
+                                    </button>
+                                  ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+
+                        {showNewCompanyInput ? (
+                          <div className="flex gap-2 mt-1">
+                            <Input
+                              placeholder="Name der neuen Firma"
+                              value={newCompanyName}
+                              onChange={(e) => setNewCompanyName(e.target.value)}
+                              className="bg-white/5 border-white/10 text-white text-xs h-8"
+                            />
+                            <Button
+                              type="button"
+                              size="sm"
+                              onClick={async () => {
+                                const trimmed = newCompanyName.trim()
+                                if (trimmed) {
+                                  setIsCreatingCompany(true)
+                                  try {
+                                    const created = await createCompany(trimmed)
+                                    if (created) {
+                                      setLocalCompanies((prev) => [...prev, created])
+                                      field.onChange(created.id)
+                                      setShowNewCompanyInput(false)
+                                      setNewCompanyName('')
+                                    }
+                                  } catch (err) {
+                                    console.error('Failed to create company:', err)
+                                  } finally {
+                                    setIsCreatingCompany(false)
+                                  }
+                                }
+                              }}
+                              disabled={isCreatingCompany}
+                              className="bg-primary text-xs h-8"
+                            >
+                              {isCreatingCompany ? 'Erstellt...' : 'Speichern'}
+                            </Button>
+                            <Button
+                              type="button"
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => {
+                                setShowNewCompanyInput(false)
+                                setNewCompanyName('')
+                              }}
+                              className="text-xs h-8 text-slate-400"
+                            >
+                              Abbrechen
+                            </Button>
+                          </div>
+                        ) : (
                           <button
                             type="button"
-                            onClick={() => {
-                              setDropdownOpen(!dropdownOpen)
-                              setSearch('')
-                            }}
-                            className="w-full text-left text-sm bg-white/5 border border-white/10 rounded-md px-3 py-2 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
+                            onClick={() => setShowNewCompanyInput(true)}
+                            className="text-xs text-primary hover:underline mt-1 self-start font-medium"
                           >
-                            {selectedCompany ? selectedCompany.name : 'Keine Firma'}
+                            + Neue Firma anlegen
                           </button>
-                        </div>
-                        {dropdownOpen && (
-                          <div className="absolute z-50 mt-1 left-0 w-full 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={search}
-                                onChange={(e) => setSearch(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={() => {
-                                  field.onChange('')
-                                  setDropdownOpen(false)
-                                  setSearch('')
-                                }}
-                                className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                  !field.value ? 'text-primary font-semibold' : 'text-slate-300'
-                                }`}
-                              >
-                                Keine Firma
-                              </button>
-                              {companies
-                                .filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
-                                .map((c) => (
-                                  <button
-                                    key={c.id}
-                                    type="button"
-                                    onClick={() => {
-                                      field.onChange(c.id)
-                                      setDropdownOpen(false)
-                                      setSearch('')
-                                    }}
-                                    className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                      field.value === c.id ? 'text-primary font-semibold' : 'text-slate-300'
-                                    }`}
-                                  >
-                                    {c.name}
-                                  </button>
-                                ))}
-                            </div>
-                          </div>
                         )}
                       </div>
                     </FormControl>
diff --git a/shop/lib/actions/companies.ts b/shop/lib/actions/companies.ts
index 12d9170..d049da6 100644
--- a/shop/lib/actions/companies.ts
+++ b/shop/lib/actions/companies.ts
@@ -11,7 +11,7 @@ export async function getCompanies() {
 
 export async function createCompany(name: string) {
   const admin = createAdminClient()
-  const { data, error } = await admin.from('companies').insert({ name }).single()
+  const { data, error } = await admin.from('companies').insert({ name }).select().single()
   if (error) throw error
   revalidatePath('/admin/companies')
   return data
@@ -19,7 +19,7 @@ export async function createCompany(name: string) {
 
 export async function updateCompany(id: string, name: string) {
   const admin = createAdminClient()
-  const { data, error } = await admin.from('companies').update({ name }).eq('id', id).single()
+  const { data, error } = await admin.from('companies').update({ name }).eq('id', id).select().single()
   if (error) throw error
   revalidatePath('/admin/companies')
   return data