From 99cbb11c5aad57ddc3574ab05e54f3f25f923717 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 10 Jul 2026 00:52:22 +0200
Subject: [PATCH] feat: add edit and delete actions to basket items for device
 configuration switching

---
 shop/components/order-wizard.tsx | 54 +++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 4b7a45f..46590ba 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -11,7 +11,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, ShieldCheck, Cloud, Utensils, HardDrive, Package, AlertCircle, Loader2, UserPlus, Building2, CreditCard, Calendar, Search } from 'lucide-react'
+import { Check, ChevronRight, ChevronLeft, ShoppingCart, User, ShieldCheck, Cloud, Utensils, HardDrive, Package, AlertCircle, Loader2, UserPlus, Building2, CreditCard, Calendar, Search, Pencil, Trash2 } from 'lucide-react'
 import { submitOrder, updateOrder } from '@/lib/actions/orders'
 import { createEndCustomer } from '@/lib/actions/end-customers'
 import { Category } from '@/lib/types'
@@ -582,6 +582,20 @@ export function OrderWizard({
     setSelections(resetSels)
   }
 
+  const editBasketItem = (idx: number) => {
+    const item = basketItems[idx]
+    if (!item) return
+    setBasketItems(prev => prev.filter((_, i) => i !== idx))
+    setSelections(item.selections)
+    setModuleQuantities(item.moduleQuantities)
+    setDeviceName(item.deviceName)
+    setSelectedBillingInterval(item.billingInterval)
+  }
+
+  const deleteBasketItem = (idx: number) => {
+    setBasketItems(prev => prev.filter((_, i) => i !== idx))
+  }
+
   const handleSubmit = async () => {
     if (isSubmitting) return
     setIsSubmitting(true)
@@ -1371,12 +1385,38 @@ export function OrderWizard({
                     {basketItems.length > 0 && (
                       <div className="pt-4 border-t border-white/10 space-y-2">
                         <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
-                        {basketItems.map((item, idx) => (
-                          <div key={idx} className="flex justify-between text-xs bg-white/5 p-2 rounded border border-white/10">
-                            <span className="text-white font-medium">{item.deviceName}</span>
-                            <span className="text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
-                          </div>
-                        ))}
+                        <div className="space-y-1.5">
+                          {basketItems.map((item, idx) => (
+                            <div key={idx} className="flex justify-between items-center text-xs bg-white/5 p-2 rounded border border-white/10">
+                              <div className="flex flex-col">
+                                <span className="text-white font-medium">{item.deviceName}</span>
+                                <span className="text-[10px] text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
+                              </div>
+                              <div className="flex items-center gap-1.5">
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
+                                  onClick={() => editBasketItem(idx)}
+                                  title="Gerät bearbeiten"
+                                >
+                                  <Pencil className="w-3.5 h-3.5" />
+                                </Button>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
+                                  onClick={() => deleteBasketItem(idx)}
+                                  title="Gerät löschen"
+                                >
+                                  <Trash2 className="w-3.5 h-3.5" />
+                                </Button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
                       </div>
                     )}
                   </CardContent>