feat: add search field to companies list page

shop/app/admin/companies/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Building2, Plus, Trash2, Loader2, Pencil, Mail, MapPin } from 'lucide-react'
+import { Building2, Plus, Trash2, Loader2, Pencil, Mail, MapPin, Search } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -30,6 +30,7 @@ export default function CompaniesPage() {
   const [creating, setCreating] = useState(false)
   const [createError, setCreateError] = useState<string | null>(null)
   const [deletingId, setDeletingId] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
 
   const loadCompanies = async () => {
     setLoading(true)
@@ -97,6 +98,13 @@ export default function CompaniesPage() {
     }
   }
 
+  const filteredCompanies = companies.filter((c) => {
+    const nameMatch = c.name?.toLowerCase().includes(searchQuery.toLowerCase())
+    const addressMatch = `${c.street || ''} ${c.zip || ''} ${c.city || ''}`.toLowerCase().includes(searchQuery.toLowerCase())
+    const emailMatch = c.email?.toLowerCase().includes(searchQuery.toLowerCase())
+    return nameMatch || addressMatch || emailMatch
+  })
+
   return (
     <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8">
       {/* Header */}
@@ -120,15 +128,25 @@ export default function CompaniesPage() {
 
       {/* 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">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <input
+            type="text"
+            placeholder="Firmen suchen (Name, Adresse, E-Mail)..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-4 py-2 text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+          />
+        </div>
         {loading ? (
           <div className="flex justify-center items-center py-16">
             <Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
             <span className="ml-3 text-slate-400 text-sm">Lade Firmen...</span>
           </div>
-        ) : companies.length === 0 ? (
+        ) : filteredCompanies.length === 0 ? (
           <div className="text-center py-16 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-xl text-slate-500">
             <Building2 className="w-10 h-10 mx-auto mb-3 opacity-30" />
-            Noch keine Firmen angelegt.
+            Keine Firmen gefunden.
           </div>
         ) : (
           <table className="w-full text-left">
@@ -142,7 +160,7 @@ export default function CompaniesPage() {
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-100 dark:divide-white/5">
-              {companies.map((company) => (
+              {filteredCompanies.map((company) => (
                 <tr key={company.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
                   <td className="py-4 font-semibold text-slate-900 dark:text-white">
                     <div className="flex items-center gap-2">