From 2f96552fe85410ee6c2e01cc511e68a0dffd57d3 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 25 Jun 2026 02:23:50 +0200
Subject: [PATCH] revert: Remove group by partner option from end customers
 view

---
 .../admin/companies/[id]/customers/page.tsx   | 177 +++++++-----------
 1 file changed, 69 insertions(+), 108 deletions(-)

diff --git a/shop/app/admin/companies/[id]/customers/page.tsx b/shop/app/admin/companies/[id]/customers/page.tsx
index 9011502..5240a1d 100644
--- a/shop/app/admin/companies/[id]/customers/page.tsx
+++ b/shop/app/admin/companies/[id]/customers/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, Fragment } from 'react'
+import { useState, useEffect } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { 
@@ -48,7 +48,6 @@ export default function CompanyCustomersPage() {
   const [loading, setLoading] = useState(true)
   const [loadingAction, setLoadingAction] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
-  const [groupByPartner, setGroupByPartner] = useState(false)
 
   // Dialog State
   const [isOpen, setIsOpen] = useState(false)
@@ -159,13 +158,7 @@ export default function CompanyCustomersPage() {
     return nameMatch || personMatch || addressMatch || partnerMatch
   })
 
-  const displayCustomers = groupByPartner
-    ? [...filteredCustomers].sort((a, b) => {
-        const nameA = a.partner_name || 'Unbekannt'
-        const nameB = b.partner_name || 'Unbekannt'
-        return nameA.localeCompare(nameB)
-      })
-    : filteredCustomers
+
 
   return (
     <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8">
@@ -217,29 +210,15 @@ export default function CompanyCustomersPage() {
 
       {/* Table Section */}
       <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="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
-          <div className="relative w-full 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="Endkunden suchen (Name, Ansprechpartner, Ort)..."
-              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-indigo-500 transition-all"
-            />
-          </div>
-          <div className="flex items-center gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
-            <input
-              type="checkbox"
-              id="groupByPartner"
-              checked={groupByPartner}
-              onChange={(e) => setGroupByPartner(e.target.checked)}
-              className="h-4 w-4 rounded border-slate-200 dark:border-white/10 bg-white dark:bg-slate-950 text-indigo-600 focus:ring-indigo-500 accent-indigo-600 cursor-pointer"
-            />
-            <label htmlFor="groupByPartner" className="text-xs text-slate-700 dark:text-slate-300 font-medium cursor-pointer select-none">
-              Nach Partner gruppieren
-            </label>
-          </div>
+        <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="Endkunden suchen (Name, Ansprechpartner, Ort)..."
+            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-indigo-500 transition-all"
+          />
         </div>
 
         {loading ? (
@@ -264,82 +243,64 @@ export default function CompanyCustomersPage() {
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-100 dark:divide-white/5">
-              {(() => {
-                let lastPartnerName: string | null = null
-                return displayCustomers.map((customer) => {
-                  const currentPartnerName = customer.partner_name || 'Unbekannt'
-                  const showGroupHeader = groupByPartner && currentPartnerName !== lastPartnerName
-                  lastPartnerName = currentPartnerName
-
-                  return (
-                    <Fragment key={customer.id}>
-                      {showGroupHeader && (
-                        <tr className="bg-slate-50 dark:bg-white/5 border-y border-slate-200 dark:border-white/10 hover:bg-slate-100 dark:hover:bg-white/5">
-                          <td colSpan={5} className="font-semibold text-indigo-600 dark:text-indigo-400 py-2 px-4 text-xs tracking-wider uppercase">
-                            Partner: {currentPartnerName}
-                          </td>
-                        </tr>
-                      )}
-                      <tr className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
-                        <td className="py-4">
-                          <div className="font-semibold text-slate-900 dark:text-white">
-                            {customer.company_name}
-                          </div>
-                          {(customer.first_name || customer.last_name) && (
-                            <div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
-                              <User className="w-3 h-3 text-slate-400 shrink-0" />
-                              <span>{customer.first_name || ''} {customer.last_name || ''}</span>
-                            </div>
-                          )}
-                        </td>
-                        <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
-                          {customer.street ? (
-                            <div className="flex items-center gap-2">
-                              <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
-                              <span>
-                                {customer.street}, {customer.zip} {customer.city}
-                              </span>
-                            </div>
-                          ) : (
-                            <span className="text-slate-400 dark:text-slate-600">–</span>
-                          )}
-                        </td>
-                        <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
-                          {customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
-                        </td>
-                        <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
-                          <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold bg-indigo-50 dark:bg-indigo-950/30 text-indigo-700 dark:text-indigo-300">
-                            {customer.partner_name || 'Unbekannt'}
-                          </span>
-                        </td>
-                        <td className="py-4 text-right">
-                          <div className="flex justify-end gap-2">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => handleOpenDialog(customer)}
-                              className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
-                              title="Endkunde bearbeiten"
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              disabled={loadingAction}
-                              onClick={() => handleDelete(customer.id, customer.company_name)}
-                              className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
-                              title="Endkunde löschen"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        </td>
-                      </tr>
-                    </Fragment>
-                  )
-                })
-              })()}
+              {filteredCustomers.map((customer) => (
+                <tr key={customer.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
+                  <td className="py-4">
+                    <div className="font-semibold text-slate-900 dark:text-white">
+                      {customer.company_name}
+                    </div>
+                    {(customer.first_name || customer.last_name) && (
+                      <div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
+                        <User className="w-3 h-3 text-slate-400 shrink-0" />
+                        <span>{customer.first_name || ''} {customer.last_name || ''}</span>
+                      </div>
+                    )}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {customer.street ? (
+                      <div className="flex items-center gap-2">
+                        <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                        <span>
+                          {customer.street}, {customer.zip} {customer.city}
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="text-slate-400 dark:text-slate-600">–</span>
+                    )}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold bg-indigo-50 dark:bg-indigo-950/30 text-indigo-700 dark:text-indigo-300">
+                      {customer.partner_name || 'Unbekannt'}
+                    </span>
+                  </td>
+                  <td className="py-4 text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleOpenDialog(customer)}
+                        className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
+                        title="Endkunde bearbeiten"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={loadingAction}
+                        onClick={() => handleDelete(customer.id, customer.company_name)}
+                        className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
+                        title="Endkunde löschen"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         )}