diff --git a/shop/app/order/page.tsx b/shop/app/order/page.tsx index f001a49..3f066be 100644 --- a/shop/app/order/page.tsx +++ b/shop/app/order/page.tsx @@ -17,14 +17,7 @@ export default async function OrderPage({ searchParams }: PageProps) { return (
-
-

- Konfigurieren Sie Ihre Lösung -

-

- Wählen Sie das passende Paket und die benötigten Module für Ihr Business. -

-
+ }> + {/* Dynamic Header */} + {step !== 3 && ( +
+

+ Konfigurieren Sie Ihre Lösung +

+

+ Wählen Sie das passende Paket und die benötigten Module für Ihr Business. +

+
+ )} + {/* Global Stepper for Steps 1, 2, 4 */} {step !== 3 && (
@@ -867,10 +879,10 @@ export function OrderWizard({

- Software konfigurieren + Konfigurieren Sie Ihre Lösung

- Klicken Sie sich durch die Kategorien und wählen Sie Ihre Lizenzen. + Wählen Sie das passende Paket und die benötigten Module für Ihr Business.

@@ -885,20 +897,18 @@ export function OrderWizard({ - - - - Seite {partnerCurrentPage} von {totalPartnerPages} - - - - -
-
-
- )} - - {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */} -
- - -
- - {/* ─── 2. CUSTOMER SELECTION ─── */} - {customerMode === 'select' && ( -
-
-
- -

- {isAdmin && selectedCompanyId && selectedCompanyId !== 'all' - ? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"` - : 'Alle verfügbaren Endkunden'} -

-
-
- - {customersByCompany.length === 0 ? ( -
- -

- {isAdmin && selectedCompanyId && selectedCompanyId !== 'all' - ? 'Keine Endkunden für den ausgewählten Partner vorhanden.' - : 'Noch keine Endkunden vorhanden.'} -

- -
- ) : ( -
- {/* Customer Header Controls: Search & Page Size */} -
-
- - setSearchTerm(e.target.value)} - className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9" - /> +
+
+ +
+
+

+ Alle Partner (Firmenübergreifend) +

+

+ Zeigt Kunden aller registrierten Partnerunternehmen an +

+
+
+ + {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt + + {(selectedCompanyId === 'all' || !selectedCompanyId) && ( + + )} +
+
- {/* Page Size Selector */} -
- Kunden pro Seite: - +
+
+ +
+
+

{c.name}

+ {(c.street || c.zip || c.city) && ( +

+ {[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')} +

+ )} +
+
+ +
+ 0 + ? 'border-green-500/30 text-green-400 bg-green-500/10' + : 'border-white/10 text-slate-500 bg-white/5' + }`} + > + {customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'} + + {isSelected && } +
+
+ ) + })} + + {filteredCompanies.length === 0 && ( +
+ Keine Partner mit dem Suchbegriff "{partnerSearchTerm}" gefunden.
+ )} +
+ + {/* Partner Pagination Controls */} +
+
+ Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '} + {Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
- {filteredCustomers.length === 0 ? ( -
- Keine passenden Kunden gefunden. -
- ) : ( - <> - {/* Customer Card List */} -
- {paginatedCustomers.map((customer) => { - const isSelected = selectedEndCustomerId === customer.id +
+ + - return ( -
handleSelectCustomer(customer)} - className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${ - isSelected - ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5' - : 'border-white/5 bg-white/5 hover:bg-white/10' - }`} - > - handleSelectCustomer(customer)} - className="sr-only" - /> -
-
-

{customer.company_name}

- {isAdmin && customer.partner_id && ( - - Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id} - - )} -
-

- {[customer.first_name, customer.last_name].filter(Boolean).join(' ')} - {customer.first_name || customer.last_name ? ' · ' : ''} - {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')} -

-
- {isSelected && } -
- ) - })} -
+ + Seite {partnerCurrentPage} von {totalPartnerPages} + - {/* Customer Pagination Footer */} -
-
- Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '} - {Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden -
- -
- - - - - Seite {currentPage} von {totalCustomerPages} - - - - -
-
- - )} + + +
- )} -
- )} +
+ )} - {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */} - {customerMode === 'create' && ( -
- {( - [ - { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' }, - { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' }, - { label: 'Vorname', key: 'first_name', span: false, placeholder: '' }, - { label: 'Nachname', key: 'last_name', span: false, placeholder: '' }, - { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' }, - { label: 'PLZ', key: 'zip', span: false, placeholder: '' }, - { label: 'Ort', key: 'city', span: false, placeholder: '' }, - { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' }, - { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' }, - { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' }, - { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' }, - ] as const - ).map(({ label, key, span, placeholder }) => ( -
- - - setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value })) - } - placeholder={placeholder} - className="bg-white/5 border-white/10 text-white placeholder:text-slate-500" - /> -
- ))} -
+ {/* ─── 2. CUSTOMER WRAPPER ─── */} +
+ {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */} +
+ + + {/* ─── 2. CUSTOMER SELECTION ─── */} + {customerMode === 'select' && ( + +
+
+ +

+ {isAdmin && selectedCompanyId && selectedCompanyId !== 'all' + ? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"` + : 'Alle verfügbaren Endkunden'} +

+
+
+ + {customersByCompany.length === 0 ? ( +
+ +

+ {isAdmin && selectedCompanyId && selectedCompanyId !== 'all' + ? 'Keine Endkunden für den ausgewählten Partner vorhanden.' + : 'Noch keine Endkunden vorhanden.'} +

+ +
+ ) : ( +
+ {/* Customer Header Controls: Search & Page Size */} +
+
+ + setSearchTerm(e.target.value)} + className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9" + /> +
+ + {/* Page Size Selector */} +
+ Kunden pro Seite: + +
+
+ + {filteredCustomers.length === 0 ? ( +
+ Keine passenden Kunden gefunden. +
+ ) : ( + <> + {/* Customer Card List */} +
+ {paginatedCustomers.map((customer) => { + const isSelected = selectedEndCustomerId === customer.id + + return ( +
handleSelectCustomer(customer)} + className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${ + isSelected + ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5' + : 'border-white/5 bg-white/5 hover:bg-white/10' + }`} + > + handleSelectCustomer(customer)} + className="sr-only" + /> +
+
+

{customer.company_name}

+ {isAdmin && customer.partner_id && ( + + Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id} + + )} +
+

+ {[customer.first_name, customer.last_name].filter(Boolean).join(' ')} + {customer.first_name || customer.last_name ? ' · ' : ''} + {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')} +

+
+ {isSelected && } +
+ ); + })} +
+ + {/* Customer Pagination Footer */} +
+
+ Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '} + {Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden +
+ +
+ + + + + Seite {currentPage} von {totalCustomerPages} + + + + +
+
+ + )} +
+ )} + + )} + + {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */} + {customerMode === 'create' && ( + + {( + [ + { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' }, + { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' }, + { label: 'Vorname', key: 'first_name', span: false, placeholder: '' }, + { label: 'Nachname', key: 'last_name', span: false, placeholder: '' }, + { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' }, + { label: 'PLZ', key: 'zip', span: false, placeholder: '' }, + { label: 'Ort', key: 'city', span: false, placeholder: '' }, + { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' }, + { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' }, + { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' }, + { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' }, + ] as const + ).map(({ label, key, span, placeholder }) => ( +
+ + + setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value })) + } + placeholder={placeholder} + className="bg-white/5 border-white/10 text-white placeholder:text-slate-500" + /> +
+ ))} +
+ + +
+ + )} +
- )} +