revert: Remove group by partner option from end customers view
All checks were successful
Staging Build / build (push) Successful in 2m37s
All checks were successful
Staging Build / build (push) Successful in 2m37s
This commit is contained in:
DanielS
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState, useEffect, Fragment } from 'react'
|
import { useState, useEffect } 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,7 +48,6 @@ 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)
|
||||||
@@ -159,13 +158,7 @@ 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">
|
||||||
@@ -217,29 +210,15 @@ 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="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
<div className="relative mb-6 max-w-sm">
|
||||||
<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" />
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
placeholder="Endkunden suchen (Name, Ansprechpartner, Ort)..."
|
||||||
placeholder="Endkunden suchen (Name, Ansprechpartner, Ort)..."
|
value={searchQuery}
|
||||||
value={searchQuery}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
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"
|
||||||
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 ? (
|
||||||
@@ -264,82 +243,64 @@ 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) => (
|
||||||
let lastPartnerName: string | null = null
|
<tr key={customer.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
|
||||||
return displayCustomers.map((customer) => {
|
<td className="py-4">
|
||||||
const currentPartnerName = customer.partner_name || 'Unbekannt'
|
<div className="font-semibold text-slate-900 dark:text-white">
|
||||||
const showGroupHeader = groupByPartner && currentPartnerName !== lastPartnerName
|
{customer.company_name}
|
||||||
lastPartnerName = currentPartnerName
|
</div>
|
||||||
|
{(customer.first_name || customer.last_name) && (
|
||||||
return (
|
<div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
|
||||||
<Fragment key={customer.id}>
|
<User className="w-3 h-3 text-slate-400 shrink-0" />
|
||||||
{showGroupHeader && (
|
<span>{customer.first_name || ''} {customer.last_name || ''}</span>
|
||||||
<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">
|
</div>
|
||||||
<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>
|
||||||
</td>
|
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
||||||
</tr>
|
{customer.street ? (
|
||||||
)}
|
<div className="flex items-center gap-2">
|
||||||
<tr className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
|
<MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
||||||
<td className="py-4">
|
<span>
|
||||||
<div className="font-semibold text-slate-900 dark:text-white">
|
{customer.street}, {customer.zip} {customer.city}
|
||||||
{customer.company_name}
|
</span>
|
||||||
</div>
|
</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">
|
<span className="text-slate-400 dark:text-slate-600">–</span>
|
||||||
<User className="w-3 h-3 text-slate-400 shrink-0" />
|
)}
|
||||||
<span>{customer.first_name || ''} {customer.last_name || ''}</span>
|
</td>
|
||||||
</div>
|
<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>
|
||||||
<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">
|
||||||
{customer.street ? (
|
<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">
|
||||||
<div className="flex items-center gap-2">
|
{customer.partner_name || 'Unbekannt'}
|
||||||
<MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
</span>
|
||||||
<span>
|
</td>
|
||||||
{customer.street}, {customer.zip} {customer.city}
|
<td className="py-4 text-right">
|
||||||
</span>
|
<div className="flex justify-end gap-2">
|
||||||
</div>
|
<Button
|
||||||
) : (
|
variant="ghost"
|
||||||
<span className="text-slate-400 dark:text-slate-600">–</span>
|
size="icon"
|
||||||
)}
|
onClick={() => handleOpenDialog(customer)}
|
||||||
</td>
|
className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
|
||||||
<td className="py-4 text-sm text-slate-700 dark:text-slate-300">
|
title="Endkunde bearbeiten"
|
||||||
{customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
|
>
|
||||||
</td>
|
<Pencil className="h-4 w-4" />
|
||||||
<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">
|
<Button
|
||||||
{customer.partner_name || 'Unbekannt'}
|
variant="ghost"
|
||||||
</span>
|
size="icon"
|
||||||
</td>
|
disabled={loadingAction}
|
||||||
<td className="py-4 text-right">
|
onClick={() => handleDelete(customer.id, customer.company_name)}
|
||||||
<div className="flex justify-end gap-2">
|
className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
|
||||||
<Button
|
title="Endkunde löschen"
|
||||||
variant="ghost"
|
>
|
||||||
size="icon"
|
<Trash2 className="h-4 w-4" />
|
||||||
onClick={() => handleOpenDialog(customer)}
|
</Button>
|
||||||
className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
|
</div>
|
||||||
title="Endkunde bearbeiten"
|
</td>
|
||||||
>
|
</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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user