- {categoryId ? (
-
-
-
- ) : null}
@@ -615,6 +633,23 @@ export function HumanLanguagePage() {
: null}
)}
+
+
)
}
diff --git a/src/pages/content-management/HumanLanguageSubModulePage.tsx b/src/pages/content-management/HumanLanguageSubModulePage.tsx
new file mode 100644
index 0000000..43b21b8
--- /dev/null
+++ b/src/pages/content-management/HumanLanguageSubModulePage.tsx
@@ -0,0 +1,1076 @@
+import { useEffect, useState } from "react"
+import { Link, useParams, useNavigate } from "react-router-dom"
+import { ArrowLeft, Plus, FileText, Layers, Edit, Trash2, X, Video, MoreVertical, Play } from "lucide-react"
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
+import { Card } from "../../components/ui/card"
+import alertSrc from "../../assets/Alert.svg"
+import { Badge } from "../../components/ui/badge"
+import { Button } from "../../components/ui/button"
+import { Input } from "../../components/ui/input"
+import {
+ getSubCoursesByCourse,
+ getQuestionSetsByOwner,
+ getVideosBySubCourse,
+ updatePractice,
+ deleteQuestionSet,
+ createCourseVideo,
+ updateSubCourseVideo,
+ deleteSubCourseVideo,
+ getVimeoSample,
+} from "../../api/courses.api"
+import { uploadVideoFile } from "../../api/files.api"
+import type {
+ SubCourse,
+ QuestionSet,
+ SubCourseVideo,
+ VimeoSampleVideo,
+ VideoStatus,
+ VideoVisibility,
+} from "../../types/course.types"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
+
+type TabType = "lesson" | "practice"
+type StatusFilter = "all" | "published" | "draft" | "archived"
+
+/** Human Language–only sub-module editor: lesson (videos) + practice tabs; not used by general course flows. */
+export function HumanLanguageSubModulePage() {
+ const { categoryId, courseId, subCourseId } = useParams<{
+ categoryId: string
+ courseId: string
+ subCourseId: string
+ }>()
+ const navigate = useNavigate()
+
+ const [subCourse, setSubCourse] = useState
+ 
+
+ )
+ }
+
+ if (error) {
+ return (
+ Loading course…
+
+ 
+
+ )
+ }
+
+ return (
+ {error}
+
+ {/* Back Button */}
+
+
+
+
+
+
+
+ {subCourse.level}
+ )}
+
+ + {subCourse?.title} +
+ {subCourse?.level && ( ++ {subCourse?.description || "No description available"} +
+
+
+
+
+ + Use Lesson for videos/audio and{" "} + Practice for question sets tied to this sub-module. +
+ + {/* Tabs */} +
+
+
+
+
+ {/* Content */}
+ {activeTab === "practice" && (
+ <>
+ {practicesLoading ? (
+
+
+
+
+
+
+ ) : filteredPractices.length === 0 ? (
+ Loading practices…
+
+
+ ) : (
+
+
+ No practices yet
+Create your first practice to get started
+ +
+ {filteredPractices.map((practice) => {
+ const statusConfig: Record = {
+ PUBLISHED: { bg: "bg-green-50 text-green-700 ring-1 ring-inset ring-green-200", dot: "bg-green-500", text: "Published" },
+ DRAFT: { bg: "bg-grayScale-50 text-grayScale-600 ring-1 ring-inset ring-grayScale-200", dot: "bg-grayScale-400", text: "Draft" },
+ ARCHIVED: { bg: "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200", dot: "bg-amber-500", text: "Archived" },
+ }
+ const status = statusConfig[practice.status] ?? statusConfig.DRAFT
+
+ return (
+ handlePracticeClick(practice.id)}
+ >
+
+ )
+ })}
+
+ )}
+
+ )}
+
+ {activeTab === "lesson" && (
+ <>
+ {videosLoading ? (
+
+
+
+
+
+ {status.text}
+
+
+
+ {practice.title}
+{practice.description}
+ +
+
+ {practice.set_type}
+
+ {practice.persona && (
+
+ {practice.persona}
+
+ )}
+
+
+
+
+
+
+
+ {practice.shuffle_questions && (
+ Shuffle ON
+ )}
+
+
+ {new Date(practice.created_at).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ })}
+
+
+ e.stopPropagation()}>
+
+
+
+
+
+ ) : videos.length === 0 ? (
+ Loading videos…
+
+
+ ) : (
+
+
+
+ No videos yet
+Upload your first video to get started
+ +
+ {videos.map((video, index) => {
+ const gradients = [
+ "bg-gradient-to-br from-blue-100 via-blue-50 to-indigo-100",
+ "bg-gradient-to-br from-amber-100 via-yellow-50 to-orange-100",
+ "bg-gradient-to-br from-purple-100 via-fuchsia-50 to-pink-100",
+ "bg-gradient-to-br from-emerald-100 via-green-50 to-teal-100",
+ ]
+ const formatDuration = (seconds: number) => {
+ const mins = Math.floor(seconds / 60)
+ const secs = seconds % 60
+ return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+ }
+ return (
+
+ {/* Thumbnail with duration */}
+
+ )
+ })}
+
+ )}
+
+ )}
+
+ {/* Delete Modal */}
+ {showDeleteModal && practiceToDelete && (
+
+ {video.thumbnail ? (
+ 
+ ) : (
+
+
+ {/* Content */}
+
+
+
+ )}
+
+ {formatDuration(video.duration || 0)}
+
+
+ {/* Status and menu */}
+
+
+
+
+ {video.is_published ? "PUBLISHED" : "DRAFT"}
+
+
+
+ {/* Title */}
+
+
+ {openVideoMenuId === video.id && (
+
+
+
+
+ )}
+ {video.title}
+ + {/* Edit / Preview buttons */} +
+
+
+
+
+ {/* Publish button */}
+
+
+
+ )}
+
+ {/* Edit Practice Modal */}
+ {showEditPracticeModal && practiceToEdit && (
+
+
+
+
+ Delete Practice
+ +
+
+ + Are you sure you want to delete{" "} + {practiceToDelete.title}? This action cannot be undone. +
+
+
+
+
+
+
+
+
+ Edit Practice
+ +
+
+
+ setTitle(e.target.value)}
+ placeholder="Enter practice title"
+ />
+
+
+
+