feat: change route path id

src/App.jsx

@@ -18,24 +18,39 @@ function App() {
   return (
     <>
       <BrowserRouter>
-      <Routes>
-        <Route element={<MainLayout />}>
-          <Route index element={<Navigate to="/courses" replace />} />
-          <Route path="/courses" element={<CoursesPage />} />
-          <Route path="/courses/new" element={<CourseFormPage />} />
-          <Route path="/courses/:courseId/detail" element={<CourseDetail />} />
-          <Route path="/courses/:courseId/edit" element={<CourseFormPage />} />
-          <Route path="/courses/:courseId/lessons/new" element={<LessonFormPage />} />
-          <Route path="/courses/:courseId/lessons/:lessonId/edit" element={<LessonFormPage />} />
-          <Route path="/lessons" element={<LessonPage />} />
-          <Route path="/question-bank/mcq" element={<MCQPage />} />
-          <Route path="/question-bank/paragraph" element={<ParagraphPage />} />
-          <Route path="/users" element={<UsersPage />} />
-          <Route path="/settings/masterdata" element={<MasterdataPage />} />
-          <Route path="/settings/role" element={<RolePage />} />
-          <Route path="/settings/permission" element={<PermissionPage />} />
-        </Route>
-      </Routes>
+        <Routes>
+          <Route element={<MainLayout />}>
+            <Route index element={<Navigate to="/courses" replace />} />
+            <Route path="/courses" element={<CoursesPage />} />
+            <Route path="/courses/new" element={<CourseFormPage />} />
+            <Route
+              path="/courses/detail/:courseId"
+              element={<CourseDetail />}
+            />
+            <Route
+              path="/courses/edit/:courseId"
+              element={<CourseFormPage />}
+            />
+            <Route
+              path="/courses/:courseId/lessons/new"
+              element={<LessonFormPage />}
+            />
+            <Route
+              path="/courses/:courseId/lessons/edit/:lessonId"
+              element={<LessonFormPage />}
+            />
+            <Route path="/lessons" element={<LessonPage />} />
+            <Route path="/question-bank/mcq" element={<MCQPage />} />
+            <Route
+              path="/question-bank/paragraph"
+              element={<ParagraphPage />}
+            />
+            <Route path="/users" element={<UsersPage />} />
+            <Route path="/settings/masterdata" element={<MasterdataPage />} />
+            <Route path="/settings/role" element={<RolePage />} />
+            <Route path="/settings/permission" element={<PermissionPage />} />
+          </Route>
+        </Routes>
       </BrowserRouter>
       <Toaster />
     </>

src/pages/Course/CourseDetails.jsx

@@ -199,7 +199,7 @@ function CourseDetail() {
           <Button
             variant="outline"
             className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
-            onClick={() => navigate(`/courses/${courseId}/edit`)}
+            onClick={() => navigate(`/courses/edit/${courseId}`)}
           >
             <HiOutlinePencil className="w-4 h-4 mr-2" />
             Edit
@@ -416,7 +416,7 @@ function CourseDetail() {
                       <div className="col-span-1 flex items-center justify-end gap-1">
                         <button
                           onClick={() =>
-                            navigate(`/courses/${courseId}/lessons/${lesson.id}/edit`)
+                            navigate(`/courses/${courseId}/lessons/edit/${lesson.id}`)
                           }
                           className="w-8 h-8 rounded-lg flex items-center justify-center text-app-text-muted hover:text-app-primary hover:bg-app-primary-soft transition-colors"
                           title="Edit"

src/pages/Course/CourseFormPage.jsx

@@ -122,10 +122,10 @@ function CourseFormPage() {
         await courseService.update(courseId, payload);
       } else {
         const created = await courseService.create(payload);
-        navigate(`/courses/${created.id}/detail`);
+        navigate(`/courses/detail/${created.id}`);
         return;
       }
-      navigate(`/courses/${courseId}/detail`);
+      navigate(`/courses/detail/${courseId}`);
     } catch (err) {
       setError(err.message || 'Failed to save course');
     } finally {
@@ -168,7 +168,7 @@ function CourseFormPage() {
             <Button
               variant="outline"
               className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
-              onClick={() => navigate(isEditing ? `/courses/${courseId}/detail` : '/courses')}
+              onClick={() => navigate(isEditing ? `/courses/detail/${courseId}` : '/courses')}
               disabled={saving}
             >
               <HiOutlineArrowLeft className="w-4 h-4 mr-2" />

src/pages/Course/CoursesPage.jsx

@@ -63,7 +63,7 @@ function CoursePage() {
   });
 
   const handleClick = (course) => {
-    navigate(`/courses/${course.id}/detail`);
+    navigate(`/courses/detail/${course.id}`);
   };
 
   return (
@@ -130,7 +130,7 @@ function CoursePage() {
               course={course}
               image={course.image}
               handleClick={() => handleClick(course)}
-              onEdit={() => navigate(`/courses/${course.id}/edit`)}
+              onEdit={() => navigate(`/courses/edit/${course.id}`)}
             />
           ))}
           {filtered.length === 0 && (

src/pages/lesson/LessonPage.jsx

@@ -110,7 +110,7 @@ function LessonPage() {
           <button
             type="button"
             style={actionBtn}
-            onClick={() => navigate(`/courses/${row.courseId}/lessons/${row.id}/edit`)}
+            onClick={() => navigate(`/courses/${row.courseId}/lessons/edit/${row.id}`)}
             onMouseEnter={(e) => { e.target.style.background = '#7132f5'; e.target.style.color = '#ffffff'; }}
             onMouseLeave={(e) => { e.target.style.background = '#ffffff'; e.target.style.color = '#5741d8'; }}
           >

src/pages/lesson/components/ActionBar.jsx

@@ -19,7 +19,7 @@ function ActionBar({ courseId, isPublished, onTogglePublish, onSaveDraft, saving
         </Link>
         <span>/</span>
         <Link
-          to={`/courses/${courseId}/detail`}
+          to={`/courses/detail/${courseId}`}
           className="hover:text-primary transition-colors truncate max-w-[200px]"
         >
           {courseId}