From 6a2fc16f75d8ac2f68bf079b37eb4369efef4ed7 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 25 Jun 2026 02:18:53 +0200
Subject: [PATCH] feat: Add group by partner option to company end customers
 list

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

diff --git a/shop/app/admin/companies/[id]/customers/page.tsx b/shop/app/admin/companies/[id]/customers/page.tsx
index 9ca347e..9011502 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 } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { 
@@ -48,6 +48,7 @@ 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)
@@ -158,6 +159,14 @@ 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">
       {/* Back Link */}
@@ -208,15 +217,29 @@ 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="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 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>
 
         {loading ? (
@@ -241,64 +264,82 @@ export default function CompanyCustomersPage() {
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-100 dark:divide-white/5">
-              {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>
-              ))}
+              {(() => {
+                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>
+                  )
+                })
+              })()}
             </tbody>
           </table>
         )}