Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add group by partner option to company end customers list
All checks were successful
Staging Build / build (push) Successful in 2m36s
Details

Browse Source
This commit is contained in:
DanielS
2026-06-25 02:18:53 +02:00
parent 0ff4df2a12
commit 6a2fc16f75
1 changed files with 109 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
shop/app/admin/companies/[id]/customers/page.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { useState, useEffect } from 'react' import { useState, useEffect, Fragment } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link' import Link from 'next/link'
import { import {
@@ -48,6 +48,7 @@ export default function CompanyCustomersPage() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [loadingAction, setLoadingAction] = useState(false) const [loadingAction, setLoadingAction] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [groupByPartner, setGroupByPartner] = useState(false)
// Dialog State // Dialog State
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
@@ -158,6 +159,14 @@ export default function CompanyCustomersPage() {
return nameMatch || personMatch || addressMatch || partnerMatch 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 ( return (
<div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8"> <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8">
{/* Back Link */} {/* Back Link */}
@@ -208,15 +217,29 @@ export default function CompanyCustomersPage() {
{/* Table Section */} {/* 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="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"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" /> <div className="relative w-full max-w-sm">
<input <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
type="text" <input
placeholder="Endkunden suchen (Name, Ansprechpartner, Ort)..." type="text"
value={searchQuery} placeholder="Endkunden suchen (Name, Ansprechpartner, Ort)..."
onChange={(e) => setSearchQuery(e.target.value)} value={searchQuery}
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" 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> </div>
{loading ? ( {loading ? (
@@ -241,64 +264,82 @@ export default function CompanyCustomersPage() {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100 dark:divide-white/5"> <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"> let lastPartnerName: string | null = null
<td className="py-4"> return displayCustomers.map((customer) => {
<div className="font-semibold text-slate-900 dark:text-white"> const currentPartnerName = customer.partner_name || 'Unbekannt'
{customer.company_name} const showGroupHeader = groupByPartner && currentPartnerName !== lastPartnerName
</div> lastPartnerName = currentPartnerName
{(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"> return (
<User className="w-3 h-3 text-slate-400 shrink-0" /> <Fragment key={customer.id}>
<span>{customer.first_name || ''} {customer.last_name || ''}</span> {showGroupHeader && (
</div> <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">
</td> Partner: {currentPartnerName}
<td className="py-4 text-sm text-slate-700 dark:text-slate-300"> </td>
{customer.street ? ( </tr>
<div className="flex items-center gap-2"> )}
<MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" /> <tr className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
<span> <td className="py-4">
{customer.street}, {customer.zip} {customer.city} <div className="font-semibold text-slate-900 dark:text-white">
</span> {customer.company_name}
</div> </div>
) : ( {(customer.first_name || customer.last_name) && (
<span className="text-slate-400 dark:text-slate-600">–</span> <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" />
</td> <span>{customer.first_name || ''} {customer.last_name || ''}</span>
<td className="py-4 text-sm text-slate-700 dark:text-slate-300"> </div>
{customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>} )}
</td> </td>
<td className="py-4 text-sm text-slate-700 dark:text-slate-300"> <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.street ? (
{customer.partner_name || 'Unbekannt'} <div className="flex items-center gap-2">
</span> <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
</td> <span>
<td className="py-4 text-right"> {customer.street}, {customer.zip} {customer.city}
<div className="flex justify-end gap-2"> </span>
<Button </div>
variant="ghost" ) : (
size="icon" <span className="text-slate-400 dark:text-slate-600">–</span>
onClick={() => handleOpenDialog(customer)} )}
className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10" </td>
title="Endkunde bearbeiten" <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>}
<Pencil className="h-4 w-4" /> </td>
</Button> <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
<Button <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">
variant="ghost" {customer.partner_name || 'Unbekannt'}
size="icon" </span>
disabled={loadingAction} </td>
onClick={() => handleDelete(customer.id, customer.company_name)} <td className="py-4 text-right">
className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10" <div className="flex justify-end gap-2">
title="Endkunde löschen" <Button
> variant="ghost"
<Trash2 className="h-4 w-4" /> size="icon"
</Button> onClick={() => handleOpenDialog(customer)}
</div> className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
</td> title="Endkunde bearbeiten"
</tr> >
))} <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> </tbody>
</table> </table>
)} )}