Refactorización de wizards para consistencia, reusabilidad y mantenibilidad

src/features/asignaturas/nueva/NuevaAsignaturaModalContainer.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from '@tanstack/react-router'
+import * as Icons from 'lucide-react'
 
 import { useNuevaAsignaturaWizard } from './hooks/useNuevaAsignaturaWizard'
 
@@ -6,13 +7,20 @@ import { PasoBasicosForm } from '@/components/asignaturas/wizard/PasoBasicosForm
 import { PasoConfiguracionPanel } from '@/components/asignaturas/wizard/PasoConfiguracionPanel'
 import { PasoMetodoCardGroup } from '@/components/asignaturas/wizard/PasoMetodoCardGroup'
 import { PasoResumenCard } from '@/components/asignaturas/wizard/PasoResumenCard'
-import { VistaSinPermisos } from '@/components/asignaturas/wizard/VistaSinPermisos'
 import { WizardControls } from '@/components/asignaturas/wizard/WizardControls'
-import { WizardHeader } from '@/components/asignaturas/wizard/WizardHeader'
 import { defineStepper } from '@/components/stepper'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { WizardLayout } from '@/components/wizard/WizardLayout'
+import { WizardResponsiveHeader } from '@/components/wizard/WizardResponsiveHeader'
 
-const auth_get_current_user_role = () => 'JEFE_CARRERA' as const
+const auth_get_current_user_role = (): string => 'JEFE_CARRERA'
 
 const Wizard = defineStepper(
   {
@@ -55,85 +63,90 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
     navigate({ to: `/planes/${planId}/asignaturas`, resetScroll: false })
   }
 
+  if (role !== 'JEFE_CARRERA') {
+    return (
+      <WizardLayout title="Nueva Asignatura" onClose={handleClose}>
+        <Card className="border-destructive/40">
+          <CardHeader>
+            <CardTitle className="text-destructive flex items-center gap-2">
+              <Icons.ShieldAlert className="h-5 w-5" />
+              Sin permisos
+            </CardTitle>
+            <CardDescription>
+              Solo el Jefe de Carrera puede crear asignaturas.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-end">
+            <Button variant="secondary" onClick={handleClose}>
+              Volver
+            </Button>
+          </CardContent>
+        </Card>
+      </WizardLayout>
+    )
+  }
+
   return (
-    <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
-      <DialogContent
-        className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
-        onInteractOutside={(e) => e.preventDefault()}
-      >
-        {role !== 'JEFE_CARRERA' ? (
-          <VistaSinPermisos onClose={handleClose} />
-        ) : (
-          <Wizard.Stepper.Provider
-            initialStep={Wizard.utils.getFirst().id}
-            className="flex h-full flex-col"
+    <Wizard.Stepper.Provider
+      initialStep={Wizard.utils.getFirst().id}
+      className="flex h-full flex-col"
+    >
+      {({ methods }) => {
+        const idx = Wizard.utils.getIndex(methods.current.id)
+
+        return (
+          <WizardLayout
+            title="Nueva Asignatura"
+            onClose={handleClose}
+            headerSlot={
+              <WizardResponsiveHeader wizard={Wizard} methods={methods} />
+            }
+            footerSlot={
+              <Wizard.Stepper.Controls>
+                <WizardControls
+                  Wizard={Wizard}
+                  methods={methods}
+                  wizard={wizard}
+                  canContinueDesdeMetodo={canContinueDesdeMetodo}
+                  canContinueDesdeBasicos={canContinueDesdeBasicos}
+                  canContinueDesdeConfig={canContinueDesdeConfig}
+                  onCreate={() => crearAsignatura(handleClose)}
+                />
+              </Wizard.Stepper.Controls>
+            }
           >
-            {({ methods }) => {
-              const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
-              const totalSteps = Wizard.steps.length
-              const nextStep = Wizard.steps[currentIndex] ?? {
-                title: '',
-                description: '',
-              }
+            <div className="mx-auto max-w-3xl">
+              {idx === 0 && (
+                <Wizard.Stepper.Panel>
+                  <PasoMetodoCardGroup wizard={wizard} onChange={setWizard} />
+                </Wizard.Stepper.Panel>
+              )}
 
-              return (
-                <>
-                  <WizardHeader
-                    title="Nueva Asignatura"
-                    Wizard={Wizard}
-                    methods={{ ...methods, onClose: handleClose }}
-                  />
+              {idx === 1 && (
+                <Wizard.Stepper.Panel>
+                  <PasoBasicosForm wizard={wizard} onChange={setWizard} />
+                </Wizard.Stepper.Panel>
+              )}
 
-                  <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
-                    <div className="mx-auto max-w-3xl">
-                      {Wizard.utils.getIndex(methods.current.id) === 0 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoMetodoCardGroup
-                            wizard={wizard}
-                            onChange={setWizard}
-                          />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 1 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoBasicosForm
-                            wizard={wizard}
-                            onChange={setWizard}
-                          />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 2 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoConfiguracionPanel
-                            wizard={wizard}
-                            onChange={setWizard}
-                            onGenerarIA={simularGeneracionIA}
-                          />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 3 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoResumenCard wizard={wizard} />
-                        </Wizard.Stepper.Panel>
-                      )}
-                    </div>
-                  </div>
-
-                  <WizardControls
-                    Wizard={Wizard}
-                    methods={methods}
+              {idx === 2 && (
+                <Wizard.Stepper.Panel>
+                  <PasoConfiguracionPanel
                     wizard={wizard}
-                    canContinueDesdeMetodo={canContinueDesdeMetodo}
-                    canContinueDesdeBasicos={canContinueDesdeBasicos}
-                    canContinueDesdeConfig={canContinueDesdeConfig}
-                    onCreate={() => crearAsignatura(handleClose)}
+                    onChange={setWizard}
+                    onGenerarIA={simularGeneracionIA}
                   />
-                </>
-              )
-            }}
-          </Wizard.Stepper.Provider>
-        )}
-      </DialogContent>
-    </Dialog>
+                </Wizard.Stepper.Panel>
+              )}
+
+              {idx === 3 && (
+                <Wizard.Stepper.Panel>
+                  <PasoResumenCard wizard={wizard} />
+                </Wizard.Stepper.Panel>
+              )}
+            </div>
+          </WizardLayout>
+        )
+      }}
+    </Wizard.Stepper.Provider>
   )
 }