From 0ecb16daff67f3bde9c5d97f106c3074ebd66dd6 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 10 Jul 2026 09:36:30 +0200
Subject: [PATCH] feat(admin): support full view in product edit and wizard
 steps in product create

---
 .../admin/create-product-dialog.tsx           | 108 +++++++++++-------
 1 file changed, 65 insertions(+), 43 deletions(-)

diff --git a/shop/components/admin/create-product-dialog.tsx b/shop/components/admin/create-product-dialog.tsx
index f17b845..e9f8265 100644
--- a/shop/components/admin/create-product-dialog.tsx
+++ b/shop/components/admin/create-product-dialog.tsx
@@ -182,29 +182,31 @@ export function CreateProductDialog({
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0">
             <div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0">
               {/* Step Indicator */}
-              <div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/5 pb-4">
-                {[
-                  { nr: 1, label: 'Allgemein' },
-                  { nr: 2, label: 'Abrechnung' },
-                  { nr: 3, label: 'Sichtbarkeit' },
-                  { nr: 4, label: 'Abhängigkeiten' },
-                  { nr: 5, label: 'Module' }
-                ].map(s => (
-                  <div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
-                      step === s.nr
-                        ? 'bg-primary text-white'
-                        : step > s.nr
-                        ? 'bg-green-500 text-white'
-                        : 'bg-slate-200 dark:bg-slate-800 text-slate-500'
-                    }`}>
-                      {s.nr}
+              {!product && (
+                <div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/5 pb-4">
+                  {[
+                    { nr: 1, label: 'Allgemein' },
+                    { nr: 2, label: 'Abrechnung' },
+                    { nr: 3, label: 'Sichtbarkeit' },
+                    { nr: 4, label: 'Abhängigkeiten' },
+                    { nr: 5, label: 'Module' }
+                  ].map(s => (
+                    <div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
+                        step === s.nr
+                          ? 'bg-primary text-white'
+                          : step > s.nr
+                          ? 'bg-green-500 text-white'
+                          : 'bg-slate-200 dark:bg-slate-800 text-slate-500'
+                      }`}>
+                        {s.nr}
+                      </div>
+                      <span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
                     </div>
-                    <span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
-                  </div>
-                ))}
-              </div>
-              {step === 1 && (
+                  ))}
+                </div>
+              )}
+              {(product || step === 1) && (
                 <div className="space-y-6">
                   <div className="grid grid-cols-2 gap-4">
                     <FormField
@@ -274,7 +276,9 @@ export function CreateProductDialog({
                 </div>
               )}
 
-              {step === 2 && (
+              {product && <Separator className="bg-slate-200 dark:bg-white/10" />}
+
+              {(product || step === 2) && (
                 <div className="space-y-6">
                   <FormField
                     control={form.control}
@@ -309,7 +313,9 @@ export function CreateProductDialog({
                 </div>
               )}
 
-              {step === 3 && (
+              {product && <Separator className="bg-slate-200 dark:bg-white/10" />}
+
+              {(product || step === 3) && (
                 <div className="space-y-6">
                   <div className="grid grid-cols-2 gap-4">
                     <FormField
@@ -375,7 +381,9 @@ export function CreateProductDialog({
                 </div>
               )}
 
-              {step === 4 && (
+              {product && <Separator className="bg-slate-200 dark:bg-white/10" />}
+
+              {(product || step === 4) && (
                 <div className="grid grid-cols-2 gap-4">
                   {/* Product Requirements */}
                   <FormField
@@ -471,7 +479,9 @@ export function CreateProductDialog({
                 </div>
               )}
 
-              {step === 5 && (
+              {product && <Separator className="bg-slate-200 dark:bg-white/10" />}
+
+              {(product || step === 5) && (
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <h3 className="text-lg font-semibold flex items-center gap-2">
@@ -695,29 +705,41 @@ export function CreateProductDialog({
             </div>
 
             <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center sm:justify-between">
-              <div className="flex gap-2">
-                {step > 1 ? (
-                  <Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
-                    Zurück
-                  </Button>
-                ) : (
+              {product ? (
+                <>
                   <Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                     Abbrechen
                   </Button>
-                )}
-              </div>
-              <div className="flex gap-2">
-                {step < 5 ? (
-                  <Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-white">
-                    Weiter
-                  </Button>
-                ) : (
                   <Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
                     Speichern
                   </Button>
-                )}
-              </div>
-            </DialogFooter>
+                </>
+              ) : (
+                <>
+                  <div className="flex gap-2">
+                    {step > 1 ? (
+                      <Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
+                        Zurück
+                      </Button>
+                    ) : (
+                      <Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
+                        Abbrechen
+                      </Button>
+                    )}
+                  </div>
+                  <div className="flex gap-2">
+                    {step < 5 ? (
+                      <Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-white">
+                        Weiter
+                      </Button>
+                    ) : (
+                      <Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
+                        Speichern
+                      </Button>
+                    )}
+                  </div>
+                </>
+              )}
           </form>
         </Form>
       </DialogContent>