fix(admin): close DialogFooter tag in product dialog

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">
+              {!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: 1, label: 'Allgemein' },
-                  { nr: 3, label: 'Sichtbarkeit' },
+                    { nr: 2, label: 'Abrechnung' },
-                  { nr: 4, label: 'Abhängigkeiten' },
+                    { nr: 3, label: 'Sichtbarkeit' },
-                  { nr: 5, label: 'Module' }
+                    { nr: 4, label: 'Abhängigkeiten' },
-                ].map(s => (
+                    { nr: 5, label: 'Module' }
-                  <div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
+                  ].map(s => (
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
+                    <div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
-                      step === s.nr
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
-                        ? 'bg-primary text-white'
+                        step === s.nr
-                        : step > s.nr
+                          ? 'bg-primary text-white'
-                        ? 'bg-green-500 text-white'
+                          : step > s.nr
-                        : 'bg-slate-200 dark:bg-slate-800 text-slate-500'
+                          ? 'bg-green-500 text-white'
-                    }`}>
+                          : 'bg-slate-200 dark:bg-slate-800 text-slate-500'
-                      {s.nr}
+                      }`}>
+                        {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>
-                ))}
+              )}
-              </div>
+              {(product || step === 1) && (
-              {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,28 +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">
+              {product ? (
-                {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>
+              ) : (
+                <>
+                  <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>
+                </>
+              )}
             </DialogFooter>
           </form>
         </Form>