i18n: update fr.po and template and sync PO files

refactor: Announcement mail being sent to students in BCC

.github/helper/install_dependencies.sh

@@ -5,7 +5,7 @@ echo "Setting Up System Dependencies..."
 
 sudo apt update
 sudo apt remove mysql-server mysql-client
-sudo apt-get install libcups2-dev redis-server mariadb-client
+sudo apt-get install libcups2-dev redis-server mariadb-client libmariadb-dev
 
 install_wkhtmltopdf() {
   wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb

.github/workflows/make_release_pr.yml

@@ -1,7 +1,7 @@
 name: Create weekly release
 on:
   schedule:
-    - cron: '30 4 15 * *'
+    - cron: '30 3 * * 3'
   workflow_dispatch:
 
 jobs:

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownBooleanAttribute" enabled="true" level="INFORMATION" enabled_by_default="true" editorAttributes="INFORMATION_ATTRIBUTES" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.11 (env)" />
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_24" project-jdk-name="Python 3.11 (env)" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/frontend/frontend.iml" filepath="$PROJECT_DIR$/frontend/frontend.iml" />
+      <module fileurl="file://$PROJECT_DIR$/lms/lms.iml" filepath="$PROJECT_DIR$/lms/lms.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,265 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="8ceac89e-548b-4898-a7d0-cd9692210a67" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/frontend/vite.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/vite.config.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/ar.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/ar.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/bs.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/bs.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/cs.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/cs.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/de.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/de.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/eo.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/eo.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/es.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/es.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/fa.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/fa.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/fr.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/fr.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/hr.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/hr.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/hu.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/hu.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/id.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/id.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/it.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/it.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/main.pot" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/main.pot" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/nl.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/nl.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/pl.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/pl.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/pt.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/pt.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/pt_BR.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/pt_BR.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/ru.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/ru.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/sr.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/sr.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/sr_CS.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/sr_CS.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/sv.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/sv.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/th.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/th.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/tr.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/tr.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/vi.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/vi.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/lms/locale/zh.po" beforeDir="false" afterPath="$PROJECT_DIR$/lms/locale/zh.po" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ComposerSettings">
+    <execution />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="GitHubPullRequestSearchHistory">{
+  &quot;lastFilter&quot;: {
+    &quot;state&quot;: &quot;OPEN&quot;,
+    &quot;assignee&quot;: &quot;stanig2106&quot;
+  }
+}</component>
+  <component name="GithubPullRequestsUISettings">{
+  &quot;selectedUrlAndAccountId&quot;: {
+    &quot;url&quot;: &quot;https://github.com/eduvia-app/lms&quot;,
+    &quot;accountId&quot;: &quot;07629746-0347-4709-8dfa-2d0f080158cf&quot;
+  }
+}</component>
+  <component name="KubernetesApiPersistence">{}</component>
+  <component name="KubernetesApiProvider">{
+  &quot;isMigrated&quot;: true
+}</component>
+  <component name="MacroExpansionManager">
+    <option name="directoryName" value="zkk5YL6F" />
+  </component>
+  <component name="PhpWorkspaceProjectConfiguration" interpreter_name="/opt/homebrew/Cellar/php/8.3.7/bin/php" />
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 3
+}</component>
+  <component name="ProjectId" id="31EuJyp79zrs7MLT76Y4wgzYgGe" />
+  <component name="ProjectViewState">
+    <option name="showLibraryContents" value="true" />
+    <option name="showMembers" value="true" />
+    <option name="showVisibilityIcons" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "RunOnceActivity.go.formatter.settings.were.checked": "true",
+    "RunOnceActivity.go.migrated.go.modules.settings": "true",
+    "dart.analysis.tool.window.visible": "false",
+    "git-widget-placeholder": "eduvia/prod",
+    "go.import.settings.migrated": "true",
+    "junie.onboarding.icon.badge.shown": "true",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "yarn",
+    "org.rust.cargo.project.model.impl.CargoExternalSystemProjectAware.subscribe.first.balloon": "",
+    "org.rust.first.attach.projects": "true",
+    "project.structure.last.edited": "Modules",
+    "project.structure.proportion": "0.15",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "application.passwordSafe",
+    "to.speed.mode.migration.done": "true",
+    "ts.external.directory.path": "/Users/stani/Documents/campus-prive/frappe-bench/apps/lms/frontend/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="RubyModuleManagerSettings">
+    <option name="blackListedRootsPaths">
+      <list>
+        <option value="$PROJECT_DIR$/lms" />
+      </list>
+    </option>
+  </component>
+  <component name="RunManager">
+    <configuration default="true" type="GoApplicationRunConfiguration" factoryName="Go Application">
+      <module name="lms" />
+      <working_directory value="$PROJECT_DIR$" />
+      <go_parameters value="-i" />
+      <kind />
+      <directory value="$PROJECT_DIR$" />
+      <filePath value="$PROJECT_DIR$" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="GoTestRunConfiguration" factoryName="Go Test">
+      <module name="lms" />
+      <working_directory value="$PROJECT_DIR$" />
+      <go_parameters value="-i" />
+      <kind />
+      <directory value="$PROJECT_DIR$" />
+      <filePath value="$PROJECT_DIR$" />
+      <framework value="gotest" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="JetRunConfigurationType">
+      <module name="lms" />
+      <method v="2">
+        <option name="Make" enabled="true" />
+      </method>
+    </configuration>
+    <configuration default="true" type="KotlinStandaloneScriptRunConfigurationType">
+      <option name="filePath" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="PythonConfigurationType" factoryName="Python">
+      <module name="lms" />
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <envs>
+        <env name="PYTHONUNBUFFERED" value="1" />
+      </envs>
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="" />
+      <option name="IS_MODULE_SDK" value="false" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
+      <option name="SCRIPT_NAME" value="" />
+      <option name="PARAMETERS" value="" />
+      <option name="SHOW_COMMAND_LINE" value="false" />
+      <option name="EMULATE_TERMINAL" value="false" />
+      <option name="MODULE_MODE" value="false" />
+      <option name="REDIRECT_INPUT" value="false" />
+      <option name="INPUT_FILE" value="" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="Python.FlaskServer">
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="" />
+      <option name="IS_MODULE_SDK" value="false" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <module name="" />
+      <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
+      <option name="launchJavascriptDebuger" value="false" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="Tox" factoryName="Tox">
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="" />
+      <option name="IS_MODULE_SDK" value="false" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="tests" factoryName="Autodetect">
+      <module name="lms" />
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="" />
+      <option name="IS_MODULE_SDK" value="false" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
+      <option name="_new_additionalArguments" value="&quot;&quot;" />
+      <option name="_new_target" value="&quot;&quot;" />
+      <option name="_new_targetType" value="&quot;PATH&quot;" />
+      <method v="2" />
+    </configuration>
+    <configuration default="true" type="tests" factoryName="Doctests">
+      <module name="lms" />
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="" />
+      <option name="IS_MODULE_SDK" value="false" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
+      <option name="SCRIPT_NAME" value="" />
+      <option name="CLASS_NAME" value="" />
+      <option name="METHOD_NAME" value="" />
+      <option name="FOLDER_NAME" value="" />
+      <option name="TEST_TYPE" value="TEST_SCRIPT" />
+      <option name="PATTERN" value="" />
+      <option name="USE_PATTERN" value="false" />
+      <method v="2" />
+    </configuration>
+  </component>
+  <component name="RustProjectSettings">
+    <option name="toolchainHomeDirectory" value="$USER_HOME$/.cargo/bin" />
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-js-predefined-d6986cc7102b-b26f3e71634d-JavaScript-IU-251.26094.121" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="8ceac89e-548b-4898-a7d0-cd9692210a67" name="Changes" comment="" />
+      <created>1755101486887</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1755101486887</updated>
+      <workItem from="1755101488483" duration="947000" />
+      <workItem from="1755102648895" duration="6458000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="VgoProject">
+    <settings-migrated>true</settings-migrated>
+  </component>
+</project>

README.md

@@ -118,6 +118,10 @@ Replace the following parameters with your values:
 
 The script will set up a production-ready instance of Frappe Learning with all the necessary configurations in about 5 minutes.
 
+**Note:** To avoid a `404 Page Not Found` error:
+- If hosting on a **public server**, make sure your DNS **A record** points to your server's IP.
+- If hosting **locally**, map your domain to `127.0.0.1` in your `/etc/hosts` file:
+
 ## Development Setup
 
 ### Docker

cypress/e2e/batch_creation.cy.js

@@ -0,0 +1,180 @@
+describe("Batch Creation", () => {
+	it("creates a new batch", () => {
+		cy.login();
+		cy.wait(500);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Open Settings
+		cy.get("span").contains("Learning").click();
+		cy.get("span").contains("Settings").click();
+
+		// Add a new member
+		cy.get('[id^="headlessui-dialog-panel-v-"]')
+			.find("span")
+			.contains(/^Members$/)
+			.click();
+		cy.get('[id^="headlessui-dialog-panel-v-"]')
+			.find("button")
+			.contains("New")
+			.click();
+
+		const dateNow = Date.now();
+		const randomEmail = `testuser_${dateNow}@example.com`;
+		const randomName = `Test User ${dateNow}`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEmail);
+		cy.get("input[placeholder='Jane']").type(randomName);
+		cy.get("button").contains("Add").click();
+
+		// Add evaluator
+		cy.get('[id^="headlessui-dialog-panel-v-"]')
+			.find("span")
+			.contains(/^Evaluators$/)
+			.click();
+
+		cy.get('[id^="headlessui-dialog-panel-v-"]')
+			.find("button")
+			.contains("New")
+			.click();
+		const randomEvaluator = `evaluator${dateNow}@example.com`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEvaluator);
+		cy.get("button").contains("Add").click();
+		cy.get("div").contains(randomEvaluator).should("be.visible").click();
+
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Create a batch
+		cy.get("button").contains("Create").click();
+		cy.wait(500);
+		cy.url().should("include", "/batches/new/edit");
+		cy.get("label").contains("Title").type("Test Batch");
+
+		cy.get("label").contains("Start Date").type("2030-10-01");
+		cy.get("label").contains("End Date").type("2030-10-31");
+		cy.get("label").contains("Start Time").type("10:00");
+		cy.get("label").contains("End Time").type("11:00");
+		cy.get("label").contains("Timezone").type("IST");
+		cy.get("label").contains("Seat Count").type("10");
+		cy.get("label").contains("Published").click();
+
+		cy.get("label")
+			.contains("Short Description")
+			.type("Test Batch Short Description to test the UI");
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+		);
+
+		/* Instructor */
+		cy.get("label")
+			.contains("Instructors")
+			.parent()
+			.within(() => {
+				cy.get("input").click().type("evaluator");
+				cy.get("input")
+					.invoke("attr", "aria-controls")
+					.as("instructor_list_id");
+			});
+		cy.get("@instructor_list_id").then((instructor_list_id) => {
+			cy.get(`[id^=${instructor_list_id}`)
+				.should("be.visible")
+				.within(() => {
+					cy.get("[id^=headlessui-combobox-option-").first().click();
+				});
+		});
+
+		cy.button("Save").click();
+		cy.wait(1000);
+		let batchName;
+		cy.url().then((url) => {
+			console.log(url);
+			batchName = url.split("/").pop();
+			cy.wrap(batchName).as("batchName");
+		});
+		cy.wait(500);
+
+		// View Batch
+		cy.wait(1000);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		cy.url().should("include", "/lms/batches");
+
+		cy.get('[id^="headlessui-radiogroup-v-"]')
+			.find("span")
+			.contains("Upcoming")
+			.should("be.visible")
+			.click();
+
+		cy.get("@batchName").then((batchName) => {
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).within(() => {
+				cy.get("div").contains("Test Batch").should("be.visible");
+				cy.get("div")
+					.contains("Test Batch Short Description to test the UI")
+					.should("be.visible");
+				cy.get("span")
+					.contains("01 Oct 2030 - 31 Oct 2030")
+					.should("be.visible");
+				cy.get("span")
+					.contains("10:00 AM - 11:00 AM")
+					.should("be.visible");
+				cy.get("span").contains("IST").should("be.visible");
+				cy.get("a").contains("Evaluator").should("be.visible");
+				cy.get("div")
+					.contains("10")
+					.should("be.visible")
+					.get("span")
+					.contains("Seats Left")
+					.should("be.visible");
+			});
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).click();
+		});
+
+		cy.get("div").contains("Test Batch").should("be.visible");
+		cy.get("div")
+			.contains("Test Batch Short Description to test the UI")
+			.should("be.visible");
+		cy.get("a").contains("Evaluator").should("be.visible");
+		cy.get("span")
+			.contains("01 Oct 2030 - 31 Oct 2030")
+			.should("be.visible");
+		cy.get("span").contains("10:00 AM - 11:00 AM").should("be.visible");
+		cy.get("span").contains("IST").should("be.visible");
+		cy.get("div")
+			.contains("10")
+			.should("be.visible")
+			.get("span")
+			.contains("Seats Left")
+			.should("be.visible");
+
+		cy.get("p")
+			.contains(
+				"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+			)
+			.should("be.visible");
+		cy.get("button").contains("Manage Batch").click();
+
+		/* Add student to batch */
+		cy.get("button").contains("Add").click();
+		cy.get('div[id^="headlessui-dialog-panel-v-"]')
+			.first()
+			.find("button")
+			.eq(1)
+			.click();
+		cy.get("input[id^='headlessui-combobox-input-v-']").type(randomEmail);
+		cy.get("div").contains(randomEmail).click();
+		cy.get("button").contains("Submit").click();
+
+		// Verify Seat Count
+		cy.get("span").contains("Details").click();
+		cy.get("div")
+			.contains("9")
+			.should("be.visible")
+			.get("span")
+			.contains("Seats Left")
+			.should("be.visible");
+	});
+});

cypress/e2e/course_creation.cy.js

