feat(dashboard): add customer accordion view and extension flow

shop/app/my-customers/page.tsx

@@ -1,41 +1,27 @@
 export const dynamic = 'force-dynamic';
 import { redirect } from 'next/navigation'
 import Link from 'next/link'
-import { getEndCustomers } from '@/lib/actions/end-customers'
-import type { EndCustomer } from '@/lib/types'
-import { ArrowLeft, Building2, Plus, Edit2, AlertTriangle } from 'lucide-react'
+import { getPartnerCustomersWithOrders } from '@/lib/actions/queries'
+import type { EndCustomerWithOrders } from '@/lib/types'
+import { ArrowLeft, Building2, Plus, AlertTriangle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge';
-import { createClient } from '@/lib/supabase/server';
+import { createClient } from '@/lib/supabase/server'
+import { CustomerAccordionList } from '@/components/customer-accordion-list'
 
 export default async function MyCustomersPage() {
   const supabase = await createClient()
   const { data: { user } } = await supabase.auth.getUser()
   if (!user) redirect('/auth/login')
 
-  let customers: EndCustomer[] = []
+  let customers: EndCustomerWithOrders[] = []
   let fetchError: string | null = null
   try {
-    customers = await getEndCustomers()
+    customers = await getPartnerCustomersWithOrders()
   } catch (err: any) {
-    console.error("Error loading end customers:", err)
-    fetchError = err.message || "Es gab ein Problem beim Laden Ihrer Endkunden."
+    console.error("Error loading partner customers with orders:", err)
+    fetchError = err.message || "Es gab ein Problem beim Laden Ihrer Kunden und Kassen."
   }
 
-  // Anzahl Bestellungen pro Endkunde
-  const { data: orderCounts, error: orderError } = await supabase.from('orders').select('end_customer_id').not('end_customer_id', 'is', null);
-  if (orderError) {
-    console.error("Error loading order counts:", orderError)
-  }
-
-  const countMap: Record<string, number> = {}
-  ;(orderCounts ?? []).forEach(o => {
-    if (o.end_customer_id) {
-      countMap[o.end_customer_id] = (countMap[o.end_customer_id] ?? 0) + 1
-    }
-  })
-
   return (
     <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
       <div className="max-w-5xl mx-auto space-y-8">
@@ -50,10 +36,10 @@ export default async function MyCustomersPage() {
             <div>
               <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
                 <Building2 className="w-8 h-8 text-primary" />
-                Meine Kunden
+                Kunden & Kassen
               </h1>
               <p className="text-slate-400 text-sm mt-1">
-                Verwalten Sie Ihre Endkunden – deren Daten werden für Bestellungen verwendet.
+                Verwalten Sie Ihre Kunden und deren zugewiesene Kassen / Abonnements.
               </p>
             </div>
           </div>
@@ -70,86 +56,8 @@ export default async function MyCustomersPage() {
           </div>
         )}
 
-        {/* Keine Kunden */}
-        {customers.length === 0 && (
-          <Card className="glass-dark border-white/10">
-            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
-              <Building2 className="w-12 h-12 text-slate-600" />
-              <p className="text-slate-400 text-lg">Noch keine Endkunden angelegt.</p>
-              <Link href="/my-customers/new">
-                <Button><Plus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen</Button>
-              </Link>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Kundenliste */}
-        {customers.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-white/10 text-left">
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Unternehmen</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden sm:table-cell">Adresse</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden md:table-cell">Bestellungen</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Aktionen</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-white/5">
-                {customers.map(customer => (
-                  <tr key={customer.id} className="hover:bg-white/3 transition-colors">
-                    <td className="py-4 pr-4">
-                      <p className="font-semibold text-white">{customer.company_name}</p>
-                      {(customer.first_name || customer.last_name) && (
-                        <p className="text-sm text-slate-400">
-                          {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
-                        </p>
-                      )}
-                      {customer.vat_id && (
-                        <p className="text-xs text-slate-500">{customer.vat_id}</p>
-                      )}
-                    </td>
-                    <td className="py-4 pr-4 hidden sm:table-cell">
-                      <p className="text-sm text-slate-300">
-                        {customer.street ?? '–'}
-                      </p>
-                      <p className="text-sm text-slate-400">
-                        {[customer.zip, customer.city].filter(Boolean).join(' ') || '–'}
-                      </p>
-                    </td>
-                    <td className="py-4 pr-4 hidden md:table-cell">
-                      <Link href={`/my-orders?customer=${customer.id}`} className="group">
-                        <span className="text-primary font-bold group-hover:underline">
-                          {countMap[customer.id] ?? 0}
-                        </span>
-                        <span className="text-slate-500 text-xs ml-1">Bestellung(en)</span>
-                      </Link>
-                    </td>
-                    <td className="py-4 pr-4">
-                      {customer.is_anonymized ? (
-                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1">
-                          <AlertTriangle className="w-3 h-3" /> Anonymisiert
-                        </Badge>
-                      ) : (
-                        <Badge className="bg-green-500/10 text-green-400 border-green-500/20">Aktiv</Badge>
-                      )}
-                    </td>
-                    <td className="py-4 text-right">
-                      {!customer.is_anonymized && (
-                        <Link href={`/my-customers/${customer.id}`}>
-                          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white gap-1">
-                            <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
-                          </Button>
-                        </Link>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
+        {/* Akkordeon-Ansicht */}
+        <CustomerAccordionList customers={customers} />
 
         {/* DSGVO-Hinweis */}
         <div className="p-4 rounded-xl bg-amber-500/5 border border-amber-500/20 text-xs text-amber-300/80 space-y-1">

shop/app/order/page.tsx

@@ -8,11 +8,12 @@ import { redirect } from 'next/navigation'
 import { Suspense } from 'react'
 
 interface PageProps {
-  searchParams: Promise<{ id?: string }>
+  searchParams: Promise<{ id?: string; orderId?: string; mode?: string }>
 }
 
 export default async function OrderPage({ searchParams }: PageProps) {
   const params = await searchParams
+  const orderId = params.orderId || params.id
   return (
     <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
       <div className="container mx-auto py-10">
@@ -26,14 +27,14 @@ export default async function OrderPage({ searchParams }: PageProps) {
         </div>
         
         <Suspense fallback={<div className="h-96 w-full animate-pulse bg-white/5 rounded-2xl" />}>
-          <OrderDataWrapper orderId={params.id} />
+          <OrderDataWrapper orderId={orderId} mode={params.mode} />
         </Suspense>
       </div>
     </div>
   )
 }
 
-async function OrderDataWrapper({ orderId }: { orderId?: string }) {
+async function OrderDataWrapper({ orderId, mode }: { orderId?: string; mode?: string }) {
   const supabase = await createClient()
   const { data: { user } } = await supabase.auth.getUser()
 
@@ -83,7 +84,7 @@ async function OrderDataWrapper({ orderId }: { orderId?: string }) {
       redirect('/order')
     }
 
-    if (orderData.status === 'completed' && !isAdmin) {
+    if (orderData.status === 'completed' && !isAdmin && mode !== 'extension') {
       redirect('/order')
     }
 

shop/app/wizard/page.tsx

@@ -0,0 +1,16 @@
+import { redirect } from 'next/navigation'
+
+interface PageProps {
+  searchParams: Promise<{ id?: string; orderId?: string; mode?: string }>
+}
+
+export default async function WizardPage({ searchParams }: PageProps) {
+  const params = await searchParams
+  const id = params.orderId || params.id
+  const mode = params.mode
+  const query = new URLSearchParams()
+  if (id) query.set('orderId', id)
+  if (mode) query.set('mode', mode)
+  
+  redirect(`/order?${query.toString()}`)
+}

shop/components/customer-accordion-list.tsx

@@ -0,0 +1,308 @@
+'use client'
+
+import React, { useState } from 'react'
+import Link from 'next/link'
+import type { EndCustomerWithOrders } from '@/lib/types'
+import {
+  ChevronDown,
+  ChevronUp,
+  Building2,
+  Edit2,
+  Sparkles,
+  Download,
+  ExternalLink,
+  Plus,
+  Monitor,
+  AlertTriangle,
+  Search,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+
+const statusLabel: Record<string, string> = {
+  pending: 'Eingegangen',
+  in_review: 'In Prüfung',
+  active: 'Aktiv',
+  completed: 'Abgeschlossen',
+  cancelled: 'Storniert',
+  rejected: 'Abgelehnt',
+}
+
+const statusClass: Record<string, string> = {
+  pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  in_review: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+  active: 'bg-green-500/20 text-green-400 border-green-500/30',
+  completed: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  cancelled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  rejected: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
+}
+
+interface CustomerAccordionListProps {
+  customers: EndCustomerWithOrders[]
+}
+
+export function CustomerAccordionList({ customers }: CustomerAccordionListProps) {
+  const [openCustomerIds, setOpenCustomerIds] = useState<Record<string, boolean>>(() => {
+    // Default open all customers with orders
+    const initial: Record<string, boolean> = {}
+    customers.forEach((c) => {
+      initial[c.id] = true
+    })
+    return initial
+  })
+
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const toggleCustomer = (id: string) => {
+    setOpenCustomerIds((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }))
+  }
+
+  const filteredCustomers = customers.filter((c) => {
+    const term = searchTerm.toLowerCase()
+    return (
+      c.company_name.toLowerCase().includes(term) ||
+      (c.first_name && c.first_name.toLowerCase().includes(term)) ||
+      (c.last_name && c.last_name.toLowerCase().includes(term)) ||
+      (c.city && c.city.toLowerCase().includes(term)) ||
+      (c.email && c.email.toLowerCase().includes(term))
+    )
+  })
+
+  if (customers.length === 0) {
+    return (
+      <Card className="glass-dark border-white/10">
+        <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
+          <Building2 className="w-12 h-12 text-slate-600" />
+          <p className="text-slate-400 text-lg">Noch keine Endkunden angelegt.</p>
+          <Link href="/my-customers/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Suche */}
+      <div className="relative max-w-md">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+        <Input
+          type="text"
+          placeholder="Kunden suchen (Firma, Name, Stadt)..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-9 bg-slate-900/50 border-white/10 text-white placeholder:text-slate-500 focus:border-primary"
+        />
+      </div>
+
+      {/* Accordion List */}
+      <div className="space-y-4">
+        {filteredCustomers.map((customer) => {
+          const isOpen = !!openCustomerIds[customer.id]
+          const orders = customer.orders || []
+
+          return (
+            <Card
+              key={customer.id}
+              className="glass-dark border-white/10 overflow-hidden transition-all duration-200"
+            >
+              {/* Accordion Header */}
+              <div
+                onClick={() => toggleCustomer(customer.id)}
+                className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap"
+              >
+                <div className="flex items-center gap-4 min-w-[240px]">
+                  <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-bold">
+                    <Building2 className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-bold text-lg text-white">{customer.company_name}</h3>
+                      {customer.is_anonymized && (
+                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-xs gap-1">
+                          <AlertTriangle className="w-3 h-3" /> Anonymisiert
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-sm text-slate-400">
+                      {[customer.first_name, customer.last_name].filter(Boolean).join(' ') || 'Kein Ansprechpartner'}
+                      {customer.city ? ` • ${customer.city}` : ''}
+                      {customer.email ? ` • ${customer.email}` : ''}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 ml-auto">
+                  <Badge variant="outline" className="border-white/10 text-slate-300 bg-white/5">
+                    <Monitor className="w-3.5 h-3.5 mr-1 text-primary" />
+                    {orders.length} {orders.length === 1 ? 'Kasse / Bestellung' : 'Kassen / Bestellungen'}
+                  </Badge>
+
+                  {!customer.is_anonymized && (
+                    <Link
+                      href={`/my-customers/${customer.id}`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-slate-400 hover:text-white hover:bg-white/10 gap-1 text-xs"
+                      >
+                        <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
+                      </Button>
+                    </Link>
+                  )}
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-slate-400 hover:text-white p-1"
+                  >
+                    {isOpen ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Accordion Content (Kassen/Orders) */}
+              {isOpen && (
+                <div className="border-t border-white/5 bg-slate-950/40 p-5 space-y-3">
+                  {orders.length === 0 ? (
+                    <div className="text-slate-500 text-sm py-4 text-center">
+                      Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
+                        Zugeordnete Kassen & Systeme ({orders.length})
+                      </p>
+                      {orders.map((order) => {
+                        const items = order.order_data?.items || []
+
+                        return (
+                          <div
+                            key={order.id}
+                            className="p-4 rounded-xl bg-slate-900/60 border border-white/10 hover:border-white/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-4"
+                          >
+                            {/* Kassen Info */}
+                            <div className="space-y-1 min-w-[200px]">
+                              <div className="flex items-center gap-2">
+                                <span className="font-bold text-white text-base">
+                                  {order.register_name}
+                                </span>
+                                <Badge
+                                  className={`text-xs ${
+                                    statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'
+                                  }`}
+                                >
+                                  {statusLabel[order.status] ?? order.status}
+                                </Badge>
+                              </div>
+                              <p className="text-xs text-slate-400 font-mono">
+                                #{order.order_number} • Erstellt am{' '}
+                                {new Date(order.created_at).toLocaleDateString('de-DE', {
+                                  day: '2-digit',
+                                  month: '2-digit',
+                                  year: 'numeric',
+                                })}
+                              </p>
+
+                              {/* Module / Produkte summary */}
+                              {items.length > 0 && (
+                                <div className="flex flex-wrap gap-1.5 pt-1">
+                                  {items.map((item, idx) => (
+                                    <span
+                                      key={idx}
+                                      className="text-xs bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-slate-300"
+                                    >
+                                      {item.product_name}
+                                      {item.selected_modules?.length > 0 && (
+                                        <span className="text-slate-500 ml-1">
+                                          (+{item.selected_modules.length} Module)
+                                        </span>
+                                      )}
+                                    </span>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+
+                            {/* Preis & Action Buttons */}
+                            <div className="flex items-center gap-3 flex-wrap justify-between md:justify-end border-t md:border-t-0 pt-3 md:pt-0 border-white/5">
+                              <div className="text-left md:text-right mr-2">
+                                <p className="text-[10px] text-slate-500 uppercase tracking-wider">
+                                  Gesamtwert
+                                </p>
+                                <p className="font-bold text-white text-sm">
+                                  {new Intl.NumberFormat('de-DE', {
+                                    style: 'currency',
+                                    currency: 'EUR',
+                                  }).format(order.total_price)}
+                                </p>
+                              </div>
+
+                              {/* Upgrade / Abo Button (Flow Fall B) */}
+                              <Link
+                                href={`/wizard?mode=extension&orderId=${order.id}`}
+                              >
+                                <Button
+                                  size="sm"
+                                  className="bg-primary/20 hover:bg-primary/30 text-primary border border-primary/30 text-xs font-semibold gap-1.5"
+                                >
+                                  <Sparkles className="w-3.5 h-3.5" />
+                                  Upgrade / Abo
+                                </Button>
+                              </Link>
+
+                              {/* PDF Download Button */}
+                              {order.pdf_url && (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  asChild
+                                  className="border-white/10 hover:bg-white/10 text-xs text-slate-300"
+                                >
+                                  <a
+                                    href={`/api/orders/${order.id}/download`}
+                                    download
+                                    title="Bestellbestätigung PDF herunterladen"
+                                  >
+                                    <Download className="w-3.5 h-3.5 mr-1" />
+                                    PDF
+                                  </a>
+                                </Button>
+                              )}
+
+                              {/* Details Button */}
+                              <Link href={`/order/success?id=${order.id}`}>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="text-slate-400 hover:text-white text-xs p-2"
+                                  title="Details anzeigen"
+                                >
+                                  <ExternalLink className="w-4 h-4" />
+                                </Button>
+                              </Link>
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              )}
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

shop/lib/actions/queries.ts

@@ -1,7 +1,7 @@
 'use server'
 
 import { createClient } from '@/lib/supabase/server'
-import type { Order, EndCustomer } from '@/lib/types'
+import type { Order, EndCustomer, EndCustomerWithOrders, OrderWithRegisterName } from '@/lib/types'
 
 /**
  * Holt alle Bestellanfragen.
@@ -34,3 +34,42 @@ export async function getCompanyEndCustomers(): Promise<EndCustomer[]> {
   if (error) throw error
   return data as EndCustomer[]
 }
+
+/**
+ * Holt alle Endkunden inkl. ihrer Bestellungen/Kassen verschachtelt.
+ * Extrahiert den Kassen-Namen aus order_data.items[0].device_name (Fallback "Kasse 1").
+ * RLS filtert automatisch über get_auth_company_id().
+ */
+export async function getPartnerCustomersWithOrders(): Promise<EndCustomerWithOrders[]> {
+  const supabase = await createClient()
+
+  const { data, error } = await supabase
+    .from('end_customers')
+    .select('*, orders(*)')
+    .order('company_name', { ascending: true })
+
+  if (error) throw error
+
+  return (data || []).map((customer: any) => {
+    const rawOrders = customer.orders || []
+    // Sort orders by created_at desc
+    const sortedOrders = [...rawOrders].sort(
+      (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    )
+
+    const orders: OrderWithRegisterName[] = sortedOrders.map((order: any) => {
+      const items = order.order_data?.items || []
+      const deviceName = items[0]?.device_name || 'Kasse 1'
+      return {
+        ...order,
+        register_name: deviceName,
+      }
+    })
+
+    return {
+      ...customer,
+      orders,
+    }
+  })
+}
+

shop/lib/types.ts

@@ -170,6 +170,14 @@ export type Order = {
   created_at: string
 }
 
+export type OrderWithRegisterName = Order & {
+  register_name: string
+}
+
+export type EndCustomerWithOrders = EndCustomer & {
+  orders: OrderWithRegisterName[]
+}
+
 // ─── Lizenz-Output (für Lizenzserver / ERP) ───────────────────────────────────
 
 export type LicenseOption = {