style(admin): replace browser alert and confirm with dialog modals

shop/app/admin/companies/page.tsx

@@ -33,15 +33,22 @@ export default function CompaniesPage() {
   const [deletingId, setDeletingId] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [syncing, setSyncing] = useState(false)
+  const [statusMsg, setStatusMsg] = useState<string | null>(null)
+  const [statusType, setStatusType] = useState<'success' | 'error' | ''>('')
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+  const [deleteConfirmName, setDeleteConfirmName] = useState('')
 
   const handleSync = async () => {
     setSyncing(true)
+    setStatusMsg(null)
     try {
       const res = await syncCompaniesFromLicServer()
-      alert(`${res.count} Partner erfolgreich vom LicServer importiert/aktualisiert.`)
+      setStatusMsg(`${res.count} Partner erfolgreich vom LicServer importiert/aktualisiert.`)
+      setStatusType('success')
       loadCompanies()
     } catch (err: any) {
-      alert(`Fehler beim Import: ${err.message || err}`)
+      setStatusMsg(`Fehler beim Import: ${err.message || err}`)
+      setStatusType('error')
     } finally {
       setSyncing(false)
     }
@@ -104,18 +111,7 @@ export default function CompaniesPage() {
 
 
 
-  const handleDelete = async (id: string, firmName: string) => {
+
-    if (!confirm(`Firma "${firmName}" wirklich löschen? Alle zugewiesenen Benutzer werden getrennt.`)) return
-    setDeletingId(id)
-    try {
-      await deleteCompany(id)
-      loadCompanies()
-    } catch (err) {
-      console.error('Fehler beim Löschen:', err)
-    } finally {
-      setDeletingId(null)
-    }
-  }
 
   const filteredCompanies = companies.filter((c) => {
     const nameMatch = c.name?.toLowerCase().includes(searchQuery.toLowerCase())
@@ -156,6 +152,15 @@ export default function CompaniesPage() {
         </div>
       </div>
 
+      {statusMsg && (
+        <div className={`p-4 rounded-lg text-sm border ${
+          statusType === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400' :
+          'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {statusMsg}
+        </div>
+      )}
+
       {/* Firmen-Tabelle */}
       <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
         <div className="relative mb-6 max-w-sm">
@@ -239,11 +244,14 @@ export default function CompaniesPage() {
                       >
                         <Pencil className="h-4 w-4" />
                       </Button>
-                      <Button
+                       <Button
                         variant="ghost"
                         size="icon"
                         disabled={deletingId === company.id}
-                        onClick={() => handleDelete(company.id, company.name)}
+                        onClick={() => {
+                          setDeleteConfirmId(company.id)
+                          setDeleteConfirmName(company.name)
+                        }}
                         className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
                         title="Firma löschen"
                       >
@@ -354,6 +362,44 @@ export default function CompaniesPage() {
         </DialogContent>
       </Dialog>
 
+      {/* Dialog: Delete Confirmation */}
+      <Dialog open={deleteConfirmId !== null} onOpenChange={(open) => { if (!open) setDeleteConfirmId(null) }}>
+        <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
+          <DialogHeader>
+            <DialogTitle>Firma löschen</DialogTitle>
+            <DialogDescription className="text-slate-500 dark:text-slate-400">
+              Möchten Sie die Firma <strong>{deleteConfirmName}</strong> wirklich löschen? Alle zugewiesenen Benutzer werden getrennt. Dieser Schritt kann nicht rückgängig gemacht werden.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="pt-2">
+            <Button type="button" variant="outline" onClick={() => setDeleteConfirmId(null)}>
+              Abbrechen
+            </Button>
+            <Button 
+              type="button" 
+              onClick={async () => {
+                if (deleteConfirmId) {
+                  setDeletingId(deleteConfirmId)
+                  const targetId = deleteConfirmId
+                  setDeleteConfirmId(null)
+                  try {
+                    await deleteCompany(targetId)
+                    loadCompanies()
+                  } catch (err) {
+                    console.error('Fehler beim Löschen:', err)
+                  } finally {
+                    setDeletingId(null)
+                  }
+                }
+              }}
+              className="bg-red-600 hover:bg-red-700 text-white font-semibold"
+            >
+              Löschen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
 
     </div>
   )