{isCollapsed ? (
- )
+ );
}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index c46b5cd..83cec90 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,21 +1,21 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as React from "react";
+import { cn } from "../../lib/utils";
export interface InputProps extends React.InputHTMLAttributes
+ (
+ "dawit",
+ );
+ const [isPublished, setIsPublished] = useState(false);
+
+ const [formData, setFormData] = useState({
+ program: "Intermediate",
+ course: "A2",
+ title: "",
+ description: "",
+ selectedVideo: "",
+ tips: "Focus on using the present perfect continuous tense to describe an action that started in the past and continues now.",
+ questions: [
+ {
+ id: "q1",
+ text: "How long have you been studying English?",
+ type: "Speaking",
+ voicePrompt: "prompt_q1_en.mp3",
+ sampleAnswer: "prompt_q1_en.mp3",
+ },
+ ],
+ });
+
+ const nextStep = () =>
+ setCurrentStep((prev) => Math.min(prev + 1, flowSteps.length));
+ const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+ if (isPublished) {
+ return (
+
+
+ );
+}
diff --git a/src/pages/content-management/components/practice-steps/PersonaStep.tsx b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
new file mode 100644
index 0000000..133b6e4
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
@@ -0,0 +1,91 @@
+import { Check, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "../../../../components/ui/avatar";
+import { cn } from "../../../../lib/utils";
+import { PERSONAS } from "./constants";
+
+interface PersonaStepProps {
+ selectedPersona: string | null;
+ setSelectedPersona: (id: string) => void;
+ nextStep: () => void;
+ prevStep: () => void;
+}
+
+export function PersonaStep({
+ selectedPersona,
+ setSelectedPersona,
+ nextStep,
+ prevStep,
+}: PersonaStepProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/content-management/components/practice-steps/ScenarioStep.tsx b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
new file mode 100644
index 0000000..c3ace37
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
@@ -0,0 +1,115 @@
+import { Upload, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
+import { Textarea } from "../../../../components/ui/textarea";
+
+interface ScenarioStepProps {
+ formData: any;
+ setFormData: (data: any) => void;
+ nextStep: () => void;
+ prevStep: () => void;
+}
+
+export function ScenarioStep({
+ formData,
+ setFormData,
+ nextStep,
+ prevStep,
+}: ScenarioStepProps) {
+ return (
+
{steps.map((step, index) => {
- const stepNumber = index + 1
- const isCompleted = stepNumber < currentStep
- const isCurrent = stepNumber === currentStep
+ const stepNumber = index + 1;
+ const isCurrent = stepNumber === currentStep;
return (
-
-
- )
+ );
}
-
diff --git a/src/pages/content-management/AddPracticeFlow.tsx b/src/pages/content-management/AddPracticeFlow.tsx
new file mode 100644
index 0000000..7e3b742
--- /dev/null
+++ b/src/pages/content-management/AddPracticeFlow.tsx
@@ -0,0 +1,259 @@
+import { useState } from "react";
+import {
+ Link,
+ useNavigate,
+ useParams,
+ useSearchParams,
+} from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+import successIcon from "../../assets/success.svg";
+
+import { ContextStep } from "./components/practice-steps/ContextStep";
+import { ScenarioStep } from "./components/practice-steps/ScenarioStep";
+import { PersonaStep } from "./components/practice-steps/PersonaStep";
+import { QuestionsStep } from "./components/practice-steps/QuestionsStep";
+import { ReviewStep } from "./components/practice-steps/ReviewStep";
+
+export function AddPracticeFlow() {
+ const navigate = useNavigate();
+ const { level } = useParams<{ level: string }>();
+ const [searchParams] = useSearchParams();
+ const backTo = searchParams.get("backTo");
+ const courseId = searchParams.get("courseId");
+ const moduleId = searchParams.get("moduleId");
+
+ const isModuleContext = backTo === "module";
+
+ const backLabel =
+ backTo === "module"
+ ? "Back to Module"
+ : backTo === "modules"
+ ? "Back to Modules"
+ : "Back to Courses";
+ const backPath =
+ backTo === "module" && courseId && moduleId
+ ? `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}`
+ : backTo === "modules" && courseId
+ ? `/new-content/learn-english/${level}/courses/${courseId}`
+ : `/new-content/learn-english/${level}/courses`;
+
+ const flowSteps = isModuleContext
+ ? ["Context", "Persona", "Questions", "Review"]
+ : ["Context", "Scenario", "Persona", "Questions", "Review"];
+
+ const [currentStep, setCurrentStep] = useState(1);
+ const [selectedPersona, setSelectedPersona] = useState
-
+
-
-
- {isCompleted ?
-
- {step}
-
-
+ {/* Connector Line (Behind) */}
{index < steps.length - 1 && (
-
+
)}
-
- )
+
+ {/* Circle */}
+
+ );
})}
+ {stepNumber}
+
+
+ {/* Label */}
+
+ {step}
+
+
+
+ );
+ }
+
+ // Helper to map currentStep to the actual component for the module flow
+ const renderStep = () => {
+ if (!isModuleContext) {
+ switch (currentStep) {
+ case 1:
+ return (
+
+
+ 
+
+ + Practice Published Successfully! +
++ Your speaking practice is now active and available inside the module. +
+
+
+
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/pages/content-management/AddVideoFlow.tsx b/src/pages/content-management/AddVideoFlow.tsx
new file mode 100644
index 0000000..7086bd4
--- /dev/null
+++ b/src/pages/content-management/AddVideoFlow.tsx
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Check } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+
+import { VideoDetailStep } from "./components/video-steps/VideoDetailStep";
+import { ReviewPublishStep } from "./components/video-steps/ReviewPublishStep";
+
+const STEPS = [
+ { id: 1, label: "Video Detail" },
+ { id: 2, label: "Review & Publish" },
+];
+
+export function AddVideoFlow() {
+ const navigate = useNavigate();
+ const { level, courseId, moduleId } = useParams<{
+ level: string;
+ courseId: string;
+ moduleId: string;
+ }>();
+ const [currentStep, setCurrentStep] = useState(1);
+ const [isPublished, setIsPublished] = useState(false);
+
+ const [formData, setFormData] = useState({
+ title: "",
+ order: "1",
+ description: "",
+ thumbnail: null,
+ videoFile: null,
+ });
+
+ const nextStep = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
+ const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+ const backPath = `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}`;
+
+ if (isPublished) {
+ return (
+
+
+
+
+
+
+
+
+
+ + Add New Practice +
++ Create a new immersive practice session for students. +
+
+
+
+ {renderStep()}
+
+ {/* Success Icon Wrapper (Jagged Circle Style) */}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {/* Sub-Jagged layer for depth if needed */}
+
+ + Video Published Successfully! +
++ Your video is now live and available inside the selected module. +
+ +
+
+
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/pages/content-management/CourseDetailPage.tsx b/src/pages/content-management/CourseDetailPage.tsx
new file mode 100644
index 0000000..52896fd
--- /dev/null
+++ b/src/pages/content-management/CourseDetailPage.tsx
@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { ArrowLeft, Plus, Calendar, Plane, Clock, Hand } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import { cn } from "../../lib/utils";
+
+const MODULES = [
+ {
+ id: "m1",
+ title: "Introduction Basics",
+ description: "Learn basic English words, phrases, and simple sentences.",
+ icon: Hand,
+ status: "Published",
+ gradient: "from-[#8E44AD] to-[#C39BD3]",
+ },
+ {
+ id: "m2",
+ title: "Daily Routines",
+ description: "Vocabulary related to waking up, and evening activities.",
+ icon: Clock,
+ status: "Draft",
+ gradient: "from-[#8E44AD] to-[#C39BD3]",
+ },
+ {
+ id: "m3",
+ title: "Travel Essentials",
+ description:
+ "Key phrases for airports, hotels, and asking for help while abroad.",
+ icon: Plane,
+ status: "Draft",
+ gradient: "from-[#8E44AD] to-[#C39BD3]",
+ },
+];
+
+import { AddModuleModal } from "./components/AddModuleModal";
+
+export function CourseDetailPage() {
+ const navigate = useNavigate();
+ const { level, courseId } = useParams<{ level: string; courseId: string }>();
+ const [isAddModuleOpen, setIsAddModuleOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+ + Add New Video +
+ +
+ s.label)}
+ currentStep={currentStep}
+ />
+
+
+ {/* Step Content */}
+
+ {currentStep === 1 && (
+
+
+ {/* Header Navigation */}
+ setIsAddModuleOpen(false)}
+ />
+
+ {/* Gradient Grid */}
+
+ );
+}
diff --git a/src/pages/content-management/LearnEnglishPage.tsx b/src/pages/content-management/LearnEnglishPage.tsx
new file mode 100644
index 0000000..05e5070
--- /dev/null
+++ b/src/pages/content-management/LearnEnglishPage.tsx
@@ -0,0 +1,214 @@
+import { Plus, ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogTrigger,
+ DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function LearnEnglishPage() {
+ const levels = [
+ {
+ id: "beginner",
+ title: "Beginner",
+ description:
+ "Designed for learners starting from scratch. Focuses on simple grammar, and everyday communication.",
+ },
+ {
+ id: "intermediate",
+ title: "Intermediate",
+ description:
+ "For learners who can communicate at a basic level and want to improve fluency, accuracy, and confidence.",
+ },
+ {
+ id: "advanced",
+ title: "Advanced",
+ description:
+ "Targets advanced learners aiming for professional, academic, and complex conversational English.",
+ },
+ ];
+
+ return (
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ + {courseId?.toUpperCase() || "A1"} +
++ Learn basic English words, phrases, and simple sentences for daily + situations. +
+
+
+
+
+
+ {MODULES.map((module) => (
+
+ {/* Gradient Banner */}
+
+
+
+ ))}
+
+
+
+
+ {/* Icon Circle */}
+
+
+ {/* Actions */}
+
+
+
+ {/* Content */}
+
+
+ + {module.title} +
++ {module.description} +
+
+
+ {module.status === "Published" ? (
+
+ ) : (
+
+ )}
+
+
+ {/* Header section */}
+
+ );
+}
diff --git a/src/pages/content-management/ModuleDetailPage.tsx b/src/pages/content-management/ModuleDetailPage.tsx
new file mode 100644
index 0000000..834a4b9
--- /dev/null
+++ b/src/pages/content-management/ModuleDetailPage.tsx
@@ -0,0 +1,321 @@
+import { useState } from "react";
+import {
+ ArrowLeft,
+ Video,
+ Calendar,
+ Mic,
+ Layers,
+ Edit2,
+ Trash2,
+} from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+import { VideoCard } from "./components/VideoCard";
+
+const MOCK_VIDEOS = [
+ {
+ id: "v1",
+ title: "1.1 Introduction to Formal Greetings",
+ duration: "08:45",
+ status: "Draft",
+ thumbnailGradient: "from-[#CBD5E1] to-[#94A3B8]",
+ },
+ {
+ id: "v2",
+ title: "1.2 Understanding Email Structure",
+ duration: "08:45",
+ status: "Published",
+ thumbnailGradient: "from-[#DBEAFE] to-[#93C5FD]",
+ },
+ {
+ id: "v3",
+ title: "1.3 Common Business Idioms",
+ duration: "08:45",
+ status: "Published",
+ thumbnailGradient: "from-[#FEF3C7] to-[#FCD34D]",
+ },
+ {
+ id: "v4",
+ title: "1.4 Video Conference Etiquette",
+ duration: "08:45",
+ status: "Published",
+ thumbnailGradient: "from-[#FCE7F3] to-[#F9A8D4]",
+ },
+];
+
+const MOCK_PRACTICES = [
+ {
+ id: "p1",
+ title: "Describe a Photo",
+ level: "IELTS",
+ variations: 12,
+ status: "Draft",
+ },
+ {
+ id: "p2",
+ title: "Describe a Photo",
+ level: "IELTS",
+ variations: 12,
+ status: "Draft",
+ },
+ {
+ id: "p3",
+ title: "Describe a Photo",
+ level: "IELTS",
+ variations: 12,
+ status: "Draft",
+ },
+ {
+ id: "p4",
+ title: "Describe a Photo",
+ level: "IELTS",
+ variations: 12,
+ status: "Draft",
+ },
+];
+
+export function ModuleDetailPage() {
+ const navigate = useNavigate();
+ const { level, courseId, moduleId } = useParams<{
+ level: string;
+ courseId: string;
+ moduleId: string;
+ }>();
+ const [activeTab, setActiveTab] = useState<"video" | "practice">("video");
+ const [activeFilter, setActiveFilter] = useState("Draft");
+ const [videos] = useState(MOCK_VIDEOS);
+ const [practices] = useState(MOCK_PRACTICES);
+
+ const moduleTitle =
+ moduleId
+ ?.split("-")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ") || "Business English Fundamentals";
+
+ return (
+
+
+
+ {/* Gradient Divider */}
+
+
+
+
+ + Learn English +
++ Manage learning content by level +
+
+
+
+
+ {/* Cards Grid */}
+
+
+
+
+ {levels.map((level) => (
+
+ {/* Gradient Header */}
+
+
+
+
+ ))}
+
+ + {level.title} +
++ {level.description} +
+ + + +
+ {/* Header Navigation */}
+
+ );
+}
+
+function PracticeCard({
+ title,
+ level,
+ variations,
+ status,
+}: {
+ title: string;
+ level: string;
+ variations: number;
+ status: string;
+}) {
+ return (
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Tabs */}
+
+
+ + Module 3: {moduleTitle} +
++ This module covers essential vocabulary and phrases used in modern + business environments, including email etiquette and meeting + protocols. +
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ {activeTab === "video" ? (
+ videos.length > 0 ? (
+
+
+ {videos.map((video) => (
+ console.log("Edit", video.id)}
+ onPublish={() => console.log("Publish", video.id)}
+ />
+ ))}
+
+ ) : (
+
+
+ )
+ ) : (
+
+
+
+
+
+ + No videos added to this module yet +
++ Videos are a great way to engage students. Start building your + module by adding your first video lesson now. +
+ +
+ {/* Practice Tab Filter Bar */}
+
+ )}
+
+
+
+ {/* Practice Cards Grid */}
+
+ STATUS:
+
+
+ {["All", "Published", "Draft", "Archived"].map((label) => (
+
+ ))}
+
+
+ {practices.map((practice) => (
+
+
+
+ );
+}
diff --git a/src/pages/content-management/NewContentPage.tsx b/src/pages/content-management/NewContentPage.tsx
new file mode 100644
index 0000000..d382ebd
--- /dev/null
+++ b/src/pages/content-management/NewContentPage.tsx
@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+import { Mic } from "lucide-react";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+
+export function NewContentPage() {
+ return (
+
+
+
+
+
+
+ + {title} +
+
+
+ {level}
+
+
+
+
+
+
+
+
+
+
+
+ {status}
+
+
+
+
+
+
+
+
+
+
+ {/* Header section */}
+
+ );
+}
diff --git a/src/pages/content-management/ProgramCoursesPage.tsx b/src/pages/content-management/ProgramCoursesPage.tsx
new file mode 100644
index 0000000..68586b8
--- /dev/null
+++ b/src/pages/content-management/ProgramCoursesPage.tsx
@@ -0,0 +1,265 @@
+import { ArrowLeft, Plus, FileText } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogTrigger,
+ DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function ProgramCoursesPage() {
+ const navigate = useNavigate();
+ const { level } = useParams<{ level: string }>();
+
+ const courses = [
+ {
+ id: "a1",
+ title: "A1",
+ description:
+ "Learn basic English words, phrases, and simple sentences for daily situations.",
+ stats: {
+ modules: 3,
+ videos: 15,
+ practices: 18,
+ },
+ },
+ {
+ id: "a2",
+ title: "A2",
+ description:
+ "Build on basic skills with longer sentences, and practical conversations.",
+ stats: {
+ modules: 3,
+ videos: 15,
+ practices: 18,
+ },
+ },
+ ];
+
+ return (
+
+
+
+ {/* Gradient Divider */}
+ + Content Management +
++ Upload, organize, and manage learning content across programs and + courses +
+
+
+
+
+ {/* Cards Grid */}
+
+
+
+
+ {/* Learn English Card */}
+
+
+
+
+
+ {/* Courses Card */}
+
+
+
+
+
+
+
+
+
+ + Learn English +
++ Manage structured English learning content based on levels and + modules. +
+ + + +
+
+
+
+ Courses
++ Manage skill-based and exam preparation courses such as Duolingo + and IELTS. +
+ +
+ {/* Navigation */}
+
+
+ );
+}
diff --git a/src/pages/content-management/components/AddModuleModal.tsx b/src/pages/content-management/components/AddModuleModal.tsx
new file mode 100644
index 0000000..7cc989f
--- /dev/null
+++ b/src/pages/content-management/components/AddModuleModal.tsx
@@ -0,0 +1,131 @@
+import { X } from "lucide-react";
+import { Button } from "../../../components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { Select } from "../../../components/ui/select";
+import uploadIcon from "../../../assets/icons/upload.png";
+
+interface AddModuleModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function AddModuleModal({ isOpen, onClose }: AddModuleModalProps) {
+ return (
+
+ );
+}
diff --git a/src/pages/content-management/components/VideoCard.tsx b/src/pages/content-management/components/VideoCard.tsx
new file mode 100644
index 0000000..63946f3
--- /dev/null
+++ b/src/pages/content-management/components/VideoCard.tsx
@@ -0,0 +1,100 @@
+import { MoreVertical, Edit2, Play } from "lucide-react";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+
+interface VideoCardProps {
+ id: string;
+ title: string;
+ duration: string;
+ status: "Draft" | "Published";
+ thumbnailGradient: string;
+ onEdit?: () => void;
+ onPublish?: () => void;
+}
+
+export function VideoCard({
+ title,
+ duration,
+ status,
+ thumbnailGradient,
+ onEdit,
+ onPublish,
+}: VideoCardProps) {
+ return (
+
+
+
+ {/* Cards Grid */}
+
+
+
+ + {level || "Program"} +
++ Designed for learners starting from scratch. Focuses on simple + grammar, and everyday communication. +
+
+
+
+
+
+
+
+
+ {courses.map((course) => (
+
+ {/* Gradient Header */}
+
+
+
+
+ ))}
+
+ + {course.title} +
++ {course.description} +
+ + {/* Stats */} +
+
+
+
+
+ + {course.stats.modules} +
++ Modules +
+
+
+ + {course.stats.videos} +
++ Videos +
+
+
+ + {course.stats.practices} +
++ Practices +
+
+
+
+
+
+ {/* Thumbnail */}
+
+ );
+}
diff --git a/src/pages/content-management/components/practice-steps/ContextStep.tsx b/src/pages/content-management/components/practice-steps/ContextStep.tsx
new file mode 100644
index 0000000..165bfff
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ContextStep.tsx
@@ -0,0 +1,146 @@
+import { GraduationCap, ArrowRight, LayoutGrid, Monitor } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Select } from "../../../../components/ui/select";
+
+interface ContextStepProps {
+ formData: any;
+ setFormData: (data: any) => void;
+ nextStep: () => void;
+ navigate: (path: string) => void;
+ level: string;
+ isModuleContext?: boolean;
+}
+
+export function ContextStep({
+ formData,
+ setFormData,
+ nextStep,
+ navigate,
+ level,
+ isModuleContext,
+}: ContextStepProps) {
+ return (
+
+ {/* Duration Badge */}
+
+
+ {/* Content */}
+
+ {duration}
+
+ {/* Play Overlay */}
+
+
+
+
+
+
+
+ {/* Status Badge */}
+
+
+
+
+ {status}
+
+ {/* Menu */}
+
+ + {title} +
+ + {/* Actions */} +
+
+
+
+
+
+
+ + Step 1: Context Definition +
++ Define the educational level and curriculum module for this practice. +
+
+ {/* Program Field */}
+
+
+
+
+
+
+ {/* Course Field */}
+
+
+
+
+
+
+
+
+
+ {/* Select Module Field */}
+
+
+
+
+
+
+
+
+
+ {/* Select Video Field (Conditional) */}
+ {isModuleContext && (
+
+
+
+
+
+ + Select the specific learning module this practice will reinforce. +
+
+
+
+ )}
+
+
+
+
+
+ + Select the specific learning module this practice will reinforce. +
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/content-management/components/practice-steps/QuestionsStep.tsx b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
new file mode 100644
index 0000000..184f95c
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
@@ -0,0 +1,140 @@
+import { GripVertical, Trash2, Plus, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
+import { VoicePrompt } from "./VoicePrompt";
+
+interface QuestionsStepProps {
+ formData: any;
+ setFormData: (data: any) => void;
+ nextStep: () => void;
+ prevStep: () => void;
+}
+
+export function QuestionsStep({
+ formData,
+ setFormData,
+ nextStep,
+ prevStep,
+}: QuestionsStepProps) {
+ const addQuestion = () => {
+ const newQuestion = {
+ id: `q${formData.questions.length + 1}`,
+ text: "",
+ type: "Speaking",
+ voicePrompt: "upload_audio.mp3",
+ sampleAnswer: "upload_audio.mp3",
+ };
+ setFormData({
+ ...formData,
+ questions: [...formData.questions, newQuestion],
+ });
+ };
+
+ return (
+
+
+ + Select Personas +
++ Choose the characters that will participate in this practice scenario. +
+
+ {PERSONAS.map((persona) => (
+
+ setSelectedPersona(persona.id)}
+ className={cn(
+ "group relative cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
+ selectedPersona === persona.id
+ ? "border-brand-500 shadow-xl scale-105"
+ : "border-grayScale-50 hover:border-brand-200",
+ )}
+ >
+
+ ))}
+
+
+
+
+
+ {persona.name.substring(0, 2)}
+
+
+ {selectedPersona === persona.id && (
+
+
+ {persona.name}
+
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/content-management/components/practice-steps/ReviewStep.tsx b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
new file mode 100644
index 0000000..649dc7f
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
@@ -0,0 +1,290 @@
+import { Edit2, GripVertical, Trash2, Rocket, Info } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "../../../../components/ui/avatar";
+import { PERSONAS } from "./constants";
+import { VoicePrompt } from "./VoicePrompt";
+import { cn } from "../../../../lib/utils";
+
+interface ReviewStepProps {
+ formData: any;
+ selectedPersona: string | null;
+ prevStep: () => void;
+ setIsPublished: (val: boolean) => void;
+ isModuleContext?: boolean;
+}
+
+export function ReviewStep({
+ formData,
+ selectedPersona,
+ prevStep,
+ setIsPublished,
+ isModuleContext,
+}: ReviewStepProps) {
+ const persona = PERSONAS.find((p) => p.id === selectedPersona);
+
+ return (
+
+
+ + Create Practice Questions +
++ Define the dialogue flow and interactions for this scenario. +
+
+ {formData.questions.map((q: any, i: number) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const newQuestions = [...formData.questions];
+ newQuestions[i].text = e.target.value;
+ setFormData({ ...formData, questions: newQuestions });
+ }}
+ className="h-16 rounded-xl border-grayScale-200 focus:border-brand-500 font-medium px-6 text-lg placeholder:text-grayScale-300 bg-white"
+ placeholder="e.g. How long have you been studying English?"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 2. Tips Section (Image 1436.1) */}
+
+ );
+}
+
+function ReviewItem({ q, index }: { q: any; index: number }) {
+ return (
+
+
+
+ {/* 1. Basic Info Card (Image 1436.1) */}
+ + Review Practice Questions +
+
+
+ + Basic Information +
+ +
+
+
+
+
+ 
+
+
+
+
+ + {formData.title || "Business English 101: Communication"} +
+
+
+ Program:{" "}
+
+ {formData.program}
+
+
+
+ Course:{" "}
+
+ {formData.course}
+
+
+
+ Module:{" "}
+
+ Module 101
+
+
+
+
+
+ Persona
+
+
+
+
+ P
+
+
+ {persona?.name || "Alex Johnson"}
+
+
+
+
+
+ {isModuleContext ? (
+ /* 3. Split Questions & Answers Layout (Image 1413.1) */
+
+
+
+
+
+ + {formData.tips || + "Focus on using the present perfect continuous tense to describe an action that started in the past and continues now."} +
+
+ {/* Left Column: Questions */}
+
+ ) : (
+ /* Original Non-Module View */
+
+
+
+ {/* Right Column: Answers */}
+
+
+ + Questions +
+ + {formData.questions.length} + +
+ {formData.questions.map((q: any, i: number) => (
+
+
+
+ {(i + 1).toString().padStart(2, "0")}
+
+
+ ))}
+
+
+
+
+ TEXT PROMPT
+
+
+ + {q.text} +
+
+
+ VOICE PROMPT
+
+
+
+
+
+
+
+
+
+ Answers
+ + {formData.questions.length} + +
+ {formData.questions.map((q: any, i: number) => (
+
+
+
+ {(i + 1).toString().padStart(2, "0")}
+
+
+ ))}
+
+
+ VOICE PROMPT
+
+
+
+ {formData.questions.map((q: any, i: number) => (
+
+ )}
+
+ {/* Action Footer */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TEXT PROMPT
+
+
+ + {q.text} +
+
+
+ VOICE PROMPT
+
+
+
+
+ SAMPLE ANSWER
+
+
+
+
+
+
+
+
+ + Define Scenario Details +
++ Set the scene and context for this English practice session. +
+
+
+
+ + This image will appear as the background for the scenario. +
+
+
+
+
+ + + Click to upload + {" "} + or drag and drop +
++ SVG, PNG, JPG (MAX 5MB) +
+ +
+
+
+ setFormData({ ...formData, title: e.target.value })
+ }
+ />
+
+
+
+
+