navigate(`/academy/courses/${course._id}`)}
+ >
+
+ );
+};
+
+export default CourseCard;
diff --git a/frontend/src/components/ImageUpload.css b/frontend/src/components/ImageUpload.css
new file mode 100644
index 0000000..4d04a97
--- /dev/null
+++ b/frontend/src/components/ImageUpload.css
@@ -0,0 +1,138 @@
+.image-upload-container {
+ margin-bottom: 1.5rem;
+}
+
+.image-upload-label {
+ display: block;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 0.75rem;
+}
+
+.upload-options {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.upload-option {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.upload-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1.5rem;
+ background: #4F46E5;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.2s;
+ width: fit-content;
+}
+
+.upload-button:hover:not(:disabled) {
+ background: #4338ca;
+}
+
+.upload-button:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.upload-hint {
+ font-size: 0.875rem;
+ color: #666;
+}
+
+.upload-divider {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin: 0.5rem 0;
+}
+
+.upload-divider::before,
+.upload-divider::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: #e5e7eb;
+}
+
+.upload-divider span {
+ color: #999;
+ font-size: 0.875rem;
+ font-weight: 600;
+}
+
+.url-input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #d1d5db;
+ border-radius: 8px;
+ font-size: 1rem;
+ font-family: inherit;
+ transition: border-color 0.2s;
+}
+
+.url-input:focus {
+ outline: none;
+ border-color: #4F46E5;
+}
+
+.url-input:disabled {
+ background: #f9fafb;
+ cursor: not-allowed;
+}
+
+.image-preview {
+ margin-top: 1rem;
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+ border: 2px solid #e5e7eb;
+ max-width: 400px;
+}
+
+.image-preview img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.remove-preview {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ background: rgba(239, 68, 68, 0.9);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.2s;
+ font-size: 0.875rem;
+}
+
+.remove-preview:hover:not(:disabled) {
+ background: rgba(220, 38, 38, 0.9);
+}
+
+.remove-preview:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+ .image-preview {
+ max-width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/components/ImageUpload.jsx b/frontend/src/components/ImageUpload.jsx
new file mode 100644
index 0000000..cea1aa0
--- /dev/null
+++ b/frontend/src/components/ImageUpload.jsx
@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import './ImageUpload.css';
+
+function ImageUpload({ value, onChange, label }) {
+ const [uploading, setUploading] = useState(false);
+ const [preview, setPreview] = useState(value || '');
+
+ const handleFileChange = async (e) => {
+ const file = e.target.files[0];
+ if (!file) return;
+
+ if (!file.type.startsWith('image/')) {
+ alert('Please select an image file');
+ return;
+ }
+
+ if (file.size > 5 * 1024 * 1024) {
+ alert('Image size must be less than 5MB');
+ return;
+ }
+
+ try {
+ setUploading(true);
+
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setPreview(reader.result);
+ };
+ reader.readAsDataURL(file);
+
+ const formData = new FormData();
+ formData.append('image', file);
+
+ const response = await fetch('/api/upload/image', {
+ method: 'POST',
+ body: formData,
+ credentials: 'include'
+ });
+
+ if (!response.ok) {
+ throw new Error('Upload failed');
+ }
+
+ const data = await response.json();
+
+ onChange(data.url);
+ setPreview(data.url);
+
+ } catch (error) {
+ console.error('Upload error:', error);
+ alert('Failed to upload image. Please try again.');
+ setPreview('');
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ const handleUrlChange = (url) => {
+ setPreview(url);
+ onChange(url);
+ };
+
+ const handleRemove = () => {
+ setPreview('');
+ onChange('');
+ };
+
+ return (
+
+ {course.thumbnail ? (
+ 
+ ) : (
+
+
+ Course
+ )}
+
+
+ {course.title}
+ ++ {course.description?.slice(0, 100)} + {course.description?.length > 100 ? "..." : ""} +
+ +
+
+
+
+ Time
+ {course.duration || "Self-paced"}
+
+
+
+ Topic
+ {course.category || "General"}
+
+
+
+ Level
+ {course.difficulty || "Beginner"}
+
+
+
+
+ {isFree ? (
+ Free
+ ) : (
+ ${priceAmount}
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+export default ImageUpload;
\ No newline at end of file
diff --git a/frontend/src/components/Seminars/ZoomMeeting.jsx b/frontend/src/components/Seminars/ZoomMeeting.jsx
new file mode 100644
index 0000000..3d51278
--- /dev/null
+++ b/frontend/src/components/Seminars/ZoomMeeting.jsx
@@ -0,0 +1,133 @@
+import React, { useEffect, useRef } from "react";
+import { ZoomMtg } from "@zoom/meetingsdk";
+
+const ZOOM_SDK_VERSION = process.env.REACT_APP_ZOOM_SDK_VERSION || "5.1.2";
+const ZOOM_SDK_LIB = `https://source.zoom.us/${ZOOM_SDK_VERSION}/lib`;
+
+function ZoomMeeting({ seminarId, meetingNumber, passWord, userFullName }) {
+ const initializedRef = useRef(false);
+ const cleanupTimerRef = useRef(null);
+
+ useEffect(() => {
+ const suppressZoomCancelErrors = (event) => {
+ const message = event?.message || event?.error?.message || event?.reason?.message || event?.reason;
+ if (typeof message === "string" && message.includes("Job was cancelled")) {
+ event.preventDefault();
+ if (typeof event.stopImmediatePropagation === "function") {
+ event.stopImmediatePropagation();
+ }
+ }
+ };
+
+ window.addEventListener("error", suppressZoomCancelErrors);
+ window.addEventListener("unhandledrejection", suppressZoomCancelErrors);
+
+ return () => {
+ window.removeEventListener("error", suppressZoomCancelErrors);
+ window.removeEventListener("unhandledrejection", suppressZoomCancelErrors);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (cleanupTimerRef.current) {
+ window.clearTimeout(cleanupTimerRef.current);
+ cleanupTimerRef.current = null;
+ }
+
+ const zoomRoot = document.getElementById("zmmtg-root");
+ if (zoomRoot) {
+ zoomRoot.style.display = "block";
+ }
+
+ const initZoom = async () => {
+ if (initializedRef.current) return;
+ initializedRef.current = true;
+
+ try {
+ ZoomMtg.setZoomJSLib(ZOOM_SDK_LIB, "/av");
+ ZoomMtg.preLoadWasm();
+ ZoomMtg.prepareWebSDK();
+
+ const apiBase = process.env.REACT_APP_API_URL || "";
+ const videoWebRtcMode = Number(process.env.REACT_APP_ZOOM_VIDEO_WEBRTC_MODE ?? 1);
+ const params = new URLSearchParams({
+ role: "0",
+ meetingNumber: String(meetingNumber)
+ });
+
+ if ([0, 1].includes(videoWebRtcMode)) {
+ params.set("videoWebRtcMode", String(videoWebRtcMode));
+ }
+
+ const signatureRes = await fetch(
+ `${apiBase}/api/academy/seminars/${seminarId}/zoom-signature?${params.toString()}`,
+ { credentials: "include" }
+ );
+
+ if (!signatureRes.ok) {
+ const errorData = await signatureRes.json().catch(() => ({}));
+ throw new Error(errorData.message || "Unable to get Zoom signature");
+ }
+
+ const { signature } = await signatureRes.json();
+ if (!signature) {
+ throw new Error("Invalid signature response");
+ }
+
+ ZoomMtg.init({
+ leaveUrl: `${window.location.origin}/academy/seminars/${seminarId}`,
+ patchJsMedia: true,
+ leaveOnPageUnload: true,
+ debug: false,
+ success: () => {
+ ZoomMtg.join({
+ signature,
+ meetingNumber: String(meetingNumber),
+ passWord: passWord || "",
+ userName: userFullName || "Guest User",
+ userEmail: "",
+ success: () => {},
+ error: (error) => {
+ initializedRef.current = false;
+ console.error("Zoom join error", error);
+ }
+ });
+ },
+ error: (error) => {
+ initializedRef.current = false;
+ console.error("Zoom init error", error);
+ }
+ });
+ } catch (error) {
+ initializedRef.current = false;
+ console.error("Zoom start error", error);
+ }
+ };
+
+ initZoom();
+
+ return () => {
+ cleanupTimerRef.current = window.setTimeout(() => {
+ const root = document.getElementById("zmmtg-root");
+ if (root) {
+ root.style.display = "none";
+ }
+
+ try {
+ ZoomMtg.leaveMeeting({});
+ } catch (error) {
+ // Ignore cleanup errors from zoom sdk.
+ }
+
+ document.body.style.overflow = "auto";
+ initializedRef.current = false;
+ }, 150);
+ };
+ }, [seminarId, meetingNumber, passWord, userFullName]);
+
+ return (
+
+ );
+}
+
+export default ZoomMeeting;
diff --git a/frontend/src/pages/Academy/Academy.jsx b/frontend/src/pages/Academy/Academy.jsx
index 830d544..7bd689f 100644
--- a/frontend/src/pages/Academy/Academy.jsx
+++ b/frontend/src/pages/Academy/Academy.jsx
@@ -1,4 +1,3 @@
-/* global process */
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
diff --git a/frontend/src/pages/Academy/Courses/AssignmentBuilder.css b/frontend/src/pages/Academy/Courses/AssignmentBuilder.css
new file mode 100644
index 0000000..cdaaae4
--- /dev/null
+++ b/frontend/src/pages/Academy/Courses/AssignmentBuilder.css
@@ -0,0 +1,439 @@
+.assignment-builder {
+ background: #f8f9fa;
+ border-radius: 8px;
+ padding: 1.5rem;
+}
+
+.assignment-builder h4 {
+ font-size: 1rem;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0 0 1.5rem 0;
+}
+
+/* No Assignment State */
+.no-assignment {
+ text-align: center;
+ padding: 2rem;
+ background: #f8f9fa;
+ border-radius: 8px;
+}
+
+.no-assignment p {
+ color: #999;
+ margin-bottom: 1rem;
+}
+
+.add-assignment-button {
+ background: #4F46E5;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 8px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.add-assignment-button:hover {
+ background: #4338CA;
+}
+
+/* Assignment Preview */
+.assignment-preview {
+ background: #f8f9fa;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 1.5rem;
+}
+
+.assignment-preview-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+.assignment-preview h4 {
+ margin: 0 0 0.5rem 0;
+ color: #1a1a1a;
+ font-size: 1.1rem;
+}
+
+.assignment-purpose {
+ color: #666;
+ font-size: 0.9rem;
+ margin: 0 0 0.75rem 0;
+ line-height: 1.5;
+}
+
+.assignment-stats {
+ display: flex;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ color: #666;
+}
+
+.assignment-preview-actions {
+ display: flex;
+ gap: 0.5rem;
+ flex-shrink: 0;
+}
+
+.edit-button {
+ background: white;
+ color: #4F46E5;
+ border: 1px solid #4F46E5;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.875rem;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+.edit-button:hover {
+ background: #4F46E5;
+ color: white;
+}
+
+/* Assignment Parts Section */
+.assignment-parts-section,
+.grading-criteria-section {
+ margin: 2rem 0;
+ padding: 1.5rem;
+ background: white;
+ border-radius: 8px;
+}
+
+.add-part-form,
+.add-criterion-form {
+ background: #f8f9fa;
+ padding: 1.5rem;
+ border-radius: 8px;
+ margin-bottom: 1.5rem;
+}
+
+/* Parts List */
+.parts-list {
+ margin-top: 1.5rem;
+}
+
+.part-item {
+ background: white;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 1rem;
+ margin-bottom: 1rem;
+}
+
+.part-item:last-child {
+ margin-bottom: 0;
+}
+
+.part-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.75rem;
+}
+
+.part-header strong {
+ color: #4F46E5;
+ font-size: 0.95rem;
+}
+
+.part-instructions {
+ color: #666;
+ font-size: 0.9rem;
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* Grading Criteria */
+.criteria-list {
+ margin-top: 1.5rem;
+}
+
+.criterion-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.875rem 1rem;
+ background: white;
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+ margin-bottom: 0.5rem;
+}
+
+.criterion-item:last-child {
+ margin-bottom: 0;
+}
+
+.criterion-name {
+ flex: 1;
+ color: #333;
+ font-size: 0.95rem;
+}
+
+.criterion-points {
+ color: #4F46E5;
+ font-weight: 600;
+ margin-left: 1rem;
+ margin-right: 0.5rem;
+}
+
+.total-points {
+ margin-top: 1rem;
+ padding: 1rem;
+ background: #f0f9ff;
+ border: 1px solid #bae6fd;
+ border-radius: 6px;
+ text-align: right;
+ color: #0369a1;
+ font-size: 0.95rem;
+}
+
+.total-points strong {
+ font-size: 1rem;
+}
+
+/* Assignment Actions */
+.assignment-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 1rem;
+ margin-top: 2rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid #e0e0e0;
+}
+
+.cancel-button {
+ background: white;
+ color: #666;
+ border: 1px solid #ddd;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+.cancel-button:hover {
+ background: #f8f9fa;
+ border-color: #ccc;
+}
+
+.save-button {
+ background: #10b981;
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: background 0.2s;
+}
+
+.save-button:hover {
+ background: #059669;
+}
+
+/* Form Groups */
+.assignment-builder .form-group {
+ margin-bottom: 1rem;
+}
+
+.assignment-builder .form-group label {
+ display: block;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+}
+
+.assignment-builder .form-group input,
+.assignment-builder .form-group textarea {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ font-size: 0.95rem;
+ transition: border-color 0.2s;
+ font-family: inherit;
+}
+
+.assignment-builder .form-group input:focus,
+.assignment-builder .form-group textarea:focus {
+ outline: none;
+ border-color: #4F46E5;
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.assignment-builder .form-row {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 1rem;
+}
+
+/* Add Button */
+.assignment-builder .add-button {
+ background: #4F46E5;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 8px;
+ font-weight: 500;
+ cursor: pointer;
+ margin-top: 1rem;
+ transition: background 0.2s;
+}
+
+.assignment-builder .add-button:hover {
+ background: #4338CA;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .assignment-preview-header {
+ flex-direction: column;
+ }
+
+ .assignment-preview-actions {
+ width: 100%;
+ justify-content: flex-start;
+ }
+
+ .assignment-builder .form-row {
+ grid-template-columns: 1fr;
+ }
+
+ .assignment-parts-section,
+ .grading-criteria-section {
+ padding: 1rem;
+ }
+
+ .assignment-actions {
+ flex-direction: column-reverse;
+ }
+
+ .assignment-actions button {
+ width: 100%;
+ }
+}
+
+/* Assignment Type Selector */
+.assignment-type-selector {
+ margin-bottom: 30px;
+}
+
+.type-options {
+ display: flex;
+ gap: 15px;
+ margin-top: 15px;
+}
+
+.type-option {
+ flex: 1;
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 15px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.type-option:hover {
+ border-color: #4F46E5;
+ background: #f8f9fa;
+}
+
+.type-option.selected {
+ border-color: #4F46E5;
+ background: #eef2ff;
+}
+
+.type-option input[type="radio"] {
+ margin-right: 10px;
+}
+
+.type-option-content {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.type-option-content strong {
+ color: #333;
+ font-size: 16px;
+}
+
+.type-option-content span {
+ color: #666;
+ font-size: 13px;
+}
+
+/* Question-based styles */
+.assignment-questions-preview {
+ margin-top: 20px;
+ padding: 20px;
+ background: white;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+}
+
+.questions-list {
+ margin: 15px 0;
+}
+
+.question-preview-item {
+ background: #f8f9fa;
+ padding: 15px;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ border-left: 4px solid #4F46E5;
+}
+
+.question-preview-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.question-number {
+ font-weight: 600;
+ color: #333;
+ margin-right: 10px;
+}
+
+.question-type-badge {
+ background: #4F46E5;
+ color: white;
+ padding: 4px 10px;
+ border-radius: 12px;
+ font-size: 12px;
+ margin-right: 8px;
+}
+
+.question-points-badge {
+ background: #10b981;
+ color: white;
+ padding: 4px 10px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.question-preview-text {
+ margin: 0;
+ color: #555;
+ font-size: 14px;
+}
+
+.total-points {
+ margin-top: 15px;
+ padding-top: 15px;
+ border-top: 2px solid #e0e0e0;
+ font-size: 16px;
+ color: #333;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Academy/Courses/AssignmentBuilder.jsx b/frontend/src/pages/Academy/Courses/AssignmentBuilder.jsx
new file mode 100644
index 0000000..31ca04f
--- /dev/null
+++ b/frontend/src/pages/Academy/Courses/AssignmentBuilder.jsx
@@ -0,0 +1,425 @@
+import React, { useState } from 'react';
+import './AssignmentBuilder.css';
+import AssignmentQuestionBuilder from './AssignmentQuestionBuilder';
+
+function AssignmentBuilder({ assignment, onSave, onRemove }) {
+ const [isBuilding, setIsBuilding] = useState(false);
+ const [assignmentType, setAssignmentType] = useState('question-based'); // 'question-based' or 'part-based'
+
+ // Question-based state
+ const [assignmentQuestions, setAssignmentQuestions] = useState([]);
+
+ // Part-based state (your original)
+ const [assignmentData, setAssignmentData] = useState(
+ assignment || {
+ title: '',
+ purpose: '',
+ instructions: '',
+ parts: [],
+ gradingCriteria: [],
+ deliverableFormat: '',
+ totalPoints: 30
+ }
+ );
+
+ const [newPart, setNewPart] = useState({
+ partNumber: 1,
+ title: '',
+ instructions: ''
+ });
+
+ const [newCriterion, setNewCriterion] = useState({
+ name: '',
+ points: 0
+ });
+
+ // Question-based handlers
+ const handleAddQuestion = (question) => {
+ const questionWithNumber = {
+ ...question,
+ questionNumber: assignmentQuestions.length + 1
+ };
+ setAssignmentQuestions([...assignmentQuestions, questionWithNumber]);
+ };
+
+ const removeQuestion = (index) => {
+ const updated = assignmentQuestions.filter((_, i) => i !== index);
+ const renumbered = updated.map((q, i) => ({ ...q, questionNumber: i + 1 }));
+ setAssignmentQuestions(renumbered);
+ };
+
+ // Part-based handlers (your original)
+ const addPart = () => {
+ if (!newPart.title || !newPart.instructions) {
+ alert('Please fill in part title and instructions');
+ return;
+ }
+
+ setAssignmentData({
+ ...assignmentData,
+ parts: [...assignmentData.parts, { ...newPart, partNumber: assignmentData.parts.length + 1 }]
+ });
+
+ setNewPart({ partNumber: assignmentData.parts.length + 2, title: '', instructions: '' });
+ };
+
+ const removePart = (index) => {
+ setAssignmentData({
+ ...assignmentData,
+ parts: assignmentData.parts.filter((_, i) => i !== index)
+ });
+ };
+
+ const addCriterion = () => {
+ if (!newCriterion.name || newCriterion.points <= 0) {
+ alert('Please fill in criterion name and points');
+ return;
+ }
+
+ setAssignmentData({
+ ...assignmentData,
+ gradingCriteria: [...assignmentData.gradingCriteria, newCriterion]
+ });
+
+ setNewCriterion({ name: '', points: 0 });
+ };
+
+ const removeCriterion = (index) => {
+ setAssignmentData({
+ ...assignmentData,
+ gradingCriteria: assignmentData.gradingCriteria.filter((_, i) => i !== index)
+ });
+ };
+
+ const handleSave = () => {
+ if (assignmentType === 'question-based') {
+ // Save question-based assignment
+ if (assignmentQuestions.length === 0) {
+ alert('Please add at least one question');
+ return;
+ }
+
+ const totalPoints = assignmentQuestions.reduce((sum, q) => sum + q.points, 0);
+
+ const newAssignment = {
+ title: 'Module Assignment',
+ instructions: 'Complete all questions below',
+ questions: assignmentQuestions,
+ totalPoints
+ };
+
+ onSave(newAssignment);
+ setIsBuilding(false);
+ setAssignmentQuestions([]);
+
+ } else {
+ // Save part-based assignment (your original)
+ if (!assignmentData.title) {
+ alert('Please enter an assignment title');
+ return;
+ }
+ if (!assignmentData.purpose) {
+ alert('Please enter the assignment purpose');
+ return;
+ }
+ if (assignmentData.parts.length === 0) {
+ alert('Please add at least one part');
+ return;
+ }
+ if (assignmentData.gradingCriteria.length === 0) {
+ alert('Please add grading criteria');
+ return;
+ }
+
+ onSave(assignmentData);
+ setIsBuilding(false);
+ }
+ };
+
+ const handleCancel = () => {
+ setAssignmentData({
+ title: '',
+ purpose: '',
+ instructions: '',
+ parts: [],
+ gradingCriteria: [],
+ deliverableFormat: '',
+ totalPoints: 30
+ });
+ setAssignmentQuestions([]);
+ setIsBuilding(false);
+ };
+
+ // Preview existing assignment
+ if (assignment && !isBuilding) {
+ const isQuestionBased = assignment.questions && assignment.questions.length > 0;
+
+ return (
+
+
+
+ {preview && (
+
+
+ Max 5MB
+
+
+
+ OR
+
+
+
+ handleUrlChange(e.target.value)}
+ placeholder="Paste image URL"
+ className="url-input"
+ disabled={uploading}
+ />
+
+
+ 
+
+
+ )}
+
+
+ );
+ }
+
+ if (!isBuilding && !assignment) {
+ return (
+
+
+
+
+ {assignment.title || 'Module Assignment'}
+ {assignment.purpose &&{assignment.purpose}
} +
+ {isQuestionBased ? (
+ <>
+ {assignment.questions.length} questions
+ •
+ {assignment.totalPoints} points
+
+ ) : (
+ <>
+ {assignment.parts?.length || 0} parts
+ •
+ {assignment.gradingCriteria?.reduce((sum, c) => sum + c.points, 0) || 0} points
+
+ )}
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ No assignment added yet
+ +
+ {/* Assignment Type Selector */}
+
+
+
+ {/* Question-Based Builder */}
+ {assignmentType === 'question-based' && (
+ Assignment Type
+
+
+
+
+
+
+
+ )}
+
+ {/* Part-Based Builder (Your Original) */}
+ {assignmentType === 'part-based' && (
+
+
+ )}
+ Assignment Questions ({assignmentQuestions.length})
+
+ {assignmentQuestions.map((q, index) => (
+
+
+
+ ))}
+
+
+
+ Q{index + 1}
+ {q.type}
+ {q.points} pts
+
+
+ {q.question}
+
+ Total Points:
+ {assignmentQuestions.reduce((sum, q) => sum + q.points, 0)} pts
+
+
+
+
+ setAssignmentData({ ...assignmentData, title: e.target.value })}
+ placeholder="e.g., Building Your Brand Identity & Social Currency Strategy"
+ />
+
+
+
+
+