@@ -1,12 +1,15 @@
 describe("Course Creation", () => {
 	it("creates a new course", () => {
 		cy.login();
-		cy.wait(1000);
+		cy.wait(500);
 		cy.visit("/lms/courses");
 
+		// Close onboarding modal
+		cy.closeOnboardingModal();
+
 		// Create a course
-		cy.get("button").contains("New").click();
-		cy.wait(1000);
+		cy.get("button").contains("Create").click();
+		cy.wait(500);
 		cy.url().should("include", "/courses/new/edit");
 
 		cy.get("label").contains("Title").type("Test Course");
@@ -96,14 +99,15 @@ describe("Course Creation", () => {
 		// View Course
 		cy.wait(1000);
 		cy.visit("/lms");
-		cy.wait(500);
+		cy.closeOnboardingModal();
+
 		cy.url().should("include", "/lms/courses");
 		cy.get(".grid a:first").within(() => {
 			cy.get("div").contains("Test Course");
 			cy.get("div").contains(
 				"Test Course Short Introduction to test the UI"
 			);
-			cy.get(".course-image")
+			cy.get(".bg-cover")
 				.invoke("css", "background-image")
 				.should("include", "/files/profile");
 		});

cypress/support/commands.js

@@ -25,6 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 import "cypress-file-upload";
+import "cypress-real-events";
 
 Cypress.Commands.add("login", (email, password) => {
 	if (!email) {
@@ -68,3 +69,18 @@ Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
 		element.dispatchEvent(event);
 	});
 });
+
+Cypress.Commands.add("closeOnboardingModal", () => {
+	cy.wait(500);
+	cy.get("body").then(($body) => {
+		// Check if any element with class including 'z-50' exists
+		if ($body.find('[class*="z-50"]').length > 0) {
+			cy.get('[class*="z-50"]')
+				.find('button:has(svg[class*="feather-x"])')
+				.realClick();
+			cy.wait(1000);
+		} else {
+			cy.log("Onboarding modal not found, skipping close.");
+		}
+	});
+});

docker/docker-compose.yml

@@ -18,12 +18,12 @@ services:
 
   frappe:
     image: frappe/bench:latest
-    command: bash /workspace/init.sh
+    command: bash /workspace/docker/init.sh
     environment:
       - SHELL=/bin/bash
     working_dir: /home/frappe
     volumes:
-      - .:/workspace
+      - ..:/workspace
     ports:
       - 8000:8000
       - 9000:9000

docker/init.sh

@@ -1,4 +1,4 @@
-#!bin/bash
+#!/bin/bash
 
 if [ -d "/home/frappe/frappe-bench/apps/frappe" ]; then
     echo "Bench already exists, skipping init"
@@ -37,4 +37,10 @@ bench --site lms.localhost set-config developer_mode 1
 bench --site lms.localhost clear-cache
 bench use lms.localhost
 
+# Import French translations from workspace (persisted in repo)
+if [ -f "/workspace/lms/translations/fr.csv" ]; then
+    bench --site lms.localhost import-translations fr /workspace/lms/translations/fr.csv || true
+    bench --site lms.localhost clear-cache
+fi
+
 bench start

frontend/components.d.ts

@@ -19,6 +19,10 @@ declare module 'vue' {
     AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
     AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
+    BadgeAssignmentForm: typeof import('./src/components/Settings/BadgeAssignmentForm.vue')['default']
+    BadgeAssignments: typeof import('./src/components/Settings/BadgeAssignments.vue')['default']
+    BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default']
+    Badges: typeof import('./src/components/Settings/Badges.vue')['default']
     BatchCard: typeof import('./src/components/BatchCard.vue')['default']
     BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
     BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
@@ -27,17 +31,21 @@ declare module 'vue' {
     BatchOverlay: typeof import('./src/components/BatchOverlay.vue')['default']
     BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
     BatchStudents: typeof import('./src/components/BatchStudents.vue')['default']
-    BrandSettings: typeof import('./src/components/BrandSettings.vue')['default']
+    BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
     BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
-    Categories: typeof import('./src/components/Categories.vue')['default']
+    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
     CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
     ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
+    Code: typeof import('./src/components/Controls/Code.vue')['default']
     CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
     CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
     CourseCard: typeof import('./src/components/CourseCard.vue')['default']
     CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
     CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']
     CourseOutline: typeof import('./src/components/CourseOutline.vue')['default']
+    CourseProgressSummary: typeof import('./src/components/Modals/CourseProgressSummary.vue')['default']
     CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
     CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
     DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
@@ -47,11 +55,14 @@ declare module 'vue' {
     Discussions: typeof import('./src/components/Discussions.vue')['default']
     EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
     EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
+    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
+    EmailTemplates: typeof import('./src/components/Settings/EmailTemplates.vue')['default']
     EmptyState: typeof import('./src/components/EmptyState.vue')['default']
     EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
-    Evaluators: typeof import('./src/components/Evaluators.vue')['default']
+    Evaluators: typeof import('./src/components/Settings/Evaluators.vue')['default']
     Event: typeof import('./src/components/Modals/Event.vue')['default']
     ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FeedbackModal: typeof import('./src/components/Modals/FeedbackModal.vue')['default']
     FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
     IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
     IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
@@ -62,37 +73,44 @@ declare module 'vue' {
     LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
     Link: typeof import('./src/components/Controls/Link.vue')['default']
     LiveClass: typeof import('./src/components/LiveClass.vue')['default']
+    LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.vue')['default']
     LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
     LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
-    Members: typeof import('./src/components/Members.vue')['default']
+    Members: typeof import('./src/components/Settings/Members.vue')['default']
     MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
     MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
     NoPermission: typeof import('./src/components/NoPermission.vue')['default']
     NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
     NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
     PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
-    PaymentSettings: typeof import('./src/components/PaymentSettings.vue')['default']
+    PaymentSettings: typeof import('./src/components/Settings/PaymentSettings.vue')['default']
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
     Question: typeof import('./src/components/Modals/Question.vue')['default']
     Quiz: typeof import('./src/components/Quiz.vue')['default']
     QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
+    QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
     Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    RelatedCourses: typeof import('./src/components/RelatedCourses.vue')['default']
     ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SettingDetails: typeof import('./src/components/SettingDetails.vue')['default']
-    SettingFields: typeof import('./src/components/SettingFields.vue')['default']
-    Settings: typeof import('./src/components/Modals/Settings.vue')['default']
+    SettingDetails: typeof import('./src/components/Settings/SettingDetails.vue')['default']
+    SettingFields: typeof import('./src/components/Settings/SettingFields.vue')['default']
+    Settings: typeof import('./src/components/Settings/Settings.vue')['default']
     SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
     StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
     StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
     Tags: typeof import('./src/components/Tags.vue')['default']
     UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
     UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
+    Uploader: typeof import('./src/components/Controls/Uploader.vue')['default']
     UploadPlugin: typeof import('./src/components/UploadPlugin.vue')['default']
     UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
     UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
     VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
+    VideoStatistics: typeof import('./src/components/Modals/VideoStatistics.vue')['default']
+    ZoomAccountModal: typeof import('./src/components/Modals/ZoomAccountModal.vue')['default']
+    ZoomSettings: typeof import('./src/components/Settings/ZoomSettings.vue')['default']
   }
 }

frontend/frontend.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

frontend/package.json

@@ -10,6 +10,10 @@
     "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.1",
     "@editorjs/checklist": "^1.6.0",
     "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.29.0",
@@ -24,10 +28,10 @@
     "ace-builds": "^1.36.2",
     "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
-    "codemirror-editor-vue3": "^2.8.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.143",
+    "frappe-ui": "^0.1.172",
     "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
@@ -35,9 +39,11 @@
     "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
     "tailwindcss": "3.4.15",
+    "thememirror": "^2.0.1",
     "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
+    "vue-codemirror": "^6.1.1",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
     "vue3-apexcharts": "^1.8.0",

frontend/src/App.vue

@@ -1,7 +1,9 @@
 <template>
 	<FrappeUIProvider>
 		<Layout>
-			<router-view />
+			<div class="text-base">
+				<router-view />
+			</div>
 		</Layout>
 		<Dialogs />
 	</FrappeUIProvider>
@@ -9,20 +11,19 @@
 <script setup>
 import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
 import NoSidebarLayout from './components/NoSidebarLayout.vue'
-import { stopSession } from '@/telemetry'
-import { init as initTelemetry } from '@/telemetry'
 import { usersStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
+import { posthogSettings } from '@/telemetry'
 
 const screenSize = useScreenSize()
-let { userResource } = usersStore()
 const router = useRouter()
 const noSidebar = ref(false)
+const { userResource } = usersStore()
 
 router.beforeEach((to, from, next) => {
 	if (to.query.fromLesson || to.path === '/persona') {
@@ -39,17 +40,18 @@ const Layout = computed(() => {
 	}
 	if (screenSize.width < 640) {
 		return MobileLayout
-	} else {
-		return DesktopLayout
 	}
-})
 
-onMounted(async () => {
-	if (userResource.data) await initTelemetry()
+	return DesktopLayout
 })
 
 onUnmounted(() => {
 	noSidebar.value = false
-	stopSession()
+})
+
+watch(userResource, () => {
+	if (userResource.data) {
+		posthogSettings.reload()
+	}
 })
 </script>

frontend/src/components/AppSidebar.vue

@@ -157,7 +157,7 @@
 			v-model="showHelpModal"
 			v-model:articles="articles"
 			appName="learning"
-			title="Frappe Learning"
+			:title="__('Frappe Learning')"
 			:logo="LMSLogo"
 			:afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
 			:afterSkipAll="() => capture('onboarding_steps_skipped')"
@@ -181,9 +181,17 @@
 import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import { useStorage } from '@vueuse/core'
-import { ref, onMounted, inject, watch, reactive, markRaw, h } from 'vue'
-import { getSidebarLinks } from '../utils'
+import {
+	ref,
+	onMounted,
+	inject,
+	watch,
+	reactive,
+	markRaw,
+	h,
+	onUnmounted,
+} from 'vue'
+import { getSidebarLinks } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
@@ -217,7 +225,7 @@ import {
 	IntermediateStepModal,
 } from 'frappe-ui/frappe'
 
-const { user, sidebarSettings } = sessionStore()
+const { user } = sessionStore()
 const { userResource } = usersStore()
 let sidebarStore = useSidebar()
 const socket = inject('$socket')
@@ -228,6 +236,7 @@ const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const settingsStore = useSettings()
+const { sidebarSettings } = settingsStore
 const showOnboarding = ref(false)
 const showIntermediateModal = ref(false)
 const currentStep = ref({})
@@ -244,6 +253,7 @@ const iconProps = {
 onMounted(() => {
 	addNotifications()
 	setSidebarLinks()
+	setUpOnboarding()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
@@ -293,7 +303,7 @@ const unreadNotifications = createResource({
 const addNotifications = () => {
 	if (user) {
 		sidebarLinks.value.push({
-			label: 'Notifications',
+			label: __('Notifications'),
 			icon: 'Bell',
 			to: 'Notifications',
 			activeFor: ['Notifications'],
@@ -304,8 +314,8 @@ const addNotifications = () => {
 
 const addQuizzes = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
-			label: 'Quizzes',
+		sidebarLinks.value.splice(4, 0, {
+			label: __('Quizzes'),
 			icon: 'CircleHelp',
 			to: 'Quizzes',
 			activeFor: [
@@ -320,8 +330,8 @@ const addQuizzes = () => {
 
 const addAssignments = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
-			label: 'Assignments',
+		sidebarLinks.value.splice(5, 0, {
+			label: __('Assignments'),
 			icon: 'Pencil',
 			to: 'Assignments',
 			activeFor: [
@@ -334,6 +344,22 @@ const addAssignments = () => {
 	}
 }
 
+const addProgrammingExercises = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.splice(3, 0, {
+			label: __('Programming Exercises'),
+			icon: 'Code',
+			to: 'ProgrammingExercises',
+			activeFor: [
+				'ProgrammingExercises',
+				'ProgrammingExerciseForm',
+				'ProgrammingExerciseSubmissions',
+				'ProgrammingExerciseSubmission',
+			],
+		})
+	}
+}
+
 const addPrograms = () => {
 	let activeFor = ['Programs', 'ProgramForm']
 	let index = 1
@@ -357,7 +383,7 @@ const addPrograms = () => {
 
 	if (canAddProgram) {
 		sidebarLinks.value.splice(index, 0, {
-			label: 'Programs',
+			label: __('Programs'),
 			icon: 'Route',
 			to: 'Programs',
 			activeFor: activeFor,
@@ -388,10 +414,6 @@ const deletePage = (link) => {
 	)
 }
 
-const getSidebarFromStorage = () => {
-	return useStorage('sidebar_is_collapsed', false)
-}
-
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
 	localStorage.setItem(
@@ -438,6 +460,7 @@ const steps = reactive([
 		title: __('Add your first chapter'),
 		icon: markRaw(h(FolderTree, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_course',
 		onClick: async () => {
 			minimize.value = true
 			let course = await getFirstCourse()
@@ -453,6 +476,7 @@ const steps = reactive([
 		title: __('Add your first lesson'),
 		icon: markRaw(h(FileText, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_chapter',
 		onClick: async () => {
 			minimize.value = true
 			let course = await getFirstCourse()
@@ -471,6 +495,7 @@ const steps = reactive([
 		title: __('Create your first quiz'),
 		icon: markRaw(h(CircleHelp, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_course',
 		onClick: () => {
 			minimize.value = true
 			router.push({ name: 'Quizzes' })
@@ -502,6 +527,7 @@ const steps = reactive([
 		title: __('Add students to your batch'),
 		icon: markRaw(h(UserPlus, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_batch',
 		onClick: async () => {
 			minimize.value = true
 			let batch = await getFirstBatch()
@@ -522,6 +548,7 @@ const steps = reactive([
 		title: __('Add courses to your batch'),
 		icon: markRaw(h(BookText, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_batch',
 		onClick: async () => {
 			minimize.value = true
 			let batch = await getFirstBatch()
@@ -616,6 +643,7 @@ watch(userResource, () => {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
 		addPrograms()
+		addProgrammingExercises()
 		addQuizzes()
 		addAssignments()
 		setUpOnboarding()
@@ -625,4 +653,8 @@ watch(userResource, () => {
 const redirectToWebsite = () => {
 	window.open('https://frappe.io/learning', '_blank')
 }
+
+onUnmounted(() => {
+	socket.off('publish_lms_notifications')
+})
 </script>

frontend/src/components/AssessmentPlugin.vue

@@ -2,17 +2,24 @@
 	<Dialog
 		v-model="show"
 		:options="{
+			title:
+				type == 'quiz'
+					? __('Add a quiz to your lesson')
+					: __('Add an assignment to your lesson'),
 			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: () => {
+						addAssessment()
+					},
+				},
+			],
 		}"
 	>
-		<template #body>
-			<div class="p-5 space-y-4">
-				<div v-if="type == 'quiz'" class="text-lg font-semibold">
-					{{ __('Add a quiz to your lesson') }}
-				</div>
-				<div v-else class="text-lg font-semibold">
-					{{ __('Add an assignment to your lesson') }}
-				</div>
+		<template #body-content>
+			<div class="">
 				<div>
 					<Link
 						v-if="type == 'quiz'"
@@ -29,17 +36,12 @@
 						:onCreate="(value, close) => redirectToForm()"
 					/>
 				</div>
-				<div class="flex justify-end space-x-2">
-					<Button variant="solid" @click="addAssessment()">
-						{{ __('Save') }}
-					</Button>
-				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Button } from 'frappe-ui'
+import { Dialog } from 'frappe-ui'
 import { onMounted, ref, nextTick } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 

frontend/src/components/Assessments.vue

@@ -40,7 +40,7 @@
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
 								<div v-if="column.key == 'assessment_type'">
-									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+									{{ getAssessmentTypeLabel(row[column.key]) }}
 								</div>
 								<div v-else-if="column.key == 'title'">
 									{{ row[column.key] }}
@@ -172,6 +172,24 @@ const getRowRoute = (row) => {
 				},
 			}
 		}
+	} else if (row.assessment_type == 'LMS Programming Exercise') {
+		if (row.submission) {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: row.submission.name,
+				},
+			}
+		} else {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: 'new',
+				},
+			}
+		}
 	} else {
 		return {
 			name: 'QuizPage',
@@ -190,12 +208,12 @@ const canAddAssessments = () => {
 const getAssessmentColumns = () => {
 	let columns = [
 		{
-			label: 'Assessment',
+			label: __('Assessment'),
 			key: 'title',
 			width: '25rem',
 		},
 		{
-			label: 'Type',
+			label: __('Type'),
 			key: 'assessment_type',
 			width: '15rem',
 		},
@@ -203,7 +221,7 @@ const getAssessmentColumns = () => {
 
 	if (!user.data?.is_moderator) {
 		columns.push({
-			label: 'Status/Percentage',
+			label: __('Status/Percentage'),
 			key: 'status',
 			align: 'left',
 			width: '10rem',
@@ -213,7 +231,7 @@ const getAssessmentColumns = () => {
 }
 
 const getStatusTheme = (status) => {
-	if (status === 'Pass') {
+	if (status === 'Pass' || status === 'Passed') {
 		return 'green'
 	} else if (status === 'Not Graded') {
 		return 'orange'
@@ -221,4 +239,14 @@ const getStatusTheme = (status) => {
 		return 'red'
 	}
 }
+
+const getAssessmentTypeLabel = (type) => {
+	if (type == 'LMS Assignment') {
+		return __('Assignment')
+	} else if (type == 'LMS Quiz') {
+		return __('Quiz')
+	} else if (type == 'LMS Programming Exercise') {
+		return __('Programming Exercise')
+	}
+}
 </script>

frontend/src/components/Assignment.vue

@@ -453,9 +453,9 @@ const canModifyAssignment = computed(() => {
 
 const submissionStatusOptions = computed(() => {
 	return [
-		{ label: 'Not Graded', value: 'Not Graded' },
-		{ label: 'Pass', value: 'Pass' },
-		{ label: 'Fail', value: 'Fail' },
+		{ label: __('Not Graded'), value: 'Not Graded' },
+		{ label: __('Pass'), value: 'Pass' },
+		{ label: __('Fail'), value: 'Fail' },
 	]
 })
 

frontend/src/components/BatchCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col border hover:border-outline-gray-4 rounded-md p-4 h-full"
+		class="flex flex-col border hover:border-outline-gray-3 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
@@ -70,9 +70,8 @@
 	</div>
 </template>
 <script setup>
-import { Badge } from 'frappe-ui'
-import { formatTime } from '../utils'
-import { Clock, BookOpen, Globe } from 'lucide-vue-next'
+import { formatTime } from '@/utils'
+import { Clock, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'

frontend/src/components/BatchCourses.vue

@@ -106,7 +106,6 @@ const courses = createResource({
 	params: {
 		batch: props.batch,
 	},
-	cache: ['batchCourses', props.batchName],
 	auto: true,
 })
 
@@ -117,17 +116,17 @@ const openCourseModal = () => {
 const getCoursesColumns = () => {
 	return [
 		{
-			label: 'Title',
+			label: __('Title'),
 			key: 'title',
 			width: 2,
 		},
 		{
-			label: 'Lessons',
+			label: __('Lessons'),
 			key: 'lessons',
 			align: 'right',
 		},
 		{
-			label: 'Enrollments',
+			label: __('Enrollments'),
 			align: 'right',
 			key: 'enrollments',
 		},

frontend/src/components/BatchDashboard.vue

@@ -6,13 +6,12 @@
 			:courses="batch.data.courses"
 		/>
 		<Assessments :batch="batch.data.name" />
-		<StudentHeatmap />
+		<!-- <StudentHeatmap /> -->
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
-import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const props = defineProps({
 	batch: {

frontend/src/components/BatchFeedback.vue

@@ -1,44 +1,49 @@
 <template>
 	<div v-if="user.data?.is_student">
-		<div
-			v-if="feedbackList.data?.length"
-			class="bg-surface-blue-2 text-blue-700 p-2 rounded-md mb-5"
-		>
-			{{ __('Thank you for providing your feedback!') }}
-		</div>
-		<div v-else class="flex justify-between items-center mb-5">
-			<div class="text-lg font-semibold">
-				{{ __('Help Us Improve') }}
+		<div>
+			<div class="leading-5 mb-4">
+				<div v-if="readOnly">
+					{{ __('Thank you for providing your feedback.') }}
+					<span
+						@click="showFeedbackForm = !showFeedbackForm"
+						class="underline cursor-pointer"
+						>{{ __('Click here') }}</span
+					>
+					{{ __('to view your feedback.') }}
+				</div>
+				<div v-else>
+					{{ __('Help us improve by providing your feedback.') }}
+				</div>
 			</div>
-			<Button @click="submitFeedback()">
-				{{ __('Submit') }}
-			</Button>
-		</div>
-		<div class="space-y-8">
-			<div class="flex items-center justify-between">
-				<Rating
-					v-for="key in ratingKeys"
-					v-model="feedback[key]"
-					:label="__(convertToTitleCase(key))"
+			<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
+				<div class="space-y-4">
+					<Rating
+						v-for="key in ratingKeys"
+						v-model="feedback[key]"
+						:label="__(convertToTitleCase(key))"
+						:readonly="readOnly"
+					/>
+				</div>
+				<FormControl
+					v-model="feedback.feedback"
+					type="textarea"
+					:label="__('Feedback')"
+					:rows="9"
 					:readonly="readOnly"
 				/>
+				<Button v-if="!readOnly" @click="submitFeedback">
+					{{ __('Submit Feedback') }}
+				</Button>
 			</div>
-			<FormControl
-				v-model="feedback.feedback"
-				type="textarea"
-				:label="__('Feedback')"
-				:rows="7"
-				:readonly="readOnly"
-			/>
 		</div>
 	</div>
 
 	<div v-else-if="feedbackList.data?.length">
-		<div class="text-lg font-semibold mb-5">
-			{{ __('Average of Feedback Received') }}
+		<div class="leading-5 text-sm mb-2 mt-5">
+			{{ __('Average Feedback Received') }}
 		</div>
 
-		<div class="flex items-center justify-between mb-10">
+		<div class="space-y-4">
 			<Rating
 				v-for="key in ratingKeys"
 				v-model="average[key]"
@@ -47,81 +52,32 @@
 			/>
 		</div>
 
-		<div class="text-lg font-semibold mb-5">
-			{{ __('All Feedback') }}
-		</div>
-		<ListView
-			:columns="feedbackColumns"
-			:rows="feedbackList.data"
-			row-key="name"
-			:options="{
-				showTooltip: false,
-				rowHeight: 'h-16',
-				selectable: false,
-			}"
-		>
-			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-			></ListHeader>
-			<ListRows>
-				<ListRow
-					:row="row"
-					v-for="row in feedbackList.data"
-					class="group cursor-pointer feedback-list"
-				>
-					<template #default="{ column, item }">
-						<ListRowItem
-							:item="row[column.key]"
-							:align="column.align"
-							class="text-sm"
-						>
-							<template #prefix>
-								<div v-if="column.key == 'member_name'">
-									<Avatar
-										class="flex"
-										:image="row['member_image']"
-										:label="item"
-										size="sm"
-									/>
-								</div>
-							</template>
-							<div v-if="ratingKeys.includes(column.key)">
-								<Rating v-model="row[column.key]" :readonly="true" />
-							</div>
-							<div v-else class="leading-5">
-								{{ row[column.key] }}
-							</div>
-						</ListRowItem>
-					</template>
-				</ListRow>
-			</ListRows>
-		</ListView>
+		<Button variant="outline" class="mt-5" @click="showAllFeedback = true">
+			{{ __('View all feedback') }}
+		</Button>
 	</div>
-	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
+	<div v-else class="text-ink-gray-7 mt-5 leading-5">
 		{{ __('No feedback received yet.') }}
 	</div>
+	<FeedbackModal
+		v-if="feedbackList.data?.length"
+		v-model="showAllFeedback"
+		:feedbackList="feedbackList.data"
+	/>
 </template>
 <script setup>
-import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { inject, onMounted, reactive, ref, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
-import {
-	Avatar,
-	Button,
-	createListResource,
-	FormControl,
-	ListView,
-	ListHeader,
-	ListRows,
-	ListRow,
-	ListRowItem,
-	Rating,
-} from 'frappe-ui'
+import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
+import FeedbackModal from '@/components/Modals/FeedbackModal.vue'
 
 const user = inject('$user')
 const ratingKeys = ['content', 'instructors', 'value']
 const readOnly = ref(false)
 const average = reactive({})
 const feedback = reactive({})
+const showFeedbackForm = ref(true)
+const showAllFeedback = ref(false)
 
 const props = defineProps({
 	batch: {
@@ -167,6 +123,7 @@ watch(
 		if (feedbackList.data.length) {
 			let data = feedbackList.data
 			readOnly.value = true
+			showFeedbackForm.value = false
 
 			ratingKeys.forEach((key) => {
 				average[key] = 0
@@ -201,40 +158,11 @@ const submitFeedback = () => {
 		{
 			onSuccess: () => {
 				feedbackList.reload()
+				showFeedbackForm.value = false
 			},
 		}
 	)
 }
-
-const feedbackColumns = computed(() => {
-	return [
-		{
-			label: 'Member',
-			key: 'member_name',
-			width: '10rem',
-		},
-		{
-			label: 'Feedback',
-			key: 'feedback',
-			width: '15rem',
-		},
-		{
-			label: 'Content',
-			key: 'content',
-			width: '9rem',
-		},
-		{
-			label: 'Instructors',
-			key: 'instructors',
-			width: '9rem',
-		},
-		{
-			label: 'Value',
-			key: 'value',
-			width: '9rem',
-		},
-	]
-})
 </script>
 <style>
 .feedback-list > button > div {

frontend/src/components/BatchOverlay.vue

@@ -65,6 +65,10 @@
 				}"
 			>
 				<Button variant="solid" class="w-full mt-4">
+					<template #prefix>
+						<Settings v-if="isModerator" class="size-4 stroke-1.5" />
+						<LogIn v-else class="size-4 stroke-1.5" />
+					</template>
 					<span>
 						{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
 					</span>
@@ -85,6 +89,9 @@
 				"
 			>
 				<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
+					<template #prefix>
+						<CreditCard class="size-4 stroke-1.5" />
+					</template>
 					<span>
 						{{ __('Register Now') }}
 					</span>
@@ -100,6 +107,9 @@
 				"
 				@click="enrollInBatch()"
 			>
+				<template #prefix>
+					<GraduationCap class="size-4 stroke-1.5" />
+				</template>
 				{{ __('Enroll Now') }}
 			</Button>
 			<router-link
@@ -112,6 +122,9 @@
 				}"
 			>
 				<Button class="w-full mt-2">
+					<template #prefix>
+						<Pencil class="size-4 stroke-1.5" />
+					</template>
 					<span>
 						{{ __('Edit') }}
 					</span>
@@ -122,8 +135,17 @@
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Badge, Button, createResource, toast } from 'frappe-ui'
-import { BookOpen, Clock, Globe } from 'lucide-vue-next'
+import { Button, createResource, toast } from 'frappe-ui'
+import {
+	BookOpen,
+	Clock,
+	CreditCard,
+	Globe,
+	GraduationCap,
+	LogIn,
+	Pencil,
+	Settings,
+} from 'lucide-vue-next'
 import { formatNumberIntoCurrency, formatTime } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
 import { useRouter } from 'vue-router'

frontend/src/components/BatchStudents.vue

@@ -6,103 +6,59 @@
 			</div>
 		</div>
 		<div class="grid grid-cols-4 gap-5 mb-8">
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<User class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ students.data?.length }}
-					</span>
-					<span class="">
-						{{ __('Students') }}
-					</span>
-				</div>
-			</div>
-
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<GraduationCap class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ certificationCount.data }}
-					</span>
-					<span class="">
-						{{ __('Certified') }}
-					</span>
-				</div>
-			</div>
-
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<BookOpen class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ batch.data.courses?.length }}
-					</span>
-					<span>
-						{{ __('Courses') }}
-					</span>
-				</div>
-			</div>
-
-			<div
-				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-			>
-				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-					<ShieldCheck class="w-5 h-5 stroke-1.5" />
-				</div>
-				<div class="flex items-center space-x-2">
-					<span class="font-semibold">
-						{{ assessmentCount }}
-					</span>
-					<span>
-						{{ __('Assessments') }}
-					</span>
-				</div>
-			</div>
-		</div>
-		<div v-if="showProgressChart" class="mb-8">
-			<div class="text-ink-gray-7 font-medium">
-				{{ __('Progress') }}
-			</div>
-			<ApexChart
-				:options="chartOptions"
-				:series="chartData"
-				type="bar"
-				:height="chartData[0].data.length * 30 + 100"
+			<NumberChart
+				class="border rounded-md"
+				:config="{ title: __('Students'), value: students.data?.length || 0 }"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{
+					title: __('Certified'),
+					value: certificationCount.data || 0,
+				}"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{
+					title: __('Courses'),
+					value: batch.data.courses?.length || 0,
+				}"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
 			/>
-			<div
-				class="flex items-center justify-center text-sm text-ink-gray-7 space-x-4"
-			>
-				<div class="flex items-center space-x-2">
-					<div
-						class="w-3 h-3 rounded-sm"
-						:style="{ 'background-color': theme.colors.green[600] }"
-					></div>
-					<div>
-						{{ __('Courses') }}
-					</div>
-				</div>
-				<div class="flex items-center space-x-2">
-					<div
-						class="w-3 h-3 rounded-sm"
-						:style="{ 'background-color': theme.colors.blue[600] }"
-					></div>
-					<div>
-						{{ __('Assessments') }}
-					</div>
-				</div>
-			</div>
 		</div>
+
+		<AxisChart
+			v-if="showProgressChart"
+			:config="{
+				data: chartData,
+				title: __('Batch Summary'),
+				subtitle: __('Progress of students in courses and assessments'),
+				xAxis: {
+					key: 'task',
+					title: 'Tasks',
+					type: 'category',
+				},
+				yAxis: {
+					title: __('Number of Students'),
+					echartOptions: {
+						minInterval: 1,
+					},
+				},
+				swapXY: true,
+				series: [
+					{
+						name: 'value',
+						type: 'bar',
+					},
+				],
+			}"
+		/>
 	</div>
 
 	<div>
@@ -214,6 +170,7 @@
 <script setup>
 import {
 	Avatar,
+	AxisChart,
 	Button,
 	createResource,
 	FeatherIcon,
@@ -224,6 +181,7 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	NumberChart,
 	toast,
 } from 'frappe-ui'
 import {
@@ -245,7 +203,6 @@ const showStudentModal = ref(false)
 const showStudentProgressModal = ref(false)
 const selectedStudent = ref(null)
 const chartData = ref(null)
-const chartOptions = ref(null)
 const showProgressChart = ref(false)
 const assessmentCount = ref(0)
 const readOnlyMode = window.read_only_mode
@@ -274,19 +231,19 @@ const students = createResource({
 const getStudentColumns = () => {
 	let columns = [
 		{
-			label: 'Full Name',
+			label: __('Full Name'),
 			key: 'full_name',
 			width: '20rem',
 			icon: 'user',
 		},
 		{
-			label: 'Progress',
+			label: __('Progress'),
 			key: 'progress',
 			width: '15rem',
 			icon: 'activity',
 		},
 		{
-			label: 'Last Active',
+			label: __('Last Active'),
 			key: 'last_active',
 			width: '10rem',
 			align: 'center',
@@ -333,96 +290,49 @@ const removeStudents = (selections, unselectAll) => {
 }
 
 const getChartData = () => {
-	let categories = {}
+	let tasks = []
+	let data = []
 
-	if (!students.data?.length) return []
-
-	Object.keys(students.data[0].courses).forEach((course) => {
-		categories[course] = {
-			value: 0,
-			type: 'course',
-			label: course,
-		}
+	students.data.forEach((row) => {
+		tasks = countAssessments(row, tasks)
+		tasks = countCourses(row, tasks)
 	})
 
-	Object.keys(students.data?.[0].assessments).forEach((assessment) => {
-		categories[assessment] = {
-			value: 0,
-			type: 'assessment',
-			label: assessment,
-		}
-	})
-
-	students.data.forEach((student) => {
-		Object.keys(student.courses).forEach((course) => {
-			if (student.courses[course] === 100) {
-				categories[course].value += 1
-			}
-		})
-
-		Object.keys(student.assessments).forEach((assessment) => {
-			if (student.assessments[assessment].result === 'Pass') {
-				categories[assessment].value += 1
-			}
+	tasks.forEach((task) => {
+		data.push({
+			task: task.label,
+			value: task.value,
 		})
 	})
-
-	chartOptions.value = getChartOptions(categories)
-	return [
-		{
-			name: __('Completed by Students'),
-			data: Object.values(categories).map((item) => item.value),
-		},
-	]
+	return data
 }
 
-const getChartOptions = (categories) => {
-	const courseColor = theme.colors.green[700]
-	const assessmentColor = theme.colors.blue[700]
-	const maxY =
-		students.data?.length % 5
-			? students.data?.length + (5 - (students.data?.length % 5))
-			: students.data?.length
+const countAssessments = (row, tasks) => {
+	Object.keys(row.assessments).forEach((assessment) => {
+		if (row.assessments[assessment].result === 'Pass') {
+			tasks.filter((task) => task.label === assessment).length
+				? tasks.filter((task) => task.label === assessment)[0].value++
+				: tasks.push({
+						value: 1,
+						label: assessment,
+				  })
+		}
+	})
+	return tasks
+}
 
-	return {
-		chart: {
-			type: 'bar',
-			toolbar: {
-				show: false,
-			},
-		},
-		plotOptions: {
-			bar: {
-				distributed: true,
-				borderRadius: 3,
-				borderRadiusApplication: 'end',
-				horizontal: true,
-				barHeight: '40%',
-			},
-		},
-		colors: Object.values(categories).map((item) =>
-			item.type === 'course' ? courseColor : assessmentColor
-		),
-		xaxis: {
-			categories: Object.values(categories).map((item) => item.label),
-			labels: {
-				style: {
-					fontSize: '10px',
-				},
-				rotate: 0,
-				formatter: function (value) {
-					return value.length > 30 ? `${value.substring(0, 30)}...` : value
-				},
-			},
-		},
-		yaxis: {
-			max: maxY,
-			min: 0,
-			stepSize: 10,
-			tickAmount: maxY / 5,
-			/* reversed: true */
-		},
-	}
+const countCourses = (row, tasks) => {
+	Object.keys(row.courses).forEach((course) => {
+		if (row.courses[course] === 100) {
+			tasks.filter((task) => task.label === course).length
+				? tasks.filter((task) => task.label === course)[0].value++
+				: tasks.push({
+						value: 1,
+						label: course,
+				  })
+		}
+	})
+	return tasks
 }
 
 watch(students, () => {
@@ -442,8 +352,3 @@ const certificationCount = createResource({
 	auto: true,
 })
 </script>
-<style>
-.apexcharts-legend {
-	display: none !important;
-}
-</style>

frontend/src/components/Categories.vue

@@ -1,130 +0,0 @@
-<template>
-	<div class="flex flex-col min-h-0">
-		<div class="flex items-center justify-between">
-			<div class="text-xl font-semibold mb-5 text-ink-gray-9">
-				{{ label }}
-			</div>
-			<Button @click="() => showCategoryForm()">
-				<template #prefix>
-					<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
-					<X v-else class="h-3 w-3 stroke-1.5" />
-				</template>
-				{{ showForm ? __('Close') : __('New') }}
-			</Button>
-		</div>
-
-		<div
-			v-if="showForm"
-			class="flex items-center justify-between my-4 space-x-2"
-		>
-			<FormControl
-				ref="categoryInput"
-				v-model="category"
-				:placeholder="__('Category Name')"
-				class="flex-1"
-			/>
-			<Button @click="addCategory()" variant="subtle">
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div class="overflow-y-scroll">
-			<div class="text-base space-y-2">
-				<FormControl
-					:value="cat.category"
-					type="text"
-					v-for="cat in categories.data"
-					@change.stop="(e) => update(cat.name, e.target.value)"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import {
-	Button,
-	FormControl,
-	createListResource,
-	createResource,
-	debounce,
-} from 'frappe-ui'
-import { Plus, X } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const showForm = ref(false)
-const category = ref(null)
-const categoryInput = ref(null)
-
-const props = defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	description: {
-		type: String,
-		default: '',
-	},
-})
-
-const categories = createListResource({
-	doctype: 'LMS Category',
-	fields: ['name', 'category'],
-	auto: true,
-})
-
-const newCategory = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Category',
-				category: category.value,
-			},
-		}
-	},
-})
-
-const addCategory = () => {
-	newCategory.submit(
-		{},
-		{
-			onSuccess(data) {
-				categories.reload()
-				category.value = null
-			},
-		}
-	)
-}
-
-const showCategoryForm = () => {
-	showForm.value = !showForm.value
-	setTimeout(() => {
-		categoryInput.value.$el.querySelector('input').focus()
-	}, 0)
-}
-
-const updateCategory = createResource({
-	url: 'frappe.client.rename_doc',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Category',
-			old_name: values.name,
-			new_name: values.category,
-		}
-	},
-})
-
-const update = (name, value) => {
-	updateCategory.submit(
-		{
-			name: name,
-			category: value,
-		},
-		{
-			onSuccess() {
-				categories.reload()
-			},
-		}
-	)
-}
-</script>

frontend/src/components/Controls/Autocomplete.vue

@@ -1,127 +1,140 @@
 <template>
-	<Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
-		<Popover class="w-full" v-model:show="showOptions">
-			<template #target="{ open: openPopover, togglePopover }">
-				<slot name="target" v-bind="{ open: openPopover, togglePopover }">
-					<div class="w-full">
-						<button
-							class="flex w-full items-center justify-between focus:outline-none"
-							:class="inputClasses"
-							@click="() => togglePopover()"
-						>
-							<div class="flex items-center">
-								<slot name="prefix" />
-								<span
-									class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-									v-if="selectedValue"
-								>
-									{{ displayValue(selectedValue) }}
-								</span>
-								<span class="text-base leading-5 text-ink-gray-4" v-else>
-									{{ placeholder || '' }}
-								</span>
-							</div>
-							<ChevronDown class="h-4 w-4 stroke-1.5" />
-						</button>
-					</div>
-				</slot>
-			</template>
-			<template #body="{ isOpen }">
-				<div v-show="isOpen">
-					<div class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2">
-						<div class="relative px-1.5 pt-0.5">
-							<ComboboxInput
-								ref="search"
-								class="form-input w-full"
-								type="text"
-								@change="
-									(e) => {
-										query = e.target.value
-									}
-								"
-								:value="query"
-								autocomplete="off"
-								placeholder="Search"
-							/>
+	<div>
+		<div v-if="label" class="text-xs text-ink-gray-5 mb-1">
+			{{ __(label) }}
+			<span class="text-ink-red-3" v-if="attrs.required">*</span>
+		</div>
+		<Combobox
+			v-model="selectedValue"
+			nullable
+			v-slot="{ open: isComboboxOpen }"
+		>
+			<Popover class="w-full" v-model:show="showOptions">
+				<template #target="{ open: openPopover, togglePopover }">
+					<slot name="target" v-bind="{ open: openPopover, togglePopover }">
+						<div class="w-full">
 							<button
-								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-								@click="selectedValue = null"
+								class="flex w-full items-center justify-between focus:outline-none"
+								:class="inputClasses"
+								@click="() => togglePopover()"
+								:disabled="attrs.readonly"
 							>
-								<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
+								<div class="flex items-center">
+									<slot name="prefix" />
+									<span
+										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+										v-if="selectedValue"
+									>
+										{{ displayValue(selectedValue) }}
+									</span>
+									<span class="text-base leading-5 text-ink-gray-4" v-else>
+										{{ placeholder || '' }}
+									</span>
+								</div>
+								<ChevronDown class="h-4 w-4 stroke-1.5" />
 							</button>
 						</div>
-						<ComboboxOptions
-							class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-							static
+					</slot>
+				</template>
+				<template #body="{ isOpen }">
+					<div v-show="isOpen">
+						<div
+							class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
 						>
-							<div
-								class="mt-1.5"
-								v-for="group in groups"
-								:key="group.key"
-								v-show="group.items.length > 0"
+							<div class="relative px-1.5 pt-0.5">
+								<ComboboxInput
+									ref="search"
+									class="form-input w-full"
+									type="text"
+									@change="
+										(e) => {
+											query = e.target.value
+										}
+									"
+									:value="query"
+									autocomplete="off"
+									:placeholder="__('Search')"
+								/>
+								<button
+									class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
+									@click="selectedValue = null"
+								>
+									<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
+								</button>
+							</div>
+							<ComboboxOptions
+								class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+								static
 							>
 								<div
-									v-if="group.group && !group.hideLabel"
-									class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
+									class="mt-1.5"
+									v-for="group in groups"
+									:key="group.key"
+									v-show="group.items.length > 0"
 								>
-									{{ group.group }}
-								</div>
-								<ComboboxOption
-									as="template"
-									v-for="option in group.items"
-									:key="option.value"
-									:value="option"
-									v-slot="{ active, selected }"
-								>
-									<li
-										:class="[
-											'flex items-center rounded px-2.5 py-2 text-base',
-											{ 'bg-surface-gray-2': active },
-										]"
+									<div
+										v-if="group.group && !group.hideLabel"
+										class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
 									>
-										<slot
-											name="item-prefix"
-											v-bind="{ active, selected, option }"
-										/>
-										<slot
-											name="item-label"
-											v-bind="{ active, selected, option }"
+										{{ group.group }}
+									</div>
+									<ComboboxOption
+										as="template"
+										v-for="option in group.items"
+										:key="option.value"
+										:value="option"
+										v-slot="{ active, selected }"
+									>
+										<li
+											:class="[
+												'flex items-center rounded px-2.5 py-2 text-base',
+												{ 'bg-surface-gray-2': active },
+											]"
 										>
-											<div class="flex flex-col space-y-1 text-ink-gray-8">
-												<div>
-													{{ option.label }}
+											<slot
+												name="item-prefix"
+												v-bind="{ active, selected, option }"
+											/>
+											<slot
+												name="item-label"
+												v-bind="{ active, selected, option }"
+											>
+												<div class="flex flex-col space-y-1 text-ink-gray-8">
+													<div>
+														{{ option.label }}
+													</div>
+													<div
+														v-if="
+															option.description &&
+															option.description != option.label
+														"
+														class="text-xs text-ink-gray-7"
+														v-html="option.description"
+													></div>
 												</div>
-												<div
-													v-if="
-														option.description &&
-														option.description != option.label
-													"
-													class="text-xs text-ink-gray-7"
-													v-html="option.description"
-												></div>
-											</div>
-										</slot>
-									</li>
-								</ComboboxOption>
+											</slot>
+										</li>
+									</ComboboxOption>
+								</div>
+								<li
+									v-if="groups.length == 0"
+									class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+								>
+									{{ __('No results found') }}
+								</li>
+							</ComboboxOptions>
+							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+								<slot
+									name="footer"
+									v-bind="{ value: search?.el._value, close }"
+								></slot>
 							</div>
-							<li
-								v-if="groups.length == 0"
-								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
-							>
-								No results found
-							</li>
-						</ComboboxOptions>
-						<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
-							<slot
-								name="footer"
-								v-bind="{ value: search?.el._value, close }"
-							></slot>
 						</div>
 					</div>
-				</div>
-			</template>
-		</Popover>
-	</Combobox>
+				</template>
+			</Popover>
+		</Combobox>
+	</div>
 </template>
 
 <script setup>
@@ -148,6 +161,10 @@ const props = defineProps({
 		type: String,
 		default: 'md',
 	},
+	label: {
+		type: String,
+		default: '',
+	},
 	variant: {
 		type: String,
 		default: 'subtle',

frontend/src/components/Controls/ChildTable.vue

@@ -0,0 +1,149 @@
+<template>
+	<div>
+		<div class="text-xs text-ink-gray-5 mb-2">
+			{{ label }}
+		</div>
+		<div class="overflow-x-auto border rounded-md">
+			<div
+				class="grid items-center space-x-4 p-2 border-b"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<div
+					v-for="(column, index) in columns"
+					:key="index"
+					class="text-sm text-ink-gray-5"
+				>
+					{{ column }}
+				</div>
+				<div></div>
+			</div>
+			<div
+				v-for="(row, rowIndex) in rows"
+				:key="rowIndex"
+				class="grid items-center space-x-4 p-2"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<template v-for="key in Object.keys(row)" :key="key">
+					<input
+						v-if="showKey(key)"
+						v-model="row[key]"
+						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-sm text-sm focus:outline-none"
+					/>
+				</template>
+
+				<div class="relative" ref="menuRef">
+					<Button
+						variant="ghost"
+						@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+					>
+						<template #icon>
+							<Ellipsis
+								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+							/>
+						</template>
+					</Button>
+
+					<div
+						v-if="menuOpenIndex === rowIndex"
+						class="absolute right-[30px] top-5 mt-1 w-32 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+					>
+						<button
+							@click="deleteRow(rowIndex)"
+							class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
+						>
+							<Trash2 class="size-4 stroke-1.5" />
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			<Button @click="addRow">
+				<template #prefix>
+					<Plus class="size-4 text-ink-gray-7" />
+				</template>
+				{{ __('Add Row') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Ellipsis, Plus, Trash2 } from 'lucide-vue-next'
+import { onClickOutside } from '@vueuse/core'
+
+const rows = defineModel<Cell[][]>()
+const menuRef = ref(null)
+const menuOpenIndex = ref<number | null>(null)
+const menuTopPosition = ref<string>('')
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Cell[][]): void
+}>()
+
+type Cell = {
+	value: string
+	editable?: boolean
+}
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: Cell[][]
+		columns?: string[]
+		label?: string
+	}>(),
+	{
+		columns: [],
+	}
+)
+
+const columns = ref(props.columns)
+
+watch(rows, () => {
+	if (rows.value?.length < 1) {
+		addRow()
+	}
+})
+
+const addRow = () => {
+	if (!rows.value) {
+		rows.value = []
+	}
+	let newRow: { [key: string]: string } = {}
+	columns.value.forEach((column: any) => {
+		newRow[column.toLowerCase().split(' ').join('_')] = ''
+	})
+	rows.value.push(newRow)
+	emit('update:modelValue', rows.value)
+}
+
+const deleteRow = (index: number) => {
+	rows.value.splice(index, 1)
+	emit('update:modelValue', rows.value)
+}
+
+const getGridTemplateColumns = () => {
+	return [...Array(columns.value.length).fill('1fr'), '0.25fr'].join(' ')
+}
+
+const toggleMenu = (index: number, event: MouseEvent) => {
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
+	menuTopPosition.value = `${event.clientY + 10}px`
+}
+
+onClickOutside(menuRef, () => {
+	menuOpenIndex.value = null
+})
+
+const showKey = (key: string) => {
+	let columnsLower = columns.value.map((col) =>
+		col.toLowerCase().split(' ').join('_')
+	)
+	return columnsLower.includes(key)
+}
+</script>

frontend/src/components/Controls/Code.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class="flex w-full flex-col gap-1.5">
+		<div v-if="label" class="text-xs text-ink-gray-5">
+			{{ __(label) }}
+		</div>
+		<codemirror
+			v-model="code"
+			:extensions="extensions"
+			:tab-size="2"
+			:autofocus="autofocus"
+			:indent-with-tab="true"
+			:style="{ height: height, maxHeight: maxHeight }"
+			:disabled="readonly"
+			@blur="emitEditorValue"
+			:class="{
+				'border border-outline-gray-1': showBorder,
+			}"
+		/>
+		<Button
+			v-if="showSaveButton"
+			@click="emit('save', code)"
+			class="mt-3 w-full text-base"
+		>
+			{{ __('Save') }}
+		</Button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Codemirror } from 'vue-codemirror'
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
+import { LanguageSupport } from '@codemirror/language'
+import { EditorView } from '@codemirror/view'
+import { tomorrow } from 'thememirror'
+
+const props = withDefaults(
+	defineProps<{
+		language: 'json' | 'javascript' | 'html' | 'css' | 'python'
+		modelValue: string | object | Array<string | object> | null
+		height?: string
+		maxHeight?: string
+		autofocus?: boolean
+		showSaveButton?: boolean
+		showLineNumbers?: boolean
+		completions?: Function | null
+		label?: string
+		showBorder?: boolean
+		required?: boolean
+		readonly?: boolean
+	}>(),
+	{
+		language: 'javascript',
+		modelValue: null,
+		height: 'auto',
+		maxHeight: '250px',
+		showLineNumbers: true,
+		completions: null,
+	}
+)
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const code = ref<string>('')
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		code.value =
+			typeof newVal === 'string' ? newVal : JSON.stringify(newVal, null, 2)
+	},
+	{ immediate: true }
+)
+
+watch(code, (val) => {
+	emit('update:modelValue', val)
+})
+
+const errorMessage = ref('')
+const emitEditorValue = () => {
+	try {
+		errorMessage.value = ''
+		let value = code.value || ''
+
+		if (!props.showSaveButton && !props.readonly) {
+			emit('update:modelValue', value)
+		}
+	} catch (e) {
+		console.error('Error while parsing JSON for editor', e)
+		errorMessage.value = `Invalid object/JSON: ${e.message}`
+	}
+}
+
+const languageExtension = ref<LanguageSupport>()
+const autocompleteExtension = ref()
+
+async function setLanguageExtension() {
+	const importMap = {
+		json: () => import('@codemirror/lang-json'),
+		javascript: () => import('@codemirror/lang-javascript'),
+		html: () => import('@codemirror/lang-html'),
+		css: () => import('@codemirror/lang-css'),
+		python: () => import('@codemirror/lang-python'),
+	}
+
+	const languageImport = importMap[props.language]
+	if (!languageImport) return
+
+	const module = await languageImport()
+	languageExtension.value = (module as any)[props.language]()
+
+	if (props.completions) {
+		const languageData = (module as any)[`${props.language}Language`]
+		autocompleteExtension.value = languageData.data.of({
+			autocomplete: props.completions,
+		})
+	}
+}
+
+onMounted(async () => {
+	await setLanguageExtension()
+})
+
+watch(
+	() => props.language,
+	async () => {
+		await setLanguageExtension()
+	},
+	{ immediate: true }
+)
+
+const extensions = computed(() => {
+	const baseExtensions = [
+		closeBrackets(),
+		tomorrow,
+		EditorView.theme({
+			'&': {
+				fontFamily: 'monospace',
+				fontSize: '12px',
+			},
+			'.cm-gutters': {
+				display: props.showLineNumbers ? 'flex' : 'none',
+			},
+		}),
+	]
+	if (languageExtension.value) {
+		baseExtensions.push(languageExtension.value)
+	}
+	if (autocompleteExtension.value) {
+		baseExtensions.push(autocompleteExtension.value)
+	}
+	const autocompletionOptions = {
+		activateOnTyping: true,
+		maxRenderedOptions: 10,
+		closeOnBlur: false,
+		icons: false,
+		optionClass: () => 'flex h-7 !px-2 items-center rounded !text-gray-600',
+	}
+	baseExtensions.push(autocompletion(autocompletionOptions))
+	return baseExtensions
+})
+</script>

frontend/src/components/Controls/CodeEditor.vue

@@ -5,7 +5,7 @@
 			height: height,
 		}"
 	>
-		<span class="text-xs text-ink-gray-7" v-if="label">
+		<span class="text-xs text-ink-gray-7 mb-1" v-if="label">
 			{{ label }}
 		</span>
 		<div

frontend/src/components/Controls/ColorSwatches.vue

@@ -0,0 +1,108 @@
+<template>
+	<div>
+		<div class="text-xs text-ink-gray-5 mb-1">
+			{{ __(label) }}
+		</div>
+		<Popover placement="bottom" class="!block">
+			<template #target="{ togglePopover, isOpen }">
+				<div class="space-y-2">
+					<FormControl
+						type="text"
+						autocomplete="off"
+						class="w-full"
+						:placeholder="__('Set Color')"
+						@focus="togglePopover"
+						:modelValue="modelValue"
+						@update:modelValue="(val: string) => emit('update:modelValue', val)"
+					>
+						<template #prefix>
+							<div
+								class="size-4 rounded-full"
+								:style="
+									modelValue
+										? {
+												backgroundColor:
+													theme.backgroundColor[modelValue.toLowerCase()][400],
+										  }
+										: {}
+								"
+							>
+								<Palette
+									v-if="!modelValue"
+									class="size-4 stroke-1.5 text-ink-gray-5"
+								/>
+							</div>
+						</template>
+						<template #suffix>
+							<Button variant="ghost">
+								<X
+									class="size-3 text-ink-gray-5"
+									@click="emit('update:modelValue', null)"
+								/>
+							</Button>
+						</template>
+					</FormControl>
+				</div>
+			</template>
+			<template #body="{ close }">
+				<div class="rounded-lg bg-surface-white p-3 border w-fit mt-2">
+					<div class="text-xs text-ink-gray-5 mb-1.5">
+						{{ __('Swatches') }}
+					</div>
+					<div class="grid grid-cols-7 gap-2">
+						<div
+							v-for="color in colors"
+							:key="color"
+							class="size-5 rounded-full cursor-pointer"
+							:style="{
+								backgroundColor:
+									theme.backgroundColor[color.toLowerCase()][400],
+							}"
+							@click="
+								(e) => {
+									emit('update:modelValue', color)
+									close()
+									emit('change', color)
+								}
+							"
+						></div>
+					</div>
+				</div>
+			</template>
+		</Popover>
+		<div class="text-sm text-ink-gray-5 mt-2">
+			{{ description }}
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { Button, FormControl, Popover } from 'frappe-ui'
+import { computed } from 'vue'
+import { Palette, X } from 'lucide-vue-next'
+import { theme } from '@/utils/theme'
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const props = defineProps<{
+	modelValue: string
+	label: string
+	description?: string
+}>()
+
+const colors = computed(() => {
+	return [
+		'Red',
+		'Blue',
+		'Green',
+		'Amber',
+		'Purple',
+		'Cyan',
+		'Orange',
+		'Violet',
+		'Pink',
+		'Teal',
+		'Gray',
+		'Yellow',
+	]
+})
+</script>

frontend/src/components/Controls/Link.vue

@@ -12,6 +12,7 @@
 			:variant="attrs.variant"
 			:placeholder="attrs.placeholder"
 			:filterable="false"
+			:readonly="attrs.readonly"
 		>
 			<template #target="{ open, togglePopover }">
 				<slot name="target" v-bind="{ open, togglePopover }" />

frontend/src/components/Controls/MultiSelect.vue

@@ -55,9 +55,10 @@
 											</div>
 										</li>
 									</ComboboxOption>
+									<div class="h-10"></div>
 									<div
 										v-if="attrs.onCreate"
-										class="absolute bottom-2 left-1 w-[98%] pt-2 bg-white border-t"
+										class="absolute bottom-2 left-1 w-[99%] pt-2 bg-white border-t"
 									>
 										<Button
 											variant="ghost"

frontend/src/components/Controls/Uploader.vue

@@ -0,0 +1,76 @@
+<template>
+	<div class="mb-4">
+		<div v-if="label" class="text-xs text-ink-gray-5 mb-2">
+			{{ __(label) }}
+			<span class="text-ink-red-3">*</span>
+		</div>
+		<FileUploader
+			v-if="!modelValue"
+			:fileTypes="['image/*']"
+			:validateFile="validateFile"
+			@success="(file: File) => saveImage(file)"
+		>
+			<template v-slot="{ file, progress, uploading, openFileSelector }">
+				<div class="flex items-center">
+					<div class="border rounded-md w-fit py-7 px-20">
+						<Image class="size-5 stroke-1 text-ink-gray-7" />
+					</div>
+					<div class="ml-4">
+						<Button @click="openFileSelector">
+							{{ __('Upload') }}
+						</Button>
+						<div class="mt-1 text-ink-gray-5 text-sm leading-5">
+							{{ __(description) }}
+						</div>
+					</div>
+				</div>
+			</template>
+		</FileUploader>
+		<div v-else class="mb-4">
+			<div class="flex items-center">
+				<img :src="modelValue" class="border rounded-md w-44 h-auto" />
+				<div class="ml-4">
+					<Button @click="removeImage()">
+						{{ __('Remove') }}
+					</Button>
+					<div
+						v-if="description"
+						class="mt-2 text-ink-gray-5 text-sm leading-5"
+					>
+						{{ __(description) }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { validateFile } from '@/utils'
+import { Button, FileUploader } from 'frappe-ui'
+import { Image } from 'lucide-vue-next'
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: string): void
+}>()
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: string
+		label?: string
+		description?: string
+	}>(),
+	{
+		modelValue: '',
+		label: '',
+		description: '',
+	}
+)
+
+const saveImage = (file: any) => {
+	emit('update:modelValue', file.file_url)
+}
+
+const removeImage = () => {
+	emit('update:modelValue', '')
+}
+</script>

frontend/src/components/CourseCard.vue

@@ -1,41 +1,51 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md border-2 overflow-auto"
+		class="flex flex-col h-full rounded-md border-2 overflow-auto text-ink-gray-9"
 		style="min-height: 350px"
 	>
 		<div
-			class="course-image"
-			:class="{ 'default-image': !course.image }"
-			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
+			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat"
+			:style="
+				course.image
+					? { backgroundImage: `url('${encodeURI(course.image)}')` }
+					: {
+							backgroundImage: getGradientColor(),
+							backgroundBlendMode: 'screen',
+					  }
+			"
 		>
 			<div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
-				<Badge
+				<div
 					v-if="course.featured"
-					variant="subtle"
-					theme="green"
-					size="md"
-					class="mb-1 mr-1"
+					class="flex items-center space-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md mr-1 mb-1"
 				>
-					{{ __('Featured') }}
-				</Badge>
+					<Star class="size-3 stroke-2" />
+					<span>
+						{{ __('Featured') }}
+					</span>
+				</div>
 				<div
 					v-if="course.tags"
 					v-for="tag in course.tags?.split(', ')"
-					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md mb-1 mr-1"
+					class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
 				>
 					{{ tag }}
 				</div>
 			</div>
-			<div v-if="!course.image" class="image-placeholder">
-				{{ course.title[0] }}
+			<div
+				v-if="!course.image"
+				class="flex items-center justify-center text-white flex-1 font-extrabold text-2xl my-auto px-5 text-center leading-6"
+				:class="course.tags ? 'h-[80%]' : 'h-full'"
+			>
+				{{ course.title }}
 			</div>
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
 				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
-						<span class="flex items-center text-ink-gray-7">
+						<span class="flex items-center">
 							<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.lessons }}
 						</span>
@@ -44,8 +54,8 @@
 
 				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
-						<span class="flex items-center text-ink-gray-7">
-							<Users class="h-4 w-4 stroke-1. mr-1" />
+						<span class="flex items-center">
+							<Users class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.enrollments }}
 						</span>
 					</Tooltip>
@@ -53,14 +63,14 @@
 
 				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
-						<span class="flex items-center text-ink-gray-7">
+						<span class="flex items-center">
 							<Star class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.rating }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.status != 'Approved'">
+				<!-- <div v-if="course.status != 'Approved'">
 					<Badge
 						variant="subtle"
 						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
@@ -68,14 +78,14 @@
 					>
 						{{ course.status }}
 					</Badge>
-				</div>
+				</div> -->
 			</div>
 
-			<div class="text-xl font-semibold leading-6 text-ink-gray-9">
+			<div v-if="course.image" class="text-xl font-semibold leading-6">
 				{{ course.title }}
 			</div>
 
-			<div class="short-introduction text-ink-gray-7 text-sm">
+			<div class="short-introduction text-sm">
 				{{ course.short_introduction }}
 			</div>
 
@@ -84,11 +94,8 @@
 				:progress="course.membership.progress"
 			/>
 
-			<div
-				v-if="user && course.membership"
-				class="text-sm text-ink-gray-7 mt-2 mb-4"
-			>
-				{{ Math.ceil(course.membership.progress) }}% completed
+			<div v-if="user && course.membership" class="text-sm mt-2 mb-4">
+				{{ Math.ceil(course.membership.progress) }}% {{ __('completed') }}
 			</div>
 
 			<div class="flex items-center justify-between mt-auto">
@@ -108,21 +115,23 @@
 				<div v-if="course.paid_course" class="font-semibold">
 					{{ course.price }}
 				</div>
-				<div
+
+				<Tooltip
 					v-if="course.paid_certificate || course.enable_certification"
-					class="text-xs text-ink-blue-3 bg-surface-blue-1 py-0.5 px-1 rounded-md"
+					:text="__('Get Certified')"
 				>
-					{{ __('Certification') }}
-				</div>
+					<GraduationCap class="size-5 stroke-1.5 text-ink-gray-7" />
+				</Tooltip>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
-import { Badge, Tooltip } from 'frappe-ui'
+import { Tooltip } from 'frappe-ui'
+import { theme } from '@/utils/theme'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 
@@ -134,16 +143,24 @@ const props = defineProps({
 		default: null,
 	},
 })
+
+const getGradientColor = () => {
+	let color = props.course.card_gradient?.toLowerCase() || 'blue'
+	let colorMap = theme.backgroundColor[color]
+	return `linear-gradient(to top right, black, ${colorMap[400]})`
+	/* return `bg-gradient-to-br from-${color}-100 via-${color}-200 to-${color}-400` */
+	/* return `linear-gradient(to bottom right, ${colorMap[100]}, ${colorMap[400]})` */
+	/* return `radial-gradient(ellipse at 80% 20%, black 20%, ${colorMap[500]} 100%)` */
+	/* return `radial-gradient(ellipse at 30% 70%, black 50%, ${colorMap[500]} 100%)` */
+	/* return `radial-gradient(ellipse at 80% 20%, ${colorMap[100]} 0%, ${colorMap[300]} 50%, ${colorMap[500]} 100%)` */
+	/* return `conic-gradient(from 180deg at 50% 50%, ${colorMap[100]} 0%, ${colorMap[200]} 50%, ${colorMap[400]} 100%)` */
+	/* return `linear-gradient(135deg, ${colorMap[100]}, ${colorMap[300]}), linear-gradient(120deg, rgba(255,255,255,0.4) 0%, transparent 60%) ` */
+	/* return `radial-gradient(circle at 20% 30%, ${colorMap[100]} 0%, transparent 40%),
+		radial-gradient(circle at 80% 40%, ${colorMap[200]} 0%, transparent 50%),
+		linear-gradient(135deg, ${colorMap[300]} 0%, ${colorMap[400]} 100%);` */
+}
 </script>
 <style>
-.course-image {
-	height: 168px;
-	width: 100%;
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
 .course-card-pills {
 	background: #ffffff;
 	margin-left: 0;
@@ -157,14 +174,6 @@ const props = defineProps({
 	width: fit-content;
 }
 
-.default-image {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	background-color: theme('colors.green.100');
-	color: theme('colors.green.600');
-}
-
 .avatar-group {
 	display: inline-flex;
 	align-items: center;
@@ -173,14 +182,7 @@ const props = defineProps({
 .avatar-group .avatar {
 	transition: margin 0.1s ease-in-out;
 }
-.image-placeholder {
-	display: flex;
-	align-items: center;
-	flex: 1;
-	font-size: 5rem;
-	color: theme('colors.gray.700');
-	font-weight: 600;
-}
+
 .avatar-group.overlap .avatar + .avatar {
 	margin-left: calc(-8px);
 }

frontend/src/components/CourseCardOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="border-2 rounded-md min-w-80">
+	<div class="border-2 rounded-md min-w-80 max-w-sm">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
@@ -26,6 +26,9 @@
 						}"
 					>
 						<Button variant="solid" size="md" class="w-full">
+							<template #prefix>
+								<BookText class="size-4 stroke-1.5" />
+							</template>
 							<span>
 								{{ __('Continue Learning') }}
 							</span>
@@ -44,6 +47,9 @@
 					}"
 				>
 					<Button variant="solid" size="md" class="w-full">
+						<template #prefix>
+							<CreditCard class="size-4 stroke-1.5" />
+						</template>
 						<span>
 							{{ __('Buy this course') }}
 						</span>
@@ -57,12 +63,15 @@
 					{{ __('Contact the Administrator to enroll for this course.') }}
 				</Badge>
 				<Button
-					v-else
+					v-else-if="!user.data?.is_moderator && !is_instructor()"
 					@click="enrollStudent()"
 					variant="solid"
 					class="w-full"
 					size="md"
 				>
+					<template #prefix>
+						<BookText class="size-4 stroke-1.5" />
+					</template>
 					<span>
 						{{ __('Start Learning') }}
 					</span>
@@ -74,8 +83,22 @@
 					class="w-full mt-2"
 					size="md"
 				>
+					<template #prefix>
+						<GraduationCap class="size-4 stroke-1.5" />
+					</template>
 					{{ __('Get Certificate') }}
 				</Button>
+				<Button
+					v-if="user.data?.is_moderator || is_instructor()"
+					class="w-full mt-2"
+					size="md"
+					@click="showProgressSummary"
+				>
+					<template #prefix>
+						<TrendingUp class="size-4 stroke-1.5" />
+						{{ __('Progress Summary') }}
+					</template>
+				</Button>
 				<router-link
 					v-if="user?.data?.is_moderator || is_instructor()"
 					:to="{
@@ -86,6 +109,9 @@
 					}"
 				>
 					<Button variant="subtle" class="w-full mt-2" size="md">
+						<template #prefix>
+							<Pencil class="size-4 stroke-1.5" />
+						</template>
 						<span>
 							{{ __('Edit') }}
 						</span>
@@ -116,7 +142,7 @@
 					v-if="parseInt(course.data.rating) > 0"
 					class="flex items-center text-ink-gray-9"
 				>
-					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
+					<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
 					<span class="ml-2">
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
@@ -142,18 +168,34 @@
 			</div>
 		</div>
 	</div>
+	<CourseProgressSummary
+		v-model="showProgressModal"
+		:courseName="course.data.name"
+		:enrollments="course.data.enrollments"
+	/>
 </template>
 <script setup>
-import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
-import { computed, inject } from 'vue'
-import { Badge, Button, createResource, toast } from 'frappe-ui'
+import {
+	BookOpen,
+	BookText,
+	CreditCard,
+	GraduationCap,
+	Pencil,
+	Star,
+	TrendingUp,
+	Users,
+} from 'lucide-vue-next'
+import { computed, inject, ref } from 'vue'
+import { Badge, Button, call, createResource, toast } from 'frappe-ui'
 import { formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 import CertificationLinks from '@/components/CertificationLinks.vue'
+import CourseProgressSummary from '@/components/Modals/CourseProgressSummary.vue'
 
 const router = useRouter()
 const user = inject('$user')
+const showProgressModal = ref(false)
 const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
@@ -175,15 +217,11 @@ function enrollStudent() {
 		toast.success(__('You need to login first to enroll for this course'))
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 1000)
+		}, 500)
 	} else {
-		const enrollStudentResource = createResource({
-			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
+		call('lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership', {
+			course: props.course.data.name,
 		})
-		enrollStudentResource
-			.submit({
-				course: props.course.data.name,
-			})
 			.then(() => {
 				capture('enrolled_in_course', {
 					course: props.course.data.name,
@@ -198,7 +236,11 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 2000)
+				}, 1000)
+			})
+			.catch((err) => {
+				toast.warning(__(err.messages?.[0] || err))
+				console.error(err)
 			})
 	}
 }
@@ -246,4 +288,8 @@ const fetchCertificate = () => {
 		member: user.data?.name,
 	})
 }
+
+const showProgressSummary = () => {
+	showProgressModal.value = true
+}
 </script>

frontend/src/components/CourseInstructors.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-ink-gray-7">
+	<div class="">
 		<span v-if="instructors?.length == 1">
 			<router-link
 				:to="{
@@ -19,7 +19,7 @@
 			>
 				{{ instructors[0].first_name }}
 			</router-link>
-			and
+			{{ __('and') }}
 			<router-link
 				:to="{
 					name: 'Profile',
@@ -38,7 +38,7 @@
 			>
 				{{ instructors[0].first_name }}
 			</router-link>
-			and {{ instructors?.length - 1 }} others
+			{{ __('and') }} {{ instructors?.length - 1 }} {{ __('others') }}
 		</span>
 	</div>
 </template>

frontend/src/components/CourseOutline.vue

@@ -23,119 +23,135 @@
 				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
-			<Disclosure
-				v-slot="{ open }"
-				v-for="(chapter, index) in outline.data"
-				:key="chapter.name"
-				:defaultOpen="openChapterDetail(chapter.idx)"
+			<Draggable
+				:list="outline.data"
+				:disabled="!allowEdit"
+				item-key="name"
+				group="chapters"
+				@end="updateChapterOrder"
 			>
-				<DisclosureButton ref="" class="flex items-center w-full p-2 group">
-					<ChevronRight
-						:class="{
-							'rotate-90 transform duration-200': open,
-							'duration-200': !open,
-							hidden: chapter.is_scorm_package,
-							open: index == 1,
-						}"
-						class="h-4 w-4 text-ink-gray-9 stroke-1"
-					/>
-					<div
-						class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
-						@click="redirectToChapter(chapter)"
-					>
-						{{ chapter.title }}
-					</div>
-					<div class="flex ml-auto space-x-4">
-						<Tooltip :text="__('Edit Chapter')" placement="bottom">
-							<FilePenLine
-								v-if="allowEdit"
-								@click.prevent="openChapterModal(chapter)"
-								class="h-4 w-4 text-ink-gray-9 invisible group-hover:visible"
-							/>
-						</Tooltip>
-						<Tooltip :text="__('Delete Chapter')" placement="bottom">
-							<Trash2
-								v-if="allowEdit"
-								@click.prevent="trashChapter(chapter.name)"
-								class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
-							/>
-						</Tooltip>
-					</div>
-				</DisclosureButton>
-				<DisclosurePanel v-if="!chapter.is_scorm_package">
-					<Draggable
-						v-if="!chapter.is_scorm_package"
-						:list="chapter.lessons"
-						:disabled="!allowEdit"
-						item-key="name"
-						group="items"
-						@end="updateOutline"
-						:data-chapter="chapter.name"
-					>
-						<template #item="{ element: lesson }">
-							<div
-								class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
-								:class="
-									isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
-								"
+				<template #item="{ element: chapter, index }">
+					<div class="chapter-item">
+						<Disclosure
+							v-slot="{ open }"
+							:key="chapter.name"
+							:defaultOpen="openChapterDetail(chapter.idx)"
+						>
+							<DisclosureButton
+								ref=""
+								class="flex items-center w-full p-2 group"
 							>
-								<router-link
-									:to="{
-										name: allowEdit ? 'LessonForm' : 'Lesson',
-										params: {
-											courseName: courseName,
-											chapterNumber: lesson.number.split('.')[0],
-											lessonNumber: lesson.number.split('.')[1],
-										},
+								<ChevronRight
+									:class="{
+										'rotate-90 transform duration-200': open,
+										'duration-200': !open,
+										hidden: chapter.is_scorm_package,
+										open: index == 1,
 									}"
+									class="h-4 w-4 text-ink-gray-9 stroke-1"
+								/>
+								<div
+									class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
+									@click="redirectToChapter(chapter)"
 								>
-									<div class="flex items-center text-sm leading-5 group">
-										<MonitorPlay
-											v-if="lesson.icon === 'icon-youtube'"
-											class="h-4 w-4 stroke-1 mr-2"
+									{{ chapter.title }}
+								</div>
+								<div class="flex ml-auto space-x-4">
+									<Tooltip :text="__('Edit Chapter')" placement="bottom">
+										<FilePenLine
+											v-if="allowEdit"
+											@click.prevent="openChapterModal(chapter)"
+											class="h-4 w-4 text-ink-gray-9 invisible group-hover:visible"
 										/>
-										<HelpCircle
-											v-else-if="lesson.icon === 'icon-quiz'"
-											class="h-4 w-4 stroke-1 mr-2"
-										/>
-										<FileText
-											v-else-if="lesson.icon === 'icon-list'"
-											class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
-										/>
-										{{ lesson.title }}
+									</Tooltip>
+									<Tooltip :text="__('Delete Chapter')" placement="bottom">
 										<Trash2
 											v-if="allowEdit"
-											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
+											@click.prevent="trashChapter(chapter.name)"
+											class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
 										/>
-										<Check
-											v-if="lesson.is_complete"
-											class="h-4 w-4 text-green-700 ml-2"
-										/>
-									</div>
-								</router-link>
-							</div>
-						</template>
-					</Draggable>
-					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
-						<router-link
-							v-if="!chapter.is_scorm_package"
-							:to="{
-								name: 'LessonForm',
-								params: {
-									courseName: courseName,
-									chapterNumber: chapter.idx,
-									lessonNumber: chapter.lessons.length + 1,
-								},
-							}"
-						>
-							<Button>
-								{{ __('Add Lesson') }}
-							</Button>
-						</router-link>
+									</Tooltip>
+								</div>
+							</DisclosureButton>
+							<DisclosurePanel v-if="!chapter.is_scorm_package">
+								<Draggable
+									v-if="!chapter.is_scorm_package"
+									:list="chapter.lessons"
+									:disabled="!allowEdit"
+									item-key="name"
+									group="items"
+									@end="updateOutline"
+									:data-chapter="chapter.name"
+								>
+									<template #item="{ element: lesson }">
+										<div
+											class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
+											:class="
+												isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
+											"
+										>
+											<router-link
+												:to="{
+													name: allowEdit ? 'LessonForm' : 'Lesson',
+													params: {
+														courseName: courseName,
+														chapterNumber: lesson.number.split('.')[0],
+														lessonNumber: lesson.number.split('.')[1],
+													},
+												}"
+											>
+												<div class="flex items-center text-sm leading-5 group">
+													<MonitorPlay
+														v-if="lesson.icon === 'icon-youtube'"
+														class="h-4 w-4 stroke-1 mr-2"
+													/>
+													<HelpCircle
+														v-else-if="lesson.icon === 'icon-quiz'"
+														class="h-4 w-4 stroke-1 mr-2"
+													/>
+													<FileText
+														v-else-if="lesson.icon === 'icon-list'"
+														class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
+													/>
+													{{ lesson.title }}
+													<Trash2
+														v-if="allowEdit"
+														@click.prevent="
+															trashLesson(lesson.name, chapter.name)
+														"
+														class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
+													/>
+													<Check
+														v-if="lesson.is_complete"
+														class="h-4 w-4 text-green-700 ml-2"
+													/>
+												</div>
+											</router-link>
+										</div>
+									</template>
+								</Draggable>
+								<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
+									<router-link
+										v-if="!chapter.is_scorm_package"
+										:to="{
+											name: 'LessonForm',
+											params: {
+												courseName: courseName,
+												chapterNumber: chapter.idx,
+												lessonNumber: chapter.lessons.length + 1,
+											},
+										}"
+									>
+										<Button>
+											{{ __('Add Lesson') }}
+										</Button>
+									</router-link>
+								</div>
+							</DisclosurePanel>
+						</Disclosure>
 					</div>
-				</DisclosurePanel>
-			</Disclosure>
+				</template>
+			</Draggable>
 		</div>
 	</div>
 	<ChapterModal
@@ -148,7 +164,7 @@
 </template>
 <script setup>
 import { Button, createResource, Tooltip, toast } from 'frappe-ui'
-import { getCurrentInstance, inject, ref } from 'vue'
+import { getCurrentInstance, inject, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
@@ -197,13 +213,22 @@ const props = defineProps({
 const outline = createResource({
 	url: 'lms.lms.utils.get_course_outline',
 	cache: ['course_outline', props.courseName],
-	params: {
-		course: props.courseName,
-		progress: props.getProgress,
+	makeParams() {
+		return {
+			course: props.courseName,
+			progress: props.getProgress,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		outline.reload()
+	}
+)
+
 const deleteLesson = createResource({
 	url: 'lms.lms.api.delete_lesson',
 	makeParams(values) {
@@ -233,6 +258,20 @@ const updateLessonIndex = createResource({
 	},
 })
 
+const updateChapterIndex = createResource({
+	url: 'lms.lms.api.update_chapter_index',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+			course: values.course,
+			idx: values.idx,
+		}
+	},
+	onSuccess() {
+		toast.success(__('Chapter moved successfully'))
+	},
+})
+
 const trashLesson = (lessonName, chapterName) => {
 	$dialog({
 		title: __('Delete this lesson?'),
@@ -278,6 +317,14 @@ const updateOutline = (e) => {
 	})
 }
 
+const updateChapterOrder = (e) => {
+	updateChapterIndex.submit({
+		chapter: e.item.__draggable_context.element.name,
+		course: props.courseName,
+		idx: e.newIndex,
+	})
+}
+
 const deleteChapter = createResource({
 	url: 'lms.lms.api.delete_chapter',
 	makeParams(values) {

frontend/src/components/CourseReviews.vue

@@ -35,14 +35,14 @@
 						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
-						<div class="flex mt-2">
+						<div class="flex mt-2 space-x-1">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
+								class="size-4 text-transparent rounded-sm"
 								:class="
 									index <= Math.ceil(review.rating)
-										? 'fill-orange-500'
-										: 'fill-gray-600'
+										? 'fill-yellow-500'
+										: 'fill-gray-300'
 								"
 							/>
 						</div>
@@ -64,7 +64,7 @@
 <script setup>
 import { Star } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
-import { computed, ref, inject } from 'vue'
+import { watch, ref, inject } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ReviewModal from '@/components/Modals/ReviewModal.vue'
 
@@ -101,12 +101,21 @@ const hasReviewed = createResource({
 const reviews = createResource({
 	url: 'lms.lms.utils.get_reviews',
 	cache: ['course_reviews', props.courseName],
-	params: {
-		course: props.courseName,
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		reviews.reload()
+	}
+)
+
 const showReviewModal = ref(false)
 
 function openReviewModal() {

frontend/src/components/DiscussionReplies.vue

@@ -32,13 +32,13 @@
 						"
 						:options="[
 							{
-								label: 'Edit',
+								label: __('Edit'),
 								onClick() {
 									reply.editable = true
 								},
 							},
 							{
-								label: 'Delete',
+								label: __('Delete'),
 								onClick() {
 									deleteReply(reply)
 								},
@@ -94,10 +94,10 @@
 </template>
 <script setup>
 import { createResource, TextEditor, Button, Dropdown, toast } from 'frappe-ui'
-import { timeAgo } from '../utils'
+import { timeAgo } from '@/utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, onUnmounted } from 'vue'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
@@ -251,4 +251,10 @@ const deleteReply = (reply) => {
 		}
 	)
 }
+
+onUnmounted(() => {
+	socket.off('publish_message')
+	socket.off('update_message')
+	socket.off('delete_message')
+})
 </script>

frontend/src/components/Discussions.vue

@@ -69,8 +69,8 @@
 <script setup>
 import { createResource, Button } from 'frappe-ui'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { singularize, timeAgo } from '../utils'
-import { ref, onMounted, inject } from 'vue'
+import { singularize, timeAgo } from '@/utils'
+import { ref, onMounted, inject, onUnmounted } from 'vue'
 import DiscussionReplies from '@/components/DiscussionReplies.vue'
 import DiscussionModal from '@/components/Modals/DiscussionModal.vue'
 import { MessageSquareText } from 'lucide-vue-next'
@@ -102,7 +102,7 @@ const props = defineProps({
 	},
 	emptyStateText: {
 		type: String,
-		default: 'Start a discussion',
+		default: __('Start a discussion'),
 	},
 	singleThread: {
 		type: Boolean,
@@ -153,4 +153,8 @@ const showReplies = (topic) => {
 const openTopicModal = () => {
 	showTopicModal.value = true
 }
+
+onUnmounted(() => {
+	socket.off('new_discussion_topic')
+})
 </script>

frontend/src/components/EmptyState.vue

@@ -2,23 +2,26 @@
 	<div class="flex flex-col items-center justify-center mt-60">
 		<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
 		<div class="text-lg font-semibold text-ink-gray-7 mb-2.5">
-			{{ __('No {0}').format(type?.toLowerCase()) }}
+			
+      {{ __('No {0}').format(props.type) }}
 		</div>
 		<div
 			class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
 		>
 			{{
-				__(
-					'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
-				).format(type?.toLowerCase())
+        __(
+          'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
+        ).format(props.type)
 			}}
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
 import { BookOpen, GraduationCap } from 'lucide-vue-next'
 
 const props = defineProps({
 	type: String,
 })
-</script>
+
+</script>

frontend/src/components/Evaluators.vue

@@ -1,130 +0,0 @@
-<template>
-	<div>
-		<div class="flex items-center justify-between mb-4">
-			<div>
-				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
-					{{ __(label) }}
-				</div>
-				<!-- <div class="text-xs text-ink-gray-5">
-					{{ __(description) }}
-				</div> -->
-			</div>
-			<div class="flex item-center space-x-2">
-				<FormControl
-					v-model="search"
-					:placeholder="__('Search')"
-					type="text"
-					:debounce="300"
-				/>
-				<Button @click="() => (showForm = !showForm)">
-					<template #prefix>
-						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
-						<X v-else class="size-4 stroke-1.5" />
-					</template>
-					{{ showForm ? __('Close') : __('New') }}
-				</Button>
-			</div>
-		</div>
-
-		<!-- Form to add new member -->
-		<div v-if="showForm" class="flex items-center space-x-2 my-4">
-			<FormControl
-				v-model="email"
-				:placeholder="__('Email')"
-				type="email"
-				class="w-full"
-			/>
-			<Button @click="addEvaluator()" variant="subtle">
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div class="divide-y">
-			<div
-				v-for="evaluator in evaluators.data"
-				@click="openProfile(evaluator.username)"
-				class="cursor-pointer"
-			>
-				<div class="flex items-center justify-between py-3">
-					<div class="flex items-center space-x-3">
-						<Avatar
-							:image="evaluator.user_image"
-							:label="evaluator.full_name"
-							size="lg"
-						/>
-						<div>
-							<div class="text-base font-semibold text-ink-gray-9">
-								{{ evaluator.full_name }}
-							</div>
-							<div class="text-xs text-ink-gray-5">
-								{{ evaluator.evaluator }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { createResource, Button, FormControl, call, Avatar } from 'frappe-ui'
-import { ref, watch } from 'vue'
-import { Plus, X } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-
-const show = defineModel('show')
-const search = ref('')
-const showForm = ref(false)
-const email = ref('')
-const router = useRouter()
-
-const props = defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	description: {
-		type: String,
-		default: '',
-	},
-	show: {
-		type: Boolean,
-	},
-})
-
-const evaluators = createResource({
-	url: 'frappe.client.get_list',
-	makeParams: () => {
-		return {
-			doctype: 'Course Evaluator',
-			fields: ['evaluator', 'full_name', 'user_image', 'username'],
-			filters: search.value ? { evaluator: ['like', `%${search.value}%`] } : {},
-		}
-	},
-	auto: true,
-})
-
-const addEvaluator = () => {
-	call('lms.lms.api.add_an_evaluator', {
-		email: email.value,
-	}).then((data) => {
-		showForm.value = false
-		email.value = ''
-		evaluators.reload()
-	})
-}
-
-watch(search, () => {
-	evaluators.reload()
-})
-
-const openProfile = (username) => {
-	show.value = false
-	router.push({
-		name: 'Profile',
-		params: {
-			username: username,
-		},
-	})
-}
-</script>

frontend/src/components/JobCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-4"
+		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3"
 	>
 		<div class="flex space-x-4 mb-4">
 			<div class="flex flex-col space-y-2 flex-1">

frontend/src/components/LessonHelp.vue

@@ -15,60 +15,18 @@
 			</div>
 		</div>
 
-		<div class="space-y-2">
+		<div class="space-y-2" v-for="(item, key) in contentMap" :key="key">
 			<div
 				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('quiz')"
+				@click="openHelpDialog(key)"
 			>
 				<span>
-					{{ __('How to add a Quiz?') }}
+					{{ __(item.title) }}
 				</span>
 				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
 			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
-					)
-				}}
-			</div>
-		</div>
-
-		<div class="space-y-2">
-			<div
-				class="flex text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('upload')"
-			>
-				<span class="leading-5">
-					{{ __(contentMap['upload']) }}
-				</span>
-				<Info class="w-3 h-3 text-ink-gray-7" />
-			</div>
-			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
-					)
-				}}
-			</div>
-		</div>
-
-		<div class="space-y-2">
-			<div
-				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
-				@click="openHelpDialog('youtube')"
-			>
-				<span>
-					{{ __(contentMap['youtube']) }}
-				</span>
-				<Info class="w-3 h-3 text-ink-gray-7" />
-			</div>
-			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
-				{{
-					__(
-						'Copy the URL of the video from YouTube and paste it in the editor.'
-					)
-				}}
+				{{ __(item.description) }}
 			</div>
 		</div>
 	</div>
@@ -83,14 +41,31 @@ const showExplanation = ref(false)
 const type = ref(null)
 const title = ref(null)
 const contentMap = {
-	quiz: 'How to add a Quiz?',
-	upload: 'How to upload content from your system?',
-	youtube: 'How to add a YouTube Video?',
+	quiz: {
+		title: 'How to add a Quiz?',
+		description:
+			'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.',
+	},
+	upload: {
+		title: 'How to upload content from your system?',
+		description:
+			'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.',
+	},
+	youtube: {
+		title: 'How to add a YouTube Video?',
+		description:
+			'Copy the URL of the video from YouTube and paste it in the editor.',
+	},
+	remove: {
+		title: 'How to remove an embed?',
+		description:
+			'To remove an embed like YouTube or Vimeo, put your cursor on the line below the embed, then drag your mouse cursor upwards to select the embed. Once the embed is selected press BackSpace.',
+	},
 }
 
 const openHelpDialog = (contentType) => {
 	type.value = contentType
-	title.value = contentMap[contentType]
+	title.value = contentMap[contentType].title
 	showExplanation.value = true
 }
 </script>

frontend/src/components/LiveClass.vue

@@ -1,5 +1,15 @@
 <template>
-	<div class="flex items-center justify-between mb-5">
+	<div
+		v-if="hasPermission() && !props.zoomAccount"
+		class="flex items-center space-x-2 mb-5 bg-surface-amber-1 py-1 px-2 rounded-md text-ink-amber-3"
+	>
+		<AlertCircle class="size-4 stroke-1.5" />
+		<span>
+			{{ __('Please add a zoom account to the batch to create live classes.') }}
+		</span>
+	</div>
+
+	<div class="flex items-center justify-between">
 		<div class="text-lg font-semibold text-ink-gray-9">
 			{{ __('Live Class') }}
 		</div>
@@ -12,10 +22,18 @@
 			</span>
 		</Button>
 	</div>
-	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
+	<div v-if="liveClasses.data?.length" class="grid grid-cols-3 gap-5 mt-5">
 		<div
 			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full text-ink-gray-7 p-3"
+			class="flex flex-col border rounded-md h-full text-ink-gray-7 hover:border-outline-gray-3 p-3"
+			:class="{
+				'cursor-pointer': hasPermission() && cls.attendees > 0,
+			}"
+			@click="
+				() => {
+					openAttendanceModal(cls)
+				}
+			"
 		>
 			<div class="font-semibold text-ink-gray-9 text-lg mb-1">
 				{{ cls.title }}
@@ -23,7 +41,7 @@
 			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="space-y-3">
+			<div class="mt-auto space-y-3">
 				<div class="flex items-center space-x-2">
 					<Calendar class="w-4 h-4 stroke-1.5" />
 					<span>
@@ -33,18 +51,20 @@
 				<div class="flex items-center space-x-2">
 					<Clock class="w-4 h-4 stroke-1.5" />
 					<span>
-						{{ formatTime(cls.time) }}
+						{{ formatTime(cls.time) }} -
+						{{ dayjs(getClassEnd(cls)).format('HH:mm') }}
 					</span>
 				</div>
 				<div
-					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
+					v-if="canAccessClass(cls)"
 					class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
 				>
 					<a
 						v-if="user.data?.is_moderator || user.data?.is_evaluator"
 						:href="cls.start_url"
 						target="_blank"
-						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+						class="cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+						:class="cls.join_url ? 'w-full' : 'w-1/2'"
 					>
 						<Monitor class="h-4 w-4 stroke-1.5" />
 						{{ __('Start') }}
@@ -58,42 +78,63 @@
 						{{ __('Join') }}
 					</a>
 				</div>
-				<div v-else class="flex items-center space-x-2 text-yellow-700">
-					<Info class="w-4 h-4 stroke-1.5" />
-					<span>
-						{{ __('This class has ended') }}
-					</span>
-				</div>
+				<Tooltip
+					v-else-if="hasClassEnded(cls)"
+					:text="__('This class has ended')"
+					placement="right"
+				>
+					<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+						<Info class="w-4 h-4 stroke-1.5" />
+						<span>
+							{{ __('Ended') }}
+						</span>
+					</div>
+				</Tooltip>
 			</div>
 		</div>
 	</div>
-	<div v-else class="text-sm italic text-ink-gray-5">
+	<div v-else class="text-sm italic text-ink-gray-5 mt-2">
 		{{ __('No live classes scheduled') }}
 	</div>
+
 	<LiveClassModal
 		:batch="props.batch"
+		:zoomAccount="props.zoomAccount"
 		v-model="showLiveClassModal"
 		v-model:reloadLiveClasses="liveClasses"
 	/>
+
+	<LiveClassAttendance v-model="showAttendance" :live_class="attendanceFor" />
 </template>
 <script setup>
-import { createListResource, Button } from 'frappe-ui'
-import { Plus, Clock, Calendar, Video, Monitor, Info } from 'lucide-vue-next'
-import { inject } from 'vue'
-import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
-import { ref } from 'vue'
+import { createListResource, Button, Tooltip } from 'frappe-ui'
+import {
+	Plus,
+	Clock,
+	Calendar,
+	Video,
+	Monitor,
+	Info,
+	AlertCircle,
+} from 'lucide-vue-next'
+import { inject, ref } from 'vue'
 import { formatTime } from '@/utils/'
+import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
+import LiveClassAttendance from '@/components/Modals/LiveClassAttendance.vue'
 
 const user = inject('$user')
 const showLiveClassModal = ref(false)
 const dayjs = inject('$dayjs')
 const readOnlyMode = window.read_only_mode
+const showAttendance = ref(false)
+const attendanceFor = ref(null)
 
 const props = defineProps({
 	batch: {
 		type: String,
 		required: true,
 	},
+	zoomAccount: String,
 })
 
 const liveClasses = createListResource({
@@ -106,6 +147,8 @@ const liveClasses = createListResource({
 		'description',
 		'time',
 		'date',
+		'duration',
+		'attendees',
 		'start_url',
 		'join_url',
 		'owner',
@@ -120,8 +163,38 @@ const openLiveClassModal = () => {
 
 const canCreateClass = () => {
 	if (readOnlyMode) return false
+	if (!props.zoomAccount) return false
+	return hasPermission()
+}
+
+const hasPermission = () => {
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
+
+const canAccessClass = (cls) => {
+	if (cls.date < dayjs().format('YYYY-MM-DD')) return false
+	if (cls.date > dayjs().format('YYYY-MM-DD')) return false
+	if (hasClassEnded(cls)) return false
+	return true
+}
+
+const getClassEnd = (cls) => {
+	const classStart = new Date(`${cls.date}T${cls.time}`)
+	return new Date(classStart.getTime() + cls.duration * 60000)
+}
+
+const hasClassEnded = (cls) => {
+	const classEnd = getClassEnd(cls)
+	const now = new Date()
+	return now > classEnd
+}
+
+const openAttendanceModal = (cls) => {
+	if (!hasPermission()) return
+	if (cls.attendees <= 0) return
+	showAttendance.value = true
+	attendanceFor.value = cls
+}
 </script>
 <style>
 .short-introduction {

frontend/src/components/MobileLayout.vue

@@ -1,98 +1,115 @@
 <template>
-	<div class="flex h-full flex-col">
+	<div class="flex h-full flex-col relative">
 		<div class="h-full pb-10" id="scrollContainer">
 			<slot />
 		</div>
-		<div
-			v-if="sidebarSettings.data"
-			class="fixed flex items-center justify-around border-t border-outline-gray-2 bottom-0 z-10 w-full bg-surface-white standalone:pb-4"
-			:style="{
-				gridTemplateColumns: `repeat(${
-					sidebarLinks.length + 1
-				}, minmax(0, 1fr))`,
-			}"
-		>
-			<button
-				v-for="tab in sidebarLinks"
-				:key="tab.label"
-				:class="isVisible(tab) ? 'block' : 'hidden'"
-				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
-				@click="handleClick(tab)"
+
+		<div class="relative z-20">
+			<!-- Dropdown menu -->
+			<div
+				class="fixed bottom-16 right-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
+				v-if="showMenu"
+				ref="menu"
 			>
-				<component
-					:is="icons[tab.icon]"
-					class="h-6 w-6 stroke-1.5"
-					:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
-				/>
-			</button>
-			<Popover
-				trigger="hover"
-				popoverClass="bottom-28 mx-2"
-				placement="top-start"
+				<div
+					v-for="link in otherLinks"
+					:key="link.label"
+					class="flex items-center space-x-2 cursor-pointer"
+					@click="handleClick(link)"
+				>
+					<component
+						:is="icons[link.icon]"
+						class="h-4 w-4 stroke-1.5 text-ink-gray-5"
+					/>
+					<div>{{ link.label }}</div>
+				</div>
+			</div>
+
+			<!-- Fixed menu -->
+			<div
+				v-if="sidebarSettings.data"
+				class="fixed bottom-0 left-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
 			>
-				<template #target>
+				<button
+					v-for="tab in sidebarLinks"
+					:key="tab.label"
+					:class="isVisible(tab) ? 'block' : 'hidden'"
+					class="flex flex-col items-center justify-center py-3 transition active:scale-95"
+					@click="handleClick(tab)"
+				>
+					<component
+						:is="icons[tab.icon]"
+						class="h-6 w-6 stroke-1.5"
+						:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
+					/>
+				</button>
+				<button @click="toggleMenu">
 					<component
 						:is="icons['List']"
 						class="h-6 w-6 stroke-1.5 text-ink-gray-5"
 					/>
-				</template>
-				<template #body-main>
-					<div class="text-base p-5 space-y-4">
-						<div
-							v-for="link in otherLinks"
-							:key="link.label"
-							class="flex items-center space-x-2"
-							@click="handleClick(link)"
-						>
-							<component
-								:is="icons[link.icon]"
-								class="h-4 w-4 stroke-1.5 text-ink-gray-5"
-							/>
-							<div>
-								{{ link.label }}
-							</div>
-						</div>
-					</div>
-				</template>
-			</Popover>
+				</button>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { getSidebarLinks } from '../utils'
+import { getSidebarLinks } from '@/utils'
 import { useRouter } from 'vue-router'
 import { watch, ref, onMounted } from 'vue'
 import { sessionStore } from '@/stores/session'
+import { useSettings } from '@/stores/settings'
 import { usersStore } from '@/stores/user'
-import { Popover } from 'frappe-ui'
 import * as icons from 'lucide-vue-next'
 
-const { logout, user, sidebarSettings } = sessionStore()
+const { logout, user } = sessionStore()
 let { isLoggedIn } = sessionStore()
+const { sidebarSettings } = useSettings()
 const router = useRouter()
 let { userResource } = usersStore()
 const sidebarLinks = ref(getSidebarLinks())
 const otherLinks = ref([])
+const showMenu = ref(false)
+const menu = ref(null)
 
 onMounted(() => {
 	sidebarSettings.reload(
 		{},
 		{
 			onSuccess(data) {
-				Object.keys(data).forEach((key) => {
-					if (!parseInt(data[key])) {
-						sidebarLinks.value = sidebarLinks.value.filter(
-							(link) => link.label.toLowerCase().split(' ').join('_') !== key
-						)
-					}
-				})
-
+				filterLinksToShow(data)
 				addOtherLinks()
 			},
 		}
 	)
 })
 
+const handleOutsideClick = (e) => {
+	if (menu.value && !menu.value.contains(e.target)) {
+		showMenu.value = false
+	}
+}
+
+watch(showMenu, (val) => {
+	if (val) {
+		setTimeout(() => {
+			document.addEventListener('click', handleOutsideClick)
+		}, 0)
+	} else {
+		document.removeEventListener('click', handleOutsideClick)
+	}
+})
+
+const filterLinksToShow = (data) => {
+	Object.keys(data).forEach((key) => {
+		if (!parseInt(data[key])) {
+			sidebarLinks.value = sidebarLinks.value.filter(
+				(link) => link.label.toLowerCase().split(' ').join('_') !== key
+			)
+		}
+	})
+}
+
 const addOtherLinks = () => {
 	if (user) {
 		otherLinks.value.push({
@@ -122,6 +139,7 @@ watch(userResource, () => {
 		(userResource.data.is_moderator || userResource.data.is_instructor)
 	) {
 		addQuizzes()
+		addAssignments()
 	}
 })
 
@@ -133,6 +151,14 @@ const addQuizzes = () => {
 	})
 }
 
+const addAssignments = () => {
+	otherLinks.value.push({
+		label: 'Assignments',
+		icon: 'Pencil',
+		to: 'Assignments',
+	})
+}
+
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }
@@ -158,4 +184,8 @@ const isVisible = (tab) => {
 	else if (tab.label == 'Log out') return isLoggedIn
 	else return true
 }
+
+const toggleMenu = () => {
+	showMenu.value = !showMenu.value
+}
 </script>

frontend/src/components/Modals/AnnouncementModal.vue

@@ -25,6 +25,7 @@
 				<div class="">
 					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Reply To') }}
+						<span class="text-ink-red-3">*</span>
 					</div>
 					<Input type="text" v-model="announcement.replyTo" />
 				</div>
@@ -70,8 +71,8 @@ const announcementResource = createResource({
 	url: 'frappe.core.doctype.communication.email.make',
 	makeParams(values) {
 		return {
-			recipients: props.students.join(', '),
-			cc: announcement.replyTo,
+			recipients: announcement.replyTo,
+			bcc: props.students.join(', '),
 			subject: announcement.subject,
 			content: announcement.announcement,
 			doctype: 'LMS Batch',
@@ -95,6 +96,9 @@ const makeAnnouncement = (close) => {
 				if (!announcement.announcement) {
 					return __('Announcement is required')
 				}
+				if (!announcement.replyTo) {
+					return __('Reply To is required')
+				}
 			},
 			onSuccess() {
 				close()

frontend/src/components/Modals/AssessmentModal.vue

@@ -97,8 +97,9 @@ const addAssessment = (close) => {
 
 const assessmentTypes = computed(() => {
 	return [
-		{ label: 'Quiz', value: 'LMS Quiz' },
-		{ label: 'Assignment', value: 'LMS Assignment' },
+		{ label: __('Quiz'), value: 'LMS Quiz' },
+		{ label: __('Assignment'), value: 'LMS Assignment' },
+		{ label: __('Programming Exercise'), value: 'LMS Programming Exercise' },
 	]
 })
 </script>

frontend/src/components/Modals/AssignmentForm.vue

@@ -6,7 +6,7 @@
 		}"
 	>
 		<template #body>
-			<div class="p-5 text-base max-h-[75vh] overflow-y-auto">
+			<div class="p-5 text-base">
 				<div class="text-lg text-ink-gray-9 font-semibold mb-5">
 					{{
 						assignmentID === 'new'
@@ -14,7 +14,7 @@
 							: __('Edit Assignment')
 					}}
 				</div>
-				<div class="space-y-4">
+				<div class="space-y-4 max-h-[75vh] overflow-y-auto">
 					<FormControl
 						v-model="assignment.title"
 						:label="__('Title')"
@@ -144,11 +144,11 @@ const saveAssignment = () => {
 
 const assignmentOptions = computed(() => {
 	return [
-		{ label: 'PDF', value: 'PDF' },
-		{ label: 'Image', value: 'Image' },
-		{ label: 'Document', value: 'Document' },
-		{ label: 'Text', value: 'Text' },
-		{ label: 'URL', value: 'URL' },
+		{ label: __('PDF'), value: 'PDF' },
+		{ label: __('Image'), value: 'Image' },
+		{ label: __('Document'), value: 'Document' },
+		{ label: __('Text'), value: 'Text' },
+		{ label: __('URL'), value: 'URL' },
 	]
 })
 </script>

frontend/src/components/Modals/CourseProgressSummary.vue

@@ -0,0 +1,230 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Course Progress Summary'),
+			size: '5xl',
+		}"
+	>
+		<template #body-content>
+			<div class="flex justify-between space-x-10 text-base mt-10">
+				<div class="w-full">
+					<div class="flex items-center justify-between space-x-5 mb-4">
+						<!-- <div class="text-xl font-semibold text-ink-gray-6">
+							{{ __('{0} Members').format(memberCount) }}
+						</div> -->
+						<FormControl
+							v-model="searchFilter"
+							:placeholder="__('Search by Member')"
+							type="text"
+							class="w-full"
+						/>
+					</div>
+					<div class="max-h-[70vh] overflow-y-auto">
+						<ListView
+							v-if="progressList.loading || progressList.data?.length"
+							:columns="progressColumns"
+							:rows="progressList.data"
+							rowKey="name"
+							:options="{
+								selectable: false,
+								showTooltip: false,
+							}"
+						>
+							<ListHeader
+								class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+							>
+								<ListHeaderItem
+									:item="item"
+									v-for="item in progressColumns"
+									:key="item.key"
+								>
+									<template #prefix="{ item }">
+										<FeatherIcon
+											:name="item.icon?.toString()"
+											class="h-4 w-4"
+										/>
+									</template>
+								</ListHeaderItem>
+							</ListHeader>
+							<ListRows v-for="row in progressList.data">
+								<router-link
+									:to="{
+										name: 'Profile',
+										params: { username: row.member_username },
+									}"
+								>
+									<ListRow :row="row">
+										<template #default="{ column, item }">
+											<ListRowItem
+												:item="row[column.key]"
+												:align="column.align"
+											>
+												<template #prefix>
+													<div v-if="column.key == 'member_name'">
+														<Avatar
+															class="flex items-center"
+															:image="row['member_image']"
+															:label="item"
+															size="sm"
+														/>
+													</div>
+												</template>
+												<div>
+													{{ row[column.key].toString() }}
+												</div>
+											</ListRowItem>
+										</template>
+									</ListRow>
+								</router-link>
+							</ListRows>
+						</ListView>
+						<div
+							v-if="progressList.data && progressList.hasNextPage"
+							class="flex justify-center my-5"
+						>
+							<Button @click="progressList.next()">
+								{{ __('Load More') }}
+							</Button>
+						</div>
+					</div>
+				</div>
+				<div class="mb-4 self-start w-full space-y-5">
+					<div class="flex items-center space-x-4">
+						<NumberChart
+							class="border rounded-md w-full"
+							:config="{
+								title: __('Enrollments'),
+								value: memberCount || 0,
+							}"
+						/>
+						<NumberChart
+							class="border rounded-md w-full"
+							:config="{
+								title: __('Average Progress %'),
+								value: chartDetails.data?.average_progress || 0,
+							}"
+						/>
+					</div>
+					<DonutChart
+						:config="{
+							data: chartDetails.data?.progress_distribution || [],
+							title: __('Progress Distribution'),
+							categoryColumn: 'category',
+							valueColumn: 'count',
+							colors: [
+								theme.colors.red['400'],
+								theme.colors.amber['400'],
+								theme.colors.pink['400'],
+								theme.colors.blue['400'],
+								theme.colors.green['400'],
+							],
+						}"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Button,
+	createListResource,
+	createResource,
+	Dialog,
+	DonutChart,
+	FeatherIcon,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	NumberChart,
+} from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { theme } from '@/utils/theme'
+
+const show = defineModel<boolean | undefined>()
+const searchFilter = ref<string | null>(null)
+type Filters = {
+	course: string | undefined
+	member_name?: string[]
+}
+
+const props = defineProps<{
+	courseName?: string
+	enrollments?: number
+}>()
+
+const memberCount = ref<number>(props.enrollments || 0)
+
+const chartDetails = createResource({
+	url: 'lms.lms.api.get_course_progress_distribution',
+	params: {
+		course: props.courseName,
+	},
+	auto: true,
+})
+
+const progressList = createListResource({
+	doctype: 'LMS Enrollment',
+	filters: {
+		course: props.courseName,
+	},
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+		'member_username',
+		'progress',
+	],
+	pageLength: 50,
+	auto: true,
+})
+
+watch([searchFilter], () => {
+	let filterApplied = false
+	let filters: Filters = {
+		course: props.courseName,
+	}
+
+	if (searchFilter.value) {
+		filters.member_name = ['like', `%${searchFilter.value}%`]
+		filterApplied = true
+	}
+
+	progressList.update({
+		filters: filters,
+	})
+	progressList.reload(
+		{},
+		{
+			onSuccess(data: any[]) {
+				memberCount.value = filterApplied ? data.length : props.enrollments || 0
+			},
+		}
+	)
+})
+
+const progressColumns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			width: '60%',
+			icon: 'user',
+		},
+		{
+			label: __('Progress'),
+			key: 'progress',
+			width: '30%',
+			align: 'right',
+			icon: 'trending-up',
+		},
+	]
+})
+</script>

frontend/src/components/Modals/EditProfile.vue

@@ -97,7 +97,7 @@ import {
 } from 'frappe-ui'
 import { reactive, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize, escapeHTML } from '@/utils'
+import { getFileSize } from '@/utils'
 
 const reloadProfile = defineModel('reloadProfile')
 
@@ -132,7 +132,6 @@ const imageResource = createResource({
 const updateProfile = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
-		profile.bio = escapeHTML(profile.bio)
 		return {
 			doctype: 'User',
 			name: props.profile.data.name,

frontend/src/components/Modals/EmailTemplateModal.vue

@@ -0,0 +1,192 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title:
+				templateID == 'new'
+					? __('New Email Template')
+					: __('Edit Email Template'),
+			size: 'lg',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: ({ close }) => {
+						saveTemplate(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					:label="__('Name')"
+					v-model="template.name"
+					type="text"
+					:required="true"
+					:placeholder="__('Batch Enrollment Confirmation')"
+				/>
+				<FormControl
+					:label="__('Subject')"
+					v-model="template.subject"
+					type="text"
+					:required="true"
+					:placeholder="__('Your enrollment in {{ batch_name }} is confirmed')"
+				/>
+				<FormControl
+					:label="__('Use HTML')"
+					v-model="template.use_html"
+					type="checkbox"
+				/>
+				<FormControl
+					v-if="template.use_html"
+					:label="__('Content')"
+					v-model="template.response_html"
+					type="textarea"
+					:required="true"
+					:rows="10"
+					:placeholder="
+						__(
+							'<p>Dear {{ member_name }},</p>\n\n<p>You have been enrolled in our upcoming batch {{ batch_name }}.</p>\n\n<p>Thanks,</p>\n<p>Frappe Learning</p>'
+						)
+					"
+				/>
+				<div v-else>
+					<div class="text-xs text-ink-gray-5 mb-2">
+						{{ __('Content') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:content="template.response"
+						@change="(val) => (template.response = val)"
+						:editable="true"
+						:fixedMenu="true"
+						:placeholder="
+							__(
+								'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
+							)
+						"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { reactive, watch } from 'vue'
+import { cleanError } from '@/utils'
+
+const props = defineProps({
+	templateID: {
+		type: String,
+		default: 'new',
+	},
+})
+
+const show = defineModel()
+const emailTemplates = defineModel('emailTemplates')
+const template = reactive({
+	name: '',
+	subject: '',
+	use_html: false,
+	response: '',
+	response_html: '',
+})
+
+const saveTemplate = (close) => {
+	if (props.templateID == 'new') {
+		createNewTemplate(close)
+	} else {
+		updateTemplate(close)
+	}
+}
+
+const createNewTemplate = (close) => {
+	emailTemplates.value.insert.submit(
+		{
+			__newname: template.name,
+			...template,
+		},
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				refreshForm(close)
+				toast.success(__('Email Template created successfully'))
+			},
+			onError(err) {
+				refreshForm(close)
+				toast.error(
+					cleanError(err.messages[0]) || __('Error creating email template')
+				)
+			},
+		}
+	)
+}
+
+const updateTemplate = async (close) => {
+	if (props.templateID != template.name) {
+		await renameDoc()
+	}
+	setValue(close)
+}
+
+const setValue = (close) => {
+	emailTemplates.value.setValue.submit(
+		{
+			...template,
+			name: template.name,
+		},
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				refreshForm(close)
+				toast.success(__('Email Template updated successfully'))
+			},
+			onError(err) {
+				refreshForm(close)
+				toast.error(
+					cleanError(err.messages[0]) || __('Error updating email template')
+				)
+			},
+		}
+	)
+}
+
+const renameDoc = async () => {
+	await call('frappe.client.rename_doc', {
+		doctype: 'Email Template',
+		old_name: props.templateID,
+		new_name: template.name,
+	})
+}
+
+watch(
+	() => props.templateID,
+	(val) => {
+		if (val !== 'new') {
+			emailTemplates.value?.data.forEach((row) => {
+				if (row.name === val) {
+					template.name = row.name
+					template.subject = row.subject
+					template.use_html = row.use_html
+					template.response = row.response
+					template.response_html = row.response_html
+				}
+			})
+		}
+	},
+	{ flush: 'post' }
+)
+
+const refreshForm = (close) => {
+	close()
+	template.name = ''
+	template.subject = ''
+	template.use_html = false
+	template.response = ''
+	template.response_html = ''
+}
+</script>

frontend/src/components/Modals/EvaluationModal.vue

@@ -66,7 +66,7 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
+import { Dialog, createResource, Select, FormControl, toast } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
 import { formatTime } from '@/utils/'
 
@@ -90,7 +90,7 @@ const props = defineProps({
 	},
 })
 
-let evaluation = reactive({
+const evaluation = reactive({
 	course: '',
 	date: '',
 	start_time: '',
@@ -139,22 +139,13 @@ function submitEvaluation(close) {
 			close()
 		},
 		onError(err) {
-			let message = err.messages?.[0] || err
-			let unavailabilityMessage
-
-			if (typeof message === 'string') {
-				unavailabilityMessage = message?.includes('unavailable')
-			} else {
-				unavailabilityMessage = false
-			}
-
-			toast.warning(__('Evaluator is unavailable'))
+			toast.warning(__(err.messages?.[0] || err))
 		},
 	})
 }
 
 const getCourses = () => {
-	let courses = []
+	const courses = []
 	for (const course of props.courses) {
 		if (course.evaluator) {
 			courses.push({
@@ -164,7 +155,7 @@ const getCourses = () => {
 		}
 	}
 
-	if (courses.length == 1) {
+	if (courses.length === 1) {
 		evaluation.course = courses[0].value
 	}
 

frontend/src/components/Modals/Event.vue

@@ -76,8 +76,8 @@
 						</Button>
 					</div>
 				</div>
-				<Tabs :tabs="tabs" v-model="tabIndex" class="border-l w-1/2">
-					<template #default="{ tab }">
+				<Tabs :tabs="tabs" as="div" v-model="tabIndex" class="border-l w-1/2">
+					<template #tab-panel="{ tab }">
 						<div
 							v-if="tab.label == 'Evaluation'"
 							class="flex flex-col space-y-4 p-5"
@@ -255,6 +255,9 @@ const saveEvaluation = () => {
 				}
 				toast.success(__('Evaluation saved successfully'))
 			},
+			onError(err) {
+				toast.warning(__(err.messages?.[0] || err))
+			},
 		}
 	)
 }
@@ -277,6 +280,9 @@ const certificateResource = createResource({
 	onSuccess(data) {
 		certificate.name = data
 	},
+	onError(err) {
+		toast.warning(__(err.messages?.[0] || err))
+	},
 })
 
 const certificateDetails = createResource({
@@ -310,6 +316,9 @@ const saveCertificate = () => {
 			onSuccess: () => {
 				toast.success(__('Certificate saved successfully'))
 			},
+			onError(err) {
+				toast.error(__(err.messages?.[0] || err))
+			},
 		}
 	)
 }

frontend/src/components/Modals/ExplanationVideos.vue

@@ -35,5 +35,6 @@ const file = computed(() => {
 	if (props.type == 'youtube') return '/assets/lms/frontend/Youtube.mp4'
 	if (props.type == 'quiz') return '/assets/lms/frontend/Quiz.mp4'
 	if (props.type == 'upload') return '/assets/lms/frontend/Upload.mp4'
+	if (props.type == 'remove') return '/assets/lms/frontend/Remove.mp4'
 })
 </script>

frontend/src/components/Modals/FeedbackModal.vue

@@ -0,0 +1,115 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 min-h-[300px]">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Training Feedback') }}
+				</div>
+				<ListView
+					:columns="feedbackColumns"
+					:rows="feedbackList"
+					row-key="name"
+					:options="{
+						showTooltip: false,
+						rowHeight: 'h-16',
+						selectable: false,
+					}"
+				>
+					<ListHeader
+						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					></ListHeader>
+					<ListRows>
+						<ListRow
+							:row="row"
+							v-for="row in feedbackList"
+							class="group feedback-list"
+						>
+							<template #default="{ column, item }">
+								<ListRowItem
+									:item="row[column.key]"
+									:align="column.align"
+									class="text-sm"
+								>
+									<template #prefix>
+										<div v-if="column.key == 'member_name'">
+											<Avatar
+												class="flex"
+												:image="row['member_image']"
+												:label="item"
+												size="sm"
+											/>
+										</div>
+									</template>
+									<div v-if="ratingKeys.includes(column.key)">
+										<Rating v-model="row[column.key]" :readonly="true" />
+									</div>
+									<div v-else class="leading-5">
+										{{ row[column.key] }}
+									</div>
+								</ListRowItem>
+							</template>
+						</ListRow>
+					</ListRows>
+				</ListView>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Dialog,
+	ListView,
+	Avatar,
+	ListHeader,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Rating,
+} from 'frappe-ui'
+import { reactive, computed } from 'vue'
+
+const show = defineModel()
+const ratingKeys = ['content', 'instructors', 'value']
+
+const props = defineProps({
+	feedbackList: {
+		type: Array,
+		required: true,
+	},
+})
+
+const feedbackColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: '10rem',
+		},
+		{
+			label: 'Feedback',
+			key: 'feedback',
+			width: '15rem',
+		},
+		{
+			label: 'Content',
+			key: 'content',
+			width: '9rem',
+		},
+		{
+			label: 'Instructors',
+			key: 'instructors',
+			width: '9rem',
+		},
+		{
+			label: 'Value',
+			key: 'value',
+			width: '9rem',
+		},
+	]
+})
+</script>

frontend/src/components/Modals/LiveClassAttendance.vue

@@ -0,0 +1,106 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Attendance for Class - {0}').format(live_class?.title),
+			size: '4xl',
+		}"
+	>
+		<template #body-content>
+			<div
+				class="grid grid-cols-2 gap-12 text-sm font-semibold text-ink-gray-5 pb-2"
+			>
+				<div>
+					{{ __('Member') }}
+				</div>
+				<div class="grid grid-cols-3 gap-20">
+					<div>
+						{{ __('Joined at') }}
+					</div>
+					<div class="text-center">
+						{{ __('Left at') }}
+					</div>
+					<div>
+						{{ __('Attended for') }}
+					</div>
+				</div>
+			</div>
+			<div class="divide-y text-base">
+				<div
+					v-for="participant in participants.data"
+					@click="redirectToProfile(participant.member_username)"
+					class="grid grid-cols-2 items-center w-full text-base w-fit py-2"
+				>
+					<div class="flex items-center space-x-2">
+						<Avatar
+							:image="participant.member_image"
+							:label="participant.member_name"
+							size="xl"
+						/>
+						<div class="space-y-1">
+							<div class="font-medium">
+								{{ participant.member_name }}
+							</div>
+							<div>
+								{{ participant.member }}
+							</div>
+						</div>
+					</div>
+
+					<div class="grid grid-cols-3 gap-20 text-right">
+						<div>
+							{{ dayjs(participant.joined_at).format('HH:mm a') }}
+						</div>
+						<div>
+							{{ dayjs(participant.left_at).format('HH:mm a') }}
+						</div>
+						<div>{{ participant.duration }} {{ __('minutes') }}</div>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Avatar, createListResource, Dialog, Tooltip } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { inject } from 'vue'
+
+const show = defineModel()
+const router = useRouter()
+const dayjs = inject('$dayjs')
+
+interface LiveClass {
+	name: String
+	title: String
+}
+
+const props = defineProps<{
+	live_class: LiveClass | null
+}>()
+
+const participants = createListResource({
+	doctype: 'LMS Live Class Participant',
+	filter: {
+		live_class: props.live_class?.name,
+	},
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+		'member_username',
+		'joined_at',
+		'left_at',
+		'duration',
+	],
+	auto: true,
+})
+
+const redirectToProfile = (username: string) => {
+	router.push({
+		name: 'Profile',
+		params: { username },
+	})
+}
+</script>

frontend/src/components/Modals/LiveClassModal.vue

@@ -8,7 +8,7 @@
 				{
 					label: 'Submit',
 					variant: 'solid',
-					onClick: (close) => submitLiveClass(close),
+					onClick: ({ close }) => submitLiveClass(close),
 				},
 			],
 		}"
@@ -16,14 +16,29 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div class="grid grid-cols-2 gap-4">
-					<div>
+					<div class="space-y-4">
 						<FormControl
 							type="text"
 							v-model="liveClass.title"
 							:label="__('Title')"
-							class="mb-4"
 							:required="true"
 						/>
+						<FormControl
+							v-model="liveClass.date"
+							type="date"
+							:label="__('Date')"
+							:required="true"
+						/>
+						<Tooltip :text="__('Duration of the live class in minutes')">
+							<FormControl
+								type="number"
+								v-model="liveClass.duration"
+								:label="__('Duration')"
+								:required="true"
+							/>
+						</Tooltip>
+					</div>
+					<div class="space-y-4">
 						<Tooltip
 							:text="
 								__(
@@ -35,7 +50,6 @@
 								v-model="liveClass.time"
 								type="time"
 								:label="__('Time')"
-								class="mb-4"
 								:required="true"
 							/>
 						</Tooltip>
@@ -52,24 +66,6 @@
 								:required="true"
 							/>
 						</div>
-					</div>
-					<div>
-						<FormControl
-							v-model="liveClass.date"
-							type="date"
-							class="mb-4"
-							:label="__('Date')"
-							:required="true"
-						/>
-						<Tooltip :text="__('Duration of the live class in minutes')">
-							<FormControl
-								type="number"
-								v-model="liveClass.duration"
-								:label="__('Duration')"
-								class="mb-4"
-								:required="true"
-							/>
-						</Tooltip>
 						<FormControl
 							v-model="liveClass.auto_recording"
 							type="select"
@@ -107,7 +103,11 @@ const dayjs = inject('$dayjs')
 const props = defineProps({
 	batch: {
 		type: String,
-		default: null,
+		required: true,
+	},
+	zoomAccount: {
+		type: String,
+		required: true,
 	},
 })
 
@@ -139,15 +139,15 @@ const getTimezoneOptions = () => {
 const getRecordingOptions = () => {
 	return [
 		{
-			label: 'No Recording',
+			label: __('No Recording'),
 			value: 'No Recording',
 		},
 		{
-			label: 'Local',
+			label: __('Local'),
 			value: 'Local',
 		},
 		{
-			label: 'Cloud',
+			label: __('Cloud'),
 			value: 'Cloud',
 		},
 	]
@@ -159,6 +159,7 @@ const createLiveClass = createResource({
 		return {
 			doctype: 'LMS Live Class',
 			batch_name: values.batch,
+			zoom_account: props.zoomAccount,
 			...values,
 		}
 	},
@@ -167,39 +168,11 @@ const createLiveClass = createResource({
 const submitLiveClass = (close) => {
 	return createLiveClass.submit(liveClass, {
 		validate() {
-			if (!liveClass.title) {
-				return __('Please enter a title.')
-			}
-			if (!liveClass.date) {
-				return __('Please select a date.')
-			}
-			if (!liveClass.time) {
-				return __('Please select a time.')
-			}
-			if (!liveClass.timezone) {
-				return __('Please select a timezone.')
-			}
-			if (!valideTime()) {
-				return __('Please enter a valid time in the format HH:mm.')
-			}
-			const liveClassDateTime = dayjs(`${liveClass.date}T${liveClass.time}`).tz(
-				liveClass.timezone,
-				true
-			)
-			if (
-				liveClassDateTime.isSameOrBefore(
-					dayjs().tz(liveClass.timezone, false),
-					'minute'
-				)
-			) {
-				return __('Please select a future date and time.')
-			}
-			if (!liveClass.duration) {
-				return __('Please select a duration.')
-			}
+			validateFormFields()
 		},
 		onSuccess() {
 			liveClasses.value.reload()
+			refreshForm()
 			close()
 		},
 		onError(err) {
@@ -208,6 +181,39 @@ const submitLiveClass = (close) => {
 	})
 }
 
+const validateFormFields = () => {
+	if (!liveClass.title) {
+		return __('Please enter a title.')
+	}
+	if (!liveClass.date) {
+		return __('Please select a date.')
+	}
+	if (!liveClass.time) {
+		return __('Please select a time.')
+	}
+	if (!liveClass.timezone) {
+		return __('Please select a timezone.')
+	}
+	if (!valideTime()) {
+		return __('Please enter a valid time in the format HH:mm.')
+	}
+	const liveClassDateTime = dayjs(`${liveClass.date}T${liveClass.time}`).tz(
+		liveClass.timezone,
+		true
+	)
+	if (
+		liveClassDateTime.isSameOrBefore(
+			dayjs().tz(liveClass.timezone, false),
+			'minute'
+		)
+	) {
+		return __('Please select a future date and time.')
+	}
+	if (!liveClass.duration) {
+		return __('Please select a duration.')
+	}
+}
+
 const valideTime = () => {
 	let time = liveClass.time.split(':')
 	if (time.length != 2) {
@@ -221,4 +227,14 @@ const valideTime = () => {
 	}
 	return true
 }
+
+const refreshForm = () => {
+	liveClass.title = ''
+	liveClass.description = ''
+	liveClass.date = ''
+	liveClass.time = ''
+	liveClass.duration = ''
+	liveClass.timezone = getUserTimezone()
+	liveClass.auto_recording = 'No Recording'
+}
 </script>

frontend/src/components/Modals/Question.vue

@@ -2,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			size: '3xl',
+			size: '5xl',
 		}"
 	>
 		<template #body>
@@ -21,7 +21,7 @@
 						class="!p-0"
 					/>
 				</div>
-				<div v-if="!chooseFromExisting || editMode" class="space-y-2">
+				<div v-if="!chooseFromExisting || editMode">
 					<div>
 						<label class="block text-xs text-ink-gray-5 mb-1">
 							{{ __('Question') }}
@@ -34,7 +34,7 @@
 							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
-					<div class="grid grid-cols-2 gap-4">
+					<div class="grid grid-cols-2 gap-8 mt-4">
 						<FormControl
 							v-model="question.marks"
 							:label="__('Marks')"
@@ -51,7 +51,7 @@
 					</div>
 					<div
 						v-if="question.type == 'Choices'"
-						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
+						class="text-base font-semibold text-ink-gray-9 mb-5 mt-10"
 					>
 						{{ __('Options') }}
 					</div>
@@ -61,7 +61,10 @@
 					>
 						{{ __('Possibilities') }}
 					</div>
-					<div v-if="question.type == 'Choices'" class="grid grid-cols-2 gap-4">
+					<div
+						v-if="question.type == 'Choices'"
+						class="grid grid-cols-2 gap-x-8 gap-y-4"
+					>
 						<div v-for="n in 4" class="space-y-4 py-2">
 							<FormControl
 								:label="__('Option') + ' ' + n"
@@ -81,7 +84,7 @@
 					</div>
 					<div
 						v-else-if="question.type == 'User Input'"
-						class="grid grid-cols-2 gap-4 py-2"
+						class="grid grid-cols-2 gap-x-8 gap-y-4 py-2"
 					>
 						<div v-for="n in 4">
 							<FormControl
@@ -106,7 +109,7 @@
 				</div>
 				<div class="flex items-center justify-end space-x-2 mt-5">
 					<Button variant="solid" @click="submitQuestion()">
-						{{ __('Submit') }}
+						{{ __('Save') }}
 					</Button>
 				</div>
 			</div>
@@ -217,7 +220,7 @@ const questionRow = createResource({
 		return {
 			doc: {
 				doctype: 'LMS Quiz Question',
-				parent: quiz.value.data.name,
+				parent: quiz.value.doc.name,
 				parentfield: 'questions',
 				parenttype: 'LMS Quiz',
 				...values,

frontend/src/components/Modals/QuizInVideo.vue

@@ -0,0 +1,225 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add quiz to this video'),
+			size: '2xl',
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<div class="flex items-end gap-4">
+					<FormControl
+						:label="__('Time in Video')"
+						v-model="quiz.time"
+						type="text"
+						placeholder="2:15"
+						class="flex-1"
+					/>
+					<Link
+						v-model="quiz.quiz"
+						:label="__('Quiz')"
+						doctype="LMS Quiz"
+						class="flex-1"
+					/>
+					<Button @click="addQuiz()" variant="solid">
+						<template #prefix>
+							<Plus class="w-4 h-4 stroke-1.5" />
+						</template>
+						{{ __('Add') }}
+					</Button>
+				</div>
+
+				<div class="mt-10 mb-5">
+					<div class="font-medium mb-4">
+						{{ __('Quizzes in this video') }}
+					</div>
+					<ListView
+						v-if="allQuizzes.length"
+						:columns="columns"
+						:rows="allQuizzes"
+						row-key="quiz"
+						:options="{
+							showTooltip: false,
+						}"
+					>
+						<ListHeader
+							class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+						>
+							<ListHeaderItem :item="item" v-for="item in columns">
+								<template #prefix="{ item }">
+									<component
+										v-if="item.icon"
+										:is="item.icon"
+										class="h-4 w-4 stroke-1.5 ml-4"
+									/>
+								</template>
+							</ListHeaderItem>
+						</ListHeader>
+
+						<ListRows>
+							<ListRow :row="row" v-for="row in allQuizzes">
+								<template #default="{ column, item }">
+									<ListRowItem
+										:item="row[column.key as keyof Quiz]"
+										:align="column.align"
+									>
+										<div v-if="column.key == 'time'" class="leading-5 text-sm">
+											{{ formatTimestamp(row[column.key as keyof Quiz]) }}
+										</div>
+										<div v-else class="leading-5 text-sm">
+											{{ row[column.key as keyof Quiz] }}
+										</div>
+									</ListRowItem>
+								</template>
+							</ListRow>
+						</ListRows>
+
+						<ListSelectBanner>
+							<template #actions="{ unselectAll, selections }">
+								<div class="flex gap-2">
+									<Button
+										variant="ghost"
+										@click="removeQuiz(selections, unselectAll)"
+									>
+										<Trash2 class="h-4 w-4 stroke-1.5" />
+									</Button>
+								</div>
+							</template>
+						</ListSelectBanner>
+					</ListView>
+
+					<div v-else class="text-ink-gray-5 italic text-xs">
+						{{ __('No quizzes added yet.') }}
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Dialog,
+	Button,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	ListSelectBanner,
+	toast,
+} from 'frappe-ui'
+import { computed, reactive, ref, watch } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import { formatTimestamp } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
+
+type Quiz = {
+	time: string
+	quiz: string
+}
+
+const show = defineModel()
+const allQuizzes = ref<Quiz[]>([])
+const quiz = reactive<Quiz>({
+	time: '',
+	quiz: '',
+})
+
+const props = defineProps({
+	quizzes: {
+		type: Array as () => Quiz[],
+		default: () => [],
+	},
+	saveQuizzes: {
+		type: Function,
+		required: true,
+	},
+	duration: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const addQuiz = () => {
+	quiz.time = `${getTimeInSeconds()}`
+	if (!isTimeValid() || !isFormComplete()) return
+
+	allQuizzes.value.push({
+		time: quiz.time,
+		quiz: quiz.quiz,
+	})
+
+	props.saveQuizzes(allQuizzes.value)
+
+	quiz.time = ''
+	quiz.quiz = ''
+}
+
+const getTimeInSeconds = () => {
+	if (quiz.time && !quiz.time.includes(':')) {
+		quiz.time = `${quiz.time}:00`
+	}
+	const timeParts = quiz.time.split(':')
+	const timeInSeconds = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1])
+
+	return timeInSeconds
+}
+
+const isTimeValid = () => {
+	if (parseInt(quiz.time) > props.duration) {
+		toast.error(__('Time in video exceeds the total duration of the video.'))
+		return false
+	}
+	return true
+}
+
+const isFormComplete = () => {
+	if (!quiz.time) {
+		toast.error(__('Please enter a valid timestamp'))
+		return false
+	}
+
+	if (!quiz.quiz) {
+		toast.error(__('Please select a quiz'))
+		return false
+	}
+
+	return true
+}
+
+const removeQuiz = (selections: string, unselectAll: () => void) => {
+	Array.from(selections).forEach((selection) => {
+		const index = allQuizzes.value.findIndex((q) => q.quiz === selection)
+		if (index !== -1) {
+			allQuizzes.value.splice(index, 1)
+		}
+		unselectAll()
+	})
+	props.saveQuizzes(allQuizzes.value)
+}
+
+watch(
+	() => props.quizzes,
+	(newQuizzes) => {
+		allQuizzes.value = newQuizzes
+	},
+	{ immediate: true }
+)
+
+const columns = computed(() => {
+	return [
+		{
+			key: 'quiz',
+			label: __('Quiz'),
+		},
+		{
+			key: 'time',
+			label: __('Time in Video (minutes)'),
+			align: 'center',
+		},
+	]
+})
+</script>

frontend/src/components/Modals/ReviewModal.vue

@@ -15,26 +15,20 @@
 	>
 		<template #body-content>
 			<div class="flex flex-col gap-4">
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Rating') }}
-					</div>
-					<Rating v-model="review.rating" />
-				</div>
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Review') }}
-					</div>
-					<Textarea type="text" size="md" rows="5" v-model="review.review" />
-				</div>
+				<Rating v-model="review.rating" :label="__('Rating')" />
+				<FormControl
+					:label="__('Review')"
+					type="textarea"
+					v-model="review.review"
+					:rows="5"
+				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Textarea, createResource, toast } from 'frappe-ui'
+import { Dialog, FormControl, createResource, toast, Rating } from 'frappe-ui'
 import { reactive } from 'vue'
-import Rating from '@/components/Controls/Rating.vue'
 
 const show = defineModel()
 const reviews = defineModel('reloadReviews')

frontend/src/components/Modals/VideoStatistics.vue

@@ -0,0 +1,250 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+			title: __('Video Statistics for {0}').format(lessonTitle),
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<div class="flex items-center justify-between">
+					<TabButtons
+						v-if="tabs.length > 1"
+						:buttons="tabs"
+						v-model="currentTab"
+						class="w-fit"
+					/>
+					<!-- <FormControl
+						v-model="searchText"
+						:placeholder="__('Search by Member')"
+						class="mt-2 mr-5 w-[25%]"
+					/> -->
+				</div>
+				<div v-if="currentTab" class="mt-4">
+					<div class="grid grid-cols-[55%,40%] gap-5">
+						<div class="space-y-5 border rounded-md p-2 pt-4">
+							<div class="grid grid-cols-[70%,30%] text-sm text-ink-gray-5">
+								<div class="px-4">
+									{{ __('Member') }}
+								</div>
+								<div class="text-center">
+									{{ __('Watch Time') }}
+								</div>
+							</div>
+							<div
+								v-for="row in currentTabData"
+								class="hover:bg-surface-gray-1 cursor-pointer rounded-md py-1 px-2"
+							>
+								<router-link
+									:to="{
+										name: 'Profile',
+										params: { username: row.member_username },
+									}"
+								>
+									<div class="grid grid-cols-[70%,30%] items-center">
+										<div class="flex items-center space-x-2">
+											<Avatar
+												:image="row.member_image"
+												:label="row.member_name"
+												size="xl"
+											/>
+											<div class="space-y-1">
+												<div class="font-medium">
+													{{ row.member_name }}
+												</div>
+												<div class="text-sm text-ink-gray-6">
+													{{ row.member }}
+												</div>
+											</div>
+										</div>
+										<div class="text-center text-sm">
+											{{ convertToMinutes(row.watch_time) }}
+										</div>
+									</div>
+								</router-link>
+							</div>
+						</div>
+						<div class="space-y-5">
+							<NumberChart
+								class="border rounded-md"
+								:config="{
+									title: __('Average Watch Time (minutes)'),
+									value: averageWatchTime,
+								}"
+							/>
+							<div v-if="isPlyrSource">
+								<div class="video-player" :src="currentTab"></div>
+							</div>
+							<VideoBlock v-else :file="currentTab" />
+						</div>
+					</div>
+				</div>
+				<div v-else class="text-sm text-ink-gray-5">
+					{{ __('No statistics available for this video.') }}
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	createListResource,
+	Dialog,
+	FormControl,
+	NumberChart,
+	TabButtons,
+} from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { enablePlyr, convertToMinutes } from '@/utils'
+import VideoBlock from '@/components/VideoBlock.vue'
+
+const show = defineModel<boolean | undefined>()
+const currentTab = ref<string>('')
+const searchText = ref<string>('')
+type Filters = {
+	lesson: string | undefined
+	member_name?: string[]
+}
+
+const props = defineProps<{
+	lessonName?: string
+	lessonTitle?: string
+}>()
+
+const statistics = createListResource({
+	doctype: 'LMS Video Watch Duration',
+	filters: {
+		lesson: props.lessonName,
+	},
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+		'member_username',
+		'source',
+		'watch_time',
+	],
+	cache: ['videoStatistics', props.lessonName],
+	onSuccess() {
+		currentTab.value = Object.keys(statisticsData.value)[0]
+	},
+})
+
+watch(
+	() => props.lessonName,
+	() => {
+		if (props.lessonName) {
+			statistics.filters.lesson = props.lessonName
+			statistics.reload()
+		}
+	}
+)
+
+watch(searchText, () => {
+	let filterApplied = false
+	let filters: Filters = {
+		lesson: props.lessonName,
+	}
+
+	if (searchText.value) {
+		filters.member_name = ['like', `%${searchText.value}%`]
+		filterApplied = true
+	}
+
+	statistics.update({
+		filters: filters,
+	})
+
+	statistics.reload({})
+})
+
+watch(show, () => {
+	if (show.value) {
+		enablePlyr()
+	}
+})
+
+const statisticsData = computed(() => {
+	const grouped = <Record<string, any[]>>{}
+	statistics.data.forEach((item: { source: string }) => {
+		if (!grouped[item.source]) {
+			grouped[item.source] = []
+		}
+		grouped[item.source].push(item)
+	})
+	return grouped
+})
+
+const averageWatchTime = computed(() => {
+	let totalWatchTime = 0
+
+	currentTabData.value.forEach((item: { watch_time: string }) => {
+		totalWatchTime += parseFloat(item.watch_time)
+	})
+
+	return convertToMinutes(totalWatchTime / currentTabData.value.length)
+})
+
+const currentTabData = computed(() => {
+	return statisticsData.value[currentTab.value] || []
+})
+
+const isPlyrSource = computed(() => {
+	return (
+		currentTab.value.includes('youtube') || currentTab.value.includes('vimeo')
+	)
+})
+
+const provider = computed(() => {
+	if (currentTab.value.includes('youtube')) {
+		return 'youtube'
+	} else if (currentTab.value.includes('vimeo')) {
+		return 'vimeo'
+	}
+	return ''
+})
+
+const embedURL = computed(() => {
+	if (isPlyrSource.value) {
+		return currentTab.value.replace('watch?v=', 'embed/')
+	}
+	return ''
+})
+
+const tabs = computed(() => {
+	return Object.keys(statisticsData.value).map((source, index) => ({
+		label: __(`Video ${index + 1}`),
+		value: source,
+	}))
+})
+</script>
+<style>
+.plyr__volume input[type='range'] {
+	display: none;
+}
+
+.plyr__control--overlaid {
+	background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
+}
+
+.plyr__control:hover {
+	background: none;
+}
+
+.plyr--video {
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 8px;
+}
+
+:root {
+	--plyr-range-fill-background: white;
+	--plyr-video-control-background-hover: transparent;
+}
+</style>

frontend/src/components/Modals/ZoomAccountModal.vue

@@ -0,0 +1,213 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title:
+				accountID === 'new' ? __('New Zoom Account') : __('Edit Zoom Account'),
+			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: ({ close }) => {
+						saveAccount(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="mb-4">
+				<FormControl
+					v-model="account.enabled"
+					:label="__('Enabled')"
+					type="checkbox"
+				/>
+			</div>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="account.name"
+					:label="__('Account Name')"
+					type="text"
+					:required="true"
+				/>
+				<FormControl
+					v-model="account.client_id"
+					:label="__('Client ID')"
+					type="text"
+					:required="true"
+				/>
+				<Link
+					v-model="account.member"
+					:label="__('Member')"
+					doctype="Course Evaluator"
+					:onCreate="(value: string, close: () => void) => openSettings('Members', close)"
+					:required="true"
+				/>
+				<FormControl
+					v-model="account.client_secret"
+					:label="__('Client Secret')"
+					type="password"
+					:required="true"
+				/>
+				<FormControl
+					v-model="account.account_id"
+					:label="__('Account ID')"
+					type="text"
+					:required="true"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { call, Dialog, FormControl, toast } from 'frappe-ui'
+import { inject, reactive, watch } from 'vue'
+import { User } from '@/components/Settings/types'
+import { openSettings, cleanError } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
+
+interface ZoomAccount {
+	name: string
+	account_name: string
+	enabled: boolean
+	member: string
+	account_id: string
+	client_id: string
+	client_secret: string
+}
+
+interface ZoomAccounts {
+	data: ZoomAccount[]
+	reload: () => void
+	insert: {
+		submit: (
+			data: ZoomAccount,
+			options: { onSuccess: () => void; onError: (err: any) => void }
+		) => void
+	}
+	setValue: {
+		submit: (
+			data: ZoomAccount,
+			options: { onSuccess: () => void; onError: (err: any) => void }
+		) => void
+	}
+}
+
+const show = defineModel('show')
+const user = inject<User | null>('$user')
+const zoomAccounts = defineModel<ZoomAccounts>('zoomAccounts')
+
+const account = reactive({
+	name: '',
+	enabled: false,
+	member: user?.data?.name || '',
+	account_id: '',
+	client_id: '',
+	client_secret: '',
+})
+
+const props = defineProps({
+	accountID: {
+		type: String,
+		default: 'new',
+	},
+})
+
+watch(
+	() => props.accountID,
+	(val) => {
+		if (val != 'new') {
+			zoomAccounts.value?.data.forEach((acc) => {
+				if (acc.name === val) {
+					account.name = acc.name
+					account.enabled = acc.enabled || false
+					account.member = acc.member
+					account.account_id = acc.account_id
+					account.client_id = acc.client_id
+					account.client_secret = acc.client_secret
+				}
+			})
+		}
+	}
+)
+
+watch(show, (val) => {
+	if (!val) {
+		account.name = ''
+		account.enabled = false
+		account.member = user?.data?.name || ''
+		account.account_id = ''
+		account.client_id = ''
+		account.client_secret = ''
+	}
+})
+
+const saveAccount = (close: () => void) => {
+	if (props.accountID == 'new') {
+		createAccount(close)
+	} else {
+		updateAccount(close)
+	}
+}
+
+const createAccount = (close: () => void) => {
+	zoomAccounts.value?.insert.submit(
+		{
+			account_name: account.name,
+			...account,
+		},
+		{
+			onSuccess() {
+				zoomAccounts.value?.reload()
+				close()
+				toast.success(__('Zoom Account created successfully'))
+			},
+			onError(err) {
+				close()
+				toast.error(
+					cleanError(err.messages[0]) || __('Error creating Zoom Account')
+				)
+			},
+		}
+	)
+}
+
+const updateAccount = async (close: () => void) => {
+	if (props.accountID != account.name) {
+		await renameDoc()
+	}
+	setValue(close)
+}
+
+const renameDoc = async () => {
+	await call('frappe.client.rename_doc', {
+		doctype: 'LMS Zoom Settings',
+		old_name: props.accountID,
+		new_name: account.name,
+	})
+}
+
+const setValue = (close: () => void) => {
+	zoomAccounts.value?.setValue.submit(
+		{
+			...account,
+			name: account.name,
+			account_name: props.accountID,
+		},
+		{
+			onSuccess() {
+				zoomAccounts.value?.reload()
+				close()
+				toast.success(__('Zoom Account updated successfully'))
+			},
+			onError(err: any) {
+				close()
+				toast.error(
+					cleanError(err.messages[0]) || __('Error updating Zoom Account')
+				)
+			},
+		}
+	)
+}
+</script>

frontend/src/components/Quiz.vue

@@ -1,8 +1,11 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-3"
+			class="bg-surface-blue-2 space-y-2 py-2 px-3 mb-4 rounded-md text-sm text-ink-blue-2 leading-5"
 		>
+			<div v-if="inVideo">
+				{{ __('You will have to complete the quiz to continue the video') }}
+			</div>
 			<div class="leading-5">
 				{{
 					__('This quiz consists of {0} questions.').format(questions.length)
@@ -38,6 +41,16 @@
 					)
 				}}
 			</div>
+			<div v-if="quiz.data.enable_negative_marking" class="leading-5">
+				{{
+					__(
+						'If you answer incorrectly, {0} {1} will be deducted from your score for each incorrect answer.'
+					).format(
+						quiz.data.marks_to_cut,
+						quiz.data.marks_to_cut == 1 ? 'mark' : 'marks'
+					)
+				}}
+			</div>
 		</div>
 
 		<div v-if="quiz.data.duration" class="flex flex-col space-x-1 my-4">
@@ -55,19 +68,30 @@
 				<div class="font-semibold text-lg text-ink-gray-9">
 					{{ quiz.data.title }}
 				</div>
-				<Button
+				<div class="flex items-center justify-center space-x-2 mt-4">
+					<Button
+						v-if="
+							!quiz.data.max_attempts ||
+							attempts.data?.length < quiz.data.max_attempts
+						"
+						variant="solid"
+						@click="startQuiz"
+					>
+						<span>
+							{{ inVideo ? __('Start the Quiz') : __('Start') }}
+						</span>
+					</Button>
+					<Button v-if="inVideo" @click="props.backToVideo()">
+						{{ __('Resume Video') }}
+					</Button>
+				</div>
+				<div
 					v-if="
-						!quiz.data.max_attempts ||
-						attempts.data?.length < quiz.data.max_attempts
+						quiz.data.max_attempts &&
+						attempts.data?.length >= quiz.data.max_attempts
 					"
-					@click="startQuiz"
-					class="mt-2"
+					class="leading-5 text-ink-gray-7"
 				>
-					<span>
-						{{ __('Start') }}
-					</span>
-				</Button>
-				<div v-else class="leading-5 text-ink-gray-7">
 					{{
 						__(
 							'You have already exceeded the maximum number of attempts allowed for this quiz.'
@@ -247,18 +271,23 @@
 					)
 				}}
 			</div>
-			<Button
-				@click="resetQuiz()"
-				class="mt-2"
-				v-if="
-					!quiz.data.max_attempts ||
-					attempts?.data.length < quiz.data.max_attempts
-				"
-			>
-				<span>
-					{{ __('Try Again') }}
-				</span>
-			</Button>
+			<div class="space-x-2">
+				<Button
+					@click="resetQuiz()"
+					class="mt-2"
+					v-if="
+						!quiz.data.max_attempts ||
+						attempts?.data.length < quiz.data.max_attempts
+					"
+				>
+					<span>
+						{{ __('Try Again') }}
+					</span>
+				</Button>
+				<Button v-if="inVideo" @click="props.backToVideo()">
+					{{ __('Resume Video') }}
+				</Button>
+			</div>
 		</div>
 		<div
 			v-if="
@@ -308,13 +337,20 @@ let questions = reactive([])
 const possibleAnswer = ref(null)
 const timer = ref(0)
 let timerInterval = null
-const router = useRouter()
 
 const props = defineProps({
 	quizName: {
 		type: String,
 		required: true,
 	},
+	inVideo: {
+		type: Boolean,
+		default: false,
+	},
+	backToVideo: {
+		type: Function,
+		default: () => {},
+	},
 })
 
 const quiz = createResource({
@@ -611,11 +647,17 @@ const getInstructions = (question) => {
 }
 
 const markLessonProgress = () => {
-	if (router.currentRoute.value.name == 'Lesson') {
+	let pathname = window.location.pathname.split('/')
+	if (!pathname.includes('courses'))
+		pathname = window.parent.location.pathname.split('/')
+	if (pathname[2] != 'courses') return
+	let lessonIndex = pathname.pop().split('-')
+
+	if (lessonIndex.length == 2) {
 		call('lms.lms.api.mark_lesson_progress', {
-			course: router.currentRoute.value.params.courseName,
-			chapter_number: router.currentRoute.value.params.chapterNumber,
-			lesson_number: router.currentRoute.value.params.lessonNumber,
+			course: pathname[3],
+			chapter_number: lessonIndex[0],
+			lesson_number: lessonIndex[1],
 		})
 	}
 }
@@ -623,25 +665,25 @@ const markLessonProgress = () => {
 const getSubmissionColumns = () => {
 	return [
 		{
-			label: 'No.',
+			label: __('No.'),
 			key: 'idx',
 		},
 		{
-			label: 'Date',
+			label: __('Date'),
 			key: 'creation',
 		},
 		{
-			label: 'Score',
+			label: __('Score'),
 			key: 'score',
 			align: 'center',
 		},
 		{
-			label: 'Score out of',
+			label: __('Score out of'),
 			key: 'score_out_of',
 			align: 'center',
 		},
 		{
-			label: 'Percentage',
+			label: __('Percentage'),
 			key: 'percentage',
 			align: 'center',
 		},

frontend/src/components/RelatedCourses.vue

@@ -0,0 +1,52 @@
+<template>
+	<div v-if="relatedCourses.data?.length" class="mt-10">
+		<div class="flex items-center justify-between mb-6">
+			<div class="text-2xl font-semibold text-ink-gray-9">
+				{{ __('Related Courses') }}
+			</div>
+		</div>
+		<div
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
+		>
+			<router-link
+				v-for="course in relatedCourses.data"
+				:key="course.name"
+				:to="{ name: 'CourseDetail', params: { courseName: course.name } }"
+				class="cursor-pointer"
+			>
+				<CourseCard :course="course" />
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { createResource } from 'frappe-ui'
+import { watch } from 'vue'
+import CourseCard from '@/components/CourseCard.vue'
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+})
+
+const relatedCourses = createResource({
+	url: 'lms.lms.utils.get_related_courses',
+	cache: ['related_courses', props.courseName],
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
+	},
+	auto: true,
+})
+
+watch(
+	() => props.courseName,
+	() => {
+		relatedCourses.reload()
+	}
+)
+</script>

frontend/src/components/Settings/BadgeAssignmentForm.vue

@@ -0,0 +1,142 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title:
+				props.badgeAssignmentID === 'new'
+					? __('Assign a Badge')
+					: __('Edit Badge Assignment'),
+			size: 'sm',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: ({ close }) => {
+						saveBadgeAssignment(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<Link
+					doctype="User"
+					v-model="badgeAssignment.member"
+					:label="__('Member')"
+					:required="true"
+				/>
+				<Link
+					doctype="LMS Badge"
+					v-model="badgeAssignment.badge"
+					:label="__('Badge')"
+					:required="true"
+				/>
+				<div>
+					<label class="text-xs text-ink-gray-5 mb-1">
+						{{ __('Issued On') }}
+						<span class="text-ink-red-3">*</span>
+					</label>
+					<DatePicker
+						v-model="badgeAssignment.issued_on"
+						:placeholder="__('Select Date')"
+						:required="true"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog, DatePicker, toast } from 'frappe-ui'
+import type {
+	BadgeAssignments,
+	BadgeAssignment,
+} from '@/components/Settings/types'
+import { ref, watch } from 'vue'
+import { cleanError } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
+
+const show = defineModel<boolean>({ required: true, default: false })
+const defaultBadgeAssignment = {
+	name: '',
+	badge: '',
+	member: '',
+	issued_on: '',
+	member_name: '',
+	member_username: '',
+	member_image: '',
+}
+const badgeAssignments = defineModel<BadgeAssignments>('badgeAssignments')
+const badgeAssignment = ref<BadgeAssignment>(defaultBadgeAssignment)
+
+const props = defineProps<{
+	badgeAssignmentID: string
+	badge: string | null
+}>()
+
+watch(
+	() => props.badgeAssignmentID,
+	(newID) => {
+		if (newID === 'new') {
+			badgeAssignment.value = {
+				...defaultBadgeAssignment,
+				badge: props.badge || '',
+			}
+		} else {
+			const assignment = badgeAssignments.value?.data?.find(
+				(assignment) => assignment.name === newID
+			)
+			if (assignment) {
+				badgeAssignment.value = { ...assignment }
+			}
+		}
+	}
+)
+
+const saveBadgeAssignment = (close: () => void) => {
+	if (props.badgeAssignmentID === 'new') {
+		createBadgeAssignment(close)
+	} else {
+		updateBadgeAssignment(close)
+	}
+}
+
+const updateBadgeAssignment = async (close: () => void) => {
+	badgeAssignments.value?.setValue.submit(
+		{
+			...badgeAssignment.value,
+		},
+		{
+			onSuccess: () => {
+				toast.success(__('Badge assignment updated successfully'))
+				close()
+			},
+			onError: (error) => {
+				toast.error(
+					__('Failed to update badge assignment: ') + cleanError(error)
+				)
+			},
+		}
+	)
+}
+
+const createBadgeAssignment = (close: () => void) => {
+	badgeAssignments.value?.insert.submit(
+		{
+			...badgeAssignment.value,
+		},
+		{
+			onSuccess: () => {
+				toast.success(__('Badge assignment created successfully'))
+				close()
+			},
+			onError: (error) => {
+				toast.error(
+					__('Failed to create badge assignment: ') + cleanError(error)
+				)
+			},
+		}
+	)
+}
+</script>

frontend/src/components/Settings/BadgeAssignments.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="text-base">
+		<div class="flex items-center justify-between space-x-2 mb-5">
+			<div class="flex items-center space-x-2">
+				<ChevronLeft
+					class="size-5 stroke-1.5 text-ink-gray-5 cursor-pointer"
+					@click="
+						() => {
+							show = false
+						}
+					"
+				/>
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ props.badgeName }}
+				</div>
+			</div>
+			<Button @click="openForm('new')">
+				<template #prefix>
+					<Plus class="size-4 stroke-1.5" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</div>
+		<div v-if="assignments.data?.length">
+			<ListView
+				:rows="assignments.data"
+				:columns="columns"
+				rowKey="name"
+				:options="{
+                    showTooltip: false,
+                    onRowClick: (row: BadgeAssignment) => {
+						openForm(row.name)
+					},
+                }"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<FeatherIcon
+								v-if="item.icon"
+								:name="item.icon"
+								class="h-4 w-4 stroke-1.5"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in assignments.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<template #prefix>
+									<div v-if="column.key == 'member_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['member_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="deleteBadgeAssignment(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+		<div v-else class="flex flex-col items-center justify-center mt-44">
+			<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
+			<div class="text-lg font-semibold text-ink-gray-7 mb-2.5">
+				{{ __('No Assignments') }}
+			</div>
+			<div
+				class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
+			>
+				{{ __('This badge has not been assigned to any students yet') }}
+			</div>
+		</div>
+	</div>
+	<BadgeAssignmentForm
+		v-model="showForm"
+		:badgeAssignmentID="currentAssignmentID"
+		:badge="props.badgeName"
+		v-model:badgeAssignments="assignments"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Button,
+	createListResource,
+	FeatherIcon,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	ListSelectBanner,
+	toast,
+} from 'frappe-ui'
+import { ChevronLeft, GraduationCap, Plus, Trash2 } from 'lucide-vue-next'
+import { computed, inject, ref } from 'vue'
+import type { BadgeAssignment } from '@/components/Settings/types'
+import BadgeAssignmentForm from '@/components/Settings/BadgeAssignmentForm.vue'
+
+const show = defineModel<boolean>()
+const dayjs = inject('$dayjs') as any
+const showForm = ref(false)
+const currentAssignmentID = ref<string>('')
+
+const props = defineProps<{
+	badgeName: string | null
+}>()
+
+const assignments = createListResource({
+	doctype: 'LMS Badge Assignment',
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_username',
+		'member_image',
+		'issued_on',
+		'badge',
+	],
+	filters: {
+		badge: props.badgeName,
+	},
+	order_by: 'issued_on desc',
+	transform(data: BadgeAssignment[]) {
+		return data.map((item: BadgeAssignment) => {
+			return {
+				...item,
+				issued_on: item.issued_on
+					? dayjs(item.issued_on).format('DD MMM YYYY')
+					: null,
+			}
+		})
+	},
+	auto: true,
+})
+
+const openForm = (assignmentID: string) => {
+	currentAssignmentID.value = assignmentID
+	showForm.value = true
+}
+
+const deleteBadgeAssignment = (
+	selections: Set<string>,
+	unselectAll: () => void
+) => {
+	Array.from(selections).forEach(async (assignment: string) => {
+		await assignments.delete.submit(assignment)
+	})
+	unselectAll()
+	toast.success(__('Badge assignments deleted successfully'))
+}
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			icon: 'user',
+			width: '60%',
+		},
+		{
+			label: __('Issued On'),
+			key: 'issued_on',
+			icon: 'calendar',
+			align: 'center',
+		},
+	]
+})
+</script>

frontend/src/components/Settings/BadgeForm.vue

@@ -0,0 +1,219 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: badge ? __('Edit Badge') : __('Create a new Badge'),
+			size: '3xl',
+		}"
+	>
+		<template #body-content>
+			<div class="grid grid-cols-2 gap-x-5">
+				<div class="space-y-4">
+					<FormControl
+						v-model="badge.enabled"
+						:label="__('Enabled')"
+						type="checkbox"
+					/>
+					<FormControl
+						v-model="badge.title"
+						:label="__('Title')"
+						type="text"
+						:required="true"
+					/>
+					<Autocomplete
+						@update:modelValue="(opt: any) => (badge.reference_doctype = opt.value)"
+						:modelValue="badge.reference_doctype"
+						:options="referenceDoctypeOptions"
+						:required="true"
+						:label="__('Assign For')"
+					/>
+					<FormControl
+						v-model="badge.description"
+						:label="__('Description')"
+						:required="true"
+						type="textarea"
+					/>
+					<Uploader
+						v-model="badge.image"
+						label="Badge Image"
+						description="An image that represents the badge."
+					/>
+				</div>
+
+				<div class="space-y-4">
+					<FormControl
+						v-model="badge.grant_only_once"
+						:label="__('Grant Only Once')"
+						type="checkbox"
+					/>
+					<FormControl
+						v-model="badge.event"
+						:label="__('Event')"
+						type="select"
+						:options="eventOptions"
+						:required="true"
+					/>
+					<FormControl
+						v-model="badge.user_field"
+						:label="__('Assign To')"
+						type="select"
+						:options="userFieldOptions"
+						:required="true"
+					/>
+					<CodeEditor
+						v-model="badge.condition"
+						:label="__('Condition')"
+						type="JavaScript"
+						:required="true"
+						:showBorder="true"
+						height="82px"
+					/>
+				</div>
+				<div class="space-y-4"></div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="pb-5 float-right">
+				<Button variant="solid" @click="saveBadge(close)">
+					{{ __('Save') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Button, call, Dialog, FormControl, toast } from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { cleanError } from '@/utils'
+import type { Badges, Badge } from '@/components/Settings/types'
+import Autocomplete from '@/components/Controls/Autocomplete.vue'
+import CodeEditor from '@/components/Controls/CodeEditor.vue'
+import Uploader from '@/components/Controls/Uploader.vue'
+
+const defaultBadge = {
+	name: '',
+	title: '',
+	enabled: true,
+	description: '',
+	image: '',
+	grant_only_once: false,
+	event: 'New',
+	reference_doctype: '',
+	condition: '',
+	user_field: 'member',
+	field_to_check: '',
+}
+const show = defineModel<boolean>({ required: true, default: false })
+const badges = defineModel<Badges>('badges')
+const badge = ref<Badge>(defaultBadge)
+
+const props = defineProps<{
+	badgeName: string | null
+}>()
+
+watch(
+	() => props.badgeName,
+	(val) => {
+		if (val != 'new') {
+			badges.value?.data.forEach((bdg: Badge) => {
+				if (bdg.name === val) {
+					badge.value = bdg
+				}
+			})
+		} else {
+			badge.value = { ...defaultBadge }
+		}
+	}
+)
+
+const saveBadge = (close: () => void) => {
+	if (props.badgeName == 'new') {
+		createBadge(close)
+	} else {
+		updateBadge(close)
+	}
+}
+
+const updateBadge = async (close: () => void) => {
+	if (props.badgeName != badge.value?.title) {
+		await renameDoc()
+	}
+	setValue(close)
+}
+
+const renameDoc = async () => {
+	await call('frappe.client.rename_doc', {
+		doctype: 'LMS Badge',
+		old_name: props.badgeName,
+		new_name: badge.value?.title,
+	})
+}
+
+const setValue = (close: () => void) => {
+	badges.value?.setValue.submit(
+		{
+			...badge.value,
+			name: badge.value.title,
+		},
+		{
+			onSuccess() {
+				badges.value?.reload()
+				close()
+				toast.success(__('Badge updated successfully'))
+			},
+			onError(err: any) {
+				close()
+				toast.error(cleanError(err.messages[0]) || err)
+			},
+		}
+	)
+}
+
+const createBadge = (close: () => void) => {
+	badges.value?.insert.submit(
+		{
+			...badge.value,
+			name: badge.value.name,
+		},
+		{
+			onSuccess() {
+				badges.value?.reload()
+				close()
+				toast.success(__('Badge created successfully'))
+			},
+			onError(err) {
+				close()
+				toast.error(cleanError(err.messages[0]) || __('Error creating badge'))
+			},
+		}
+	)
+}
+
+const referenceDoctypeOptions = computed(() => {
+	return [
+		{ label: __('Course'), value: 'LMS Course' },
+		{ label: __('Batch'), value: 'LMS Batch' },
+		{ label: __('User'), value: 'Member' },
+		{ label: __('Quiz Submission'), value: 'LMS Quiz Submission' },
+		{ label: __('Assignment Submission'), value: 'LMS Assignment Submission' },
+		{
+			label: __('Programming Exercise Submission'),
+			value: 'LMS Programming Exercise Submission',
+		},
+		{ label: __('Course Enrollment'), value: 'LMS Enrollment' },
+		{ label: __('Batch Enrollment'), value: 'LMS Batch Enrollment' },
+	]
+})
+
+const eventOptions = computed(() => {
+	let options = ['New', 'Value Change', 'Auto Assign']
+	return options.map((event) => ({ label: __(event), value: event }))
+})
+
+const userFieldOptions = computed(() => {
+	return [
+		{ label: __('Member'), value: 'member' },
+		{ label: __('Owner'), value: 'owner' },
+	]
+})
+</script>

frontend/src/components/Settings/Badges.vue

@@ -0,0 +1,247 @@
+<template>
+	<BadgeAssignments
+		v-if="showAssignments"
+		v-model="showAssignments"
+		:badgeName="showAssignmentsFor"
+	/>
+	<div v-else class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-ink-gray-6 leading-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<Button @click="openForm('new')">
+				<template #prefix>
+					<Plus class="h-3 w-3 stroke-1.5" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</div>
+		<div v-if="badges.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="badges.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					selectable: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns" :key="item.key">
+						<template #prefix="{ item }">
+							<FeatherIcon
+								v-if="item.icon"
+								:name="item.icon"
+								class="h-4 w-4 stroke-1.5"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in badges.data" :key="row.name">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div v-if="column.key == 'enabled'">
+									<Badge v-if="row[column.key]" theme="green">
+										{{ __('Enabled') }}
+									</Badge>
+									<Badge v-else theme="gray">
+										{{ __('Disabled') }}
+									</Badge>
+								</div>
+								<div v-else-if="column.key == 'reference_doctype'">
+									{{
+										doctypeLabel[
+											row[column.key] as keyof typeof doctypeLabel
+										] || row[column.key]
+									}}
+								</div>
+								<FormControl
+									v-else-if="column.key == 'grant_only_once'"
+									v-model="row[column.key]"
+									type="checkbox"
+									:disabled="true"
+								/>
+								<div
+									v-else-if="column.key != 'action'"
+									class="leading-5 text-sm"
+								>
+									{{ row[column.key] }}
+								</div>
+								<Dropdown
+									v-else
+									:options="getMoreOptions(row.name)"
+									:button="{
+										icon: 'more-horizontal',
+										onblur: (e: Event) => {
+											e.stopPropagation()
+										},
+									}"
+									placement="right"
+								/>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+			</ListView>
+		</div>
+	</div>
+	<BadgeForm
+		v-model="showForm"
+		:badgeName="selectedBadge"
+		v-model:badges="badges"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Badge,
+	Button,
+	createListResource,
+	Dropdown,
+	FeatherIcon,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	toast,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { cleanError } from '@/utils'
+import BadgeForm from '@/components/Settings/BadgeForm.vue'
+import BadgeAssignments from '@/components/Settings/BadgeAssignments.vue'
+
+const showForm = ref<boolean>(false)
+const selectedBadge = ref<string | null>(null)
+const showAssignments = ref<boolean>(false)
+const showAssignmentsFor = ref<string | null>(null)
+
+const props = defineProps<{
+	label: string
+	description: string
+}>()
+
+const badges = createListResource({
+	doctype: 'LMS Badge',
+	fields: [
+		'name',
+		'title',
+		'enabled',
+		'description',
+		'image',
+		'grant_only_once',
+		'event',
+		'reference_doctype',
+		'condition',
+		'user_field',
+		'field_to_check',
+	],
+	order_by: 'creation desc',
+	auto: true,
+})
+
+const getMoreOptions = (badgeName: string) => {
+	return [
+		{
+			label: __('Edit'),
+			icon: 'edit',
+			onClick() {
+				openForm(badgeName)
+			},
+		},
+		{
+			label: __('Assignments'),
+			icon: 'download',
+			onClick() {
+				showAssignmentsFor.value = badgeName
+				showAssignments.value = true
+			},
+		},
+		{
+			label: __('Delete'),
+			icon: 'trash-2',
+			onClick() {
+				deleteBadge(badgeName)
+			},
+		},
+	]
+}
+
+const openForm = (badgeName: string) => {
+	selectedBadge.value = badgeName
+	showForm.value = true
+}
+
+const deleteBadge = (badgeName: string) => {
+	badges.delete
+		.submit(badgeName)
+		.then(() => {
+			badges.reload()
+			toast.success(__('Badge deleted successfully'))
+		})
+		.catch((err: any) => {
+			toast.error(cleanError(err.messages[0]) || __('Error deleting badge'))
+		})
+}
+
+const doctypeLabel = computed(() => {
+	return {
+		'LMS Course': __('Course'),
+		'LMS Batch': __('Batch'),
+		'LMS Enrollment': __('Course Enrollment'),
+		'LMS Batch Enrollment': __('Batch Enrollment'),
+		'LMS Quiz Submission': __('Quiz Submission'),
+		'LMS Assignment Submission': __('Assignment Submission'),
+		'LMS Programming Exercise Submission': __(
+			'Programming Exercise Submission'
+		),
+	}
+})
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Badge'),
+			key: 'title',
+			icon: 'award',
+			align: 'left',
+			width: '25%',
+		},
+		{
+			label: __('Assigned For'),
+			key: 'reference_doctype',
+			icon: 'info',
+			align: 'left',
+			width: '35%',
+		},
+		{
+			label: __('Status'),
+			key: 'enabled',
+			icon: 'check-square',
+			align: 'left',
+			width: '15%',
+		},
+		{
+			label: __('Grant Only Once'),
+			key: 'grant_only_once',
+			icon: 'check',
+			align: 'center',
+			width: '20%',
+		},
+		{
+			key: 'action',
+			align: 'right',
+		},
+	]
+})
+</script>

frontend/src/components/Settings/BrandSettings.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col justify-between min-h-0">
+	<div class="flex flex-col justify-between h-full">
 		<div>
 			<div class="flex items-center justify-between">
 				<div class="font-semibold mb-1 text-ink-gray-9">
@@ -17,18 +17,18 @@
 			</div>
 		</div>
 		<div class="overflow-y-auto">
-			<SettingFields :fields="fields" :data="data.data" />
-			<div class="flex flex-row-reverse mt-auto">
-				<Button variant="solid" :loading="saveSettings.loading" @click="update">
-					{{ __('Update') }}
-				</Button>
-			</div>
+			<SettingFields :fields="fields" :data="branding.data" />
+		</div>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" :loading="saveSettings.loading" @click="update">
+				{{ __('Update') }}
+			</Button>
 		</div>
 	</div>
 </template>
 <script setup>
 import { createResource, Button, Badge } from 'frappe-ui'
-import SettingFields from '@/components/SettingFields.vue'
+import SettingFields from '@/components/Settings/SettingFields.vue'
 import { watch, ref } from 'vue'
 
 const isDirty = ref(false)
@@ -38,10 +38,6 @@ const props = defineProps({
 		type: Array,
 		required: true,
 	},
-	data: {
-		type: Object,
-		required: true,
-	},
 	label: {
 		type: String,
 		required: true,
@@ -51,6 +47,12 @@ const props = defineProps({
 	},
 })
 
+const branding = createResource({
+	url: 'lms.lms.api.get_branding',
+	auto: true,
+	cache: 'brand',
+})
+
 const saveSettings = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
@@ -64,7 +66,7 @@ const saveSettings = createResource({
 
 const update = () => {
 	let fieldsToSave = {}
-	let imageFields = ['favicon', 'banner_image', 'footer_logo']
+	let imageFields = ['favicon', 'banner_image']
 	props.fields.forEach((f) => {
 		if (imageFields.includes(f.name)) {
 			fieldsToSave[f.name] = f.value ? f.value.file_url : null
@@ -72,6 +74,8 @@ const update = () => {
 			fieldsToSave[f.name] = f.value
 		}
 	})
+
+	fieldsToSave['app_logo'] = fieldsToSave['banner_image']
 	saveSettings.submit(
 		{
 			fields: fieldsToSave,
@@ -84,9 +88,31 @@ const update = () => {
 	)
 }
 
-watch(props.data, (newData) => {
-	if (newData && !isDirty.value) {
-		isDirty.value = true
-	}
+watch(branding, (updatedDoc) => {
+	let textFields = []
+	let imageFields = []
+
+	props.fields.forEach((f) => {
+		if (f.type === 'Upload') {
+			imageFields.push(f.name)
+		} else {
+			textFields.push(f.name)
+		}
+	})
+
+	textFields.forEach((field) => {
+		if (updatedDoc.data[field] != updatedDoc.previousData[field]) {
+			isDirty.value = true
+		}
+	})
+
+	imageFields.forEach((field) => {
+		if (
+			updatedDoc.data[field] &&
+			updatedDoc.data[field].file_url != updatedDoc.previousData[field].file_url
+		) {
+			isDirty.value = true
+		}
+	})
 })
 </script>

frontend/src/components/Settings/Categories.vue

@@ -0,0 +1,216 @@
+<template>
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex items-center space-x-5">
+				<div
+					class="flex items-center space-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
+					v-if="saving"
+				>
+					<LoadingIndicator class="size-2" />
+					<span class="text-xs">
+						{{ __('saving...') }}
+					</span>
+				</div>
+				<Button @click="() => showCategoryForm()">
+					<template #prefix>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ showForm ? __('Close') : __('New') }}
+				</Button>
+			</div>
+		</div>
+
+		<div
+			v-if="showForm"
+			class="flex items-center justify-between my-4 space-x-2"
+		>
+			<FormControl
+				ref="categoryInput"
+				v-model="category"
+				:placeholder="__('Category Name')"
+				class="flex-1"
+			/>
+			<Button @click="addCategory()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="overflow-y-scroll">
+			<div class="divide-y space-y-2">
+				<div
+					v-for="(cat, index) in categories.data"
+					:key="cat.name"
+					class="pt-2"
+				>
+					<div
+						v-if="editing?.name !== cat.name"
+						class="flex items-center justify-between group text-sm"
+					>
+						<div @dblclick="allowEdit(cat, index)">
+							{{ cat.category }}
+						</div>
+						<Button
+							variant="ghost"
+							theme="red"
+							class="invisible group-hover:visible"
+							@click="deleteCategory(cat.name)"
+						>
+							<template #icon>
+								<Trash2 class="size-4 stroke-1.5 text-ink-red-4" />
+							</template>
+						</Button>
+					</div>
+					<FormControl
+						v-else
+						:ref="(el) => (editInputRef[index] = el)"
+						v-model="editedValue"
+						type="text"
+						class="w-full"
+						@keyup.enter="saveChanges(cat.name, editedValue)"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Button,
+	FormControl,
+	LoadingIndicator,
+	createListResource,
+	createResource,
+	toast,
+} from 'frappe-ui'
+import { Plus, Trash2, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { cleanError } from '@/utils'
+
+const showForm = ref(false)
+const category = ref(null)
+const categoryInput = ref(null)
+const saving = ref(false)
+const editing = ref(null)
+const editedValue = ref('')
+const editInputRef = ref([])
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const categories = createListResource({
+	doctype: 'LMS Category',
+	fields: ['name', 'category'],
+	auto: true,
+})
+
+const addCategory = () => {
+	categories.insert.submit(
+		{
+			category: category.value,
+		},
+		{
+			onSuccess(data) {
+				categories.reload()
+				category.value = null
+				showForm.value = false
+				toast.success(__('Category added successfully'))
+			},
+			onError(err) {
+				toast.error(__(cleanError(err.messages[0]) || 'Unable to add category'))
+			},
+		}
+	)
+}
+
+const showCategoryForm = () => {
+	showForm.value = !showForm.value
+	setTimeout(() => {
+		categoryInput.value.$el.querySelector('input').focus()
+	}, 0)
+}
+
+const updateCategory = createResource({
+	url: 'frappe.client.rename_doc',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Category',
+			old_name: values.name,
+			new_name: values.category,
+		}
+	},
+})
+
+const update = (name, value) => {
+	saving.value = true
+	updateCategory.submit(
+		{
+			name: name,
+			category: value,
+		},
+		{
+			onSuccess() {
+				saving.value = false
+				categories.reload()
+				editing.value = null
+				editedValue.value = ''
+				toast.success(__('Category updated successfully'))
+			},
+			onError(err) {
+				saving.value = false
+				editing.value = null
+				editedValue.value = ''
+				toast.error(
+					__(cleanError(err.messages[0]) || 'Unable to update category')
+				)
+			},
+		}
+	)
+}
+
+const deleteCategory = (name) => {
+	saving.value = true
+	categories.delete.submit(name, {
+		onSuccess() {
+			saving.value = false
+			categories.reload()
+			toast.success(__('Category deleted successfully'))
+		},
+		onError(err) {
+			saving.value = false
+			toast.error(
+				__(cleanError(err.messages[0]) || 'Unable to delete category')
+			)
+		},
+	})
+}
+
+const saveChanges = (name, value) => {
+	saving.value = true
+	update(name, value)
+}
+
+const allowEdit = (cat, index) => {
+	editing.value = cat
+	editedValue.value = cat.category
+	setTimeout(() => {
+		editInputRef.value[index].$el.querySelector('input').focus()
+	}, 0)
+}
+</script>

frontend/src/components/Settings/EmailTemplates.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<!-- <div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div> -->
+			</div>
+			<div class="flex items-center space-x-5">
+				<Button @click="openTemplateForm('new')">
+					<template #prefix>
+						<Plus class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('New') }}
+				</Button>
+			</div>
+		</div>
+		<div v-if="emailTemplates.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="emailTemplates.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					onRowClick: (row) => {
+						openTemplateForm(row.name)
+					},
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<component
+								v-if="item.icon"
+								:is="item.icon"
+								class="h-4 w-4 stroke-1.5 ml-4"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+
+				<ListRows>
+					<ListRow :row="row" v-for="row in emailTemplates.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeTemplate(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+	</div>
+	<EmailTemplateModal
+		v-model="showForm"
+		v-model:emailTemplates="emailTemplates"
+		:templateID="selectedTemplate"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Button,
+	call,
+	createListResource,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	toast,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const showForm = ref(false)
+const readOnlyMode = window.read_only_mode
+const selectedTemplate = ref(null)
+
+const emailTemplates = createListResource({
+	doctype: 'Email Template',
+	fields: ['name', 'subject', 'use_html', 'response', 'response_html'],
+	auto: true,
+	orderBy: 'modified desc',
+	cache: 'email-templates',
+})
+
+const removeTemplate = (selections, unselectAll) => {
+	call('lms.lms.api.delete_documents', {
+		doctype: 'Email Template',
+		documents: Array.from(selections),
+	})
+		.then(() => {
+			emailTemplates.reload()
+			toast.success(__('Email Templates deleted successfully'))
+			unselectAll()
+		})
+		.catch((err) => {
+			toast.error(
+				cleanError(err.messages[0]) || __('Error deleting email templates')
+			)
+		})
+}
+
+const openTemplateForm = (templateID) => {
+	if (readOnlyMode) {
+		return
+	}
+	selectedTemplate.value = templateID
+	showForm.value = true
+}
+
+const columns = computed(() => {
+	return [
+		{
+			label: 'Name',
+			key: 'name',
+			width: '20rem',
+		},
+		{
+			label: 'Subject',
+			key: 'subject',
+			width: '25rem',
+		},
+	]
+})
+</script>

frontend/src/components/Settings/Evaluators.vue

@@ -0,0 +1,204 @@
+<template>
+	<div class="flex min-h-0 flex-col text-base">
+		<div class="flex items-center justify-between">
+			<div>
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+					{{ __(label) }}
+				</div>
+				<div class="text-ink-gray-6 leading-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex item-center space-x-2">
+				<Button variant="solid" @click="() => (showForm = !showForm)">
+					<template #prefix>
+						<Plus class="size-4 stroke-1.5" />
+					</template>
+					{{ __('New') }}
+				</Button>
+			</div>
+		</div>
+
+		<div class="mt-8 pb-5">
+			<FormControl
+				v-model="search"
+				:placeholder="__('Search')"
+				type="text"
+				:debounce="300"
+				class="w-1/4 mb-4"
+			>
+				<template #prefix>
+					<Search class="size-4 stroke-1.5 text-ink-gray-5" />
+				</template>
+			</FormControl>
+			<div class="overflow-auto h-[60vh]">
+				<div class="divide-y">
+					<div
+						v-for="evaluator in evaluators.data"
+						:key="evaluator.evaluator"
+						class="cursor-pointer"
+					>
+						<div class="flex items-center justify-between group py-3">
+							<div
+								class="flex items-center space-x-3"
+								@click="openProfile(evaluator.username)"
+							>
+								<Avatar
+									:image="evaluator.user_image"
+									:label="evaluator.full_name"
+									size="xl"
+								/>
+								<div class="space-y-1">
+									<div class="text-base font-semibold text-ink-gray-9">
+										{{ evaluator.full_name }}
+									</div>
+									<div class="text-xs text-ink-gray-5">
+										{{ evaluator.evaluator }}
+									</div>
+								</div>
+							</div>
+							<div class="invisible group-hover:visible">
+								<Button
+									variant="ghost"
+									@click="deleteEvaluator(evaluator.evaluator)"
+								>
+									<template #icon>
+										<Trash2 class="size-4 stroke-1.5 text-ink-red-3" />
+									</template>
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div
+					v-if="evaluators.length && hasNextPage"
+					class="flex justify-center mt-4"
+				>
+					<Button @click="evaluators.reload()">
+						<template #prefix>
+							<RefreshCw class="h-3 w-3 stroke-1.5" />
+						</template>
+						{{ __('Load More') }}
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<Dialog
+		v-model="showForm"
+		:options="{ 
+			size: 'xl',
+			title: __('Add Evaluator'),
+			actions: [{
+				label: __('Add'),
+				variant: 'solid',
+				onClick({ close }: any) {
+					addEvaluator(close)
+				},
+			}]
+	}"
+	>
+		<template #body-content>
+			<div v-if="showForm" class="flex items-center">
+				<FormControl
+					v-model="email"
+					:label="__('Email')"
+					placeholder="jane@doe.com"
+					type="email"
+					class="w-full"
+					@keydown.enter="addEvaluator"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Button,
+	call,
+	createListResource,
+	Dialog,
+	FormControl,
+	toast,
+} from 'frappe-ui'
+import { ref, watch } from 'vue'
+import { Plus, Search, Trash2, RefreshCw } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const show = defineModel('show')
+const search = ref('')
+const showForm = ref(false)
+const email = ref('')
+const router = useRouter()
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	show: {
+		type: Boolean,
+	},
+})
+
+const evaluators = createListResource({
+	doctype: 'Course Evaluator',
+	fields: ['evaluator', 'username', 'full_name', 'user_image'],
+	auto: true,
+	orderBy: 'creation desc',
+})
+
+const addEvaluator = (close: () => void) => {
+	call('lms.lms.api.add_an_evaluator', {
+		email: email.value,
+	})
+		.then(() => {
+			email.value = ''
+			evaluators.reload()
+			toast.success(__('Evaluator added successfully'))
+			close()
+		})
+		.catch((error: any) => {
+			toast.error(__(error.messages[0] || error.messages))
+			console.error('Error adding evaluator:', error)
+		})
+}
+
+watch(search, () => {
+	evaluators.update({
+		filters: {
+			full_name: ['like', `%${search.value}%`],
+		},
+	})
+	evaluators.reload()
+})
+
+const openProfile = (username: string) => {
+	show.value = false
+	router.push({
+		name: 'Profile',
+		params: {
+			username: username,
+		},
+	})
+}
+
+const deleteEvaluator = (evaluator: string) => {
+	call('lms.lms.api.delete_evaluator', {
+		evaluator: evaluator,
+	})
+		.then(() => {
+			toast.success(__('Evaluator deleted successfully'))
+			evaluators.reload()
+		})
+		.catch((error: any) => {
+			toast.error(__(error.messages[0] || error.messages))
+			console.error('Error deleting evaluator:', error)
+		})
+}
+</script>

frontend/src/components/Settings/Members.vue

@@ -5,53 +5,37 @@
 				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
-				<!-- <div class="text-xs text-ink-gray-5">
+				<div class="text-ink-gray-6 leading-5">
 					{{ __(description) }}
-				</div> -->
+				</div>
 			</div>
 			<div class="flex item-center space-x-2">
-				<FormControl
-					v-model="search"
-					:placeholder="__('Search')"
-					type="text"
-					:debounce="300"
-				/>
-				<Button @click="() => (showForm = !showForm)">
+				<Button variant="solid" @click="() => (showForm = !showForm)">
 					<template #prefix>
-						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
-						<X v-else class="size-4 stroke-1.5" />
+						<Plus class="size-4 stroke-1.5" />
 					</template>
-					{{ showForm ? __('Close') : __('New') }}
+					{{ __('New') }}
 				</Button>
 			</div>
 		</div>
 
-		<!-- Form to add new member -->
-		<div v-if="showForm" class="flex items-center space-x-2 my-4">
+		<div class="mt-8 pb-10">
 			<FormControl
-				v-model="member.email"
-				:placeholder="__('Email')"
-				type="email"
-				class="w-full"
-			/>
-			<FormControl
-				v-model="member.first_name"
-				:placeholder="__('First Name')"
+				v-model="search"
+				:placeholder="__('Search')"
 				type="text"
-				class="w-full"
-			/>
-			<Button @click="addMember()" variant="subtle">
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div class="mt-2 pb-10 overflow-auto">
-			<!-- Member list -->
-			<div class="overflow-y-scroll">
+				:debounce="300"
+				class="w-1/4 mb-4"
+			>
+				<template #prefix>
+					<Search class="size-4 stroke-1.5 text-ink-gray-5" />
+				</template>
+			</FormControl>
+			<div class="overflow-y-scroll h-[60vh]">
 				<ul class="divide-y">
 					<li
 						v-for="member in memberList"
-						class="grid grid-cols-3 gap-10 py-2 cursor-pointer"
+						class="flex items-center justify-between py-2 cursor-pointer"
 					>
 						<div
 							@click="openProfile(member.username)"
@@ -60,27 +44,13 @@
 							<Avatar
 								:image="member.user_image"
 								:label="member.full_name"
-								size="lg"
+								size="xl"
 							/>
 							<div class="space-y-1">
 								<div class="flex">
 									<div class="text-ink-gray-9">
 										{{ member.full_name }}
 									</div>
-									<div
-										class="px-1"
-										v-if="member.role && getRole(member.role) !== 'Student'"
-									>
-										<Badge
-											:variant="'subtle'"
-											:ref_for="true"
-											theme="blue"
-											size="sm"
-											label="Badge"
-										>
-											{{ getRole(member.role) }}
-										</Badge>
-									</div>
 								</div>
 								<div class="text-sm text-ink-gray-7">
 									{{ member.name }}
@@ -88,59 +58,92 @@
 							</div>
 						</div>
 						<div
-							class="flex items-center justify-center text-ink-gray-7 text-sm"
+							class="flex items-center space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
+							v-if="member.role && member.role !== 'LMS Student'"
 						>
-							<div v-if="member.last_active">
-								{{ dayjs(member.last_active).format('DD MMM, YYYY HH:mm a') }}
-							</div>
-							<div v-else>-</div>
+							<Shield class="size-4 stroke-1.5" />
+							<span class="text-sm">
+								{{ getRole(member.role) }}
+							</span>
 						</div>
 					</li>
 				</ul>
-			</div>
-			<div
-				v-if="memberList.length && hasNextPage"
-				class="flex justify-center mt-4"
-			>
-				<Button @click="members.reload()">
-					<template #prefix>
-						<RefreshCw class="h-3 w-3 stroke-1.5" />
-					</template>
-					{{ __('Load More') }}
-				</Button>
+				<div
+					v-if="memberList.length && hasNextPage"
+					class="flex justify-center mt-4"
+				>
+					<Button @click="members.reload()">
+						<template #prefix>
+							<RefreshCw class="h-3 w-3 stroke-1.5" />
+						</template>
+						{{ __('Load More') }}
+					</Button>
+				</div>
 			</div>
 		</div>
 	</div>
+	<Dialog
+		v-model="showForm"
+		:options="{
+			title: __('Add a new member'),
+			size: 'lg',
+			actions: [{
+				label: __('Add'),
+				variant: 'solid',
+				onClick({ close }: any) {
+					addMember(close)
+				}
+			}]
+		}"
+	>
+		<template #body-content>
+			<div class="flex items-center space-x-2">
+				<FormControl
+					v-model="member.email"
+					:label="__('Email')"
+					placeholder="jane@doe.com"
+					type="email"
+					class="w-full"
+				/>
+				<FormControl
+					v-model="member.first_name"
+					:label="__('First Name')"
+					placeholder="Jane"
+					type="text"
+					class="w-full"
+				/>
+			</div>
+		</template>
+	</Dialog>
 </template>
 <script setup lang="ts">
-import { createResource, Avatar, Button, FormControl, Badge } from 'frappe-ui'
+import {
+	Avatar,
+	Badge,
+	Button,
+	createResource,
+	Dialog,
+	FormControl,
+} from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, watch, reactive, inject } from 'vue'
-import { RefreshCw, Plus, X } from 'lucide-vue-next'
+import { RefreshCw, Plus, Search, Shield } from 'lucide-vue-next'
 import { useOnboarding } from 'frappe-ui/frappe'
+import type { User } from '@/components/Settings/types'
 
-interface User {
-	data: {
-		email: string
-		name: string
-		enabled: boolean
-		user_image: string
-		full_name: string
-		user_type: ['System User', 'Website User']
-		username: string
-		is_moderator: boolean
-		is_system_manager: boolean
-		is_evaluator: boolean
-		is_instructor: boolean
-		is_fc_site: boolean
-	}
+type Member = {
+	username: string
+	full_name: string
+	name: string
+	role?: string
+	user_image?: string
 }
 
 const router = useRouter()
 const show = defineModel('show')
 const search = ref('')
 const start = ref(0)
-const memberList = ref([])
+const memberList = ref<Member[]>([])
 const hasNextPage = ref(false)
 const showForm = ref(false)
 const dayjs = inject('$dayjs')
@@ -174,7 +177,7 @@ const members = createResource({
 			start: start.value,
 		}
 	},
-	onSuccess(data) {
+	onSuccess(data: Member[]) {
 		memberList.value = memberList.value.concat(data)
 		start.value = start.value + 20
 		hasNextPage.value = data.length === 20
@@ -182,7 +185,7 @@ const members = createResource({
 	auto: true,
 })
 
-const openProfile = (username) => {
+const openProfile = (username: string) => {
 	show.value = false
 	router.push({
 		name: 'Profile',
@@ -194,7 +197,7 @@ const openProfile = (username) => {
 
 const newMember = createResource({
 	url: 'frappe.client.insert',
-	makeParams(values) {
+	makeParams() {
 		return {
 			doc: {
 				doctype: 'User',
@@ -204,13 +207,12 @@ const newMember = createResource({
 		}
 	},
 	auto: false,
-	onSuccess(data) {
+	onSuccess(data: Member) {
 		show.value = false
-
 		if (user?.data?.is_system_manager) updateOnboardingStep('invite_students')
 
 		router.push({
-			name: 'Profile',
+			name: 'ProfileRoles',
 			params: {
 				username: data.username,
 			},
@@ -218,8 +220,9 @@ const newMember = createResource({
 	},
 })
 
-const addMember = () => {
+const addMember = (close: () => void) => {
 	newMember.reload()
+	close()
 }
 
 watch(search, () => {
@@ -228,8 +231,8 @@ watch(search, () => {
 	members.reload()
 })
 
-const getRole = (role) => {
-	const map = {
+const getRole = (role: string) => {
+	const map: Record<string, string> = {
 		'LMS Student': 'Student',
 		'Course Creator': 'Instructor',
 		Moderator: 'Moderator',

frontend/src/components/Settings/PaymentSettings.vue

@@ -12,13 +12,13 @@
             /> -->
 		</div>
 		<div class="overflow-y-scroll">
-			<div class="flex space-x-4">
-				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+			<div class="flex flex-col divide-y">
+				<SettingFields :fields="fields" :data="data.doc" />
 				<SettingFields
 					v-if="paymentGateway.data"
 					:fields="paymentGateway.data.fields"
 					:data="paymentGateway.data.data"
-					class="w-1/2"
+					class="pt-5 my-0"
 				/>
 			</div>
 		</div>
@@ -30,9 +30,9 @@
 	</div>
 </template>
 <script setup>
-import SettingFields from '@/components/SettingFields.vue'
+import SettingFields from '@/components/Settings/SettingFields.vue'
 import { createResource, Badge, Button } from 'frappe-ui'
-import { watch, ref } from 'vue'
+import { watch } from 'vue'
 
 const props = defineProps({
 	label: {
@@ -60,9 +60,28 @@ const paymentGateway = createResource({
 			payment_gateway: props.data.doc.payment_gateway,
 		}
 	},
+	transform(data) {
+		arrangeFields(data.fields)
+		return data
+	},
 	auto: true,
 })
 
+const arrangeFields = (fields) => {
+	fields = fields.sort((a, b) => {
+		if (a.type === 'Upload' && b.type !== 'Upload') {
+			return 1
+		} else if (a.type !== 'Upload' && b.type === 'Upload') {
+			return -1
+		}
+		return 0
+	})
+
+	fields.splice(3, 0, {
+		type: 'Column Break',
+	})
+}
+
 const saveSettings = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {

frontend/src/components/Settings/SettingDetails.vue

@@ -28,7 +28,7 @@
 
 <script setup>
 import { Button, Badge, toast } from 'frappe-ui'
-import SettingFields from '@/components/SettingFields.vue'
+import SettingFields from '@/components/Settings/SettingFields.vue'
 
 const props = defineProps({
 	fields: {

frontend/src/components/Settings/SettingFields.vue

@@ -6,7 +6,7 @@
 		<div v-for="(column, index) in columns" :key="index">
 			<div
 				class="flex flex-col space-y-5"
-				:class="columns.length > 1 ? 'w-72' : 'w-full'"
+				:class="columns.length > 1 ? 'w-[21rem]' : 'w-full'"
 			>
 				<div v-for="field in column">
 					<Link
@@ -14,6 +14,7 @@
 						v-model="data[field.name]"
 						:doctype="field.doctype"
 						:label="__(field.label)"
+						:description="__(field.description)"
 					/>
 
 					<div v-else-if="field.type == 'Code'">
@@ -54,11 +55,13 @@
 						<div v-else>
 							<div class="flex items-center text-sm space-x-2">
 								<div
-									class="flex items-center justify-center rounded border border-outline-gray-modals bg-white w-[10rem] py-2"
+									class="flex items-center justify-center rounded border border-outline-gray-1 bg-surface-gray-2"
+									:class="field.size == 'lg' ? 'px-5 py-5' : 'px-20 py-8'"
 								>
 									<img
 										:src="data[field.name]?.file_url || data[field.name]"
-										class="w-[80%] rounded"
+										class="rounded"
+										:class="field.size == 'lg' ? 'w-36' : 'size-6'"
 									/>
 								</div>
 								<div class="flex flex-col flex-wrap">
@@ -100,6 +103,7 @@
 						:rows="field.rows"
 						:options="field.options"
 						:description="field.description"
+						:class="columns.length > 1 ? 'w-full' : 'w-1/2'"
 					/>
 				</div>
 			</div>

frontend/src/components/Settings/Settings.vue

@@ -34,22 +34,16 @@
 					:key="activeTab.label"
 					class="flex flex-1 flex-col px-10 py-8 bg-surface-modal"
 				>
-					<Members
-						v-if="activeTab.label === 'Members'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						v-model:show="show"
-					/>
-					<Evaluators
-						v-else-if="activeTab.label === 'Evaluators'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						v-model:show="show"
-					/>
-					<Categories
-						v-else-if="activeTab.label === 'Categories'"
-						:label="activeTab.label"
-						:description="activeTab.description"
+					<component
+						v-if="activeTab.template"
+						:is="activeTab.template"
+						v-bind="{
+							label: activeTab.label,
+							description: activeTab.description,
+							...(activeTab.label === 'Branding'
+								? { fields: activeTab.fields }
+								: {}),
+						}"
 					/>
 					<PaymentSettings
 						v-else-if="activeTab.label === 'Payment Gateway'"
@@ -58,13 +52,6 @@
 						:data="data"
 						:fields="activeTab.fields"
 					/>
-					<BrandSettings
-						v-else-if="activeTab.label === 'Branding'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						:fields="activeTab.fields"
-						:data="branding"
-					/>
 					<SettingDetails
 						v-else
 						:fields="activeTab.fields"
@@ -78,16 +65,19 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createDocumentResource, createResource } from 'frappe-ui'
-import { ref, computed, watch } from 'vue'
+import { Dialog, createDocumentResource } from 'frappe-ui'
+import { computed, markRaw, ref, watch } from 'vue'
 import { useSettings } from '@/stores/settings'
-import SettingDetails from '../SettingDetails.vue'
+import SettingDetails from '@/components/Settings/SettingDetails.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import Members from '@/components/Members.vue'
-import Evaluators from '@/components/Evaluators.vue'
-import Categories from '@/components/Categories.vue'
-import BrandSettings from '@/components/BrandSettings.vue'
-import PaymentSettings from '@/components/PaymentSettings.vue'
+import Members from '@/components/Settings/Members.vue'
+import Evaluators from '@/components/Settings/Evaluators.vue'
+import Categories from '@/components/Settings/Categories.vue'
+import EmailTemplates from '@/components/Settings/EmailTemplates.vue'
+import BrandSettings from '@/components/Settings/BrandSettings.vue'
+import PaymentSettings from '@/components/Settings/PaymentSettings.vue'
+import ZoomSettings from '@/components/Settings/ZoomSettings.vue'
+import Badges from '@/components/Settings/Badges.vue'
 
 const show = defineModel()
 const doctype = ref('LMS Settings')
@@ -102,12 +92,6 @@ const data = createDocumentResource({
 	auto: true,
 })
 
-const branding = createResource({
-	url: 'lms.lms.api.get_branding',
-	auto: true,
-	cache: 'brand',
-})
-
 const tabsStructure = computed(() => {
 	return [
 		{
@@ -118,13 +102,6 @@ const tabsStructure = computed(() => {
 					label: 'General',
 					icon: 'Wrench',
 					fields: [
-						{
-							label: 'Enable Learning Paths',
-							name: 'enable_learning_paths',
-							description:
-								'This will enforce students to go through programs assigned to them in the correct order.',
-							type: 'checkbox',
-						},
 						{
 							label: 'Allow Guest Access',
 							name: 'allow_guest_access',
@@ -132,6 +109,20 @@ const tabsStructure = computed(() => {
 								'If enabled, users can access the course and batch lists without logging in.',
 							type: 'checkbox',
 						},
+						{
+							label: 'Enable Learning Paths',
+							name: 'enable_learning_paths',
+							description:
+								'This will ensure students follow the assigned programs in order.',
+							type: 'checkbox',
+						},
+						{
+							label: 'Prevent Skipping Videos',
+							name: 'prevent_skipping_videos',
+							type: 'checkbox',
+							description:
+								'If enabled, users will no able to move forward in a video',
+						},
 						{
 							label: 'Send calendar invite for evaluations',
 							name: 'send_calendar_invite_for_evaluations',
@@ -139,11 +130,34 @@ const tabsStructure = computed(() => {
 								'If enabled, it sends google calendar invite to the student for evaluations.',
 							type: 'checkbox',
 						},
+						{
+							type: 'Column Break',
+						},
+						{
+							label: 'Livecode URL',
+							name: 'livecode_url',
+							doctype: 'Livecode URL',
+							type: 'text',
+							description:
+								'https://docs.frappe.io/learning/falcon-self-hosting-guide',
+						},
+						{
+							label: 'Batch Confirmation Email Template',
+							name: 'batch_confirmation_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Certification Email Template',
+							name: 'certification_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
 						{
 							label: 'Unsplash Access Key',
 							name: 'unsplash_access_key',
 							description:
-								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
+								'Allows users to pick a profile cover image from Unsplash. https://unsplash.com/documentation#getting-started.',
 							type: 'password',
 						},
 					],
@@ -160,6 +174,12 @@ const tabsStructure = computed(() => {
 					description:
 						'Configure the payment gateway and other payment related settings',
 					fields: [
+						{
+							label: 'Default Currency',
+							name: 'default_currency',
+							type: 'Link',
+							doctype: 'Currency',
+						},
 						{
 							label: 'Payment Gateway',
 							name: 'payment_gateway',
@@ -167,10 +187,7 @@ const tabsStructure = computed(() => {
 							doctype: 'Payment Gateway',
 						},
 						{
-							label: 'Default Currency',
-							name: 'default_currency',
-							type: 'Link',
-							doctype: 'Currency',
+							type: 'Column Break',
 						},
 						{
 							label: 'Apply GST for India',
@@ -197,28 +214,55 @@ const tabsStructure = computed(() => {
 			items: [
 				{
 					label: 'Members',
-					description: 'Manage the members of your learning system',
+					description:
+						'Add new members or manage roles and permissions of existing members',
 					icon: 'UserRoundPlus',
+					template: markRaw(Members),
 				},
 				{
 					label: 'Evaluators',
-					description: 'Manage the evaluators of your learning system',
+					description: '',
 					icon: 'UserCheck',
+					description:
+						'Add new evaluators or check the slots existing evaluators',
+					template: markRaw(Evaluators),
+				},
+				{
+					label: 'Zoom Accounts',
+					description:
+						'Manage zoom accounts to conduct live classes from batches',
+					icon: 'Video',
+					template: markRaw(ZoomSettings),
+				},
+				{
+					label: 'Badges',
+					description:
+						'Create badges and assign them to students to acknowledge their achievements',
+					icon: 'Award',
+					template: markRaw(Badges),
 				},
 				{
 					label: 'Categories',
-					description: 'Manage the members of your learning system',
+					description: 'Double click to edit the category',
 					icon: 'Network',
+					template: markRaw(Categories),
+				},
+				{
+					label: 'Email Templates',
+					description: 'Manage the email templates for your learning system',
+					icon: 'MailPlus',
+					template: markRaw(EmailTemplates),
 				},
 			],
 		},
 		{
-			label: 'Customise',
+			label: 'Customize',
 			hideLabel: false,
 			items: [
 				{
 					label: 'Branding',
 					icon: 'Blocks',
+					template: markRaw(BrandSettings),
 					fields: [
 						{
 							label: 'Brand Name',
@@ -235,28 +279,6 @@ const tabsStructure = computed(() => {
 							name: 'favicon',
 							type: 'Upload',
 						},
-						{
-							label: 'Footer Logo',
-							name: 'footer_logo',
-							type: 'Upload',
-						},
-						{
-							label: 'Address',
-							name: 'address',
-							type: 'textarea',
-							rows: 2,
-						},
-						{
-							label: 'Footer "Powered By"',
-							name: 'footer_powered',
-							type: 'textarea',
-							rows: 4,
-						},
-						{
-							label: 'Copyright',
-							name: 'copyright',
-							type: 'text',
-						},
 					],
 				},
 				{
@@ -275,8 +297,13 @@ const tabsStructure = computed(() => {
 							type: 'checkbox',
 						},
 						{
-							label: 'Certified Participants',
-							name: 'certified_participants',
+							label: 'Programming Exercises',
+							name: 'programming_exercises',
+							type: 'checkbox',
+						},
+						{
+							label: 'Certified Members',
+							name: 'certified_members',
 							type: 'checkbox',
 						},
 						{
@@ -299,24 +326,6 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
-				{
-					label: 'Email Templates',
-					icon: 'MailPlus',
-					fields: [
-						{
-							label: 'Batch Confirmation Template',
-							name: 'batch_confirmation_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-						{
-							label: 'Certification Template',
-							name: 'certification_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-					],
-				},
 				{
 					label: 'Signup',
 					icon: 'LogIn',
@@ -335,6 +344,9 @@ const tabsStructure = computed(() => {
 							description:
 								'New users will have to be manually registered by Admins.',
 						},
+						{
+							type: 'Column Break',
+						},
 						{
 							label: 'Signup Consent HTML',
 							name: 'custom_signup_content',
@@ -362,12 +374,16 @@ const tabsStructure = computed(() => {
 							type: 'textarea',
 							rows: 4,
 							description:
-								'Keywords for search engines to find your website. Separated by commas.',
+								'Comma separated keywords for search engines to find your website.',
+						},
+						{
+							type: 'Column Break',
 						},
 						{
 							label: 'Meta Image',
 							name: 'meta_image',
 							type: 'Upload',
+							size: 'lg',
 						},
 					],
 				},

frontend/src/components/Settings/ZoomSettings.vue

@@ -0,0 +1,204 @@
+<template>
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-ink-gray-6 leading-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex items-center space-x-5">
+				<Button @click="openForm('new')">
+					<template #prefix>
+						<Plus class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('New') }}
+				</Button>
+			</div>
+		</div>
+		<div v-if="zoomAccounts.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="zoomAccounts.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					onRowClick: (row) => {
+						openForm(row.name)
+					},
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<FeatherIcon
+								v-if="item.icon"
+								:name="item.icon"
+								class="h-4 w-4 stroke-1.5"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+
+				<ListRows>
+					<ListRow :row="row" v-for="row in zoomAccounts.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<template #prefix>
+									<div v-if="column.key == 'member_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['member_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div v-if="column.key == 'enabled'">
+									<Badge v-if="row[column.key]" theme="green">
+										{{ __('Enabled') }}
+									</Badge>
+									<Badge v-else theme="gray">
+										{{ __('Disabled') }}
+									</Badge>
+								</div>
+								<div v-else class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeAccount(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+	</div>
+	<ZoomAccountModal
+		v-model="showForm"
+		v-model:zoomAccounts="zoomAccounts"
+		:accountID="currentAccount"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Button,
+	Badge,
+	call,
+	createListResource,
+	FeatherIcon,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	ListSelectBanner,
+	toast,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import { cleanError } from '@/utils'
+import { User } from '@/components/Settings/types'
+import ZoomAccountModal from '@/components/Modals/ZoomAccountModal.vue'
+
+const user = inject<User | null>('$user')
+const showForm = ref(false)
+const currentAccount = ref<string | null>(null)
+
+const props = defineProps({
+	label: String,
+	description: String,
+})
+
+const zoomAccounts = createListResource({
+	doctype: 'LMS Zoom Settings',
+	fields: [
+		'name',
+		'enabled',
+		'member',
+		'member_name',
+		'member_image',
+		'account_id',
+		'client_id',
+		'client_secret',
+	],
+	cache: ['zoomAccounts'],
+})
+
+onMounted(() => {
+	fetchZoomAccounts()
+})
+
+const fetchZoomAccounts = () => {
+	if (!user?.data?.is_moderator && !user?.data?.is_evaluator) return
+
+	if (!user?.data?.is_moderator) {
+		zoomAccounts.update({
+			filters: {
+				member: user.data.name,
+			},
+		})
+	}
+	zoomAccounts.reload()
+}
+
+const openForm = (accountID: string) => {
+	currentAccount.value = accountID
+	showForm.value = true
+}
+
+const removeAccount = (selections, unselectAll) => {
+	call('lms.lms.api.delete_documents', {
+		doctype: 'LMS Zoom Settings',
+		documents: Array.from(selections),
+	})
+		.then(() => {
+			zoomAccounts.reload()
+			toast.success(__('Email Templates deleted successfully'))
+			unselectAll()
+		})
+		.catch((err) => {
+			toast.error(
+				cleanError(err.messages[0]) || __('Error deleting email templates')
+			)
+		})
+}
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			icon: 'user',
+		},
+		{
+			label: __('Account Name'),
+			key: 'name',
+			icon: 'video',
+		},
+		{
+			label: __('Status'),
+			key: 'enabled',
+			align: 'center',
+			icon: 'check-square',
+		},
+	]
+})
+</script>

frontend/src/components/Settings/types.ts

@@ -0,0 +1,74 @@
+export interface User {
+    data: {
+        email: string
+        name: string
+        enabled: boolean
+        user_image: string
+        full_name: string
+        user_type: ['System User', 'Website User']
+        username: string
+        is_moderator: boolean
+        is_system_manager: boolean
+        is_evaluator: boolean
+        is_instructor: boolean
+        is_fc_site: boolean
+    }
+}
+
+export interface Badge {
+    name: string;
+    title: string;
+    enabled: boolean;
+    description: string;
+    image: string;
+    grant_only_once: boolean;
+    event: string;
+    reference_doctype: string;
+    condition: string;
+    user_field: string;
+    field_to_check: string;
+};
+
+export interface Badges {
+    data: Badge[],
+    reload: () => void
+	insert: {
+		submit: (
+			data: Badge,
+			options: { onSuccess: () => void; onError: (err: any) => void }
+		) => void
+	},
+	setValue: {
+		submit: (
+			data: Badge,
+			options: { onSuccess: () => void; onError: (err: any) => void }
+		) => void
+	},
+}
+
+export interface BadgeAssignment {
+    name: string;
+    member: string;
+    member_name: string;
+    member_username: string;
+    member_image: string;
+    badge: string;
+    issued_on: string;
+}
+
+export interface BadgeAssignments {
+    data: BadgeAssignment[],
+    reload: () => void
+    insert: {
+        submit: (
+            data: BadgeAssignment,
+            options: { onSuccess: () => void; onError: (err: any) => void }
+        ) => void
+    },
+    setValue: {
+        submit: (
+            data: BadgeAssignment,
+            options: { onSuccess: () => void; onError: (err: any) => void }
+        ) => void
+    },
+}

frontend/src/components/SidebarLink.vue

@@ -61,7 +61,7 @@
 	</button>
 </template>
 <script setup>
-import { Tooltip, Button } from 'frappe-ui'
+import { Tooltip } from 'frappe-ui'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import * as icons from 'lucide-vue-next'

frontend/src/components/UpcomingEvaluations.vue

@@ -5,10 +5,7 @@
 				{{ __('Upcoming Evaluations') }}
 			</div>
 			<Button
-				v-if="
-					!upcoming_evals.data?.length ||
-					upcoming_evals.length == courses.length
-				"
+				v-if="upcoming_evals.data?.length != evaluationCourses.length"
 				@click="openEvalModal"
 			>
 				{{ __('Schedule Evaluation') }}
@@ -118,8 +115,8 @@ import {
 	HeadsetIcon,
 	EllipsisVertical,
 } from 'lucide-vue-next'
-import { inject, ref, getCurrentInstance } from 'vue'
-import { formatTime } from '../utils'
+import { inject, ref, getCurrentInstance, computed } from 'vue'
+import { formatTime } from '@/utils'
 import { Button, createResource, call } from 'frappe-ui'
 import EvaluationModal from '@/components/Modals/EvaluationModal.vue'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
@@ -163,6 +160,12 @@ const openEvalCall = (evl) => {
 	window.open(evl.google_meet_link, '_blank')
 }
 
+const evaluationCourses = computed(() => {
+	return props.courses.filter((course) => {
+		return course.evaluator != ''
+	})
+})
+
 const cancelEvaluation = (evl) => {
 	$dialog({
 		title: __('Cancel this evaluation?'),

frontend/src/components/UserDropdown.vue

@@ -33,7 +33,7 @@
 						>
 							{{ branding.data?.app_name }}
 						</span>
-						<span v-else> Learning </span>
+						<span v-else> {{ __('Learning') }} </span>
 					</div>
 					<div
 						v-if="userResource.data"
@@ -72,7 +72,7 @@ import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { markRaw, watch, ref, onMounted, computed } from 'vue'
 import { createDialog } from '@/utils/dialogs'
-import SettingsModal from '@/components/Modals/Settings.vue'
+import SettingsModal from '@/components/Settings/Settings.vue'
 import FrappeCloudIcon from '@/components/Icons/FrappeCloudIcon.vue'
 import {
 	ChevronDown,
@@ -130,7 +130,7 @@ const userDropdownOptions = computed(() => {
 			items: [
 				{
 					icon: User,
-					label: 'My Profile',
+					label: __('My Profile'),
 					onClick: () => {
 						router.push(`/user/${userResource.data?.username}`)
 					},
@@ -140,7 +140,7 @@ const userDropdownOptions = computed(() => {
 				},
 				{
 					icon: theme.value === 'light' ? Moon : Sun,
-					label: 'Toggle Theme',
+					label: __('Toggle Theme'),
 					onClick: () => {
 						toggleTheme()
 					},
@@ -158,7 +158,7 @@ const userDropdownOptions = computed(() => {
 				},
 				{
 					icon: Settings,
-					label: 'Settings',
+					label: __('Settings'),
 					onClick: () => {
 						settingsStore.isSettingsOpen = true
 					},
@@ -168,7 +168,7 @@ const userDropdownOptions = computed(() => {
 				},
 				{
 					icon: FrappeCloudIcon,
-					label: 'Login to Frappe Cloud',
+					label: __('Login to Frappe Cloud'),
 					onClick: () => {
 						$dialog({
 							title: __('Login to Frappe Cloud?'),
@@ -196,7 +196,7 @@ const userDropdownOptions = computed(() => {
 				},
 				{
 					icon: LogOut,
-					label: 'Log out',
+					label: __('Log out'),
 					onClick: () => {
 						logout.submit().then(() => {
 							isLoggedIn = false
@@ -208,7 +208,7 @@ const userDropdownOptions = computed(() => {
 				},
 				{
 					icon: LogIn,
-					label: 'Log in',
+					label: __('Log in'),
 					onClick: () => {
 						window.location.href = '/login'
 					},

frontend/src/components/VideoBlock.vue

@@ -1,80 +1,163 @@
 <template>
-	<div ref="videoContainer" class="video-block relative group">
-		<video
-			@timeupdate="updateTime"
-			@ended="videoEnded"
-			@click="togglePlay"
-			oncontextmenu="return false"
-			class="rounded-md border border-gray-100 cursor-pointer"
-			ref="videoRef"
-		>
-			<source :src="fileURL" :type="type" />
-		</video>
-		<div
-			v-if="!playing"
-			class="absolute inset-0 flex items-center justify-center cursor-pointer"
-			@click="playVideo"
-		>
-			<div
-				class="rounded-full p-4 pl-4.5"
-				style="
-					background: radial-gradient(
-						circle,
-						rgba(0, 0, 0, 0.3) 0%,
-						rgba(0, 0, 0, 0.4) 50%
-					);
-				"
-			>
-				<Play />
+	<div>
+		<div v-if="quizzes.length && !showQuiz && readOnly" class="leading-5">
+			{{
+				__('This video contains {0} {1}:').format(
+					quizzes.length,
+					quizzes.length == 1 ? 'quiz' : 'quizzes'
+				)
+			}}
+
+			<div v-for="(quiz, index) in quizzes" class="pl-3 mt-1">
+				<span>
+					{{ index + 1 }}. <span class="font-semibold"> {{ quiz.quiz }} </span>
+				</span>
+				{{ __('at {0} minutes').format(formatTimestamp(quiz.time)) }}
 			</div>
 		</div>
 		<div
-			class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
-			:class="{
-				'invisible group-hover:visible': playing,
-			}"
+			v-if="!showQuiz"
+			ref="videoContainer"
+			class="video-block relative group"
 		>
-			<Button variant="ghost">
-				<template #icon>
-					<Play
-						v-if="!playing"
-						@click="playVideo"
-						class="size-4 text-ink-gray-9"
+			<video
+				@timeupdate="updateTime"
+				@ended="videoEnded"
+				@click="togglePlay"
+				oncontextmenu="return false"
+				class="rounded-md border border-gray-100 cursor-pointer"
+				ref="videoRef"
+				:src="fileURL"
+				:type="type"
+			></video>
+			<div
+				v-if="!playing"
+				class="absolute inset-0 flex items-center justify-center cursor-pointer"
+				@click="playVideo"
+			>
+				<div
+					class="rounded-full p-4 pl-4.5"
+					style="
+						background: radial-gradient(
+							circle,
+							rgba(0, 0, 0, 0.3) 0%,
+							rgba(0, 0, 0, 0.4) 50%
+						);
+					"
+				>
+					<Play />
+				</div>
+			</div>
+			<div
+				class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
+				:class="{
+					'invisible group-hover:visible': playing,
+				}"
+			>
+				<Button variant="ghost" class="hover:bg-transparent">
+					<template #icon>
+						<Play
+							v-if="!playing"
+							@click="playVideo"
+							class="size-4 text-ink-gray-9"
+						/>
+						<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
+					</template>
+				</Button>
+
+				<div class="relative flex items-center w-full flex-1">
+					<input
+						type="range"
+						min="0"
+						:max="duration"
+						step="0.1"
+						v-model="currentTime"
+						@input="changeCurrentTime"
+						class="duration-slider h-1"
 					/>
-					<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
-				</template>
-			</Button>
-			<Button variant="ghost" @click="toggleMute">
-				<template #icon>
-					<Volume2 v-if="!muted" class="size-5 text-ink-white" />
-					<VolumeX v-else class="size-5 text-ink-white" />
-				</template>
-			</Button>
-			<input
-				type="range"
-				min="0"
-				:max="duration"
-				step="0.1"
-				v-model="currentTime"
-				@input="changeCurrentTime"
-				class="duration-slider w-full h-1"
-			/>
-			<span class="text-sm font-semibold">
-				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-			</span>
-			<Button variant="ghost" @click="toggleFullscreen">
-				<template #icon>
-					<Maximize class="size-5 text-ink-white" />
-				</template>
+					<!-- QUIZ MARKERS -->
+					<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+						<div
+							v-for="(quiz, index) in quizzes"
+							:key="index"
+							:style="getQuizMarkerStyle(quiz.time)"
+							class="absolute top-0 h-full w-2 bg-surface-amber-3"
+						></div>
+					</div>
+				</div>
+
+				<span class="text-sm font-medium">
+					{{ formatSeconds(currentTime) }} / {{ formatSeconds(duration) }}
+				</span>
+				<Button
+					variant="ghost"
+					@click="toggleMute"
+					class="hover:bg-transparent"
+				>
+					<template #icon>
+						<Volume2 v-if="!muted" class="size-5 text-ink-white" />
+						<VolumeX v-else class="size-5 text-ink-white" />
+					</template>
+				</Button>
+				<Button
+					variant="ghost"
+					@click="toggleFullscreen"
+					class="hover:bg-transparent"
+				>
+					<template #icon>
+						<Maximize class="size-5 text-ink-white" />
+					</template>
+				</Button>
+			</div>
+		</div>
+		<Quiz
+			v-if="showQuiz"
+			:quizName="currentQuiz"
+			:inVideo="true"
+			:backToVideo="resumeVideo"
+		/>
+		<div v-if="!readOnly" @click="showQuizModal = true">
+			<Button>
+				{{ __('Add Quiz to Video') }}
 			</Button>
 		</div>
 	</div>
+	<QuizInVideo
+		v-model="showQuizModal"
+		:quizzes="quizzes"
+		:saveQuizzes="saveQuizzes"
+		:duration="duration"
+	/>
+	<Dialog
+		v-model="showQuizLoader"
+		:options="{
+			size: 'sm',
+		}"
+	>
+		<template #body>
+			<div class="flex flex-col space-y-2 p-5 text-base leading-5">
+				<span class="font-semibold">
+					{{ __('Time for a Quiz') }}
+				</span>
+				<span>
+					{{
+						__(
+							'Complete the upcoming quiz to continue watching the video. The quiz will open in {0} {1}.'
+						).format(quizLoadTimer, quizLoadTimer === 1 ? 'second' : 'seconds')
+					}}
+				</span>
+			</div>
+		</template>
+	</Dialog>
 </template>
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
-import { Button } from 'frappe-ui'
+import { Button, Dialog } from 'frappe-ui'
+import { formatSeconds, formatTimestamp } from '@/utils'
+import { useSettings } from '@/stores/settings'
 import Play from '@/components/Icons/Play.vue'
+import QuizInVideo from '@/components/Modals/QuizInVideo.vue'
 
 const videoRef = ref(null)
 const videoContainer = ref(null)
@@ -82,6 +165,13 @@ let playing = ref(false)
 let currentTime = ref(0)
 let duration = ref(0)
 let muted = ref(false)
+const showQuizModal = ref(false)
+const showQuiz = ref(false)
+const showQuizLoader = ref(false)
+const quizLoadTimer = ref(0)
+const currentQuiz = ref(null)
+const nextQuiz = ref({})
+const { preventSkippingVideos } = useSettings()
 
 const props = defineProps({
 	file: {
@@ -92,34 +182,94 @@ const props = defineProps({
 		type: String,
 		default: 'video/mp4',
 	},
+	readOnly: {
+		type: Boolean,
+		default: true,
+	},
+	quizzes: {
+		type: Array,
+		default: () => [],
+	},
+	saveQuizzes: {
+		type: Function,
+		default: () => {},
+	},
 })
 
 onMounted(() => {
+	updateCurrentTime()
+	updateNextQuiz()
+})
+
+const updateCurrentTime = () => {
 	setTimeout(() => {
 		videoRef.value.onloadedmetadata = () => {
 			duration.value = videoRef.value.duration
 		}
 		videoRef.value.ontimeupdate = () => {
-			currentTime.value = videoRef.value.currentTime
+			currentTime.value = videoRef.value?.currentTime || currentTime.value
+			if (currentTime.value >= nextQuiz.value.time) {
+				videoRef.value.pause()
+				playing.value = false
+				videoRef.value.onTimeupdate = null
+				currentQuiz.value = nextQuiz.value.quiz
+				quizLoadTimer.value = 7
+			}
 		}
 	}, 0)
+}
+
+watch(quizLoadTimer, () => {
+	if (quizLoadTimer.value > 0) {
+		showQuizLoader.value = true
+		setTimeout(() => {
+			quizLoadTimer.value -= 1
+		}, 1000)
+	} else {
+		showQuizLoader.value = false
+		showQuiz.value = true
+	}
 })
 
+const resumeVideo = (restart = false) => {
+	showQuiz.value = false
+	currentQuiz.value = null
+	updateCurrentTime()
+	setTimeout(() => {
+		videoRef.value.currentTime = restart ? 0 : currentTime.value
+		videoRef.value.play()
+		playing.value = true
+		updateNextQuiz()
+	}, 0)
+}
+
+const updateNextQuiz = () => {
+	if (!props.quizzes.length) return
+
+	props.quizzes.forEach((quiz) => {
+		if (typeof quiz.time == 'string' && quiz.time.includes(':')) {
+			let time = quiz.time.split(':')
+			let timeInSeconds = parseInt(time[0]) * 60 + parseInt(time[1])
+			quiz.time = timeInSeconds
+		}
+	})
+
+	props.quizzes.sort((a, b) => a.time - b.time)
+
+	const nextQuizIndex = props.quizzes.findIndex(
+		(quiz) => quiz.time > currentTime.value
+	)
+	if (nextQuizIndex !== -1) {
+		nextQuiz.value = props.quizzes[nextQuizIndex]
+	} else {
+		nextQuiz.value = {}
+	}
+}
+
 const fileURL = computed(() => {
-	if (isYoutube) {
-		let url = props.file
-		if (url.includes('watch?v=')) {
-			url = url.replace('watch?v=', 'embed/')
-		}
-		return `${url}?autoplay=0&controls=0&disablekb=1&playsinline=1&cc_load_policy=1&cc_lang_pref=auto`
-	}
 	return props.file
 })
 
-const isYoutube = computed(() => {
-	return props.type == 'video/youtube'
-})
-
 const playVideo = () => {
 	videoRef.value.play()
 	playing.value = true
@@ -148,13 +298,13 @@ const toggleMute = () => {
 }
 
 const changeCurrentTime = () => {
+	if (
+		preventSkippingVideos.data &&
+		currentTime.value > videoRef.value.currentTime
+	)
+		return
 	videoRef.value.currentTime = currentTime.value
-}
-
-const formatTime = (time) => {
-	const minutes = Math.floor(time / 60)
-	const seconds = Math.floor(time % 60)
-	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+	updateNextQuiz()
 }
 
 const toggleFullscreen = () => {
@@ -164,6 +314,13 @@ const toggleFullscreen = () => {
 		videoContainer.value.requestFullscreen()
 	}
 }
+
+const getQuizMarkerStyle = (time) => {
+	const percentage = ((time - 5) / Math.ceil(duration.value)) * 100
+	return {
+		left: `${percentage}%`,
+	}
+}
 </script>
 
 <style scoped>
@@ -183,11 +340,10 @@ iframe {
 }
 
 .duration-slider {
-	flex: 1;
 	-webkit-appearance: none;
 	appearance: none;
 	border-radius: 10px;
-	background-color: theme('colors.gray.100');
+	background-color: theme('colors.gray.600');
 	cursor: pointer;
 }
 
@@ -195,20 +351,20 @@ iframe {
 	width: 2px;
 	border-radius: 50%;
 	-webkit-appearance: none;
-	background-color: theme('colors.gray.500');
+	background-color: theme('colors.white');
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 	input[type='range'] {
 		overflow: hidden;
-		width: 150px;
+		width: 100%;
 		-webkit-appearance: none;
 	}
 
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		cursor: pointer;
-		box-shadow: -500px 0 0 500px theme('colors.gray.600');
+		box-shadow: -500px 0 0 500px theme('colors.white');
 	}
 }
 </style>

frontend/src/global.d.ts

@@ -0,0 +1,12 @@
+export {}
+
+declare global {
+  // May return string or an object with `.format(...)` when placeholders exist
+  function __(text: string): any
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    __: (text: string) => any
+  }
+}

frontend/src/index.css

@@ -1,2 +1,3 @@
 @import './assets/Inter/inter.css';
 @import 'frappe-ui/src/style.css';
+@import './styles/codemirror.css';

frontend/src/overrides/Onboarding/GettingStartedBanner.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+  >
+    <div v-if="stepsCompleted != totalSteps" class="inline-flex text-ink-gray-9 gap-2">
+      <StepsIcon class="h-4 my-0.5 shrink-0" />
+      <div class="flex flex-col text-p-sm gap-0.5">
+        <div class="font-medium">
+          {{ __('Getting started') }}
+        </div>
+        <div class="text-ink-gray-7">
+          {{ __('{0}/{1} steps').format(stepsCompleted, totalSteps) }}
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex flex-col gap-1">
+      <div class="flex items-center justify-between gap-1">
+        <div class="flex items-center gap-2 shrink-0">
+          <StepsIcon class="h-4 my-0.5" />
+          <div class="text-ink-gray-9 font-medium">
+            {{ __('You are all set') }}
+          </div>
+        </div>
+        <FeatherIcon
+          name="x"
+          class="h-4 cursor-pointer"
+          @click="() => { showHelpCenter = true; isOnboardingStepsCompleted = true }"
+        />
+      </div>
+      <div class="text-p-sm text-ink-gray-7">
+        {{ __('All steps are completed successfully') }}
+      </div>
+    </div>
+    <Button
+      v-if="stepsCompleted != totalSteps"
+      :label="stepsCompleted == 0 ? __('Start now') : __('Continue')"
+      theme="blue"
+      @click="openOnboarding"
+    >
+      <template #prefix>
+        <FeatherIcon name="chevrons-right" class="size-4" />
+      </template>
+    </Button>
+  </div>
+  <Button v-else-if="stepsCompleted != totalSteps" @click="openOnboarding">
+    <StepsIcon class="h-4 my-0.5 shrink-0" />
+  </Button>
+</template>
+<script setup>
+import StepsIcon from 'frappe-ui/frappe/Icons/StepsIcon.vue'
+import Button from 'frappe-ui/src/components/Button/Button.vue'
+import FeatherIcon from 'frappe-ui/src/components/FeatherIcon.vue'
+import { useOnboarding } from 'frappe-ui/frappe/Onboarding/onboarding'
+import { showHelpCenter } from 'frappe-ui/frappe/HelpCenter/helpCenter'
+import { showHelpModal, minimize } from 'frappe-ui/frappe/Help/help'
+
+const props = defineProps({
+  isSidebarCollapsed: { type: Boolean, default: false },
+  appName: { type: String, default: 'frappecrm' },
+})
+
+const { stepsCompleted, totalSteps, isOnboardingStepsCompleted } = useOnboarding(props.appName)
+
+const openOnboarding = () => {
+  minimize.value = false
+  showHelpModal.value = true
+}
+</script>
+

frontend/src/overrides/Onboarding/OnboardingSteps.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="flex flex-col justify-center items-center gap-1 mt-4 mb-7">
+    <component :is="logo" class="size-10 shrink-0 rounded mb-4" />
+    <div class="text-base font-medium">
+      {{ __('Welcome to {0}').format(title) }}
+    </div>
+    <div class="text-p-base font-normal">
+      {{ __('{0}/{1} steps completed').format(stepsCompleted, totalSteps) }}
+    </div>
+  </div>
+  <div class="flex flex-col gap-2.5 overflow-hidden">
+    <div class="flex justify-between items-center py-0.5">
+      <Badge
+        :label="__('{0}% completed').format(completedPercentage)"
+        :theme="completedPercentage == 100 ? 'green' : 'orange'"
+        size="lg"
+      />
+      <div class="flex">
+        <Button
+          v-if="completedPercentage != 0"
+          variant="ghost"
+          :label="__('Reset all')"
+          @click="() => resetAll(afterResetAll)"
+        />
+        <Button
+          v-if="completedPercentage != 100"
+          variant="ghost"
+          :label="__('Skip all')"
+          @click="() => skipAll(afterSkipAll)"
+        />
+      </div>
+    </div>
+    <div class="flex flex-col gap-1.5 overflow-y-auto">
+      <div
+        v-for="step in steps"
+        :key="step.title"
+        class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
+        @click.stop="() => !step.completed && !isDependent(step) && step.onClick()"
+      >
+        <component :is="isDependent(step) ? Tooltip : 'div'" :text="dependsOnTooltip(step)">
+          <div
+            class="flex gap-2 items-center"
+            :class="[
+              step.completed
+                ? 'text-ink-gray-5'
+                : isDependent(step)
+                  ? 'text-ink-gray-4'
+                  : 'text-ink-gray-8',
+            ]"
+          >
+            <component :is="step.icon" class="h-4" />
+            <div class="text-base" :class="{ 'line-through': step.completed }">
+              {{ step.title }}
+            </div>
+          </div>
+        </component>
+        <Button
+          v-if="!step.completed && !isDependent(step)"
+          :label="__('Skip')"
+          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
+          @click="() => skip(step.name, afterSkip)"
+        />
+        <Button
+          v-else-if="!isDependent(step)"
+          :label="__('Reset')"
+          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
+          @click.stop="() => reset(step.name, afterReset)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useOnboarding } from 'frappe-ui/frappe/Onboarding/onboarding'
+import Tooltip from 'frappe-ui/src/components/Tooltip/Tooltip.vue'
+import Button from 'frappe-ui/src/components/Button/Button.vue'
+import Badge from 'frappe-ui/src/components/Badge/Badge.vue'
+
+const props = defineProps({
+  appName: { type: String, default: 'frappecrm' },
+  title: { type: String, default: 'Frappe CRM' },
+  logo: { type: Object, required: true },
+  afterSkip: { type: Function, default: () => {} },
+  afterSkipAll: { type: Function, default: () => {} },
+  afterReset: { type: Function, default: () => {} },
+  afterResetAll: { type: Function, default: () => {} },
+})
+
+function isDependent(step) {
+  if (step.dependsOn && !step.completed) {
+    const dependsOnStep = steps.find((s) => s.name === step.dependsOn)
+    if (dependsOnStep && !dependsOnStep.completed) {
+      return true
+    }
+  }
+  return false
+}
+
+function dependsOnTooltip(step) {
+  if (step.dependsOn && !step.completed) {
+    const dependsOnStep = steps.find((s) => s.name === step.dependsOn)
+    if (dependsOnStep && !dependsOnStep.completed) {
+      return `You need to complete "${dependsOnStep.title}" first.`
+    }
+  }
+  return ''
+}
+
+const { steps, stepsCompleted, totalSteps, completedPercentage, skip, skipAll, reset, resetAll } =
+  useOnboarding(props.appName)
+</script>
+

frontend/src/pages/AssignmentSubmissionList.vue

@@ -145,7 +145,6 @@ const submissions = createListResource({
 	},
 })
 
-// watch changes in assignmentID, member, and status and if changes in any then reload submissions. Also update the url query params for the same
 watch([assignmentID, member, status], () => {
 	router.push({
 		query: {
@@ -167,23 +166,23 @@ const reloadSubmissions = () => {
 const submissionColumns = computed(() => {
 	return [
 		{
-			label: 'Member',
+			label: __('Member'),
 			key: 'member_name',
 			width: 1,
 		},
 		{
-			label: 'Assignment',
+			label: __('Assignment'),
 			key: 'assignment_title',
 			width: 2,
 		},
 		{
-			label: 'Submitted',
+			label: __('Submitted'),
 			key: 'creation',
 			width: 1,
 			align: 'left',
 		},
 		{
-			label: 'Status',
+			label: __('Status'),
 			key: 'status',
 			width: 1,
 			align: 'center',
@@ -194,9 +193,9 @@ const submissionColumns = computed(() => {
 const statusOptions = computed(() => {
 	return [
 		{ label: '', value: '' },
-		{ label: 'Pass', value: 'Pass' },
-		{ label: 'Fail', value: 'Fail' },
-		{ label: 'Not Graded', value: 'Not Graded' },
+		{ label: __('Pass'), value: 'Pass' },
+		{ label: __('Fail'), value: 'Fail' },
+		{ label: __('Not Graded'), value: 'Not Graded' },
 	]
 })
 
@@ -213,7 +212,7 @@ const getStatusTheme = (status) => {
 const breadcrumbs = computed(() => {
 	return [
 		{
-			label: 'Assignment Submissions',
+			label: __('Assignment Submissions'),
 		},
 	]
 })

frontend/src/pages/Assignments.vue

@@ -16,20 +16,17 @@
 			<template #prefix>
 				<Plus class="w-4 h-4" />
 			</template>
-			{{ __('New') }}
+			{{ __('Create') }}
 		</Button>
 	</header>
 
 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
 		<div class="flex items-center justify-between mb-5">
-			<div
-				v-if="assignmentCount"
-				class="text-xl font-semibold text-ink-gray-7 mb-4"
-			>
+			<div v-if="assignmentCount" class="text-lg font-semibold text-ink-gray-9">
 				{{ __('{0} Assignments').format(assignmentCount) }}
 			</div>
 			<div
-				v-if="assignments.data?.length || assigmentCount > 0"
+				v-if="assignments.data?.length || assignmentCount > 0"
 				class="grid grid-cols-2 gap-5"
 			>
 				<FormControl
@@ -60,7 +57,7 @@
 			}"
 		>
 		</ListView>
-		<EmptyState v-else type="Assignments" />
+		<EmptyState v-else :type="__('Assignments').toLowerCase()" />
 		<div
 			v-if="assignments.data && assignments.hasNextPage"
 			class="flex justify-center my-5"
@@ -201,7 +198,7 @@ const assignmentTypes = computed(() => {
 
 const breadcrumbs = computed(() => [
 	{
-		label: 'Assignments',
+		label: __('Assignments'),
 		route: { name: 'Assignments' },
 	},
 ])

frontend/src/pages/Batch.vue

@@ -70,7 +70,10 @@
 								<BatchStudents :batch="batch" />
 							</div>
 							<div v-else-if="tab.label == 'Classes'">
-								<LiveClass :batch="batch.data.name" />
+								<LiveClass
+									:batch="batch.data.name"
+									:zoomAccount="batch.data.zoom_account"
+								/>
 							</div>
 							<div v-else-if="tab.label == 'Assessments'">
 								<Assessments :batch="batch.data.name" />
@@ -88,56 +91,61 @@
 									:scrollToBottom="false"
 								/>
 							</div>
-							<div v-else-if="tab.label == 'Feedback'">
-								<BatchFeedback :batch="batch.data.name" />
-							</div>
 						</div>
 					</template>
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-ink-gray-7 font-semibold mb-4">
-					{{ __('About this batch') }}:
-				</div>
-				<div
-					v-html="batch.data.description"
-					class="leading-5 mb-4 text-ink-gray-7"
-				></div>
-
-				<div class="flex items-center avatar-group overlap mb-5">
-					<div
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': batch.data.instructors.length > 1,
-						}"
-					>
-						<UserAvatar
-							v-for="instructor in batch.data.instructors"
-							:user="instructor"
-						/>
+				<div class="mb-10">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('About this batch') }}
+					</div>
+					<div
+						v-html="batch.data.description"
+						class="leading-5 mb-4 text-ink-gray-7"
+					></div>
+
+					<div class="flex items-center avatar-group overlap mb-5">
+						<div
+							class="h-6 mr-1"
+							:class="{
+								'avatar-group overlap': batch.data.instructors.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in batch.data.instructors"
+								:user="instructor"
+							/>
+						</div>
+						<CourseInstructors :instructors="batch.data.instructors" />
+					</div>
+					<DateRange
+						:startDate="batch.data.start_date"
+						:endDate="batch.data.end_date"
+						class="mb-3"
+					/>
+					<div class="flex items-center mb-3 text-ink-gray-7">
+						<Clock class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ formatTime(batch.data.start_time) }} -
+							{{ formatTime(batch.data.end_time) }}
+						</span>
+					</div>
+					<div
+						v-if="batch.data.timezone"
+						class="flex items-center mb-3 text-ink-gray-7"
+					>
+						<Globe class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ batch.data.timezone }}
+						</span>
 					</div>
-					<CourseInstructors :instructors="batch.data.instructors" />
 				</div>
-				<DateRange
-					:startDate="batch.data.start_date"
-					:endDate="batch.data.end_date"
-					class="mb-3"
-				/>
-				<div class="flex items-center mb-4 text-ink-gray-7">
-					<Clock class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ formatTime(batch.data.start_time) }} -
-						{{ formatTime(batch.data.end_time) }}
-					</span>
-				</div>
-				<div
-					v-if="batch.data.timezone"
-					class="flex items-center mb-4 text-ink-gray-7"
-				>
-					<Globe class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ batch.data.timezone }}
-					</span>
+				<div v-if="dayjs().isSameOrAfter(dayjs(batch.data.start_date))">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('Feedback') }}
+					</div>
+					<BatchFeedback :batch="batch.data?.name" />
 				</div>
 			</div>
 			<AnnouncementModal
@@ -234,6 +242,7 @@ import Discussions from '@/components/Discussions.vue'
 import DateRange from '@/components/Common/DateRange.vue'
 import BulkCertificates from '@/components/Modals/BulkCertificates.vue'
 import BatchFeedback from '@/components/BatchFeedback.vue'
+import dayjs from 'dayjs/esm'
 
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
@@ -277,11 +286,6 @@ const tabs = computed(() => {
 		label: 'Discussions',
 		icon: MessageCircle,
 	})
-
-	batchTabs.push({
-		label: 'Feedback',
-		icon: ClipboardPen,
-	})
 	return batchTabs
 })
 
@@ -313,10 +317,10 @@ const batch = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let crumbs = [{ label: 'Batches', route: { name: 'Batches' } }]
+	let crumbs = [{ label: __('Batches'), route: { name: 'Batches' } }]
 	if (!isStudent.value) {
 		crumbs.push({
-			label: 'Details',
+			label: __('Details'),
 			route: {
 				name: 'BatchDetail',
 				params: {

frontend/src/pages/BatchDetail.vue

@@ -37,14 +37,7 @@
 					<BatchOverlay :batch="batch" />
 				</div>
 			</div>
-			<!-- <div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
-				<div class="order-2 lg:order-none">
-					
-				</div>
-				<div class="order-1 lg:order-none">
-					<BatchOverlay :batch="batch" />
-				</div>
-			</div> -->
+			<BatchOverlay :batch="batch" class="md:hidden mt-5" />
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
 					<div class="text-2xl font-semibold">
@@ -127,7 +120,7 @@ const courses = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let items = [{ label: 'Batches', route: { name: 'Batches' } }]
+	let items = [{ label: __('Batches'), route: { name: 'Batches' } }]
 	items.push({
 		label: batch?.data?.title,
 		route: { name: 'BatchDetail', params: { batchName: batch?.data?.name } },

frontend/src/pages/BatchForm.vue

@@ -4,9 +4,16 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<Button variant="solid" @click="saveBatch()">
-				{{ __('Save') }}
-			</Button>
+			<div class="flex items-center space-x-2">
+				<Button v-if="batchDetail.data?.name" @click="deleteBatch">
+					<template #icon>
+						<Trash2 class="size-4 stroke-1.5" />
+					</template>
+				</Button>
+				<Button variant="solid" @click="saveBatch()">
+					{{ __('Save') }}
+				</Button>
+			</div>
 		</header>
 		<div class="py-5">
 			<div class="px-20 pb-5 space-y-5 border-b mb-5">
@@ -23,10 +30,10 @@
 						/>
 						<MultiSelect
 							v-model="instructors"
-							doctype="User"
+							doctype="Course Evaluator"
 							:label="__('Instructors')"
 							:required="true"
-							:onCreate="(close) => openSettings('Members', close)"
+							:onCreate="(close) => openSettings('Evaluators', close)"
 							:filters="{ ignore_user_type: 1 }"
 						/>
 					</div>
@@ -153,6 +160,21 @@
 							doctype="Email Template"
 							:label="__('Email Template')"
 							v-model="batch.confirmation_email_template"
+							:onCreate="
+								(value, close) => {
+									openSettings('Email Templates', close)
+								}
+							"
+						/>
+						<Link
+							doctype="LMS Zoom Settings"
+							:label="__('Zoom Account')"
+							v-model="batch.zoom_account"
+							:onCreate="
+								(value, close) => {
+									openSettings('Zoom Accounts', close)
+								}
+							"
 						/>
 					</div>
 					<div class="space-y-5">
@@ -194,7 +216,10 @@
 									v-slot="{ file, progress, uploading, openFileSelector }"
 								>
 									<div class="flex items-center">
-										<div class="border rounded-md w-fit py-5 px-20">
+										<div
+											class="border rounded-md w-fit py-5 px-20 cursor-pointer"
+											@click="openFileSelector"
+										>
 											<Image class="size-5 stroke-1 text-ink-gray-7" />
 										</div>
 										<div class="ml-4">
@@ -258,16 +283,38 @@
 					/>
 				</div>
 			</div>
+
+			<div class="px-20 pb-5 space-y-5 border-b">
+				<div class="text-lg text-ink-gray-9 font-semibold">
+					{{ __('Meta Tags') }}
+				</div>
+				<div class="space-y-5">
+					<FormControl
+						v-model="meta.description"
+						:label="__('Meta Description')"
+						type="textarea"
+						:rows="7"
+					/>
+					<FormControl
+						v-model="meta.keywords"
+						:label="__('Meta Keywords')"
+						type="textarea"
+						:rows="7"
+						:placeholder="__('Comma separated keywords for SEO')"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import {
 	computed,
-	onMounted,
+	getCurrentInstance,
 	inject,
-	reactive,
+	onMounted,
 	onBeforeUnmount,
+	reactive,
 	ref,
 } from 'vue'
 import {
@@ -279,20 +326,30 @@ import {
 	createResource,
 	usePageMeta,
 	toast,
+	call,
+	Toast,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { Image } from 'lucide-vue-next'
+import { Image, Trash2 } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import Link from '@/components/Controls/Link.vue'
-import { openSettings } from '@/utils'
+import {
+	openSettings,
+	getMetaInfo,
+	updateMetaInfo,
+	validateFile,
+} from '@/utils'
 
 const router = useRouter()
 const user = inject('$user')
 const { brand } = sessionStore()
 const { updateOnboardingStep } = useOnboarding('learning')
+const instructors = ref([])
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	batchName: {
@@ -322,20 +379,29 @@ const batch = reactive({
 	paid_batch: false,
 	currency: '',
 	amount: 0,
+	zoom_account: '',
 })
 
-const instructors = ref([])
+const meta = reactive({
+	description: '',
+	keywords: '',
+})
 
 onMounted(() => {
 	if (!user.data) window.location.href = '/login'
 	if (props.batchName != 'new') {
-		batchDetail.reload()
+		fetchBatchInfo()
 	} else {
 		capture('batch_form_opened')
 	}
 	window.addEventListener('keydown', keyboardShortcut)
 })
 
+const fetchBatchInfo = () => {
+	batchDetail.reload()
+	getMetaInfo('batches', props.batchName, meta)
+}
+
 const keyboardShortcut = (e) => {
 	if (
 		e.key === 's' &&
@@ -449,7 +515,7 @@ const createNewBatch = () => {
 						localStorage.setItem('firstBatch', data.name)
 					})
 				}
-
+				updateMetaInfo('batches', data.name, meta)
 				capture('batch_created')
 				router.push({
 					name: 'BatchDetail',
@@ -470,6 +536,7 @@ const editBatchDetails = () => {
 		{},
 		{
 			onSuccess(data) {
+				updateMetaInfo('batches', data.name, meta)
 				router.push({
 					name: 'BatchDetail',
 					params: {
@@ -484,6 +551,38 @@ const editBatchDetails = () => {
 	)
 }
 
+const deleteBatch = () => {
+	$dialog({
+		title: __('Confirm your action to delete'),
+		message: __(
+			'Deleting this batch will also delete all its data including enrolled students, linked courses, assessments, feedback and discussions. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick({ close }) {
+					trashBatch(close)
+					close()
+				},
+			},
+		],
+	})
+}
+
+const trashBatch = (close) => {
+	call('lms.lms.api.delete_batch', {
+		batch: props.batchName,
+	}).then(() => {
+		toast.success(__('Batch deleted successfully'))
+		close()
+		router.push({
+			name: 'Batches',
+		})
+	})
+}
+
 const saveImage = (file) => {
 	batch.image = file
 }
@@ -492,13 +591,6 @@ const removeImage = () => {
 	batch.image = null
 }
 
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	}
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/pages/Batches.vue

@@ -14,20 +14,18 @@
 				<template #prefix>
 					<Plus class="h-4 w-4 stroke-1.5" />
 				</template>
-				{{ __('New') }}
+				{{ __('Create') }}
 			</Button>
 		</router-link>
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="batchCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
-				v-if="batches.data?.length || batchCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
@@ -72,7 +70,7 @@
 				<BatchCard :batch="batch" />
 			</router-link>
 		</div>
-		<EmptyState v-else-if="!batches.list.loading" type="Batches" />
+		<EmptyState v-else-if="!batches.list.loading" :type="__('Batches').toLowerCase()" />
 
 		<div
 			v-if="!batches.list.loading && batches.hasNextPage"
@@ -115,12 +113,10 @@ const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
 const readOnlyMode = window.read_only_mode
-const batchCount = ref(0)
 
 onMounted(() => {
 	setFiltersFromQuery()
 	updateBatches()
-	getBatchCount()
 	categories.value = [
 		{
 			label: '',
@@ -298,14 +294,6 @@ const canCreateBatch = () => {
 	return false
 }
 
-const getBatchCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Batch',
-	}).then((data) => {
-		batchCount.value = data
-	})
-}
-
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),

frontend/src/pages/Billing.vue

@@ -80,7 +80,7 @@
 							/>
 							<FormControl :label="__('City')" v-model="billingDetails.city" />
 							<FormControl
-								:label="__('State')"
+								:label="__('State/Province')"
 								v-model="billingDetails.state"
 							/>
 						</div>
@@ -303,6 +303,7 @@ const validateAddress = () => {
 		'Gujarat',
 		'Haryana',
 		'Himachal Pradesh',
+		'Jammu and Kashmir',
 		'Jharkhand',
 		'Karnataka',
 		'Kerala',