feat(courses): multi-step course authoring wizard

app/dashboard/courses/create/page.jsx

@@ -0,0 +1,5 @@
+import CourseWizard from "@/components/organisms/create/course-wizard";
+
+export default function CreateCoursePage() {
+  return <CourseWizard />;
+}

app/dashboard/courses/edit/[courseId]/page.jsx

@@ -0,0 +1,7 @@
+import CourseWizard from "@/components/organisms/create/course-wizard";
+
+export default async function EditCoursePage({ params }) {
+  const { courseId } = await params;
+
+  return <CourseWizard courseId={courseId} />;
+}

app/dashboard/courses/page.jsx

@@ -1,19 +1,18 @@
 "use client";
 import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import CourseCard from "@/components/molecules/dashboard/cards/courseCard";
 import CourseCardSkeleton from "@/components/atoms/skeletons/CourseCardSkeleton";
 import Button from "@/components/atoms/form/Button";
-import Modal from "@/components/molecules/Modal";
-import CreateCourseForm from "@/components/organisms/create/course-create-form";
 import { fetchCourses } from "@/lib/actions/courses/fetch-courses";
 import { getBookmarkedCourses } from "@/lib/actions/courses/bookmark-course";
 import useAuth from "@/hooks/useAuth";
 import NetworkErrorComp from "@/components/molecules/errors/NetworkError";
 
 export default function CoursesPage() {
+  const router = useRouter();
   const { user } = useAuth();
   const [courses, setCourses] = useState([]);
-  const [modalOpen, setModalOpen] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const [showBookmarks, setShowBookmarks] = useState(false);
@@ -61,7 +60,7 @@ export default function CoursesPage() {
               round
               outlined
               className="text-normal"
-              onClick={() => setModalOpen(!modalOpen)}
+              onClick={() => router.push("/dashboard/courses/create")}
             >
               Create Course
             </Button>
@@ -114,14 +113,6 @@ export default function CoursesPage() {
           )}
         </div>
       </div>
-      <Modal
-        title="Create Course"
-        isOpen={modalOpen}
-        onClose={() => setModalOpen(false)}
-        className="max-w-md w-full"
-      >
-        <CreateCourseForm />
-      </Modal>
     </>
   );
 }

components/atoms/form/ComboBox.jsx

@@ -21,7 +21,11 @@ import { islamicCategories } from "@/lib/data";
 
 export default function CategoryCombobox({ category, setCategory }) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState("");
+  const [value, setValue] = React.useState(category || "");
+
+  React.useEffect(() => {
+    setValue(category || "");
+  }, [category]);
 
   return (
 

components/molecules/dashboard/wizard-step-indicator.jsx

@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { Check } from "lucide-react";
+
+export default function WizardStepIndicator({
+  steps,
+  currentStep,
+  completedSteps,
+  onStepClick,
+}) {
+  return (
+    <nav aria-label="Course creation wizard steps" className="w-full py-4">
+      <ol className="flex items-center justify-between w-full max-w-3xl mx-auto px-4">
+        {steps.map((step, idx) => {
+          const isCompleted = completedSteps?.has(idx);
+          const isActive = currentStep === idx;
+          const isClickable = isCompleted || idx <= currentStep;
+
+          return (
+            <li
+              key={step.id || step.label}
+              className="flex items-center flex-1 last:flex-none relative"
+            >
+              <button
+                type="button"
+                disabled={!isClickable}
+                aria-current={isActive ? "step" : undefined}
+                onClick={() => isClickable && onStepClick && onStepClick(idx)}
+                className={`flex items-center gap-2 group text-left focus:outline-none ${
+                  isClickable ? "cursor-pointer" : "cursor-not-allowed opacity-60"
+                }`}
+              >
+                <div
+                  className={`w-9 h-9 rounded-full flex items-center justify-center font-semibold text-sm transition-all shadow-xs ${
+                    isCompleted
+                      ? "bg-accent text-white"
+                      : isActive
+                      ? "bg-accent/20 border-2 border-accent text-accent font-bold"
+                      : "bg-muted border border-gray-300 text-muted-foreground"
+                  }`}
+                >
+                  {isCompleted ? <Check className="w-5 h-5 stroke-[2.5]" /> : idx + 1}
+                </div>
+                <span
+                  className={`hidden sm:inline-block text-sm font-medium transition-colors ${
+                    isActive
+                      ? "text-foreground font-semibold"
+                      : isCompleted
+                      ? "text-accent"
+                      : "text-muted-foreground"
+                  }`}
+                >
+                  {step.label}
+                </span>
+              </button>
+
+              {/* Connecting line */}
+              {idx < steps.length - 1 && (
+                <div
+                  className={`flex-1 h-[2px] mx-2 sm:mx-4 transition-colors ${
+                    idx < currentStep ? "bg-accent" : "bg-gray-200"
+                  }`}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}