chore(release): Bumped to Version 2.18.0

fix: quiz api issue

.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 install libcups2-dev redis-server mariadb-client-10.6
+sudo apt-get install libcups2-dev redis-server mariadb-client
 
 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/build.yml

@@ -0,0 +1,64 @@
+name: Build Container Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        arch: [amd64, arm64]
+
+    permissions:
+      packages: write
+
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/${{ matrix.arch }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          
+      - name: Set Branch
+        run: |
+          export APPS_JSON='[{"url": "https://github.com/frappe/lms","branch": "main"}]'
+          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
+          echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
+
+      - name: Set Image Tag
+        run: |
+          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe_docker
+          path: builds
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: builds
+          file: builds/images/layered/Containerfile
+          tags: >
+            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
+            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
+          build-args: |
+            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
+            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"

.github/workflows/ui-tests.yml

@@ -24,7 +24,7 @@ jobs:
 
     services:
       mariadb:
-        image: mariadb:10.6
+        image: mariadb:10.8
         env:
           MARIADB_ROOT_PASSWORD: 123
         ports:

README.md

@@ -1,115 +1,174 @@
-<p align="center">
-  <a href="https://www.frappelms.com/">
-    <img src="https://frappe.io/files/lms.png" alt="Frappe LMS" width="50px" height="50px">
-  </a>
-  <p align="center">Easy to use, open source, learning management system.</p>
-</p>
+<div align="center" markdown="1">
 
+<img src=".github/lms-logo.png" alt="Frappe Learning logo" width="80" height="80"/>
+<h1>Frappe Learning</h1>
 
-&nbsp;
+**Easy to use, open source, Learning Management System**
 
-<p align="center">
-    <a href="https://www.producthunt.com/posts/frappe-lms?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_souce=badge-frappe&#0045;lms" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=396079&theme=dark&period=weekly&topic_id=204" alt="Frappe&#0032;LMS - Easy&#0032;to&#0032;use&#0044;&#0032;100&#0037;&#0032;open&#0032;source&#0032;learning&#0032;management&#0032;system | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</p>
+![Tests](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress)
 
-
-<div align="center" style="max-height: 40px;">
-    <a href="https://frappecloud.com/lms/signup">
-        <img src=".github/try-on-f-cloud.svg" height="40">
-    </a>
 </div>
 
-&nbsp;
 
-<p align="center">
-	<a href="https://dashboard.cypress.io/projects/vandxn/runs">
-    <img alt="cypress" src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress">
-  </a>
-  <a href="https://github.com/frappe/lms/blob/main/LICENSE">
-    <img alt="license" src="https://img.shields.io/badge/license-AGPLv3-blue">
-  </a>
-</p>
+<div align="center">
+	<img src=".github/hero.png?v=5" alt="Hero Image" width="72%" />
+</div>
+<br />
+<div align="center">
+	<a href="https://frappe.io/learning">Website</a>
+	-
+	<a href="https://docs.frappe.io/learning">Documentation</a>
+</div>
 
-<img width="1402" alt="Lesson" src="https://frappelms.com/files/banner.png">
+## Frappe Learning
+Frappe Learning is an easy-to-use learning system that helps you bring structure to your content.
+
+### Motivation
+In 2021, we were looking for a Learning Management System to launch [Mon.School](https://mon.school) for FOSS United. We checked out Moodle, but it didn’t feel right. The forms were unnecessarily lengthy and the UI was confusing. It shouldn't be this hard to create a course right? So I started making a learning system for Mon.School which soon became a product in itself. The aim is to have a simple platform that anyone can use to launch a course of their own and make knowledge sharing easier.
+
+### Key Features
+
+- **Structured Learning**: Design a course with a 3-level hierarchy, where your courses have chapters and you can group your lessons within these chapters. This ensures that the context of the lesson is set by the chapter.
+
+- **Live Classes**: Group learners into batches based on courses and duration. You can then create Zoom live class for these batches right from the app. Learners get to see the list of live classes they have to take as a part of this batch.
+
+- **Quizzes and Assignments**: Create quizzes where questions can have single-choice, multiple-choice options, or can be open ended. Instructors can also add assignments which learners can submit as PDF's or Documents.
+
+- **Getting Certified**: Once a learner has completed the course or batch, you can grant them a certificate. The app provides an inbuilt certificate template. You can use this or else create a template of your own and use that instead.
 
 <details>
-	<summary>Show more screenshots</summary>
-	<img width="1520" alt="ss1" src="https://user-images.githubusercontent.com/31363128/210056046-584bc8aa-d28c-4514-b031-73817012837d.png">
-	<img width="830" alt="ss2" src="https://user-images.githubusercontent.com/31363128/210056097-36849182-6db0-43a2-8c62-5333cd2aedf4.png">
-	<img width="941" alt="ss3" src="https://user-images.githubusercontent.com/31363128/210056134-01a7c429-1ef4-434e-9d43-128dda35d7e5.png">
+<summary>View Screenshots</summary>
+
+
+![Batch](.github/batch.png)
+<div align="center">
+	<sub>
+		Create batches to group your learners
+	</sub>
+</div>
+<br>
+
+
+![Quiz](.github/quiz.png)
+<div align="center">
+	<sub>
+		Evaluate their knowledge by quizzes
+	</sub>
+</div>
+<br>
+
+
+![Cerficicate](.github/certificate.png)
+<div align="center">
+	<sub>
+		Autenticate their work with certification
+	</sub>
+</div>
 </details>
 
-Frappe LMS is an easy-to-use, open-source learning management system. You can use it to create and share online courses. The app has a clear UI that helps students focus only on what's important and assists in distraction-free learning.
 
-You can create courses and lessons through simple forms. Lessons can be in the form of text, videos, quizzes or a combination of all these. You can keep your students engaged with quizzes to help revise and test the concepts learned. Course Instructors and Students can reach out to each other through the discussions section available for each lesson and get queries resolved.
+### Under the Hood
 
-## Features
-- Create online courses. 📚
-- Add detailed descriptions and preview videos to the course. 🎬
-- Add videos, quizzes, and assignments to your lessons and make them interesting and interactive 📝
-- Discussions section below each lesson where instructors and students can interact with each other. 💬
-- Create batches to group your students based on courses and track their progress 🏛
-- Statistics dashboard that provides all important numbers at a glimpse. 📈
-- Job Board where users can post and look for jobs. 💼
-- People directory with each person's profile page 👨‍👩‍👧‍👦
-- Set cover image, profile photo, short bio, and other professional information. 🦹🏼‍♀️
-- Simple layout that optimizes readability 🤓
-- Delightful user experience in overall usage ✨
+- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework.
 
-## Tech Stack
+- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
 
-Frappe LMS is built on [Frappe Framework](https://frappeframework.com) which is a batteries-included python web framework.
-These are some of the tools it's built on:
-- [Python](https://www.python.org)
-- [Redis](https://redis.io/)
-- [MariaDB](https://mariadb.org/)
-- [Socket.io](https://socket.io/)
-
-## Local Setup
-
-### Docker
-You need Docker, docker-compose, and git setup on your machine. Refer to [Docker documentation](https://docs.docker.com/). After that, run the following commands:
-```
-git clone https://github.com/frappe/lms
-cd apps/lms/docker
-docker-compose up
-```
-
-Wait for some time until the setup script creates a site. After that, you can access `http://localhost:8000` in your browser and the app's login screen should appear.
-You'll have to go through the setup wizard to set up the website the first time you access it. Log in using the following credentials to complete the setup wizard.
-
-```
-Username: Administrator
-password: admin
-```
-
-### Frappe Bench
-
-Currently, this app depends on the `develop` branch of [frappe](https://github.com/frappe/frappe).
-
-1. Setup frappe-bench by following [this guide](https://frappeframework.com/docs/v14/user/en/installation)
-1. In the frappe-bench directory, run `bench start` and keep it running. Open a new terminal session and cd into the `frappe-bench` directory.
-1. Run the following commands:
-    ```sh
-    bench new-site lms.test
-    bench get-app lms
-    bench --site lms.test install-app lms
-    bench --site lms.test add-to-hosts
-
- 1. Now, you can access the site at `http://lms.test:8000`
-
-
-## Deployment
-Frappe LMS is an app built on top of the Frappe Framework. So, you can follow any deployment guide for hosting a Frappe Framework-based site.
+## Production Setup
 
 ### Managed Hosting
-Frappe LMS can be deployed in a few clicks on [Frappe Cloud](https://frappecloud.com/marketplace/apps/lms).
 
-### Self-hosting
-If you want to self-host, you can follow official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
+You can try [Frappe Cloud](https://frappecloud.com), a simple, user-friendly and sophisticated [open-source](https://github.com/frappe/press) platform to host Frappe applications with peace of mind.
 
-## Bugs and Feature Requests
-If you find any bugs or have a feature idea for the app, feel free to report them here on [GitHub Issues](https://github.com/frappe/lms/issues). Make sure you share enough information (app screenshots, browser console screenshots, stack traces, etc) for project maintainers.
+It takes care of installation, setup, upgrades, monitoring, maintenance and support of your Frappe deployments. It is a fully featured developer platform with an ability to manage and control multiple Frappe deployments.
 
-## License
-Distributed under [GNU AFFERO GENERAL PUBLIC LICENSE](license.txt)
+<div>
+	<a href="https://frappecloud.com/lms/signup" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/try-on-fc-white.png">
+			<img src="https://frappe.io/files/try-on-fc-black.png" alt="Try on Frappe Cloud" height="28" />
+		</picture>
+	</a>
+</div>
+
+### Self Hosting
+
+Follow these steps to set up Frappe Learning in production:
+
+**Step 1**: Download the easy install script
+
+```bash
+wget https://frappe.io/easy-install.py
+```
+
+**Step 2**: Run the deployment command
+
+```bash
+python3 ./easy-install.py deploy \
+    --project=learning_prod_setup \
+    --email=your_email.example.com \
+    --image=ghcr.io/frappe/lms \
+    --version=stable \
+    --app=lms \
+    --sitename subdomain.domain.tld
+```
+
+Replace the following parameters with your values:
+- `your_email.example.com`: Your email address
+- `subdomain.domain.tld`: Your domain name where Learning will be hosted
+
+The script will set up a production-ready instance of Frappe Learning with all the necessary configurations in about 5 minutes.
+
+## Development Setup
+
+### Docker
+
+You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, follow below steps:
+
+**Step 1**: Setup folder and download the required files
+
+    mkdir frappe-learning
+    cd frappe-learning
+
+    # Download the docker-compose file
+    wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/lms/develop/docker/docker-compose.yml
+
+    # Download the setup script
+    wget -O init.sh https://raw.githubusercontent.com/frappe/lms/develop/docker/init.sh
+
+**Step 2**: Run the container and daemonize it
+
+    docker compose up -d
+
+**Step 3**: The site [http://lms.localhost:8000/lms](http://lms.localhost:8000/lms) should now be available. The default credentials are:
+- Username: Administrator
+- Password: admin
+
+### Local
+
+To setup the repository locally follow the steps mentioned below:
+
+1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
+1. Start the server by running `bench start`
+1. In a separate terminal window, create a new site by running `bench new-site learning.test`
+1. Map your site to localhost with the command `bench --site learning.test add-to-hosts`
+1. Get the Learning app. Run `bench get-app https://github.com/frappe/lms`
+1. Run `bench --site learning.test install-app lms`.
+1. Now open the URL `http://learning.test:8000/lms` in your browser, you should see the app running
+
+## Learn and connect
+
+- [Telegram Public Group](https://t.me/frappelms)
+- [Discuss Forum](https://discuss.frappe.io/c/lms/70)
+- [Documentation](https://docs.frappe.io/learning)
+- [YouTube](https://www.youtube.com/channel/UCn3bV5kx77HsVwtnlCeEi_A)
+
+<br>
+<br>
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

cypress.config.js

@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://test_site_ui:8000",
+		baseUrl: "http://lms1:8000",
 	},
 });

cypress/e2e/course_creation.cy.js

@@ -5,7 +5,7 @@ describe("Course Creation", () => {
 		cy.visit("/lms/courses");
 
 		// Create a course
-		cy.get("a").contains("New").click();
+		cy.get("header").children().last().children().last().click();
 		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
 
@@ -73,7 +73,7 @@ describe("Course Creation", () => {
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Add Chapter").click();
+				cy.button("Create").click();
 			});
 
 		// Add Lesson

docker/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 name: lms
 services:
   mariadb:
-    image: mariadb:10.6
+    image: mariadb:10.8
     command:
       - --character-set-server=utf8mb4
       - --collation-server=utf8mb4_unicode_ci

frontend/package.json

@@ -18,21 +18,25 @@
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
+    "@editorjs/table": "^2.4.2",
     "ace-builds": "^1.36.2",
+    "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.69",
+    "frappe-ui": "^0.1.89",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
     "socket.io-client": "^4.7.2",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
+    "vue3-apexcharts": "^1.8.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {

frontend/src/components/Annoucements.vue

@@ -25,7 +25,7 @@
 	</div>
 </template>
 <script setup>
-import { createListResource, Avatar } from 'frappe-ui'
+import { createResource, Avatar } from 'frappe-ui'
 import { timeAgo } from '@/utils'
 
 const props = defineProps({
@@ -35,24 +35,15 @@ const props = defineProps({
 	},
 })
 
-const communications = createListResource({
-	doctype: 'Communication',
-	fields: [
-		'subject',
-		'content',
-		'recipients',
-		'cc',
-		'communication_date',
-		'sender',
-		'sender_full_name',
-	],
-	filters: {
-		reference_doctype: 'LMS Batch',
-		reference_name: props.batch,
+const communications = createResource({
+	url: 'lms.lms.api.get_announcements',
+	makeParams(value) {
+		return {
+			batch: props.batch,
+		}
 	},
-	orderBy: 'communication_date desc',
 	auto: true,
-	cache: ['batch', props.batch],
+	cache: ['announcement', props.batch],
 })
 </script>
 <style>

frontend/src/components/AppSidebar.vue

@@ -1,18 +1,18 @@
 <template>
 	<div
 		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
+		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
 			class="flex flex-col overflow-hidden"
-			:class="isSidebarCollapsed ? 'items-center' : ''"
+			:class="sidebarStore.isSidebarCollapsed ? 'items-center' : ''"
 		>
-			<UserDropdown :isCollapsed="isSidebarCollapsed" />
+			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
 					v-for="link in sidebarLinks"
 					:link="link"
-					:isCollapsed="isSidebarCollapsed"
+					:isCollapsed="sidebarStore.isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
 			</div>
@@ -22,11 +22,11 @@
 			>
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
-					:class="isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
 					@click="showWebPages = !showWebPages"
 				>
 					<div
-						v-if="!isSidebarCollapsed"
+						v-if="!sidebarStore.isSidebarCollapsed"
 						class="flex items-center text-sm text-gray-600 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
@@ -53,7 +53,7 @@
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
 						:link="link"
-						:isCollapsed="isSidebarCollapsed"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
 						class="mx-2 my-0.5"
 						:showControls="isModerator ? true : false"
 						@openModal="openPageModal"
@@ -64,17 +64,19 @@
 		</div>
 		<SidebarLink
 			:link="{
-				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
+				label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
 			}"
-			:isCollapsed="isSidebarCollapsed"
-			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			:isCollapsed="sidebarStore.isSidebarCollapsed"
+			@click="toggleSidebar()"
 			class="m-2"
 		>
 			<template #icon>
 				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 					<CollapseSidebar
 						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+						:class="{
+							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						}"
 					/>
 				</span>
 			</template>
@@ -96,12 +98,15 @@ import { ref, onMounted, inject, watch } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
+import { useSidebar } from '@/stores/sidebar'
+import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 
 const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
+let sidebarStore = useSidebar()
 const socket = inject('$socket')
 const unreadCount = ref(0)
 const sidebarLinks = ref(getSidebarLinks())
@@ -110,6 +115,7 @@ const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const showWebPages = ref(false)
+const settingsStore = useSettings()
 
 onMounted(() => {
 	socket.on('publish_lms_notifications', (data) => {
@@ -179,6 +185,48 @@ const addQuizzes = () => {
 	}
 }
 
+const addAssignments = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.push({
+			label: 'Assignments',
+			icon: 'Pencil',
+			to: 'Assignments',
+			activeFor: ['Assignments', 'AssignmentForm'],
+		})
+	}
+}
+
+const addPrograms = () => {
+	let activeFor = ['Programs', 'ProgramForm']
+	let index = 1
+	let canAddProgram = false
+
+	if (
+		!isInstructor.value &&
+		!isModerator.value &&
+		settingsStore.learningPaths.data
+	) {
+		sidebarLinks.value = sidebarLinks.value.filter(
+			(link) => link.label !== 'Courses'
+		)
+		activeFor.push('CourseDetail')
+		activeFor.push('Lesson')
+		index = 0
+		canAddProgram = true
+	} else if (isInstructor.value || isModerator.value) {
+		canAddProgram = true
+	}
+
+	if (canAddProgram) {
+		sidebarLinks.value.splice(index, 0, {
+			label: 'Programs',
+			icon: 'Route',
+			to: 'Programs',
+			activeFor: activeFor,
+		})
+	}
+}
+
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link
@@ -210,9 +258,13 @@ watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
+		addPrograms()
 		addQuizzes()
+		addAssignments()
 	}
 })
 
-let isSidebarCollapsed = ref(getSidebarFromStorage())
+const toggleSidebar = () => {
+	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+}
 </script>

frontend/src/components/AssessmentPlugin.vue

@@ -0,0 +1,75 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'xl',
+		}"
+	>
+		<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>
+				<div>
+					<Link
+						v-if="type == 'quiz'"
+						v-model="quiz"
+						doctype="LMS Quiz"
+						:label="__('Select a quiz')"
+						:onCreate="(value, close) => redirectToForm()"
+					/>
+					<Link
+						v-else
+						v-model="assignment"
+						doctype="LMS Assignment"
+						:label="__('Select an assignment')"
+						: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 { onMounted, ref, nextTick } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = ref(false)
+const quiz = ref(null)
+const assignment = ref(null)
+
+const props = defineProps({
+	type: {
+		type: String,
+		required: true,
+	},
+	onAddition: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	show.value = true
+})
+
+const addAssessment = () => {
+	props.onAddition(props.type == 'quiz' ? quiz.value : assignment.value)
+	show.value = false
+}
+
+const redirectToForm = () => {
+	if (props.type == 'quiz') window.open('/lms/quizzes/new', '_blank')
+	else window.open('/lms/assignments/new', '_blank')
+}
+</script>

frontend/src/components/Assessments.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<div class="flex items-center justify-between">
-			<div class="text-lg font-semibold mb-4">
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-lg font-semibold">
 				{{ __('Assessments') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="showModal = true">
@@ -19,6 +19,7 @@
 				:options="{
 					showTooltip: false,
 					getRowRoute: (row) => getRowRoute(row),
+					selectable: user.data?.is_student ? false : true,
 				}"
 			>
 				<ListHeader
@@ -38,7 +39,18 @@
 					<ListRow :row="row" v-for="row in assessments.data">
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
-								<div>
+								<div v-if="column.key == 'assessment_type'">
+									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+								</div>
+								<div v-else-if="column.key == 'title'">
+									{{ row[column.key] }}
+								</div>
+								<div v-else-if="isNaN(row[column.key])">
+									<Badge :theme="getStatusTheme(row[column.key])">
+										{{ row[column.key] }}
+									</Badge>
+								</div>
+								<div v-else>
 									{{ row[column.key] }}
 								</div>
 							</ListRowItem>
@@ -80,6 +92,7 @@ import {
 	ListSelectBanner,
 	createResource,
 	Button,
+	Badge,
 } from 'frappe-ui'
 import { inject, ref } from 'vue'
 import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
@@ -145,7 +158,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: row.submission.name,
 				},
 			}
@@ -153,7 +166,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: 'new',
 				},
 			}
@@ -177,20 +190,33 @@ const getAssessmentColumns = () => {
 		{
 			label: 'Assessment',
 			key: 'title',
+			width: '25rem',
 		},
 		{
 			label: 'Type',
 			key: 'assessment_type',
+			width: '15rem',
 		},
 	]
 
 	if (!user.data?.is_moderator) {
 		columns.push({
-			label: 'Status/Score',
+			label: 'Status/Percentage',
 			key: 'status',
-			align: 'center',
+			align: 'left',
+			width: '10rem',
 		})
 	}
 	return columns
 }
+
+const getStatusTheme = (status) => {
+	if (status === 'Pass') {
+		return 'green'
+	} else if (status === 'Not Graded') {
+		return 'orange'
+	} else {
+		return 'red'
+	}
+}
 </script>

frontend/src/components/Assignment.vue

@@ -0,0 +1,448 @@
+<template>
+	<div
+		v-if="assignment.data"
+		class="grid grid-cols-[68%,32%] h-full"
+		:class="{ 'border rounded-lg': !showTitle }"
+	>
+		<div class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]">
+			<div v-if="showTitle" class="text-lg font-semibold mb-5">
+				<div v-if="submissionName === 'new'">
+					{{ __('Submission by') }} {{ user.data?.full_name }}
+				</div>
+				<div v-else>
+					{{ __('Submission by') }} {{ submissionResource.doc?.member_name }}
+				</div>
+			</div>
+			<div class="text-sm text-gray-600 font-medium mb-2">
+				{{ __('Question') }}:
+			</div>
+			<div
+				v-html="assignment.data.question"
+				class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
+			></div>
+		</div>
+
+		<div class="flex flex-col">
+			<div class="p-5">
+				<div class="flex items-center justify-between mb-4">
+					<div class="font-semibold">
+						{{ __('Submission') }}
+					</div>
+					<div class="flex items-center space-x-2">
+						<Badge v-if="isDirty" theme="orange">
+							{{ __('Not Saved') }}
+						</Badge>
+						<Badge
+							v-else-if="submissionResource.doc?.status"
+							:theme="statusTheme"
+							size="lg"
+						>
+							{{ submissionResource.doc?.status }}
+						</Badge>
+						<Button variant="solid" @click="submitAssignment()">
+							{{ __('Save') }}
+						</Button>
+					</div>
+				</div>
+				<div
+					v-if="
+						submissionName != 'new' &&
+						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
+						submissionResource.doc?.owner == user.data?.name
+					"
+					class="bg-blue-100 p-3 rounded-md leading-5 text-sm mb-4"
+				>
+					{{ __("You've successfully submitted the assignment.") }}
+					{{
+						__(
+							"Once the moderator grades your submission, you'll find the details here."
+						)
+					}}
+					{{ __('Feel free to make edits to your submission if needed.') }}
+				</div>
+				<div v-if="showUploader()">
+					<div class="text-xs text-gray-600 mt-1 mb-2">
+						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
+					</div>
+					<FileUploader
+						v-if="!submissionFile"
+						:fileTypes="getType()"
+						:validateFile="validateFile"
+						@success="(file) => saveSubmission(file)"
+					>
+						<template #default="{ uploading, progress, openFileSelector }">
+							<Button @click="openFileSelector" :loading="uploading">
+								{{
+									uploading
+										? __('Uploading {0}%').format(progress)
+										: __('Upload File')
+								}}
+							</Button>
+						</template>
+					</FileUploader>
+					<div v-else>
+						<div class="flex items-center">
+							<div class="border rounded-md p-2 mr-2">
+								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							</div>
+							<a
+								:href="submissionFile.file_url"
+								target="_blank"
+								class="flex flex-col cursor-pointer !no-underline"
+							>
+								<span>
+									{{ submissionFile.file_name }}
+								</span>
+								<span class="text-sm text-gray-500 mt-1">
+									{{ getFileSize(submissionFile.file_size) }}
+								</span>
+							</a>
+							<X
+								v-if="canModifyAssignment"
+								@click="removeSubmission()"
+								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							/>
+						</div>
+					</div>
+				</div>
+				<div v-else-if="assignment.data.type == 'URL'">
+					<div class="text-xs text-gray-600 mb-1">
+						{{ __('Enter a URL') }}
+					</div>
+					<FormControl
+						v-model="answer"
+						type="text"
+						:readonly="!canModifyAssignment"
+					/>
+				</div>
+				<div v-else>
+					<div class="text-sm mb-4">
+						{{ __('Write your answer here') }}
+					</div>
+					<TextEditor
+						:content="answer"
+						@change="(val) => (answer = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+					/>
+				</div>
+
+				<div
+					v-if="
+						user.data?.name == submissionResource.doc?.owner &&
+						submissionResource.doc?.comments
+					"
+					class="mt-8 p-3 bg-blue-100 rounded-md"
+				>
+					<div class="text-sm text-gray-600 font-medium mb-2">
+						{{ __('Comments by Evaluator') }}:
+					</div>
+					<div class="leading-5">
+						{{ submissionResource.doc.comments }}
+					</div>
+				</div>
+
+				<!-- Grading -->
+				<div v-if="canGradeSubmission" class="mt-8 space-y-4">
+					<div class="font-semibold mb-2">
+						{{ __('Grading') }}
+					</div>
+					<FormControl
+						v-if="submissionResource.doc"
+						v-model="submissionResource.doc.status"
+						:label="__('Grade')"
+						type="select"
+						:options="submissionStatusOptions"
+					/>
+					<FormControl
+						v-if="submissionResource.doc"
+						v-model="submissionResource.doc.comments"
+						:label="__('Comments')"
+						type="textarea"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Badge,
+	Button,
+	call,
+	createResource,
+	createDocumentResource,
+	FileUploader,
+	FormControl,
+	TextEditor,
+} from 'frappe-ui'
+import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { FileText, X } from 'lucide-vue-next'
+import { showToast, getFileSize } from '@/utils'
+import { useRouter } from 'vue-router'
+
+const submissionFile = ref(null)
+const answer = ref(null)
+const router = useRouter()
+const user = inject('$user')
+const showTitle = router.currentRoute.value.name == 'AssignmentSubmission'
+const isDirty = ref(false)
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		required: true,
+	},
+	submissionName: {
+		type: String,
+		default: 'new',
+	},
+})
+
+onMounted(() => {
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+		submitAssignment()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const assignment = createResource({
+	url: 'frappe.client.get',
+	params: {
+		doctype: 'LMS Assignment',
+		name: props.assignmentID,
+	},
+	auto: true,
+	onSuccess(data) {
+		if (props.submissionName != 'new') {
+			submissionResource.reload()
+		}
+	},
+})
+
+const newSubmission = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		let doc = {
+			doctype: 'LMS Assignment Submission',
+			assignment: props.assignmentID,
+			member: user.data?.name,
+		}
+		if (showUploader()) {
+			doc.assignment_attachment = submissionFile.value.file_url
+		} else {
+			doc.answer = answer.value
+		}
+		return {
+			doc: doc,
+		}
+	},
+})
+
+const imageResource = createResource({
+	url: 'lms.lms.api.get_file_info',
+	makeParams(values) {
+		return {
+			file_url: values.image,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		submissionFile.value = data
+	},
+})
+
+const submissionResource = createDocumentResource({
+	doctype: 'LMS Assignment Submission',
+	name: props.submissionName,
+	onError(err) {
+		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+	},
+	auto: false,
+	cache: [user.data?.name, props.assignmentID],
+})
+
+watch(submissionResource, () => {
+	if (submissionResource.doc) {
+		if (submissionResource.doc.assignment_attachment) {
+			imageResource.reload({
+				image: submissionResource.doc.assignment_attachment,
+			})
+		}
+		if (submissionResource.doc.answer) {
+			answer.value = submissionResource.doc.answer
+		}
+
+		if (submissionResource.isDirty) {
+			isDirty.value = true
+		} else if (showUploader() && !submissionFile.value) {
+			isDirty.value = true
+		} else if (!showUploader() && !answer.value) {
+			isDirty.value = true
+		} else {
+			isDirty.value = false
+		}
+	}
+})
+
+watch(submissionFile, () => {
+	if (props.submissionName == 'new' && submissionFile.value) {
+		isDirty.value = true
+	}
+})
+
+const submitAssignment = () => {
+	if (props.submissionName != 'new') {
+		let evaluator =
+			submissionResource.doc && submissionResource.doc.owner != user.data?.name
+				? user.data?.name
+				: null
+		submissionResource.setValue.submit(
+			{
+				...submissionResource.doc,
+				evaluator: evaluator,
+			},
+			{
+				onSuccess(data) {
+					showToast(__('Success'), __('Changes saved successfully'), 'check')
+				},
+			}
+		)
+	} else {
+		addNewSubmission()
+	}
+}
+
+const addNewSubmission = () => {
+	newSubmission.submit(
+		{},
+		{
+			onSuccess(data) {
+				showToast('Success', 'Assignment submitted successfully.', 'check')
+				if (router.currentRoute.value.name == 'AssignmentSubmission') {
+					router.push({
+						name: 'AssignmentSubmission',
+						params: {
+							assignmentID: props.assignmentID,
+							submissionName: data.name,
+						},
+					})
+				} else {
+					markLessonProgress()
+					router.go()
+				}
+				submissionResource.name = data.name
+				submissionResource.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const saveSubmission = (file) => {
+	submissionFile.value = file
+}
+
+const markLessonProgress = () => {
+	if (router.currentRoute.value.name == 'Lesson') {
+		let courseName = router.currentRoute.value.params.courseName
+		let chapterNumber = router.currentRoute.value.params.chapterNumber
+		let lessonNumber = router.currentRoute.value.params.lessonNumber
+
+		call('lms.lms.api.mark_lesson_progress', {
+			course: courseName,
+			chapter_number: chapterNumber,
+			lesson_number: lessonNumber,
+		})
+	}
+}
+
+const getType = () => {
+	const type = assignment.data?.type
+	if (type == 'Image') {
+		return ['image/*']
+	} else if (type == 'Document') {
+		return [
+			'.doc',
+			'.docx',
+			'.xml',
+			'application/msword',
+			'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+		]
+	} else if (type == 'PDF') {
+		return ['.pdf']
+	}
+}
+
+const validateFile = (file) => {
+	let type = assignment.data?.type
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
+		return 'Only image file is allowed.'
+	} else if (
+		type == 'Document' &&
+		!['doc', 'docx', 'xml'].includes(extension)
+	) {
+		return 'Only document file is allowed.'
+	} else if (type == 'PDF' && !['pdf'].includes(extension)) {
+		return 'Only PDF file is allowed.'
+	}
+}
+
+const removeSubmission = () => {
+	submissionFile.value = null
+}
+
+const canGradeSubmission = computed(() => {
+	return (
+		(user.data?.is_moderator ||
+			user.data?.is_evaluator ||
+			user.data?.is_instructor) &&
+		props.submissionName != 'new' &&
+		router.currentRoute.value.name == 'AssignmentSubmission'
+	)
+})
+
+const canModifyAssignment = computed(() => {
+	return (
+		!submissionResource.doc ||
+		(submissionResource.doc?.owner == user.data?.name &&
+			submissionResource.doc?.status == 'Not Graded')
+	)
+})
+
+const submissionStatusOptions = computed(() => {
+	return [
+		{ label: 'Not Graded', value: 'Not Graded' },
+		{ label: 'Pass', value: 'Pass' },
+		{ label: 'Fail', value: 'Fail' },
+	]
+})
+
+const statusTheme = computed(() => {
+	if (!submissionResource.doc) {
+		return 'orange'
+	} else if (submissionResource.doc.status == 'Pass') {
+		return 'green'
+	} else if (submissionResource.doc.status == 'Not Graded') {
+		return 'blue'
+	} else {
+		return 'red'
+	}
+})
+
+const showUploader = () => {
+	return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
+}
+</script>

frontend/src/components/AssignmentBlock.vue

@@ -0,0 +1,46 @@
+<template>
+	<Assignment
+		v-if="user.data && submission.data"
+		:assignmentID="assignmentID"
+		:submissionName="submission.data?.name || 'new'"
+	/>
+	<div v-else class="border rounded-md text-center py-20">
+		<div>
+			{{ __('Please login to access the assignment.') }}
+		</div>
+		<Button @click="redirectToLogin()" class="mt-2">
+			<span>
+				{{ __('Login') }}
+			</span>
+		</Button>
+	</div>
+</template>
+<script setup>
+import { inject, watch } from 'vue'
+import { Button, createResource } from 'frappe-ui'
+import Assignment from '@/components/Assignment.vue'
+
+const user = inject('$user')
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		required: true,
+	},
+})
+
+const submission = createResource({
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Assignment Submission',
+			fieldname: 'name',
+			filters: {
+				assignment: props.assignmentID,
+				member: user.data?.name,
+			},
+		}
+	},
+	auto: true,
+})
+</script>

frontend/src/components/BatchCourses.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-xl font-semibold">
+			<div class="text-lg font-semibold">
 				{{ __('Courses') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
@@ -118,13 +118,13 @@ const getCoursesColumns = () => {
 		},
 		{
 			label: 'Lessons',
-			key: 'lesson_count',
+			key: 'lessons',
 			align: 'right',
 		},
 		{
 			label: 'Enrollments',
 			align: 'right',
-			key: 'enrollment_count',
+			key: 'enrollments',
 		},
 	]
 }

frontend/src/components/BatchStudents.vue

@@ -1,80 +1,199 @@
 <template>
-	<Button class="float-right mb-3" @click="openStudentModal()">
-		<template #prefix>
-			<Plus class="h-4 w-4" />
-		</template>
-		{{ __('Add') }}
-	</Button>
-	<div class="text-lg font-semibold mb-4">
-		{{ __('Students') }}
-	</div>
-	<div v-if="students.data?.length">
-		<ListView
-			:columns="getStudentColumns()"
-			:rows="students.data"
-			row-key="name"
-			:options="{ showTooltip: false }"
-		>
-			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+	<div class="">
+		<div class="w-full flex items-center justify-between pb-4">
+			<div class="font-medium text-gray-600">
+				{{ __('Statistics') }}
+			</div>
+		</div>
+		<div class="grid grid-cols-3 gap-5 mb-8">
+			<div class="flex items-center shadow py-2 px-3 rounded-md">
+				<div class="p-2 rounded-md bg-gray-100 mr-3">
+					<User class="w-18 h-18 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex flex-col">
+					<span class="text-xl font-semibold mb-1">
+						{{ students.data?.length }}
+					</span>
+					<span class="text-gray-700">
+						{{ __('Students') }}
+					</span>
+				</div>
+			</div>
+
+			<div class="flex items-center shadow py-2 px-3 rounded-md">
+				<div class="p-2 rounded-md bg-gray-100 mr-3">
+					<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex flex-col">
+					<span class="text-xl font-semibold mb-1">
+						{{ batch.courses?.length }}
+					</span>
+					<span class="text-gray-700">
+						{{ __('Courses') }}
+					</span>
+				</div>
+			</div>
+
+			<div class="flex items-center shadow py-2 px-3 rounded-md">
+				<div class="p-2 rounded-md bg-gray-100 mr-3">
+					<ShieldCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex flex-col">
+					<span class="text-xl font-semibold mb-1">
+						{{ assessmentCount }}
+					</span>
+					<span class="text-gray-700">
+						{{ __('Assessments') }}
+					</span>
+				</div>
+			</div>
+		</div>
+		<div class="mb-8">
+			<div class="text-gray-600 font-medium">
+				{{ __('Progress') }}
+			</div>
+			<ApexChart
+				v-if="showProgressChart"
+				:options="chartOptions"
+				:series="chartData"
+				type="bar"
+				height="350"
+			/>
+			<div
+				class="flex items-center justify-center text-sm text-gray-700 space-x-4"
 			>
-				<ListHeaderItem :item="item" v-for="item in getStudentColumns()">
-					<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 students.data">
-					<template #default="{ column, item }">
-						<ListRowItem :item="row[column.key]" :align="column.align">
-							<template #prefix>
-								<div v-if="column.key == 'full_name'">
-									<Avatar
-										class="flex items-center"
-										:image="row['user_image']"
-										:label="item"
-										size="sm"
-									/>
-								</div>
-							</template>
-							<div>
-								{{ row[column.key] }}
-							</div>
-						</ListRowItem>
-					</template>
-				</ListRow>
-			</ListRows>
-			<ListSelectBanner>
-				<template #actions="{ unselectAll, selections }">
-					<div class="flex gap-2">
-						<Button
-							variant="ghost"
-							@click="removeStudents(selections, unselectAll)"
-						>
-							<Trash2 class="h-4 w-4 stroke-1.5" />
-						</Button>
+				<div class="flex items-center space-x-2">
+					<div class="w-3 h-3" style="background-color: #0f736b"></div>
+					<div>
+						{{ __('Courses') }}
 					</div>
+				</div>
+				<div class="flex items-center space-x-2">
+					<div class="w-3 h-3" style="background-color: #0070cc"></div>
+					<div>
+						{{ __('Assessments') }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-gray-600 font-medium">
+				{{ __('Students') }}
+			</div>
+			<Button @click="openStudentModal()">
+				<template #prefix>
+					<Plus class="h-4 w-4" />
 				</template>
-			</ListSelectBanner>
-		</ListView>
-	</div>
-	<div v-else class="text-sm italic text-gray-600">
-		{{ __('There are no students in this batch.') }}
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div v-if="students.data?.length">
+			<ListView
+				:columns="getStudentColumns()"
+				:rows="students.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem
+						:item="item"
+						v-for="item in getStudentColumns()"
+						:title="item.label"
+					>
+						<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 students.data"
+						class="group cursor-pointer"
+						@click="openStudentProgressModal(row)"
+					>
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<template #prefix>
+									<div v-if="column.key == 'full_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['user_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div
+									v-if="column.key == 'progress'"
+									class="flex items-center space-x-4 w-full"
+								>
+									<ProgressBar :progress="row[column.key]" size="sm" />
+								</div>
+								<div
+									v-else-if="column.key == 'copy'"
+									class="invisible group-hover:visible"
+								>
+									<Button variant="ghost" @click="copyEmail(row)">
+										<template #icon>
+											<Clipboard class="h-4 w-4 stroke-1.5" />
+										</template>
+									</Button>
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeStudents(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+		<div v-else class="text-sm italic text-gray-600">
+			{{ __('There are no students in this batch.') }}
+		</div>
 	</div>
+
 	<StudentModal
-		:batch="props.batch"
+		:batch="props.batch.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
 	/>
+	<BatchStudentProgress
+		:student="selectedStudent"
+		v-model="showStudentProgressModal"
+	/>
 </template>
 <script setup>
 import {
+	Avatar,
+	Button,
 	createResource,
+	FeatherIcon,
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
@@ -82,60 +201,89 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	Avatar,
-	Button,
 } from 'frappe-ui'
-import { Trash2, Plus } from 'lucide-vue-next'
-import { ref } from 'vue'
+import {
+	BookOpen,
+	Clipboard,
+	Plus,
+	ShieldCheck,
+	Trash2,
+	User,
+} from 'lucide-vue-next'
+import { ref, watch } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
 import { showToast } from '@/utils'
+import ProgressBar from '@/components/ProgressBar.vue'
+import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
+import ApexChart from 'vue3-apexcharts'
 
 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 props = defineProps({
 	batch: {
-		type: String,
+		type: Object,
 		default: null,
 	},
 })
 
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
-	cache: ['students', props.batch],
+	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch,
+		batch: props.batch?.name,
 	},
 	auto: true,
+	onSuccess(data) {
+		chartData.value = getChartData()
+		showProgressChart.value = true
+	},
 })
 
 const getStudentColumns = () => {
-	return [
+	let columns = [
 		{
 			label: 'Full Name',
 			key: 'full_name',
-			width: 2,
+			width: '20rem',
+			icon: 'user',
 		},
 		{
-			label: 'Courses Done',
-			key: 'courses_completed',
-			align: 'center',
-		},
-		{
-			label: 'Assessments Done',
-			key: 'assessments_completed',
-			align: 'center',
+			label: 'Progress',
+			key: 'progress',
+			width: '10rem',
+			icon: 'activity',
 		},
 		{
 			label: 'Last Active',
 			key: 'last_active',
+			width: '15rem',
+			align: 'center',
+			icon: 'clock',
+		},
+		{
+			label: '',
+			key: 'copy',
 		},
 	]
+
+	return columns
 }
 
 const openStudentModal = () => {
 	showStudentModal.value = true
 }
 
+const openStudentProgressModal = (row) => {
+	showStudentProgressModal.value = true
+	selectedStudent.value = row
+}
+
 const deleteStudents = createResource({
 	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
@@ -160,4 +308,110 @@ const removeStudents = (selections, unselectAll) => {
 		}
 	)
 }
+
+const getChartData = () => {
+	let categories = {}
+
+	Object.keys(students.data?.[0].courses).forEach((course) => {
+		categories[course] = {
+			value: 0,
+			type: 'course',
+			label: course,
+		}
+	})
+
+	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] === 100) {
+				categories[assessment].value += 1
+			}
+		})
+	})
+
+	chartOptions.value = getChartOptions(categories)
+	return [
+		{
+			name: __('Completed by Students'),
+			data: Object.values(categories).map((item) => item.value),
+		},
+	]
+}
+
+const getChartOptions = (categories) => {
+	const courseColor = '#0F736B'
+	const assessmentColor = '#0070CC'
+	const maxY =
+		students.data?.length % 5
+			? students.data?.length + (5 - (students.data?.length % 5))
+			: students.data?.length
+
+	return {
+		chart: {
+			type: 'bar',
+			height: 50,
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			bar: {
+				distributed: true,
+				borderRadius: 0,
+				horizontal: true,
+				barHeight: '30%',
+			},
+		},
+		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 > 20 ? `${value.substring(0, 20)}...` : value // Trim long labels
+				},
+			},
+		},
+		yaxis: {
+			max: maxY,
+			min: 0,
+			stepSize: 10,
+			tickAmount: maxY / 5,
+		},
+	}
+}
+
+const copyEmail = (row) => {
+	navigator.clipboard.writeText(row.email)
+	showToast(__('Success'), __('Email copied to clipboard'), 'check')
+}
+
+watch(students, () => {
+	if (students.data?.length) {
+		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
+	}
+})
 </script>
+<style>
+.apexcharts-legend {
+	display: none !important;
+}
+</style>

frontend/src/components/Controls/Autocomplete.vue

@@ -92,7 +92,7 @@
 													{{ option.label }}
 												</div>
 												<div
-													v-if="option.label != option.description"
+													v-if="option.description"
 													class="text-xs text-gray-700"
 													v-html="option.description"
 												></div>

frontend/src/components/Controls/Link.vue

@@ -2,6 +2,7 @@
 	<div class="space-y-1.5">
 		<label class="block" :class="labelClasses" v-if="attrs.label">
 			{{ attrs.label }}
+			<span class="text-red-500" v-if="attrs.required">*</span>
 		</label>
 		<Autocomplete
 			ref="autocomplete"
@@ -28,8 +29,8 @@
 				<slot name="item-label" v-bind="{ active, selected, option }" />
 			</template>
 
-			<template v-if="attrs.onCreate" #footer="{ value, close }">
-				<div>
+			<template #footer="{ value, close }">
+				<div v-if="attrs.onCreate">
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
@@ -41,8 +42,21 @@
 						</template>
 					</Button>
 				</div>
+				<div>
+					<Button
+						variant="ghost"
+						class="w-full !justify-start"
+						:label="__('Clear')"
+						@click="() => clearValue(close)"
+					>
+						<template #prefix>
+							<X class="h-4 w-4 stroke-1.5" />
+						</template>
+					</Button>
+				</div>
 			</template>
 		</Autocomplete>
+		<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
 	</div>
 </template>
 
@@ -50,7 +64,7 @@
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { Plus, X } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
@@ -66,12 +80,14 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	description: {
+		type: String,
+		default: '',
+	},
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
-
 const attrs = useAttrs()
-
 const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
@@ -117,7 +133,7 @@ const options = createResource({
 	transform: (data) => {
 		return data.map((option) => {
 			return {
-				label: option.value,
+				label: option.label || option.value,
 				value: option.value,
 				description: option.description,
 			}
@@ -125,7 +141,7 @@ const options = createResource({
 	},
 })
 
-function reload(val) {
+const reload = (val) => {
 	options.update({
 		params: {
 			txt: val,
@@ -136,6 +152,11 @@ function reload(val) {
 	options.reload()
 }
 
+const clearValue = (close) => {
+	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
+	close()
+}
+
 const labelClasses = computed(() => {
 	return [
 		{

frontend/src/components/Controls/MultiSelect.vue

@@ -2,6 +2,7 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
+			<span class="text-red-500" v-if="required">*</span>
 		</label>
 		<div class="grid grid-cols-3 gap-1">
 			<Button
@@ -115,6 +116,9 @@ const props = defineProps({
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
+	required: {
+		type: Boolean,
+	},
 })
 
 const values = defineModel()

frontend/src/components/CourseCard.vue

@@ -10,13 +10,13 @@
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
 			<div
-				class="flex items-center flex-wrap space-y-1 space-x-1 relative top-4 px-2 w-fit"
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
 			>
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
 				<Badge
-					variant="outline"
+					variant="subtle"
 					theme="gray"
 					size="md"
 					v-for="tag in course.tags"
@@ -30,36 +30,36 @@
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
-				<div v-if="course.lesson_count">
+				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
 						<span class="flex items-center">
 							<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.lesson_count }}
+							{{ course.lessons }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.enrollment_count">
+				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
 						<span class="flex items-center">
 							<Users class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.enrollment_count }}
+							{{ course.enrollments }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.avg_rating">
+				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
 						<span class="flex items-center">
 							<Star class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.avg_rating }}
+							{{ course.rating }}
 						</span>
 					</Tooltip>
 				</div>
 
 				<div v-if="course.status != 'Approved'">
 					<Badge
-						variant="solid"
+						variant="subtle"
 						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
 						size="sm"
 					>

frontend/src/components/CourseCardOverlay.vue

@@ -87,27 +87,29 @@
 					</span>
 				</Button>
 			</router-link>
-			<div class="mt-8 mb-4 font-medium">
-				{{ __('This course has:') }}
-			</div>
-			<div class="flex items-center mb-3">
-				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ course.data.lesson_count }} {{ __('Lessons') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-3">
-				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ course.data.enrollment_count_formatted }}
-					{{ __('Enrolled Students') }}
-				</span>
-			</div>
-			<div class="flex items-center">
-				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
-				<span class="ml-2">
-					{{ course.data.avg_rating }} {{ __('Rating') }}
-				</span>
+			<div class="space-y-4">
+				<div class="mt-8 font-medium">
+					{{ __('This course has:') }}
+				</div>
+				<div class="flex items-center">
+					<BookOpen class="h-4 w-4 stroke-1.5 text-gray-600" />
+					<span class="ml-2">
+						{{ course.data.lessons }} {{ __('Lessons') }}
+					</span>
+				</div>
+				<div class="flex items-center">
+					<Users class="h-4 w-4 stroke-1.5 text-gray-600" />
+					<span class="ml-2">
+						{{ formatAmount(course.data.enrollments) }}
+						{{ __('Enrolled Students') }}
+					</span>
+				</div>
+				<div v-if="parseInt(course.data.rating) > 0" class="flex items-center">
+					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
+					<span class="ml-2">
+						{{ course.data.rating }} {{ __('Rating') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -116,7 +118,7 @@
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
-import { showToast } from '@/utils/'
+import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 
@@ -142,7 +144,7 @@ function enrollStudent() {
 		showToast(
 			__('Please Login'),
 			__('You need to login first to enroll for this course'),
-			'circle-warn'
+			'alert-circle'
 		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`

frontend/src/components/CourseInstructors.vue

@@ -1,5 +1,5 @@
 <template>
-	<span v-if="instructors.length == 1">
+	<span v-if="instructors?.length == 1">
 		<router-link
 			:to="{
 				name: 'Profile',
@@ -9,7 +9,7 @@
 			{{ instructors[0].full_name }}
 		</router-link>
 	</span>
-	<span v-if="instructors.length == 2">
+	<span v-if="instructors?.length == 2">
 		<router-link
 			:to="{
 				name: 'Profile',
@@ -28,7 +28,7 @@
 			{{ instructors[1].first_name }}
 		</router-link>
 	</span>
-	<span v-if="instructors.length > 2">
+	<span v-if="instructors?.length > 2">
 		<router-link
 			:to="{
 				name: 'Profile',
@@ -37,7 +37,7 @@
 		>
 			{{ instructors[0].first_name }}
 		</router-link>
-		and {{ instructors.length - 1 }} others
+		and {{ instructors?.length - 1 }} others
 	</span>
 </template>
 <script setup>

frontend/src/components/CourseOutline.vue

@@ -16,7 +16,7 @@
 		</div>
 		<div
 			:class="{
-				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
+				'shadow rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
 			<Disclosure
@@ -25,21 +25,42 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full p-2">
+				<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-gray-900 stroke-1 mr-2"
+						class="h-4 w-4 text-gray-900 stroke-1"
 					/>
-					<div class="text-base text-left font-medium leading-5">
+					<div
+						class="text-base text-left 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-gray-900 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-red-500 invisible group-hover:visible"
+							/>
+						</Tooltip>
+					</div>
 				</DisclosureButton>
-				<DisclosurePanel>
+				<DisclosurePanel v-if="!chapter.is_scorm_package">
 					<Draggable
+						v-if="!chapter.is_scorm_package"
 						:list="chapter.lessons"
 						:disabled="!allowEdit"
 						item-key="name"
@@ -89,6 +110,7 @@
 					</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: {
@@ -102,9 +124,6 @@
 								{{ __('Add Lesson') }}
 							</Button>
 						</router-link>
-						<Button class="ml-2" @click="openChapterModal(chapter)">
-							{{ __('Edit Chapter') }}
-						</Button>
 					</div>
 				</DisclosurePanel>
 			</Disclosure>
@@ -118,24 +137,26 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource } from 'frappe-ui'
-import { ref, getCurrentInstance } from 'vue'
+import { Button, createResource, Tooltip } from 'frappe-ui'
+import { getCurrentInstance, inject, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
-	ChevronRight,
-	MonitorPlay,
-	HelpCircle,
-	FileText,
 	Check,
+	ChevronRight,
+	FileText,
+	FilePenLine,
+	HelpCircle,
+	MonitorPlay,
 	Trash2,
 } from 'lucide-vue-next'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
 import { showToast } from '@/utils'
 
 const route = useRoute()
-const expandAll = ref(true)
+const router = useRouter()
+const user = inject('$user')
 const showChapterModal = ref(false)
 const currentChapter = ref(null)
 const app = getCurrentInstance()
@@ -205,8 +226,10 @@ const updateLessonIndex = createResource({
 
 const trashLesson = (lessonName, chapterName) => {
 	$dialog({
-		title: __('Delete Lesson'),
-		message: __('Are you sure you want to delete this lesson?'),
+		title: __('Delete this lesson?'),
+		message: __(
+			'Deleting this lesson will permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
 		actions: [
 			{
 				label: __('Delete'),
@@ -245,6 +268,61 @@ const updateOutline = (e) => {
 		idx: e.newIndex,
 	})
 }
+
+const deleteChapter = createResource({
+	url: 'lms.lms.api.delete_chapter',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Chapter deleted successfully', 'check')
+	},
+})
+
+const trashChapter = (chapterName) => {
+	$dialog({
+		title: __('Delete this chapter?'),
+		message: __(
+			'Deleting this chapter will also delete all its lessons and permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteChapter.submit({ chapter: chapterName })
+					close()
+				},
+			},
+		],
+	})
+}
+
+const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
+	event.preventDefault()
+	if (props.allowEdit) return
+	if (!user.data) {
+		showToast(
+			__('You are not enrolled'),
+			__('Please enroll for this course to view this lesson'),
+			'alert-circle'
+		)
+		return
+	}
+
+	router.push({
+		name: 'SCORMChapter',
+		params: {
+			courseName: props.courseName,
+			chapterName: chapter.name,
+		},
+	})
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {

frontend/src/components/CourseReviews.vue

@@ -76,7 +76,7 @@ const props = defineProps({
 		required: true,
 	},
 	avg_rating: {
-		type: Number,
+		type: String,
 		required: true,
 	},
 	membership: {

frontend/src/components/LessonContent.vue

@@ -9,7 +9,7 @@
 			allowfullscreen
 		></iframe>
 	</div>
-	<div v-for="block in content.split('\n\n')">
+	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
 				class="youtube-video"

frontend/src/components/LessonHelp.vue

@@ -1,5 +1,20 @@
 <template>
 	<div class="space-y-5">
+		<div class="space-y-2">
+			<div class="flex items-center text-sm font-medium space-x-2">
+				<span>
+					{{ __('What does include in preview mean?') }}
+				</span>
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'If Include in Preview is enabled for a lesson then the lesson will also be accessible to non logged in users.'
+					)
+				}}
+			</div>
+		</div>
+
 		<div class="space-y-2">
 			<div
 				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
@@ -21,11 +36,11 @@
 
 		<div class="space-y-2">
 			<div
-				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				class="flex text-sm font-medium space-x-2 cursor-pointer"
 				@click="openHelpDialog('upload')"
 			>
 				<span class="leading-5">
-					{{ __('How to upload content from your system?') }}
+					{{ __(contentMap['upload']) }}
 				</span>
 				<Info class="w-3 h-3 text-gray-700" />
 			</div>
@@ -44,7 +59,7 @@
 				@click="openHelpDialog('youtube')"
 			>
 				<span>
-					{{ __('How to add a YouTube Video?') }}
+					{{ __(contentMap['youtube']) }}
 				</span>
 				<Info class="w-3 h-3 text-gray-700" />
 			</div>
@@ -57,7 +72,7 @@
 			</div>
 		</div>
 	</div>
-	<ExplanationVideos v-model="showExplanation" :type="type" />
+	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
 </template>
 <script setup>
 import { Info } from 'lucide-vue-next'
@@ -66,9 +81,16 @@ import ExplanationVideos from '@/components/Modals/ExplanationVideos.vue'
 
 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?',
+}
 
 const openHelpDialog = (contentType) => {
 	type.value = contentType
+	title.value = contentMap[contentType]
 	showExplanation.value = true
 }
 </script>

frontend/src/components/LiveClass.vue

@@ -46,9 +46,10 @@
 					{{ __('Start') }}
 				</a>
 				<a
+					v-if="cls.date <= dayjs().format('YYYY-MM-DD')"
 					:href="cls.join_url"
 					target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+					class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
 				>
 					<Video class="h-4 w-4 stroke-1.5" />
 					{{ __('Join') }}

frontend/src/components/Members.vue

@@ -66,8 +66,19 @@
 									<div class="text-gray-900">
 										{{ member.full_name }}
 									</div>
-									<div v-if="getRole(member)">
-										{{ getRole(member) }}
+									<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-gray-700">
@@ -99,7 +110,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { createResource, Avatar, Button, FormControl } from 'frappe-ui'
+import { createResource, Avatar, Button, FormControl, Badge } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, watch, reactive, inject } from 'vue'
 import { RefreshCw, Plus, X } from 'lucide-vue-next'

frontend/src/components/Modals/AnnouncementModal.vue

@@ -18,6 +18,7 @@
 				<div class="">
 					<div class="mb-1.5 text-sm text-gray-600">
 						{{ __('Subject') }}
+						<span class="text-red-500">*</span>
 					</div>
 					<Input type="text" v-model="announcement.subject" />
 				</div>
@@ -44,7 +45,7 @@
 <script setup>
 import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
 import { reactive } from 'vue'
-import { createToast } from '@/utils/'
+import { showToast } from '@/utils/'
 
 const show = defineModel()
 
@@ -94,22 +95,14 @@ const makeAnnouncement = (close) => {
 			},
 			onSuccess() {
 				close()
-				createToast({
-					title: 'Success',
-					text: 'Announcement has been sent successfully',
-					icon: 'Check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
-				})
+				showToast(
+					__('Success'),
+					__('Announcement has been sent successfully'),
+					'check'
+				)
 			},
 			onError(err) {
-				createToast({
-					title: 'Error',
-					text: err.messages?.[0] || err,
-					icon: 'x',
-					iconClasses: 'bg-red-600 text-white rounded-md p-px',
-					position: 'top-center',
-					timeout: 10,
-				})
+				showToast(__('Error'), __(err.messages?.[0] || err), 'check')
 			},
 		}
 	)

frontend/src/components/Modals/BatchCourseModal.vue

@@ -14,7 +14,12 @@
 		}"
 	>
 		<template #body-content>
-			<Link doctype="LMS Course" v-model="course" :label="__('Course')" />
+			<Link
+				doctype="LMS Course"
+				v-model="course"
+				:label="__('Course')"
+				:required="true"
+			/>
 			<Link
 				doctype="Course Evaluator"
 				v-model="evaluator"

frontend/src/components/Modals/BatchStudentProgress.vue

@@ -0,0 +1,113 @@
+<template>
+	<Dialog v-model="show" :options="{}">
+		<template #body>
+			<div class="p-5 space-y-8 text-base">
+				<div class="flex items-center space-x-2">
+					<Avatar :image="student.user_image" size="3xl" />
+					<div class="space-y-1">
+						<div class="flex items-center space-x-2">
+							<div class="text-xl font-semibold">
+								{{ student.full_name }}
+							</div>
+							<Badge :theme="student.progress === 100 ? 'green' : 'red'">
+								{{ student.progress }}% {{ __('Complete') }}
+							</Badge>
+						</div>
+						<div class="text-sm text-gray-700">
+							{{ student.email }}
+						</div>
+					</div>
+				</div>
+
+				<!-- Assessments -->
+				<div>
+					<div>
+						<div
+							class="grid grid-cols-[70%,30%] border-b pl-2 pb-1 mb-2 text-xs text-gray-700 font-medium"
+						>
+							<span>
+								{{ __('Assessment') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="assessment in Object.keys(student.assessments)"
+							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
+						>
+							<span>
+								{{ assessment }}
+							</span>
+							<span v-if="isAssignment(student.assessments[assessment])">
+								<Badge :theme="getStatusTheme(student.assessments[assessment])">
+									{{ student.assessments[assessment] }}
+								</Badge>
+							</span>
+							<span v-else>
+								{{ student.assessments[assessment] }}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Courses -->
+				<div>
+					<div>
+						<div
+							class="grid grid-cols-[70%,30%] mb-2 text-xs text-gray-700 border-b pl-2 pb-1 font-medium"
+						>
+							<span>
+								{{ __('Courses') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="course in Object.keys(student.courses)"
+							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
+						>
+							<span>
+								{{ course }}
+							</span>
+							<span>
+								{{ Math.floor(student.courses[course]) }}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- <span class="mt-4">
+                    {{ student }}
+                </span> -->
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Avatar, Badge, Dialog } from 'frappe-ui'
+import ProgressBar from '@/components/ProgressBar.vue'
+
+const show = defineModel()
+const props = defineProps({
+	student: {
+		type: Object,
+		default: null,
+	},
+})
+
+const isAssignment = (value) => {
+	return isNaN(value)
+}
+
+const getStatusTheme = (status) => {
+	if (status === 'Pass') {
+		return 'green'
+	} else if (status == 'Not Graded') {
+		return 'orange'
+	} else {
+		return 'red'
+	}
+}
+</script>

frontend/src/components/Modals/BulkCertificates.vue

@@ -0,0 +1,132 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Generate Certificates'),
+			size: 'lg',
+			actions: [
+				{
+					label: 'Create',
+					variant: 'solid',
+					onClick: ({ close }) => {
+						generateCertificates(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					type="select"
+					v-model="details.course"
+					:label="__('Course')"
+					:options="getCourses()"
+				/>
+				<Link
+					v-model="details.evaluator"
+					:label="__('Evaluator')"
+					doctype="Course Evaluator"
+				/>
+				<FormControl
+					type="date"
+					v-model="details.issue_date"
+					:label="__('Issue Date')"
+				/>
+				<FormControl
+					type="date"
+					v-model="details.expiry_date"
+					:label="__('Expiry Date')"
+				/>
+				<Link
+					v-model="details.template"
+					:label="__('Template')"
+					doctype="Print Format"
+					:filters="{
+						doc_type: 'LMS Certificate',
+					}"
+				/>
+				<Switch
+					size="sm"
+					:label="__('Published')"
+					:description="
+						__(
+							'Enabling this will publish the certificate on the certified participants page.'
+						)
+					"
+					v-model="details.published"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { inject, reactive } from 'vue'
+import { createResource, Dialog, FormControl, Switch } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const dayjs = inject('$dayjs')
+const details = reactive({
+	issue_date: dayjs().format('YYYY-MM-DD'),
+	expiry_date: null,
+	template: null,
+	evaluator: null,
+	published: true,
+})
+
+const props = defineProps({
+	batch: {
+		type: [Object, null],
+		required: true,
+	},
+})
+
+const createCertificate = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Certificate',
+				issue_date: details.issue_date,
+				expiry_date: details.expiry_date,
+				template: details.template,
+				published: details.published,
+				course: values.course,
+				batch: values.batch,
+				member: values.member,
+				evaluator: details.evaluator,
+			},
+		}
+	},
+})
+
+const generateCertificates = (close) => {
+	props.batch?.students.forEach((student) => {
+		createCertificate.submit(
+			{
+				course: details.course,
+				batch: props.batch.name,
+				member: student,
+			},
+			{
+				onError(err) {
+					showToast(__('Error'), err.messages?.[0] || err, 'x')
+				},
+			}
+		)
+	})
+	close()
+	showToast(__('Success'), __('Certificates generated successfully'), 'check')
+}
+
+const getCourses = () => {
+	return props.batch?.courses.map((course) => {
+		return {
+			label: course.course,
+			value: course.course,
+		}
+	})
+}
+</script>

frontend/src/components/Modals/ChapterModal.vue

@@ -2,11 +2,11 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Add Chapter'),
+			title: chapterDetail ? __('Edit Chapter') : __('Add Chapter'),
 			size: 'lg',
 			actions: [
 				{
-					label: chapterDetail ? __('Edit Chapter') : __('Add Chapter'),
+					label: chapterDetail ? __('Edit') : __('Create'),
 					variant: 'solid',
 					onClick: (close) =>
 						chapterDetail ? editChapter(close) : addChapter(close),
@@ -15,24 +15,77 @@
 		}"
 	>
 		<template #body-content>
-			<FormControl
-				ref="chapterInput"
-				label="Title"
-				v-model="chapter.title"
-				class="mb-4"
-			/>
+			<div class="space-y-4 text-base">
+				<FormControl label="Title" v-model="chapter.title" :required="true" />
+				<Switch
+					size="sm"
+					:label="__('SCORM Package')"
+					:description="
+						__(
+							'Enable this only if you want to upload a SCORM package as a chapter.'
+						)
+					"
+					v-model="chapter.is_scorm_package"
+				/>
+				<div v-if="chapter.is_scorm_package">
+					<FileUploader
+						v-if="!chapter.scorm_package"
+						:fileTypes="['.zip']"
+						:validateFile="validateFile"
+						@success="(file) => (chapter.scorm_package = file)"
+					>
+						<template v-slot="{ file, progress, uploading, openFileSelector }">
+							<div class="mb-4">
+								<Button @click="openFileSelector" :loading="uploading">
+									{{
+										uploading ? `Uploading ${progress}%` : 'Upload an zip file'
+									}}
+								</Button>
+							</div>
+						</template>
+					</FileUploader>
+					<div v-else class="">
+						<div class="flex items-center">
+							<div class="border rounded-md p-2 mr-2">
+								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							</div>
+							<div class="flex flex-col">
+								<span>
+									{{ chapter.scorm_package.file_name }}
+								</span>
+								<span class="text-sm text-gray-500 mt-1">
+									{{ getFileSize(chapter.scorm_package.file_size) }}
+								</span>
+							</div>
+							<X
+								@click="() => (chapter.scorm_package = null)"
+								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, createResource } from 'frappe-ui'
-import { defineModel, reactive, watch, ref } from 'vue'
-import { createToast } from '@/utils/'
+import {
+	Button,
+	createResource,
+	Dialog,
+	FileUploader,
+	FormControl,
+	Switch,
+} from 'frappe-ui'
+import { defineModel, reactive, watch } from 'vue'
+import { showToast, getFileSize } from '@/utils/'
 import { capture } from '@/telemetry'
+import { FileText, X } from 'lucide-vue-next'
+import { useSettings } from '@/stores/settings'
 
 const show = defineModel()
 const outline = defineModel('outline')
-const chapterInput = ref(null)
+const settingsStore = useSettings()
 
 const props = defineProps({
 	course: {
@@ -46,30 +99,19 @@ const props = defineProps({
 
 const chapter = reactive({
 	title: '',
+	is_scorm_package: 0,
+	scorm_package: null,
 })
 
 const chapterResource = createResource({
-	url: 'frappe.client.insert',
+	url: 'lms.lms.api.upsert_chapter',
 	makeParams(values) {
 		return {
-			doc: {
-				doctype: 'Course Chapter',
-				title: chapter.title,
-				description: chapter.description,
-				course: props.course,
-			},
-		}
-	},
-})
-
-const chapterEditResource = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		return {
-			doctype: 'Course Chapter',
+			title: chapter.title,
+			course: props.course,
+			is_scorm_package: chapter.is_scorm_package,
+			scorm_package: chapter.scorm_package,
 			name: props.chapterDetail?.name,
-			fieldname: 'title',
-			value: chapter.title,
 		}
 	},
 })
@@ -89,14 +131,12 @@ const chapterReference = createResource({
 	},
 })
 
-const addChapter = (close) => {
+const addChapter = async (close) => {
 	chapterResource.submit(
 		{},
 		{
 			validate() {
-				if (!chapter.title) {
-					return 'Title is required'
-				}
+				return validateChapter()
 			},
 			onSuccess: (data) => {
 				capture('chapter_created')
@@ -104,30 +144,48 @@ const addChapter = (close) => {
 					{ name: data.name },
 					{
 						onSuccess(data) {
-							chapter.title = ''
+							cleanChapter()
+							if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+								settingsStore.onboardingDetails.reload()
+							}
 							outline.value.reload()
-							createToast({
-								text: 'Chapter added successfully',
-								icon: 'check',
-								iconClasses: 'bg-green-600 text-white rounded-md p-px',
-							})
+							showToast(
+								__('Success'),
+								__('Chapter added successfully'),
+								'check'
+							)
 						},
 						onError(err) {
-							showError(err)
+							showToast(__('Error'), err.messages?.[0] || err, 'x')
 						},
 					}
 				)
 				close()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
 }
 
+const validateChapter = () => {
+	if (!chapter.title) {
+		return __('Title is required')
+	}
+	if (chapter.is_scorm_package && !chapter.scorm_package) {
+		return __('Please upload a SCORM package')
+	}
+}
+
+const cleanChapter = () => {
+	chapter.title = ''
+	chapter.is_scorm_package = 0
+	chapter.scorm_package = null
+}
+
 const editChapter = (close) => {
-	chapterEditResource.submit(
+	chapterResource.submit(
 		{},
 		{
 			validate() {
@@ -137,43 +195,29 @@ const editChapter = (close) => {
 			},
 			onSuccess() {
 				outline.value.reload()
-				createToast({
-					text: 'Chapter updated successfully',
-					icon: 'check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
-				})
+				showToast(__('Success'), __('Chapter updated successfully'), 'check')
 				close()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
 }
 
-const showError = (err) => {
-	createToast({
-		title: 'Error',
-		text: err.messages?.[0] || err,
-		icon: 'x',
-		iconClasses: 'bg-red-600 text-white rounded-md p-px',
-		position: 'top-center',
-		timeout: 10,
-	})
-}
-
 watch(
 	() => props.chapterDetail,
 	(newChapter) => {
 		chapter.title = newChapter?.title
+		chapter.is_scorm_package = newChapter?.is_scorm_package
+		chapter.scorm_package = newChapter?.scorm_package
 	}
 )
 
-watch(show, () => {
-	if (show.value) {
-		setTimeout(() => {
-			chapterInput.value.$el.querySelector('input').focus()
-		}, 100)
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (extension !== 'zip') {
+		return __('Only zip files are allowed')
 	}
-})
+}
 </script>

frontend/src/components/Modals/EditProfile.vue

@@ -69,7 +69,18 @@
 					:label="__('Headline')"
 					class="mb-4"
 				/>
-				<FormControl type="textarea" v-model="profile.bio" :label="__('Bio')" />
+
+				<div class="mb-4">
+					<div class="mb-1.5 text-sm text-gray-600">
+						{{ __('Bio') }}
+					</div>
+					<TextEditor
+						:fixedMenu="true"
+						@change="(val) => (profile.bio = val)"
+						:content="profile.bio"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
+					/>
+				</div>
 			</div>
 		</template>
 	</Dialog>
@@ -81,6 +92,7 @@ import {
 	FileUploader,
 	Button,
 	createResource,
+	TextEditor,
 } from 'frappe-ui'
 import { reactive, watch, defineModel } from 'vue'
 import { FileText, X } from 'lucide-vue-next'

frontend/src/components/Modals/EvaluationModal.vue

@@ -154,10 +154,12 @@ function submitEvaluation(close) {
 const getCourses = () => {
 	let courses = []
 	for (const course of props.courses) {
-		courses.push({
-			label: course.title,
-			value: course.course,
-		})
+		if (course.evaluator) {
+			courses.push({
+				label: course.title,
+				value: course.course,
+			})
+		}
 	}
 	return courses
 }

frontend/src/components/Modals/ExplanationVideos.vue

@@ -3,10 +3,11 @@
 		v-model="show"
 		:options="{
 			size: '4xl',
+			title: title,
 		}"
 	>
-		<template #body>
-			<div class="p-4">
+		<template #body-content>
+			<div>
 				<VideoBlock :file="file" />
 			</div>
 		</template>
@@ -24,6 +25,10 @@ const props = defineProps({
 		type: [String, null],
 		required: true,
 	},
+	title: {
+		type: [String, null],
+		required: true,
+	},
 })
 
 const file = computed(() => {

frontend/src/components/Modals/LiveClassModal.vue

@@ -22,6 +22,7 @@
 							v-model="liveClass.title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
 						/>
 						<Tooltip
 							:text="
@@ -35,6 +36,7 @@
 								type="time"
 								:label="__('Time')"
 								class="mb-4"
+								:required="true"
 							/>
 						</Tooltip>
 						<FormControl
@@ -42,6 +44,7 @@
 							type="select"
 							:options="getTimezoneOptions()"
 							:label="__('Timezone')"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -50,6 +53,7 @@
 							type="date"
 							class="mb-4"
 							:label="__('Date')"
+							:required="true"
 						/>
 						<Tooltip :text="__('Duration of the live class in minutes')">
 							<FormControl
@@ -57,6 +61,7 @@
 								v-model="liveClass.duration"
 								:label="__('Duration')"
 								class="mb-4"
+								:required="true"
 							/>
 						</Tooltip>
 						<FormControl
@@ -156,25 +161,34 @@ const submitLiveClass = (close) => {
 	return createLiveClass.submit(liveClass, {
 		validate() {
 			if (!liveClass.title) {
-				return 'Please enter a title.'
+				return __('Please enter a title.')
 			}
 			if (!liveClass.date) {
-				return 'Please select a date.'
-			}
-			if (dayjs(liveClass.date).isSameOrBefore(dayjs(), 'day')) {
-				return 'Please select a future date.'
+				return __('Please select a date.')
 			}
 			if (!liveClass.time) {
-				return 'Please select a time.'
-			}
-			if (!valideTime()) {
-				return 'Please enter a valid time in the format HH:mm.'
-			}
-			if (!liveClass.duration) {
-				return 'Please select a duration.'
+				return __('Please select a time.')
 			}
 			if (!liveClass.timezone) {
-				return 'Please select a 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.')
 			}
 		},
 		onSuccess() {

frontend/src/components/Modals/Question.vue

@@ -12,9 +12,9 @@
 							id="existing"
 							value="existing"
 							v-model="questionType"
-							class="w-3 h-3 accent-gray-900"
+							class="w-3 h-3 cursor-pointer"
 						/>
-						<label for="existing">
+						<label for="existing" class="cursor-pointer">
 							{{ __('Add an existing question') }}
 						</label>
 					</div>
@@ -25,9 +25,9 @@
 							id="new"
 							value="new"
 							v-model="questionType"
-							class="w-3 h-3"
+							class="w-3 h-3 cursor-pointer"
 						/>
-						<label for="new">
+						<label for="new" class="cursor-pointer">
 							{{ __('Create a new question') }}
 						</label>
 					</div>
@@ -56,12 +56,14 @@
 						type="select"
 						:options="['Choices', 'User Input', 'Open Ended']"
 						class="pb-2"
+						:required="true"
 					/>
 					<div v-if="question.type == 'Choices'" class="divide-y border-t">
 						<div v-for="n in 4" class="space-y-4 py-2">
 							<FormControl
 								:label="__('Option') + ' ' + n"
 								v-model="question[`option_${n}`]"
+								:required="n <= 2 ? true : false"
 							/>
 							<FormControl
 								:label="__('Explanation')"
@@ -82,6 +84,7 @@
 						<FormControl
 							:label="__('Possibility') + ' ' + n"
 							v-model="question[`possibility_${n}`]"
+							:required="n == 1 ? true : false"
 						/>
 					</div>
 				</div>
@@ -127,7 +130,7 @@ const populateFields = () => {
 	let counter = 1
 	fields.forEach((field) => {
 		while (counter <= 4) {
-			question[`${field}_${counter}`] = field === 'is_correct' ? false : ''
+			question[`${field}_${counter}`] = field === 'is_correct' ? false : null
 			counter++
 		}
 	})

frontend/src/components/Modals/Settings.vue

@@ -108,9 +108,31 @@ const tabsStructure = computed(() => {
 			hideLabel: true,
 			items: [
 				{
-					label: 'Members',
-					description: 'Manage the members of your learning system',
-					icon: 'UserRoundPlus',
+					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: 'Send calendar invite for evaluations',
+							name: 'send_calendar_invite_for_evaluations',
+							description:
+								'If enabled, it sends google calendar invite to the student for evaluations.',
+							type: 'checkbox',
+						},
+						{
+							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.',
+							type: 'text',
+						},
+					],
 				},
 			],
 		},
@@ -156,9 +178,14 @@ const tabsStructure = computed(() => {
 			],
 		},
 		{
-			label: 'Settings',
-			hideLabel: true,
+			label: 'Lists',
+			hideLabel: false,
 			items: [
+				{
+					label: 'Members',
+					description: 'Manage the members of your learning system',
+					icon: 'UserRoundPlus',
+				},
 				{
 					label: 'Categories',
 					description: 'Manage the members of your learning system',

frontend/src/components/Modals/StudentModal.vue

@@ -28,6 +28,7 @@
 import { Dialog, createResource } from 'frappe-ui'
 import { ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
 
 const students = defineModel('reloadStudents')
 const student = ref()
@@ -61,8 +62,11 @@ const addStudent = (close) => {
 		{
 			onSuccess() {
 				students.value.reload()
-				close()
 				student.value = null
+				close()
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)

frontend/src/components/OnboardingBanner.vue

@@ -0,0 +1,151 @@
+<template>
+	<div v-if="showOnboardingBanner && onboardingDetails.data">
+		<Tooltip :text="__('Skip Onboarding')" placement="left">
+			<X
+				class="w-4 h-4 stroke-1 absolute top-2 right-2 cursor-pointer mr-1"
+				@click="skipOnboarding.reload()"
+			/>
+		</Tooltip>
+		<div class="flex items-center justify-evenly bg-gray-100 p-10">
+			<div
+				@click="redirectToCourseForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.course_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span v-else class="font-semibold bg-white px-2 py-1 rounded-full">
+					1
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Create a course') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToChapterForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						!onboardingDetails.data.chapter_created?.length,
+					'text-gray-400': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.chapter_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span v-else class="font-semibold bg-white px-2 py-1 rounded-full">
+					2
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a chapter') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToLessonForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						onboardingDetails.data.chapter_created?.length,
+					'text-gray-400':
+						!onboardingDetails.data.course_created?.length ||
+						!onboardingDetails.data.chapter_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.lesson_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span class="font-semibold bg-white px-2 py-1 rounded-full"> 3 </span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a lesson') }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Check, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
+import { createResource, Tooltip } from 'frappe-ui'
+
+const showOnboardingBanner = ref(false)
+const settings = useSettings()
+const onboardingDetails = settings.onboardingDetails
+const router = useRouter()
+
+watch(onboardingDetails, () => {
+	if (!onboardingDetails.data?.is_onboarded) {
+		showOnboardingBanner.value = true
+	} else {
+		showOnboardingBanner.value = false
+	}
+})
+
+const redirectToCourseForm = () => {
+	if (onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({ name: 'CourseForm', params: { courseName: 'new' } })
+	}
+}
+
+const redirectToChapterForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'CourseForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+			},
+		})
+	}
+}
+
+const redirectToLessonForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else if (!onboardingDetails.data?.chapter_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'LessonForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+				chapterNumber: 1,
+				lessonNumber: 1,
+			},
+		})
+	}
+}
+
+const skipOnboarding = createResource({
+	url: 'frappe.client.set_value',
+	makeParams() {
+		return {
+			doctype: 'LMS Settings',
+			name: 'LMS Settings',
+			fieldname: 'is_onboarding_complete',
+			value: 1,
+		}
+	},
+	onSuccess(data) {
+		onboardingDetails.reload()
+	},
+})
+</script>

frontend/src/components/ProgressBar.vue

@@ -1,24 +1,44 @@
 <template>
-	<div class="w-full bg-gray-200 rounded-full h-1 my-2">
-		<div
-			class="bg-gray-900 h-1 rounded-full"
-			:style="{ width: progressBarWidth }"
-		></div>
-	</div>
+	<Tooltip :text="`${props.progress}%`">
+		<div class="w-full bg-gray-200 rounded-full h-1 my-2">
+			<div
+				class="bg-gray-900 rounded-full"
+				:class="progressBarHeight"
+				:style="{ width: progressBarWidth }"
+			></div>
+		</div>
+	</Tooltip>
 </template>
 
 <script setup>
 import { computed } from 'vue'
+import { Tooltip } from 'frappe-ui'
 
 const props = defineProps({
 	progress: {
 		type: Number,
 		default: 0,
 	},
+	size: {
+		type: String,
+		default: 'sm',
+	},
 })
 
 const progressBarWidth = computed(() => {
 	const formattedPercentage = Math.min(Math.ceil(props.progress), 100)
 	return `${formattedPercentage}%`
 })
+
+const progressBarHeight = computed(() => {
+	if (props.size === 'sm') {
+		return 'h-1'
+	}
+	if (props.size === 'md') {
+		return 'h-2'
+	}
+	if (props.size === 'lg') {
+		return 'h-3'
+	}
+})
 </script>

frontend/src/components/Quiz.vue

@@ -1,7 +1,7 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-blue-100 space-y-1 py-2 px-2 rounded-md text-sm text-blue-800"
+			class="bg-blue-100 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-blue-800"
 		>
 			<div class="leading-5">
 				{{
@@ -118,15 +118,17 @@
 								class="w-3.5 h-3.5 text-gray-900 rounded-sm focus:ring-gray-200"
 								@change="markAnswer(index)"
 							/>
-
 							<div
 								v-else-if="quiz.data.show_answers"
 								v-for="(answer, idx) in showAnswers"
 							>
 								<div v-if="index - 1 == idx">
-									<CheckCircle v-if="answer" class="w-4 h-4 text-green-500" />
+									<CheckCircle
+										v-if="answer == 1"
+										class="w-4 h-4 text-green-500"
+									/>
 									<MinusCircle
-										v-else-if="questionDetails.data[`is_correct_${index}`]"
+										v-else-if="answer == 2"
 										class="w-4 h-4 text-green-500"
 									/>
 									<XCircle
@@ -271,6 +273,7 @@
 import {
 	Badge,
 	Button,
+	call,
 	createResource,
 	ListView,
 	TextEditor,
@@ -280,6 +283,7 @@ import { ref, watch, reactive, inject, computed } from 'vue'
 import { createToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
+import { useRouter } from 'vue-router'
 import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
@@ -291,6 +295,7 @@ let questions = reactive([])
 const possibleAnswer = ref(null)
 const timer = ref(0)
 let timerInterval = null
+const router = useRouter()
 
 const props = defineProps({
 	quizName: {
@@ -397,6 +402,9 @@ const attempts = createResource({
 watch(
 	() => quiz.data,
 	() => {
+		if (quiz.data) {
+			populateQuestions()
+		}
 		if (quiz.data && quiz.data.max_attempts) {
 			attempts.reload()
 			resetQuiz()
@@ -493,8 +501,8 @@ const checkAnswer = () => {
 				selectedOptions.forEach((option, index) => {
 					if (option) {
 						showAnswers[index] = option && data[index]
-					} else if (questionDetails.data[`is_correct_${index + 1}`]) {
-						showAnswers[index] = 0
+					} else if (data[index] == 2) {
+						showAnswers[index] = 2
 					} else {
 						showAnswers[index] = undefined
 					}
@@ -557,6 +565,7 @@ const createSubmission = () => {
 		{},
 		{
 			onSuccess(data) {
+				markLessonProgress()
 				if (quiz.data && quiz.data.max_attempts) attempts.reload()
 				if (quiz.data.duration) clearInterval(timerInterval)
 			},
@@ -580,6 +589,16 @@ const getInstructions = (question) => {
 	else return __('Type your answer')
 }
 
+const markLessonProgress = () => {
+	if (router.currentRoute.value.name == 'Lesson') {
+		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,
+		})
+	}
+}
+
 const getSubmissionColumns = () => {
 	return [
 		{

frontend/src/components/QuizPlugin.vue

@@ -1,58 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			size: 'xl',
-		}"
-	>
-		<template #body>
-			<div class="p-5 space-y-4">
-				<div class="text-lg font-semibold">
-					{{ __('Add a quiz to your lesson') }}
-				</div>
-				<div>
-					<Link
-						v-model="quiz"
-						doctype="LMS Quiz"
-						:label="__('Select a quiz')"
-						:onCreate="(value, close) => redirectToQuizForm()"
-					/>
-				</div>
-				<div class="flex justify-end space-x-2">
-					<Button variant="solid" @click="addQuiz()">
-						{{ __('Save') }}
-					</Button>
-				</div>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup>
-import { Dialog, Button } from 'frappe-ui'
-import { onMounted, ref, nextTick } from 'vue'
-import Link from '@/components/Controls/Link.vue'
-
-const show = ref(false)
-const quiz = ref(null)
-
-const props = defineProps({
-	onQuizAddition: {
-		type: Function,
-		required: true,
-	},
-})
-
-onMounted(async () => {
-	await nextTick()
-	show.value = true
-})
-
-const addQuiz = () => {
-	props.onQuizAddition(quiz.value)
-	show.value = false
-}
-
-const redirectToQuizForm = () => {
-	window.open('/lms/quizzes/new', '_blank')
-}
-</script>

frontend/src/components/SettingDetails.vue

@@ -29,6 +29,7 @@
 <script setup>
 import { Button, Badge } from 'frappe-ui'
 import SettingFields from '@/components/SettingFields.vue'
+import { showToast } from '@/utils'
 
 const props = defineProps({
 	fields: {
@@ -54,7 +55,14 @@ const update = () => {
 			props.data.doc[f.name] = f.value
 		}
 	})
-	props.data.save.submit()
+	props.data.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
+			},
+		}
+	)
 }
 </script>
 

frontend/src/components/SettingFields.vue

@@ -90,6 +90,7 @@
 						:type="field.type"
 						:rows="field.rows"
 						:options="field.options"
+						:description="field.description"
 					/>
 				</div>
 			</div>
@@ -100,7 +101,7 @@
 import { FormControl, FileUploader, Button, Switch } from 'frappe-ui'
 import { computed } from 'vue'
 import { getFileSize, validateFile } from '@/utils'
-import { X, FileText } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'
 import CodeEditor from '@/components/Controls/CodeEditor.vue'
 

frontend/src/components/SidebarLink.vue

@@ -7,7 +7,7 @@
 	>
 		<div
 			class="flex items-center w-full duration-300 ease-in-out group"
-			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
+			:class="isCollapsed ? 'p-1 relative' : 'px-2 py-1'"
 		>
 			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
@@ -29,7 +29,15 @@
 			>
 				{{ __(link.label) }}
 			</span>
-			<span v-if="link.count" class="!ml-auto block text-xs text-gray-600">
+			<span
+				v-if="link.count"
+				class="!ml-auto block text-xs text-gray-600"
+				:class="
+					isCollapsed && link.count > 9
+						? 'absolute top-[2px] right-0 bg-white'
+						: ''
+				"
+			>
 				{{ link.count }}
 			</span>
 			<div

frontend/src/components/VideoBlock.vue

@@ -4,6 +4,7 @@
 			@timeupdate="updateTime"
 			@ended="videoEnded"
 			@click="togglePlay"
+			oncontextmenu="return false"
 			class="rounded-lg border border-gray-100 group cursor-pointer"
 			ref="videoRef"
 		>

frontend/src/pages/AssignmentForm.vue

@@ -0,0 +1,191 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<div class="space-x-2">
+			<router-link
+				v-if="assignment.doc?.name"
+				:to="{
+					name: 'AssignmentSubmissionList',
+					query: {
+						assignmentID: assignment.doc.name,
+					},
+				}"
+			>
+				<Button>
+					{{ __('Submission List') }}
+				</Button>
+			</router-link>
+			<Button variant="solid" @click="saveAssignment()">
+				{{ __('Save') }}
+			</Button>
+		</div>
+	</header>
+	<div class="w-3/4 mx-auto py-5">
+		<div class="font-semibold mb-4">
+			{{ __('Details') }}
+		</div>
+		<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
+			<FormControl
+				v-model="model.title"
+				:label="__('Title')"
+				:required="true"
+			/>
+			<FormControl
+				v-model="model.type"
+				type="select"
+				:options="assignmentOptions"
+				:label="__('Type')"
+				:required="true"
+			/>
+		</div>
+		<div>
+			<div class="text-xs text-gray-600 mb-2">
+				{{ __('Question') }}
+				<span class="text-ink-red-3">*</span>
+			</div>
+			<TextEditor
+				:content="model.question"
+				@change="(val) => (model.question = val)"
+				:editable="true"
+				:fixedMenu="true"
+				editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+			/>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	createDocumentResource,
+	createResource,
+	FormControl,
+	TextEditor,
+} from 'frappe-ui'
+import {
+	computed,
+	inject,
+	onMounted,
+	onBeforeUnmount,
+	reactive,
+	watch,
+} from 'vue'
+import { showToast } from '@/utils'
+import { useRouter } from 'vue-router'
+
+const user = inject('$user')
+const router = useRouter()
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		required: true,
+	},
+})
+
+const model = reactive({
+	title: '',
+	type: 'PDF',
+	question: '',
+})
+
+onMounted(() => {
+	if (
+		props.assignmentID == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+	if (props.assignmentID !== 'new') {
+		assignment.reload()
+	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+		saveAssignment()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const assignment = createDocumentResource({
+	doctype: 'LMS Assignment',
+	name: props.assignmentID,
+	auto: false,
+})
+
+const newAssignment = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Assignment',
+				...values,
+			},
+		}
+	},
+	onSuccess(data) {
+		router.push({ name: 'AssignmentForm', params: { assignmentID: data.name } })
+	},
+	onError(err) {
+		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+	},
+})
+
+const saveAssignment = () => {
+	if (props.assignmentID == 'new') {
+		newAssignment.submit({
+			...model,
+		})
+	} else {
+		assignment.setValue.submit(
+			{
+				...model,
+			},
+			{
+				onSuccess(data) {
+					showToast(__('Success'), __('Assignment saved successfully'), 'check')
+					assignment.reload()
+				},
+				onError(err) {
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				},
+			}
+		)
+	}
+}
+
+watch(assignment, () => {
+	Object.keys(assignment.doc).forEach((key) => {
+		model[key] = assignment.doc[key]
+	})
+})
+
+const breadcrumbs = computed(() => [
+	{
+		label: __('Assignments'),
+		route: { name: 'Assignments' },
+	},
+	{
+		label: assignment.doc ? assignment.doc.title : __('New Assignment'),
+	},
+])
+
+const assignmentOptions = computed(() => {
+	return [
+		{ label: 'PDF', value: 'PDF' },
+		{ label: 'Image', value: 'Image' },
+		{ label: 'Document', value: 'Document' },
+		{ label: 'Text', value: 'Text' },
+		{ label: 'URL', value: 'URL' },
+	]
+})
+</script>

frontend/src/pages/AssignmentSubmission.vue

@@ -3,137 +3,20 @@
 		class="flex justify-between sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<Button variant="solid" @click="submitAssignment()">
-			{{ __('Save') }}
-		</Button>
 	</header>
-	<div class="container py-5">
-		<div
-			v-if="submissionResource.data"
-			class="bg-blue-100 p-2 rounded-md leading-5 text-sm italic"
-		>
-			{{ __("You've successfully submitted the assignment.") }}
-			{{
-				__(
-					"Once the moderator grades your submission, you'll find the details here."
-				)
-			}}
-			{{ __('Feel free to make edits to your submission if needed.') }}
-		</div>
-		<div v-if="assignment.data">
-			<div>
-				<div class="text-xl font-semibold hidden">
-					{{ __('Question') }}
-				</div>
-				<div class="text-sm mt-1 hidden">
-					{{
-						__('Read the question carefully before attempting the assignment.')
-					}}
-				</div>
-				<div
-					v-html="assignment.data.question"
-					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
-				></div>
-			</div>
-			<div class="">
-				<div class="text-xl font-semibold mt-10">
-					{{ __('Submission') }}
-				</div>
-				<div v-if="showUploader()">
-					<div class="text-sm mt-1 mb-4">
-						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
-					</div>
-					<FileUploader
-						v-if="!submissionFile"
-						:fileTypes="getType()"
-						:validateFile="validateFile"
-						@success="(file) => saveSubmission(file)"
-					>
-						<template
-							#default="{
-								file,
-								uploading,
-								progress,
-								uploaded,
-								message,
-								error,
-								total,
-								success,
-								openFileSelector,
-							}"
-						>
-							<Button @click="openFileSelector" :loading="uploading">
-								{{
-									uploading
-										? __('Uploading {0}%').format(progress)
-										: __('Upload File')
-								}}
-							</Button>
-						</template>
-					</FileUploader>
-					<div v-else>
-						<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
-							</div>
-							<div class="flex flex-col">
-								<span>
-									{{ submissionFile.file_name }}
-								</span>
-								<span class="text-sm text-gray-500 mt-1">
-									{{ getFileSize(submissionFile.file_size) }}
-								</span>
-							</div>
-							<X
-								@click="removeSubmission()"
-								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-							/>
-						</div>
-					</div>
-				</div>
-				<div v-else-if="assignment.data.type == 'URL'">
-					<div class="text-sm mb-4">
-						{{ __('Enter a URL') }}
-					</div>
-					<FormControl v-model="answer" />
-				</div>
-				<div v-else>
-					<div class="text-sm mb-4">
-						{{ __('Write your answer here') }}
-					</div>
-					<TextEditor
-						:content="answer"
-						@change="(val) => (answer = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
-					/>
-				</div>
-			</div>
-		</div>
+	<div class="overflow-hidden h-[calc(100vh-3.2rem)]">
+		<Assignment :assignmentID="assignmentID" :submissionName="submissionName" />
 	</div>
 </template>
 <script setup>
-import {
-	Breadcrumbs,
-	createResource,
-	FileUploader,
-	Button,
-	FormControl,
-	TextEditor,
-} from 'frappe-ui'
-import { FileText, X } from 'lucide-vue-next'
-import { computed, inject, onMounted, ref } from 'vue'
-import { showToast, getFileSize } from '../utils'
-import { useRouter } from 'vue-router'
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import { computed, inject, onMounted } from 'vue'
+import Assignment from '@/components/Assignment.vue'
 
 const user = inject('$user')
-const submissionFile = ref(null)
-const answer = ref(null)
-const router = useRouter()
 
 const props = defineProps({
-	assignmentName: {
+	assignmentID: {
 		type: String,
 		required: true,
 	},
@@ -143,186 +26,40 @@ const props = defineProps({
 	},
 })
 
-const assignment = createResource({
-	url: 'frappe.client.get',
+const title = createResource({
+	url: 'frappe.client.get_value',
 	params: {
 		doctype: 'LMS Assignment',
-		name: props.assignmentName,
+		fieldname: 'title',
+		filters: {
+			name: props.assignmentID,
+		},
 	},
 	auto: true,
 })
 
-const showUploader = () => {
-	return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
-}
-
-const updateSubmission = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		let fieldname = {}
-		if (showUploader()) {
-			fieldname.assignment_attachment = submissionFile.value.file_url
-		} else {
-			fieldname.answer = answer.value
-		}
-		return {
-			doctype: 'LMS Assignment Submission',
-			name: props.submissionName,
-			fieldname: fieldname,
-		}
-	},
-})
-
-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		submissionFile.value = data
-	},
-})
-
-const newSubmission = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		let doc = {
-			doctype: 'LMS Assignment Submission',
-			assignment: props.assignmentName,
-			member: user.data?.name,
-		}
-		if (showUploader()) {
-			doc.assignment_attachment = submissionFile.value.file_url
-		} else {
-			doc.answer = answer.value
-		}
-		return {
-			doc: doc,
-		}
-	},
-})
-
-const submissionResource = createResource({
-	url: 'frappe.client.get_value',
-	params: {
-		doctype: 'LMS Assignment Submission',
-		fieldname: showUploader() ? 'assignment_attachment' : 'answer',
-		filters: {
-			name: props.submissionName,
-		},
-	},
-	onSuccess(data) {
-		if (data.assignment_attachment)
-			imageResource.reload({ image: data.assignment_attachment })
-		if (data.answer) answer.value = data.answer
-	},
-})
 onMounted(() => {
 	if (!user.data) {
 		window.location.href = '/login'
 	}
-	if (props.submissionName != 'new') {
-		submissionResource.reload()
-	}
 })
 
-const submitAssignment = () => {
-	if (props.submissionName != 'new') {
-		updateSubmission.submit(
-			{},
-			{
-				onSuccess(data) {
-					showToast('Success', 'Submission updated successfully.', 'check')
-				},
-				onError(err) {
-					showToast('Error', err.messages?.[0] || err, 'x')
-				},
-			}
-		)
-	} else {
-		addNewSubmission()
-	}
-}
-
-const addNewSubmission = () => {
-	newSubmission.submit(
-		{},
-		{
-			onSuccess(data) {
-				showToast('Success', 'Assignment submitted successfully.', 'check')
-				router.push({
-					name: 'AssignmentSubmission',
-					params: {
-						assignmentName: props.assignmentName,
-						submissionName: data.name,
-					},
-				})
-			},
-			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
-			},
-		}
-	)
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
-			label: 'Assignment',
+			label: 'Submissions',
+			route: { name: 'AssignmentSubmissionList' },
 		},
 		{
-			label: assignment.data?.title,
+			label: title.data?.title,
 			route: {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: assignment.data?.name,
+					assignmentID: props.assignmentID,
 				},
 			},
 		},
 	]
 	return crumbs
 })
-
-const saveSubmission = (file) => {
-	submissionFile.value = file
-}
-
-const getType = () => {
-	const type = assignment.data?.type
-	if (type == 'Image') {
-		return ['image/*']
-	} else if (type == 'Document') {
-		return [
-			'.doc',
-			'.docx',
-			'.xml',
-			'application/msword',
-			'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-		]
-	} else if (type == 'PDF') {
-		return ['.pdf']
-	}
-}
-
-const validateFile = (file) => {
-	let type = assignment.data?.type
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	} else if (
-		type == 'Document' &&
-		!['doc', 'docx', 'xml'].includes(extension)
-	) {
-		return 'Only document file is allowed.'
-	} else if (type == 'PDF' && !['pdf'].includes(extension)) {
-		return 'Only PDF file is allowed.'
-	}
-}
-
-const removeSubmission = () => {
-	submissionFile.value = null
-}
 </script>

frontend/src/pages/AssignmentSubmissionList.vue

@@ -0,0 +1,217 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+	</header>
+	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="grid grid-cols-3 gap-5 mb-5">
+			<Link
+				doctype="LMS Assignment"
+				v-model="assignmentID"
+				:placeholder="__('Assignment')"
+			/>
+			<Link doctype="User" v-model="member" :placeholder="__('Member')" />
+			<FormControl
+				v-model="status"
+				type="select"
+				:options="statusOptions"
+				:placeholder="__('Status')"
+			/>
+		</div>
+		<ListView
+			v-if="submissions.loading || submissions.data?.length"
+			:columns="submissionColumns"
+			:rows="submissions.data"
+			rowKey="name"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+			>
+				<ListHeaderItem :item="item" v-for="item in submissionColumns" />
+			</ListHeader>
+			<ListRows>
+				<router-link
+					v-for="row in submissions.data"
+					:to="{
+						name: 'AssignmentSubmission',
+						params: {
+							assignmentID: row.assignment,
+							submissionName: row.name,
+						},
+					}"
+				>
+					<ListRow :row="row">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div v-if="column.key == 'status'">
+									<Badge :theme="getStatusTheme(row[column.key])">
+										{{ row[column.key] }}
+									</Badge>
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</router-link>
+			</ListRows>
+		</ListView>
+		<div
+			v-else
+			class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+		>
+			<Pencil class="size-8 mx-auto stroke-1 text-gray-500" />
+			<div class="text-xl font-medium">
+				{{ __('No submissions') }}
+			</div>
+			<div class="leading-5">
+				{{ __('There are no submissions for this assignment.') }}
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Badge,
+	Breadcrumbs,
+	createListResource,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { Pencil } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+
+const user = inject('$user')
+const dayjs = inject('$dayjs')
+const router = useRouter()
+const assignmentID = ref('')
+const member = ref('')
+const status = ref('')
+
+onMounted(() => {
+	if (!user.data?.is_instructor && !user.data?.is_moderator) {
+		router.push({ name: 'Courses' })
+	}
+	assignmentID.value = router.currentRoute.value.query.assignmentID
+	member.value = router.currentRoute.value.query.member
+	status.value = router.currentRoute.value.query.status
+	reloadSubmissions()
+})
+
+const getAssignmentFilters = () => {
+	let filters = {}
+	if (assignmentID.value) {
+		filters.assignment = assignmentID.value
+	}
+	if (member.value) {
+		filters.member = member.value
+	}
+	if (status.value) {
+		filters.status = status.value
+	}
+	return filters
+}
+
+const submissions = createListResource({
+	doctype: 'LMS Assignment Submission',
+	fields: [
+		'name',
+		'assignment',
+		'assignment_title',
+		'member_name',
+		'creation',
+		'status',
+	],
+	orderBy: 'creation desc',
+	transform(data) {
+		return data.map((row) => {
+			return {
+				...row,
+				creation: dayjs(row.creation).fromNow(),
+			}
+		})
+	},
+})
+
+// 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: {
+			assignmentID: assignmentID.value,
+			member: member.value,
+			status: status.value,
+		},
+	})
+	reloadSubmissions()
+})
+
+const reloadSubmissions = () => {
+	submissions.update({
+		filters: getAssignmentFilters(),
+	})
+	submissions.reload()
+}
+
+const submissionColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: 1,
+		},
+		{
+			label: 'Assignment',
+			key: 'assignment_title',
+			width: 2,
+		},
+		{
+			label: 'Submitted',
+			key: 'creation',
+			width: 1,
+			align: 'left',
+		},
+		{
+			label: 'Status',
+			key: 'status',
+			width: 1,
+			align: 'center',
+		},
+	]
+})
+
+const statusOptions = computed(() => {
+	return [
+		{ label: '', value: '' },
+		{ label: 'Pass', value: 'Pass' },
+		{ label: 'Fail', value: 'Fail' },
+		{ label: 'Not Graded', value: 'Not Graded' },
+	]
+})
+
+const getStatusTheme = (status) => {
+	if (status === 'Pass') {
+		return 'green'
+	} else if (status === 'Not Graded') {
+		return 'blue'
+	} else {
+		return 'red'
+	}
+}
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: 'Assignment Submissions',
+		},
+	]
+})
+</script>

frontend/src/pages/Assignments.vue

@@ -0,0 +1,187 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<router-link
+			:to="{
+				name: 'AssignmentForm',
+				params: {
+					assignmentID: 'new',
+				},
+			}"
+		>
+			<Button variant="solid">
+				<template #prefix>
+					<Plus class="w-4 h-4" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</router-link>
+	</header>
+
+	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="grid grid-cols-3 gap-5 mb-5">
+			<FormControl v-model="titleFilter" :placeholder="__('Search by title')" />
+			<FormControl
+				v-model="typeFilter"
+				type="select"
+				:options="assignmentTypes"
+				:placeholder="__('Type')"
+			/>
+		</div>
+		<ListView
+			v-if="assignments.data?.length"
+			:columns="assignmentColumns"
+			:rows="assignments.data"
+			row-key="name"
+			:options="{
+				showTooltip: false,
+				selectable: false,
+				getRowRoute: (row) => ({
+					name: 'AssignmentForm',
+					params: {
+						assignmentID: row.name,
+					},
+				}),
+			}"
+		>
+		</ListView>
+		<div
+			v-else
+			class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+		>
+			<Pencil class="size-10 mx-auto stroke-1 text-gray-500" />
+			<div class="text-xl font-medium">
+				{{ __('No assignments found') }}
+			</div>
+			<div class="leading-5">
+				{{
+					__(
+						'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
+					)
+				}}
+			</div>
+		</div>
+		<div
+			v-if="assignments.data && assignments.hasNextPage"
+			class="flex justify-center my-5"
+		>
+			<Button @click="assignments.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	createListResource,
+	FormControl,
+	ListView,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { Plus, Pencil } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const user = inject('$user')
+const dayjs = inject('$dayjs')
+const titleFilter = ref('')
+const typeFilter = ref('')
+const router = useRouter()
+
+onMounted(() => {
+	if (!user.data?.is_moderator && !user.data?.is_instructor) {
+		router.push({ name: 'Courses' })
+	}
+
+	titleFilter.value = router.currentRoute.value.query.title
+	typeFilter.value = router.currentRoute.value.query.type
+})
+
+watch([titleFilter, typeFilter], () => {
+	router.push({
+		query: {
+			title: titleFilter.value,
+			type: typeFilter.value,
+		},
+	})
+	reloadAssignments()
+})
+
+const reloadAssignments = () => {
+	assignments.update({
+		filters: assignmentFilter.value,
+	})
+	assignments.reload()
+}
+
+const assignmentFilter = computed(() => {
+	let filters = {}
+	if (titleFilter.value) {
+		filters.title = ['like', `%${titleFilter.value}%`]
+	}
+	if (typeFilter.value) {
+		filters.type = typeFilter.value
+	}
+	if (!user.data?.is_moderator) {
+		filters.owner = user.data?.email
+	}
+	return filters
+})
+
+const assignments = createListResource({
+	doctype: 'LMS Assignment',
+	fields: ['name', 'title', 'type', 'creation'],
+	orderBy: 'modified desc',
+	cache: ['assignments'],
+	transform(data) {
+		return data.map((row) => {
+			return {
+				...row,
+				creation: dayjs(row.creation).fromNow(),
+			}
+		})
+	},
+})
+
+const assignmentColumns = computed(() => {
+	return [
+		{
+			label: __('Title'),
+			key: 'title',
+			width: 2,
+		},
+		{
+			label: __('Type'),
+			key: 'type',
+			width: 1,
+			align: 'left',
+		},
+		{
+			label: __('Created'),
+			key: 'creation',
+			width: 1,
+			align: 'center',
+		},
+	]
+})
+
+const assignmentTypes = computed(() => {
+	let types = ['', 'Document', 'Image', 'PDF', 'URL', 'Text']
+	return types.map((type) => {
+		return {
+			label: __(type),
+			value: type,
+		}
+	})
+})
+
+const breadcrumbs = computed(() => [
+	{
+		label: 'Assignments',
+		route: { name: 'Assignments' },
+	},
+])
+</script>

frontend/src/pages/Batch.vue

@@ -4,18 +4,30 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<Button v-if="user.data?.is_moderator" @click="openAnnouncementModal()">
-				<span>
-					{{ __('Make an Announcement') }}
-				</span>
-				<template #suffix>
-					<SendIcon class="h-4 stroke-1.5" />
-				</template>
-			</Button>
+			<div class="flex items-center space-x-2">
+				<Button
+					v-if="user.data?.is_moderator"
+					@click="openCertificateDialog = true"
+				>
+					{{ __('Generate Certificates') }}
+				</Button>
+				<Button v-if="user.data?.is_moderator" @click="openAnnouncementModal()">
+					<span>
+						{{ __('Make an Announcement') }}
+					</span>
+					<template #suffix>
+						<SendIcon class="h-4 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
 		</header>
 		<div v-if="batch.data" class="grid grid-cols-[70%,30%] h-screen">
-			<div class="border-r-2">
-				<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-y-hidden">
+			<div class="border-r">
+				<Tabs
+					v-model="tabIndex"
+					:tabs="tabs"
+					tablistClass="overflow-y-hidden bg-white"
+				>
 					<template #tab="{ tab, selected }" class="overflow-x-hidden">
 						<div>
 							<button
@@ -47,15 +59,15 @@
 							<div v-if="tab.label == 'Courses'">
 								<BatchCourses :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Dashboard'">
+							<div v-else-if="tab.label == 'Dashboard' && isStudent">
 								<BatchDashboard :batch="batch" :isStudent="isStudent" />
 							</div>
+							<div v-else-if="tab.label == 'Dashboard'">
+								<BatchStudents :batch="batch.data" />
+							</div>
 							<div v-else-if="tab.label == 'Live Class'">
 								<LiveClass :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Students'">
-								<BatchStudents :batch="batch.data.name" />
-							</div>
 							<div v-else-if="tab.label == 'Assessments'">
 								<Assessments :batch="batch.data.name" />
 							</div>
@@ -77,12 +89,12 @@
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-2xl font-semibold mb-2">
+				<div class="text-xl font-semibold mb-2">
 					{{ batch.data.title }}
 				</div>
 				<div v-html="batch.data.description" class="leading-5 mb-2"></div>
 
-				<div class="flex avatar-group overlap mb-5">
+				<div class="flex items-center avatar-group overlap mb-5">
 					<div
 						class="h-6 mr-1"
 						:class="{
@@ -165,6 +177,7 @@
 			</div>
 		</div>
 	</div>
+	<BulkCertificates v-model="openCertificateDialog" :batch="batch.data" />
 </template>
 <script setup>
 import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
@@ -182,6 +195,7 @@ import {
 	SendIcon,
 	MessageCircle,
 	Globe,
+	ShieldCheck,
 } from 'lucide-vue-next'
 import { formatTime, updateDocumentTitle } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
@@ -193,9 +207,11 @@ import Announcements from '@/components/Annoucements.vue'
 import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
 import Discussions from '@/components/Discussions.vue'
 import DateRange from '@/components/Common/DateRange.vue'
+import BulkCertificates from '@/components/Modals/BulkCertificates.vue'
 
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
+const openCertificateDialog = ref(false)
 
 const props = defineProps({
 	batchName: {
@@ -214,7 +230,7 @@ const batch = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let crumbs = [{ label: 'All Batches', route: { name: 'Batches' } }]
+	let crumbs = [{ label: 'Batches', route: { name: 'Batches' } }]
 	if (!isStudent.value) {
 		crumbs.push({
 			label: 'Details',
@@ -236,7 +252,7 @@ const breadcrumbs = computed(() => {
 const isStudent = computed(() => {
 	return (
 		user?.data &&
-		batch.data?.students.length &&
+		batch.data?.students?.length &&
 		batch.data?.students.includes(user.data.name)
 	)
 })
@@ -244,34 +260,33 @@ const isStudent = computed(() => {
 const tabIndex = ref(0)
 const tabs = computed(() => {
 	let batchTabs = []
-	if (isStudent.value) {
-		batchTabs.push({
-			label: 'Dashboard',
-			icon: LayoutDashboard,
-		})
-	}
+	batchTabs.push({
+		label: 'Dashboard',
+		icon: LayoutDashboard,
+	})
+
+	batchTabs.push({
+		label: 'Courses',
+		icon: BookOpen,
+	})
+
+	batchTabs.push({
+		label: 'Live Class',
+		icon: Laptop,
+	})
+
 	if (user.data?.is_moderator) {
-		batchTabs.push({
-			label: 'Students',
-			icon: Contact2,
-		})
 		batchTabs.push({
 			label: 'Assessments',
 			icon: BookOpenCheck,
 		})
 	}
-	batchTabs.push({
-		label: 'Live Class',
-		icon: Laptop,
-	})
-	batchTabs.push({
-		label: 'Courses',
-		icon: BookOpen,
-	})
+
 	batchTabs.push({
 		label: 'Announcements',
 		icon: Mail,
 	})
+
 	batchTabs.push({
 		label: 'Discussions',
 		icon: MessageCircle,

frontend/src/pages/BatchDetail.vue

@@ -137,7 +137,7 @@ const courses = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let items = [{ label: 'All 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

@@ -15,7 +15,11 @@
 				</div>
 				<div class="grid grid-cols-2 gap-10 mb-4 space-y-2">
 					<div>
-						<FormControl v-model="batch.title" :label="__('Title')" />
+						<FormControl
+							v-model="batch.title"
+							:label="__('Title')"
+							:required="true"
+						/>
 					</div>
 					<div class="flex flex-col space-y-2">
 						<FormControl
@@ -32,61 +36,73 @@
 				</div>
 			</div>
 			<div class="mb-4">
-				<div>
-					<FileUploader
-						v-if="!batch.image"
-						class="mt-4"
-						:fileTypes="['image/*']"
-						:validateFile="validateFile"
-						@success="(file) => saveImage(file)"
-					>
-						<template v-slot="{ file, progress, uploading, openFileSelector }">
-							<div class="mb-4">
-								<Button @click="openFileSelector" :loading="uploading">
-									{{ uploading ? `Uploading ${progress}%` : 'Upload an image' }}
-								</Button>
-							</div>
-						</template>
-					</FileUploader>
-					<div v-else class="mb-4">
-						<div class="text-xs text-gray-600 mb-1">
-							{{ __('Meta Image') }}
-						</div>
+				<div class="text-xs text-gray-600 mb-2">
+					{{ __('Meta Image') }}
+				</div>
+				<FileUploader
+					v-if="!batch.image"
+					:fileTypes="['image/*']"
+					:validateFile="validateFile"
+					@success="(file) => saveImage(file)"
+				>
+					<template v-slot="{ file, progress, uploading, openFileSelector }">
 						<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							<div class="border rounded-md w-fit py-5 px-20">
+								<Image class="size-5 stroke-1 text-gray-700" />
 							</div>
-							<div class="flex flex-col">
-								<span>
-									{{ batch.image.file_name }}
-								</span>
-								<span class="text-sm text-gray-500 mt-1">
-									{{ getFileSize(batch.image.file_size) }}
-								</span>
+							<div class="ml-4">
+								<Button @click="openFileSelector">
+									{{ __('Upload') }}
+								</Button>
+								<div class="mt-2 text-gray-600 text-sm">
+									{{
+										__(
+											'Appears when the batch URL is shared on any online platform'
+										)
+									}}
+								</div>
+							</div>
+						</div>
+					</template>
+				</FileUploader>
+				<div v-else class="mb-4">
+					<div class="flex items-center">
+						<img :src="batch.image.file_url" class="border rounded-md w-40" />
+						<div class="ml-4">
+							<Button @click="removeImage()">
+								{{ __('Remove') }}
+							</Button>
+							<div class="mt-2 text-gray-600 text-sm">
+								{{
+									__(
+										'Appears when the batch URL is shared on any online platform'
+									)
+								}}
 							</div>
-							<X
-								@click="removeImage()"
-								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-							/>
 						</div>
 					</div>
 				</div>
-				<MultiSelect
-					v-model="instructors"
-					doctype="User"
-					:label="__('Instructors')"
-				/>
 			</div>
+			<MultiSelect
+				v-model="instructors"
+				doctype="User"
+				:label="__('Instructors')"
+				:required="true"
+				:filters="{ ignore_user_type: 1 }"
+			/>
 			<div class="mb-4">
 				<FormControl
 					v-model="batch.description"
 					:label="__('Description')"
 					type="textarea"
 					class="my-4"
+					:placeholder="__('Short description of the batch')"
+					:required="true"
 				/>
 				<div>
 					<label class="block text-sm text-gray-600 mb-1">
 						{{ __('Batch Details') }}
+						<span class="text-red-500">*</span>
 					</label>
 					<TextEditor
 						:content="batch.batch_details"
@@ -108,12 +124,14 @@
 							:label="__('Start Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_date"
 							:label="__('End Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -122,18 +140,22 @@
 							:label="__('Start Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_time"
 							:label="__('End Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.timezone"
 							:label="__('Timezone')"
 							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
 							class="mb-4"
+							:required="true"
 						/>
 					</div>
 				</div>
@@ -149,6 +171,7 @@
 							:label="__('Seat Count')"
 							type="number"
 							class="mb-4"
+							:placeholder="__('Number of seats available')"
 						/>
 						<FormControl
 							v-model="batch.evaluation_end_date"
@@ -228,11 +251,11 @@ import {
 	createResource,
 } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
-import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import { useRouter } from 'vue-router'
-import { getFileSize, showToast } from '../utils'
-import { X, FileText } from 'lucide-vue-next'
+import { showToast } from '@/utils'
+import { Image } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
+import MultiSelect from '@/components/Controls/MultiSelect.vue'
 
 const router = useRouter()
 const user = inject('$user')
@@ -322,6 +345,10 @@ const batchDetail = createResource({
 				data.instructors.forEach((instructor) => {
 					instructors.value.push(instructor.instructor)
 				})
+			} else if (['start_time', 'end_time'].includes(key)) {
+				let [hours, minutes, seconds] = data[key].split(':')
+				hours = hours.length == 1 ? '0' + hours : hours
+				batch[key] = `${hours}:${minutes}`
 			} else if (Object.hasOwn(batch, key)) batch[key] = data[key]
 		})
 		let checkboxes = ['published', 'paid_batch', 'allow_self_enrollment']

frontend/src/pages/Batches.vue

@@ -40,6 +40,7 @@
 				{{ __('Loading Batches...') }}
 			</div>
 			<Tabs
+				v-if="hasBatches"
 				v-model="tabIndex"
 				:tabs="makeTabs"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
@@ -79,24 +80,63 @@
 							<BatchCard :batch="batch" />
 						</router-link>
 					</div>
-					<div
-						v-else
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} batches found').format(tab.label.toLowerCase()) }}
-							</div>
-						</div>
+					<div v-else class="p-5 italic text-gray-500">
+						{{ __('No {0} batches').format(tab.label.toLowerCase()) }}
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					!batches.loading &&
+					!hasBatches &&
+					(user.data?.is_instructor || user.data?.is_moderator)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'BatchForm',
+						params: {
+							batchName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Batch') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can link courses and assessments to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="!batches.loading && !hasBatches"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No batches found') }}
+				</div>
+				<div>
+					{{
+						__(
+							'There are no batches available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import {
-	createListResource,
 	createResource,
 	Breadcrumbs,
 	Button,
@@ -104,13 +144,14 @@ import {
 	Badge,
 	Select,
 } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import BatchCard from '@/components/BatchCard.vue'
 import { inject, ref, computed, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const currentCategory = ref(null)
+const hasBatches = ref(false)
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -119,10 +160,10 @@ onMounted(() => {
 	}
 })
 
-const batches = createListResource({
+const batches = createResource({
 	doctype: 'LMS Batch',
 	url: 'lms.lms.utils.get_batches',
-	cache: ['batches', user?.data?.email],
+	cache: ['batches', user.data?.email],
 	auto: true,
 })
 
@@ -183,6 +224,14 @@ const addToTabs = (label) => {
 	})
 }
 
+watch(batches, () => {
+	Object.keys(batches.data).forEach((key) => {
+		if (batches.data[key].length) {
+			hasBatches.value = true
+		}
+	})
+})
+
 watch(
 	() => currentCategory.value,
 	() => {

frontend/src/pages/CourseDetail.vue

@@ -16,16 +16,18 @@
 					</div>
 					<div class="flex items-center">
 						<Tooltip
-							v-if="course.data.avg_rating"
+							v-if="parseInt(course.data.rating) > 0"
 							:text="__('Average Rating')"
 							class="flex items-center"
 						>
 							<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
 							<span class="ml-1">
-								{{ course.data.avg_rating }}
+								{{ course.data.rating }}
 							</span>
 						</Tooltip>
-						<span v-if="course.data.avg_rating" class="mx-3">&middot;</span>
+						<span v-if="parseInt(course.data.rating) > 0" class="mx-3"
+							>&middot;</span
+						>
 						<Tooltip
 							v-if="course.data.enrollment_count"
 							:text="__('Enrolled Students')"
@@ -67,14 +69,18 @@
 					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
-						class="course-description"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
 					></div>
 					<div class="mt-10">
-						<CourseOutline :courseName="course.data.name" :showOutline="true" />
+						<CourseOutline
+							:title="__('Course Outline')"
+							:courseName="course.data.name"
+							:showOutline="true"
+						/>
 					</div>
 					<CourseReviews
 						:courseName="course.data.name"
-						:avg_rating="course.data.avg_rating"
+						:avg_rating="course.data.rating"
 						:membership="course.data.membership"
 					/>
 				</div>
@@ -113,10 +119,10 @@ const course = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
+	let items = [{ label: 'Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: course?.data?.title,
-		route: { name: 'CourseDetail', params: { course: course?.data?.name } },
+		route: { name: 'CourseDetail', params: { courseName: course?.data?.name } },
 	})
 	return items
 })
@@ -131,26 +137,6 @@ const pageMeta = computed(() => {
 updateDocumentTitle(pageMeta)
 </script>
 <style>
-.course-description p {
-	margin-bottom: 1rem;
-	line-height: 1.7;
-}
-.course-description li {
-	line-height: 1.7;
-}
-
-.course-description ol {
-	list-style: auto;
-	margin: revert;
-	padding: revert;
-}
-
-.course-description ul {
-	list-style: disc;
-	margin: revert;
-	padding: revert;
-}
-
 .avatar-group {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/CourseForm.vue

@@ -7,6 +7,14 @@
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
+						<Button v-if="courseResource.data?.name" @click="trashCourse()">
+							<template #prefix>
+								<Trash2 class="w-4 h-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</Button>
 						<Button variant="solid" @click="submitCourse()" class="ml-2">
 							<span>
 								{{ __('Save') }}
@@ -23,15 +31,23 @@
 							v-model="course.title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="course.short_introduction"
 							:label="__('Short Introduction')"
+							:placeholder="
+								__(
+									'A one line introduction to the course that appears on the course card'
+								)
+							"
 							class="mb-4"
+							:required="true"
 						/>
 						<div class="mb-4">
-							<div class="mb-1.5 text-sm text-gray-700">
+							<div class="mb-1.5 text-sm text-gray-600">
 								{{ __('Course Description') }}
+								<span class="text-red-500">*</span>
 							</div>
 							<TextEditor
 								:content="course.description"
@@ -41,49 +57,62 @@
 								editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
 							/>
 						</div>
-						<FileUploader
-							v-if="!course.course_image"
-							:fileTypes="['image/*']"
-							:validateFile="validateFile"
-							@success="(file) => saveImage(file)"
-						>
-							<template
-								v-slot="{ file, progress, uploading, openFileSelector }"
-							>
-								<div class="mb-4">
-									<Button @click="openFileSelector" :loading="uploading">
-										{{
-											uploading ? `Uploading ${progress}%` : 'Upload an image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-						<div v-else class="mb-4">
-							<div class="text-xs text-gray-600 mb-1">
+						<div class="mb-4">
+							<div class="text-xs text-gray-600 mb-2">
 								{{ __('Course Image') }}
+								<span class="text-red-500">*</span>
 							</div>
-							<div class="flex items-center">
-								<div class="border rounded-md p-2 mr-2">
-									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							<FileUploader
+								v-if="!course.course_image"
+								:fileTypes="['image/*']"
+								:validateFile="validateFile"
+								@success="(file) => saveImage(file)"
+							>
+								<template
+									v-slot="{ file, progress, uploading, openFileSelector }"
+								>
+									<div class="flex items-center">
+										<div class="border rounded-md w-fit py-5 px-20">
+											<Image class="size-5 stroke-1 text-gray-700" />
+										</div>
+										<div class="ml-4">
+											<Button @click="openFileSelector">
+												{{ __('Upload') }}
+											</Button>
+											<div class="mt-2 text-gray-600 text-sm">
+												{{
+													__('Appears on the course card in the course list')
+												}}
+											</div>
+										</div>
+									</div>
+								</template>
+							</FileUploader>
+							<div v-else class="mb-4">
+								<div class="flex items-center">
+									<img
+										:src="course.course_image.file_url"
+										class="border rounded-md w-40"
+									/>
+									<div class="ml-4">
+										<Button @click="removeImage()">
+											{{ __('Remove') }}
+										</Button>
+										<div class="mt-2 text-gray-600 text-sm">
+											{{ __('Appears on the course card in the course list') }}
+										</div>
+									</div>
 								</div>
-								<div class="flex flex-col">
-									<span>
-										{{ course.course_image.file_name }}
-									</span>
-									<span class="text-sm text-gray-500 mt-1">
-										{{ getFileSize(course.course_image.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-								/>
 							</div>
 						</div>
 						<FormControl
 							v-model="course.video_link"
 							:label="__('Preview Video')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
 							class="mb-4"
 						/>
 						<div class="mb-4">
@@ -104,6 +133,8 @@
 								</div>
 								<FormControl
 									v-model="newTag"
+									:placeholder="__('Add a keyword and then press enter')"
+									class="w-72"
 									@keyup.enter="updateTags()"
 									id="tags"
 								/>
@@ -121,6 +152,8 @@
 							v-model="instructors"
 							doctype="User"
 							:label="__('Instructors')"
+							:filters="{ ignore_user_type: 1 }"
+							:required="true"
 						/>
 					</div>
 					<div class="container border-t">
@@ -130,7 +163,7 @@
 						<div class="grid grid-cols-3 gap-10 mb-4">
 							<div
 								v-if="user.data?.is_moderator"
-								class="flex flex-col space-y-3"
+								class="flex flex-col space-y-4"
 							>
 								<FormControl
 									type="checkbox"
@@ -223,15 +256,11 @@ import {
 	ref,
 	reactive,
 	watch,
+	getCurrentInstance,
 } from 'vue'
-import {
-	convertToTitleCase,
-	showToast,
-	getFileSize,
-	updateDocumentTitle,
-} from '@/utils'
+import { showToast, updateDocumentTitle } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
-import { FileText, X } from 'lucide-vue-next'
+import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
@@ -243,6 +272,8 @@ const newTag = ref('')
 const router = useRouter()
 const instructors = ref([])
 const settingsStore = useSettings()
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -257,6 +288,7 @@ const course = reactive({
 	video_link: '',
 	course_image: null,
 	tags: '',
+	category: '',
 	published: false,
 	published_on: '',
 	featured: false,
@@ -403,6 +435,9 @@ const submitCourse = () => {
 			onSuccess(data) {
 				capture('course_created')
 				showToast('Success', 'Course created successfully', 'check')
+				if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+					settingsStore.onboardingDetails.reload()
+				}
 				router.push({
 					name: 'CourseForm',
 					params: { courseName: data.name },
@@ -415,23 +450,37 @@ const submitCourse = () => {
 	}
 }
 
-const validateMandatoryFields = () => {
-	const mandatory_fields = [
-		'title',
-		'short_introduction',
-		'description',
-		'video_link',
-		'course_image',
-	]
-	for (const field of mandatory_fields) {
-		if (!course[field]) {
-			let fieldLabel = convertToTitleCase(field.split('_').join(' '))
-			return `${fieldLabel} is mandatory`
+const deleteCourse = createResource({
+	url: 'lms.lms.api.delete_course',
+	makeParams(values) {
+		return {
+			course: props.courseName,
 		}
-	}
-	if (course.paid_course && (!course.course_price || !course.currency)) {
-		return __('Course price and currency are mandatory for paid courses')
-	}
+	},
+	onSuccess() {
+		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		router.push({ name: 'Courses' })
+	},
+})
+
+const trashCourse = () => {
+	$dialog({
+		title: __('Delete Course'),
+		message: __(
+			'Deleting the course will also delete all its chapters and lessons. Are you sure you want to delete this course?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteCourse.submit()
+					close()
+				},
+			},
+		],
+	})
 }
 
 watch(

frontend/src/pages/Courses.vue

@@ -8,7 +8,7 @@
 				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
 			/>
 			<div class="flex space-x-2 justify-end">
-				<div class="w-46 md:w-44">
+				<div class="w-40 md:w-44">
 					<FormControl
 						v-if="categories.data?.length"
 						type="select"
@@ -30,6 +30,7 @@
 					</FormControl>
 				</div>
 				<router-link
+					v-if="user.data?.is_moderator || user.data?.is_instructor"
 					:to="{
 						name: 'CourseForm',
 						params: {
@@ -37,7 +38,7 @@
 						},
 					}"
 				>
-					<Button v-if="user.data?.is_moderator" variant="solid">
+					<Button variant="solid">
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
@@ -48,6 +49,7 @@
 		</header>
 		<div class="">
 			<Tabs
+				v-if="hasCourses"
 				v-model="tabIndex"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 				:tabs="makeTabs"
@@ -101,47 +103,102 @@
 							<CourseCard :course="course" />
 						</router-link>
 					</div>
-					<div
-						v-else
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
-							</div>
-						</div>
+					<div v-else class="p-5 italic text-gray-500">
+						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					!courses.loading &&
+					(user.data?.is_moderator || user.data?.is_instructor)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Course') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can add chapters and lessons to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="!courses.loading && !hasCourses"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No courses found') }}
+				</div>
+				<div class="leading-5">
+					{{
+						__(
+							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import {
-	Breadcrumbs,
-	Tabs,
 	Badge,
+	Breadcrumbs,
 	Button,
-	FormControl,
+	call,
 	createResource,
+	FormControl,
+	Tabs,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus, Search } from 'lucide-vue-next'
+import { BookOpen, Plus, Search } from 'lucide-vue-next'
 import { ref, computed, inject, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
 const searchQuery = ref('')
 const currentCategory = ref(null)
+const hasCourses = ref(false)
+const router = useRouter()
+const settings = useSettings()
 
 onMounted(() => {
+	checkLearningPath()
 	let queries = new URLSearchParams(location.search)
 	if (queries.has('category')) {
 		currentCategory.value = queries.get('category')
 	}
 })
 
+const checkLearningPath = () => {
+	if (
+		settings.learningPaths.data &&
+		(!user.data?.is_moderator || !user.data?.is_instructor)
+	) {
+		router.push({ name: 'Programs' })
+	}
+}
+
 const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
 	cache: ['courses', user.data?.email],
@@ -223,6 +280,16 @@ const categories = createResource({
 	},
 })
 
+watch(courses, () => {
+	if (courses.data) {
+		Object.keys(courses.data).forEach((section) => {
+			if (courses.data[section].length) {
+				hasCourses.value = true
+			}
+		})
+	}
+})
+
 watch(
 	() => currentCategory.value,
 	() => {

frontend/src/pages/JobCreation.vue

@@ -19,8 +19,13 @@
 							v-model="job.job_title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
+						/>
+						<FormControl
+							v-model="job.location"
+							:label="__('Location')"
+							:required="true"
 						/>
-						<FormControl v-model="job.location" :label="__('Location')" />
 					</div>
 					<div>
 						<FormControl
@@ -29,18 +34,21 @@
 							type="select"
 							:options="jobTypes"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="job.status"
 							:label="__('Status')"
 							type="select"
 							:options="jobStatuses"
+							:required="true"
 						/>
 					</div>
 				</div>
 				<div class="mt-4">
 					<label class="block text-gray-600 text-xs mb-1">
 						{{ __('Description') }}
+						<span class="text-red-500">*</span>
 					</label>
 					<TextEditor
 						:content="job.description"
@@ -61,10 +69,12 @@
 							v-model="job.company_name"
 							:label="__('Company Name')"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="job.company_website"
 							:label="__('Company Website')"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -72,9 +82,11 @@
 							v-model="job.company_email_address"
 							:label="__('Company Email Address')"
 							class="mb-4"
+							:required="true"
 						/>
 						<label class="block text-gray-600 text-xs mb-1 mt-4">
 							{{ __('Company Logo') }}
+							<span class="text-red-500">*</span>
 						</label>
 						<FileUploader
 							v-if="!job.image"

frontend/src/pages/Jobs.vue

@@ -7,7 +7,22 @@
 				class="h-7"
 				:items="[{ label: __('Jobs'), route: { name: 'Jobs' } }]"
 			/>
-			<div class="flex">
+			<div class="flex space-x-2">
+				<div class="w-40 md:w-44">
+					<FormControl
+						v-model="jobType"
+						type="select"
+						:options="jobTypes"
+						:placeholder="__('Type')"
+					/>
+				</div>
+				<div class="w-28 md:w-36">
+					<FormControl type="text" placeholder="Search" v-model="searchQuery">
+						<template #prefix>
+							<Search class="w-4 h-4 stroke-1.5 text-gray-600" name="search" />
+						</template>
+					</FormControl>
+				</div>
 				<router-link
 					v-if="user.data?.name"
 					:to="{
@@ -26,9 +41,12 @@
 				</router-link>
 			</div>
 		</header>
-		<div v-if="jobs.data?.length">
-			<div class="divide-y lg:w-3/4 mx-auto p-5">
-				<div v-for="job in jobs.data">
+		<div v-if="jobsList?.length">
+			<div class="lg:w-3/4 mx-auto p-5">
+				<div class="text-xl font-semibold mb-5">
+					{{ __('Find the perfect job for you') }}
+				</div>
+				<div v-for="job in jobsList" class="divide-y">
 					<router-link
 						:to="{
 							name: 'JobDetail',
@@ -47,13 +65,22 @@
 	</div>
 </template>
 <script setup>
-import { Button, Breadcrumbs, createResource } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
-import { inject, computed } from 'vue'
+import { Button, Breadcrumbs, createResource, FormControl } from 'frappe-ui'
+import { Plus, Search } from 'lucide-vue-next'
+import { inject, computed, ref, onMounted } from 'vue'
 import JobCard from '@/components/JobCard.vue'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
+const jobType = ref(null)
+const searchQuery = ref('')
+
+onMounted(() => {
+	let queries = new URLSearchParams(location.search)
+	if (queries.has('type')) {
+		jobType.value = queries.get('type')
+	}
+})
 
 const jobs = createResource({
 	url: 'lms.lms.api.get_job_opportunities',
@@ -68,5 +95,32 @@ const pageMeta = computed(() => {
 	}
 })
 
+const jobsList = computed(() => {
+	let jobData = jobs.data
+	if (jobType.value && jobType.value != '') {
+		jobData = jobData.filter((job) => job.type == jobType.value)
+	}
+	if (searchQuery.value) {
+		let query = searchQuery.value.toLowerCase()
+		jobData = jobData.filter(
+			(job) =>
+				job.job_title.toLowerCase().includes(query) ||
+				job.company_name.toLowerCase().includes(query) ||
+				job.location.toLowerCase().includes(query)
+		)
+	}
+	return jobData
+})
+
+const jobTypes = computed(() => {
+	return [
+		'',
+		{ label: __('Full Time'), value: 'Full Time' },
+		{ label: __('Part Time'), value: 'Part Time' },
+		{ label: __('Contract'), value: 'Contract' },
+		{ label: __('Freelance'), value: 'Freelance' },
+	]
+})
+
 updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Lesson.vue

@@ -17,14 +17,9 @@
 						)
 					}}
 				</p>
-				<router-link
-					v-if="user.data"
-					:to="{ name: 'CourseDetail', params: { courseName: courseName } }"
-				>
-					<Button variant="solid">
-						{{ __('Start Learning') }}
-					</Button>
-				</router-link>
+				<Button v-if="user.data" @click="enrollStudent()" variant="solid">
+					{{ __('Start Learning') }}
+				</Button>
 				<Button v-else @click="redirectToLogin()">
 					{{ __('Login') }}
 				</Button>
@@ -108,7 +103,7 @@
 					<span
 						class="h-6 mr-1"
 						:class="{
-							'avatar-group overlap': lesson.data.instructors.length > 1,
+							'avatar-group overlap': lesson.data.instructors?.length > 1,
 						}"
 					>
 						<UserAvatar
@@ -116,7 +111,10 @@
 							:user="instructor"
 						/>
 					</span>
-					<CourseInstructors :instructors="lesson.data.instructors" />
+					<CourseInstructors
+						v-if="lesson.data?.instructors"
+						:instructors="lesson.data.instructors"
+					/>
 				</div>
 				<div
 					v-if="
@@ -151,6 +149,7 @@
 					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-5"
 				>
 					<LessonContent
+						v-if="lesson.data?.body"
 						:content="lesson.data.body"
 						:youtube="lesson.data.youtube"
 						:quizId="lesson.data.quiz_id"
@@ -194,7 +193,7 @@ import { createResource, Breadcrumbs, Button } from 'frappe-ui'
 import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { useRoute } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, updateDocumentTitle } from '../utils'
@@ -204,6 +203,7 @@ import CourseInstructors from '@/components/CourseInstructors.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
+const router = useRouter()
 const route = useRoute()
 const allowDiscussions = ref(false)
 const editor = ref(null)
@@ -243,6 +243,13 @@ const lesson = createResource({
 	},
 	auto: true,
 	onSuccess(data) {
+		if (Object.keys(data).length === 0) {
+			router.push({
+				name: 'CourseDetail',
+				params: { courseName: props.courseName },
+			})
+			return
+		}
 		lessonProgress.value = data.membership?.progress
 		if (data.content) editor.value = renderEditor('editor', data.content)
 		if (
@@ -298,17 +305,17 @@ const progress = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
+	let items = [{ label: 'Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: lesson?.data?.course_title,
-		route: { name: 'CourseDetail', params: { course: props.courseName } },
+		route: { name: 'CourseDetail', params: { courseName: props.courseName } },
 	})
 	items.push({
 		label: lesson?.data?.title,
 		route: {
 			name: 'Lesson',
 			params: {
-				course: props.courseName,
+				courseName: props.courseName,
 				chapterNumber: props.chapterNumber,
 				lessonNumber: props.lessonNumber,
 			},
@@ -369,16 +376,40 @@ const checkIfDiscussionsAllowed = () => {
 
 const allowEdit = () => {
 	if (user.data?.is_moderator) return true
-	if (lesson.data?.instructors.includes(user.data?.name)) return true
+	if (lesson.data?.instructors?.includes(user.data?.name)) return true
 	return false
 }
 
 const allowInstructorContent = () => {
 	if (user.data?.is_moderator) return true
-	if (lesson.data?.instructors.includes(user.data?.name)) return true
+	if (lesson.data?.instructors?.includes(user.data?.name)) return true
 	return false
 }
 
+const enrollment = createResource({
+	url: 'frappe.client.insert',
+	makeParams() {
+		return {
+			doc: {
+				doctype: 'LMS Enrollment',
+				course: props.courseName,
+				member: user.data?.name,
+			},
+		}
+	},
+})
+
+const enrollStudent = () => {
+	enrollment.submit(
+		{},
+		{
+			onSuccess() {
+				window.location.reload()
+			},
+		}
+	)
+}
+
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}`
 }

frontend/src/pages/LessonForm.vue

@@ -6,13 +6,22 @@
 					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"
 				>
 					<Breadcrumbs class="text-ellipsis" :items="breadcrumbs" />
-					<Button variant="solid" @click="saveLesson()" class="mt-3 md:mt-0">
+					<Button
+						variant="solid"
+						@click="saveLesson({ showSuccessMessage: true })"
+						class="mt-3 md:mt-0"
+					>
 						{{ __('Save') }}
 					</Button>
 				</header>
 				<div class="py-5">
 					<div class="w-5/6 mx-auto">
-						<FormControl v-model="lesson.title" label="Title" class="mb-4" />
+						<FormControl
+							v-model="lesson.title"
+							label="Title"
+							class="mb-4"
+							:required="true"
+						/>
 						<FormControl
 							v-model="lesson.include_in_preview"
 							type="checkbox"
@@ -69,7 +78,7 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, FormControl, createResource, Button } from 'frappe-ui'
+import { Breadcrumbs, Button, createResource, FormControl } from 'frappe-ui'
 import {
 	computed,
 	reactive,
@@ -83,12 +92,15 @@ import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { updateDocumentTitle, createToast, getEditorTools } from '@/utils'
 import { capture } from '@/telemetry'
+import { useSettings } from '@/stores/settings'
 
 const editor = ref(null)
 const instructorEditor = ref(null)
 const user = inject('$user')
 const openInstructorEditor = ref(false)
+const settingsStore = useSettings()
 let autoSaveInterval
+let showSuccessMessage = false
 
 const props = defineProps({
 	courseName: {
@@ -112,6 +124,7 @@ onMounted(() => {
 	capture('lesson_form_opened')
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
+	window.addEventListener('keydown', keyboardShortcut)
 })
 
 const renderEditor = (holder) => {
@@ -119,6 +132,7 @@ const renderEditor = (holder) => {
 		holder: holder,
 		tools: getEditorTools(true),
 		autofocus: true,
+		defaultBlock: 'markdown',
 	})
 }
 
@@ -181,12 +195,24 @@ const addInstructorNotes = (data) => {
 
 const enableAutoSave = () => {
 	autoSaveInterval = setInterval(() => {
-		saveLesson()
+		saveLesson({ showSuccessMessage: false })
 	}, 10000)
 }
 
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		saveLesson({ showSuccessMessage: true })
+		e.preventDefault()
+	}
+}
+
 onBeforeUnmount(() => {
 	clearInterval(autoSaveInterval)
+	window.removeEventListener('keydown', keyboardShortcut)
 })
 
 const newLessonResource = createResource({
@@ -338,7 +364,11 @@ const convertToJSON = (lessonData) => {
 	return blocks
 }
 
-const saveLesson = () => {
+const saveLesson = (e) => {
+	showSuccessMessage = false
+	if (typeof e != 'undefined' && e.showSuccessMessage) {
+		showSuccessMessage = true
+	}
 	editor.value.save().then((outputData) => {
 		lesson.content = JSON.stringify(outputData)
 		instructorEditor.value.save().then((outputData) => {
@@ -366,6 +396,9 @@ const createNewLesson = () => {
 						onSuccess() {
 							capture('lesson_created')
 							showToast('Success', 'Lesson created successfully', 'check')
+							if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+								settingsStore.onboardingDetails.reload()
+							}
 							lessonDetails.reload()
 						},
 					}
@@ -387,6 +420,11 @@ const editCurrentLesson = () => {
 			validate() {
 				return validateLesson()
 			},
+			onSuccess() {
+				showSuccessMessage
+					? showToast('Success', 'Lesson updated successfully', 'check')
+					: ''
+			},
 			onError(err) {
 				showToast('Error', err.message, 'x')
 			},

frontend/src/pages/ProgramForm.vue

@@ -0,0 +1,367 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadbrumbs" />
+		<Button variant="solid" @click="saveProgram()">
+			{{ __('Save') }}
+		</Button>
+	</header>
+	<div v-if="program.doc" class="pt-5 px-5 w-3/4 mx-auto space-y-10">
+		<FormControl v-model="program.doc.title" :label="__('Title')" />
+
+		<!-- Courses -->
+		<div>
+			<div class="flex items-center justify-between mb-2">
+				<div class="text-lg font-semibold">
+					{{ __('Program Courses') }}
+				</div>
+				<Button
+					@click="
+						() => {
+							currentForm = 'course'
+							showDialog = true
+						}
+					"
+				>
+					<template #prefix>
+						<Plus class="w-4 h-4" />
+					</template>
+					{{ __('Add') }}
+				</Button>
+			</div>
+
+			<ListView
+				:columns="courseColumns"
+				:rows="program.doc.program_courses"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in courseColumns" />
+				</ListHeader>
+				<ListRows>
+					<Draggable
+						:list="program.doc.program_courses"
+						item-key="name"
+						group="items"
+						@end="updateOrder"
+						class="cursor-move"
+					>
+						<template #item="{ element: row }">
+							<ListRow :row="row" />
+						</template>
+					</Draggable>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="remove(selections, unselectAll, 'program_courses')"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+
+		<!-- Members -->
+		<div>
+			<div class="flex items-center justify-between mb-2">
+				<div class="text-lg font-semibold">
+					{{ __('Program Members') }}
+				</div>
+				<Button
+					@click="
+						() => {
+							currentForm = 'member'
+							showDialog = true
+						}
+					"
+				>
+					<template #prefix>
+						<Plus class="w-4 h-4" />
+					</template>
+					{{ __('Add') }}
+				</Button>
+			</div>
+
+			<ListView
+				:columns="memberColumns"
+				:rows="program.doc.program_members"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in memberColumns" />
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in program.doc.program_members" />
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="remove(selections, unselectAll, 'program_members')"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+	</div>
+
+	<Dialog
+		v-model="showDialog"
+		:options="{
+			title:
+				currentForm == 'course'
+					? __('New Program Course')
+					: __('New Program Member'),
+			actions: [
+				{
+					label: __('Add'),
+					variant: 'solid',
+					onClick: () =>
+						currentForm == 'course'
+							? addProgramCourse(close)
+							: addProgramMember(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<Link
+				v-if="currentForm == 'course'"
+				v-model="course"
+				doctype="LMS Course"
+				:filters="{
+					disable_self_learning: 1,
+				}"
+				:label="__('Program Course')"
+				:description="
+					__(
+						'Only courses for which self learning is disabled can be added to program.'
+					)
+				"
+			/>
+
+			<Link
+				v-if="currentForm == 'member'"
+				v-model="member"
+				doctype="User"
+				:filters="{
+					ignore_user_type: 1,
+				}"
+				:label="__('Program Member')"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	call,
+	createDocumentResource,
+	Dialog,
+	FormControl,
+	ListView,
+	ListRows,
+	ListRow,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils/'
+import Draggable from 'vuedraggable'
+import { useRouter } from 'vue-router'
+
+const showDialog = ref(false)
+const currentForm = ref(null)
+const course = ref(null)
+const member = ref(null)
+const router = useRouter()
+
+const props = defineProps({
+	programName: {
+		type: String,
+		required: true,
+	},
+})
+
+const program = createDocumentResource({
+	doctype: 'LMS Program',
+	name: props.programName,
+	auto: true,
+	cache: ['program', props.programName],
+})
+
+const addProgramCourse = () => {
+	program.setValue.submit(
+		{
+			program_courses: [
+				...program.doc.program_courses,
+				{ course: course.value },
+			],
+		},
+		{
+			onSuccess(data) {
+				showDialog.value = false
+				course.value = null
+				showToast(__('Success'), __('Course added to program'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const addProgramMember = () => {
+	program.setValue.submit(
+		{
+			program_members: [
+				...program.doc.program_members,
+				{ member: member.value },
+			],
+		},
+		{
+			onSuccess(data) {
+				showDialog.value = false
+				member.value = null
+				showToast(__('Success'), __('Member added to program'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const remove = (selections, unselectAll, doctype) => {
+	selections = Array.from(selections)
+	program.setValue.submit(
+		{
+			[doctype]: program.doc[doctype].filter(
+				(row) => !selections.includes(row.name)
+			),
+		},
+		{
+			onSuccess(data) {
+				unselectAll()
+				showToast(__('Success'), __('Items removed successfully'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const updateOrder = (e) => {
+	let sourceIdx = e.from.dataset.idx
+	let targetIdx = e.to.dataset.idx
+	let courses = program.doc.program_courses
+	courses.splice(targetIdx, 0, courses.splice(sourceIdx, 1)[0])
+
+	courses.forEach((course, index) => {
+		course.idx = index + 1
+	})
+
+	program.setValue.submit(
+		{
+			program_courses: courses,
+		},
+		{
+			onSuccess(data) {
+				showToast(__('Success'), __('Course moved successfully'), 'check')
+				program.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const saveProgram = () => {
+	call('frappe.model.rename_doc.update_document_title', {
+		doctype: 'LMS Program',
+		docname: program.doc.name,
+		name: program.doc.title,
+	}).then((data) => {
+		router.push({ name: 'ProgramForm', params: { programName: data } })
+	})
+}
+
+const courseColumns = computed(() => {
+	return [
+		{
+			label: 'Title',
+			key: 'course_title',
+			width: 3,
+		},
+		{
+			label: 'ID',
+			key: 'course',
+			width: 3,
+		},
+	]
+})
+
+const memberColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member',
+			width: 3,
+			align: 'left',
+		},
+		{
+			label: 'Full Name',
+			key: 'full_name',
+			width: 3,
+			align: 'left',
+		},
+		{
+			label: 'Progress (%)',
+			key: 'progress',
+			width: 3,
+			align: 'right',
+		},
+	]
+})
+
+const breadbrumbs = computed(() => {
+	return [
+		{
+			label: 'Programs',
+			route: { name: 'Programs' },
+		},
+		{
+			label: props.programName === 'new' ? 'New Program' : props.programName,
+		},
+	]
+})
+</script>

frontend/src/pages/Programs.vue

@@ -0,0 +1,215 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadbrumbs" />
+		<Button
+			v-if="user.data?.is_moderator || user.data?.is_instructor"
+			@click="showDialog = true"
+			variant="solid"
+		>
+			<template #prefix>
+				<Plus class="h-4 w-4 stroke-1.5" />
+			</template>
+			{{ __('New') }}
+		</Button>
+	</header>
+	<div v-if="programs.data?.length" class="pt-5 px-5">
+		<div v-for="program in programs.data" class="mb-10">
+			<div class="flex items-center justify-between">
+				<div class="text-xl font-semibold">
+					{{ program.name }}
+				</div>
+				<div class="flex items-center space-x-2">
+					<Badge
+						v-if="program.members"
+						variant="subtle"
+						theme="green"
+						size="lg"
+					>
+						{{ program.members }}
+						{{
+							program.members == 1 ? __(singularize('members')) : __('members')
+						}}
+					</Badge>
+					<Badge
+						v-if="program.progress"
+						variant="subtle"
+						theme="blue"
+						size="lg"
+					>
+						{{ program.progress }}{{ __('% completed') }}
+					</Badge>
+
+					<router-link
+						v-if="user.data?.is_moderator || user.data?.is_instructor"
+						:to="{
+							name: 'ProgramForm',
+							params: { programName: program.name },
+						}"
+					>
+						<Button>
+							<template #prefix>
+								<Edit class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('Edit') }}
+						</Button>
+					</router-link>
+				</div>
+			</div>
+			<div
+				v-if="program.courses?.length"
+				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5"
+			>
+				<div v-for="course in program.courses" class="relative group">
+					<CourseCard
+						:course="course"
+						@click="enrollMember(program.name, course.name)"
+						class="cursor-pointer"
+					/>
+					<div
+						v-if="lockCourse(course)"
+						class="absolute inset-0 bg-black-overlay-500 opacity-60 rounded-md"
+					></div>
+					<div
+						v-if="lockCourse(course)"
+						class="absolute inset-0 flex items-center justify-center"
+					>
+						<LockKeyhole class="size-10 text-white" />
+					</div>
+				</div>
+			</div>
+			<div v-else class="text-sm italic text-gray-600 mt-4">
+				{{ __('No courses in this program') }}
+			</div>
+		</div>
+	</div>
+	<div
+		v-else
+		class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+	>
+		<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+		<div class="text-xl font-medium">
+			{{ __('No programs found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'There are no programs available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+				)
+			}}
+		</div>
+	</div>
+
+	<Dialog
+		v-model="showDialog"
+		:options="{
+			title: __('New Program'),
+			actions: [
+				{
+					label: __('Create'),
+					variant: 'solid',
+					onClick: () => createProgram(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<FormControl :label="__('Title')" v-model="title" />
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Badge,
+	Breadcrumbs,
+	Button,
+	call,
+	createResource,
+	Dialog,
+	FormControl,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref } from 'vue'
+import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
+import CourseCard from '@/components/CourseCard.vue'
+import { useRouter } from 'vue-router'
+import { showToast, singularize } from '@/utils'
+import { useSettings } from '@/stores/settings'
+
+const user = inject('$user')
+const showDialog = ref(false)
+const router = useRouter()
+const title = ref('')
+const settings = useSettings()
+
+onMounted(() => {
+	if (
+		!settings.learningPaths.data &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+})
+
+const programs = createResource({
+	url: 'lms.lms.utils.get_programs',
+	auto: true,
+	cache: 'programs',
+})
+
+const createProgram = (close) => {
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'LMS Program',
+			title: title.value,
+		},
+	}).then((res) => {
+		router.push({ name: 'ProgramForm', params: { programName: res.name } })
+	})
+}
+
+const enrollMember = (program, course) => {
+	call('lms.lms.utils.enroll_in_program_course', {
+		program: program,
+		course: course,
+	})
+		.then((data) => {
+			if (data.current_lesson) {
+				router.push({
+					name: 'Lesson',
+					params: {
+						courseName: course,
+						chapterNumber: data.current_lesson.split('-')[0],
+						lessonNumber: data.current_lesson.split('-')[1],
+					},
+				})
+			} else if (data) {
+				router.push({
+					name: 'Lesson',
+					params: {
+						courseName: course,
+						chapterNumber: 1,
+						lessonNumber: 1,
+					},
+				})
+			}
+		})
+		.catch((err) => {
+			showToast('Error', err.messages?.[0] || err, 'x')
+		})
+}
+
+const lockCourse = (course) => {
+	if (user.data?.is_moderator || user.data?.is_instructor) return false
+	if (course.membership) return false
+	if (course.eligible) return false
+	return true
+}
+
+const breadbrumbs = computed(() => [
+	{
+		label: 'Programs',
+	},
+])
+</script>

frontend/src/pages/QuizForm.vue

@@ -48,6 +48,7 @@
 						? __('Title')
 						: __('Enter a title and save the quiz to proceed')
 				"
+				:required="true"
 			/>
 			<div v-if="quizDetails.data?.name">
 				<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
@@ -141,6 +142,7 @@
 								v-slot="{ idx, column, item }"
 								v-for="row in quiz.questions"
 								@click="openQuestionModal(row)"
+								class="cursor-pointer"
 							>
 								<ListRowItem :item="item">
 									<div
@@ -204,7 +206,6 @@ import {
 	inject,
 	onBeforeUnmount,
 	watch,
-	isReactive,
 } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
 import Question from '@/components/Modals/Question.vue'
@@ -255,11 +256,7 @@ onMounted(() => {
 })
 
 const keyboardShortcut = (e) => {
-	if (
-		e.key === 's' &&
-		(e.ctrlKey || e.metaKey) &&
-		!e.target.classList.contains('ProseMirror')
-	) {
+	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
 		submitQuiz()
 		e.preventDefault()
 	}

frontend/src/pages/QuizSubmission.vue

@@ -15,38 +15,45 @@
 			</Button>
 		</div>
 	</header>
-	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-4">
-		<div class="grid grid-cols-2 gap-5">
-			<FormControl
-				v-model="submisisonDetails.doc.quiz_title"
-				:label="__('Quiz')"
-				:disabled="true"
-			/>
-			<FormControl
-				v-model="submisisonDetails.doc.member_name"
-				:label="__('Member')"
-				:disabled="true"
-			/>
+	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-5">
+		<div class="text-xl font-semibold">
+			{{ submisisonDetails.doc.member_name }}
 		</div>
+		<div class="space-y-4 border p-5 rounded-md">
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="submisisonDetails.doc.quiz_title"
+					:label="__('Quiz')"
+					:disabled="true"
+				/>
+				<FormControl
+					v-model="submisisonDetails.doc.member_name"
+					:label="__('Member')"
+					:disabled="true"
+				/>
+			</div>
 
-		<div class="grid grid-cols-2 gap-5">
-			<FormControl
-				v-model="submisisonDetails.doc.score"
-				:label="__('Score')"
-				:disabled="true"
-			/>
-			<FormControl
-				v-model="submisisonDetails.doc.percentage"
-				:label="__('Percentage')"
-				:disabled="true"
-			/>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="submisisonDetails.doc.score"
+					:label="__('Score')"
+					:disabled="true"
+				/>
+				<FormControl
+					v-model="submisisonDetails.doc.percentage"
+					:label="__('Percentage')"
+					:disabled="true"
+				/>
+			</div>
 		</div>
 
 		<div
 			v-for="row in submisisonDetails.doc.result"
 			class="border p-5 rounded-md space-y-4"
 		>
-			<div class="font-semibold">{{ row.idx }}. {{ row.question }}</div>
+			<div class="flex space-x-1 font-semibold">
+				<span class="leading-5" v-html="row.question"> </span>
+			</div>
 			<div v-html="row.answer" class="leading-5"></div>
 			<div class="grid grid-cols-2 gap-5">
 				<FormControl v-model="row.marks" :label="__('Marks')" />
@@ -67,7 +74,7 @@ import {
 	Button,
 	Badge,
 } from 'frappe-ui'
-import { computed, onMounted, inject } from 'vue'
+import { computed, onBeforeUnmount, onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from '@/utils'
 
@@ -77,8 +84,25 @@ const user = inject('$user')
 onMounted(() => {
 	if (!user.data?.is_instructor && !user.data?.is_moderator)
 		router.push({ name: 'Courses' })
+
+	window.addEventListener('keydown', keyboardShortcut)
 })
 
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		saveSubmission()
+		e.preventDefault()
+	}
+}
+
 const props = defineProps({
 	submission: {
 		type: String,

frontend/src/pages/QuizSubmissionList.vue

@@ -5,6 +5,9 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div v-if="submissions.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="text-xl font-semibold mb-5">
+			{{ submissions.data[0].quiz_title }}
+		</div>
 		<ListView
 			:columns="quizColumns"
 			:rows="submissions.data"
@@ -31,12 +34,18 @@
 				</router-link>
 			</ListRows>
 		</ListView>
+		<div class="flex justify-center my-5">
+			<Button v-if="submissions.hasNextPage" @click="submissions.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
 	</div>
 </template>
 <script setup>
 import {
 	createListResource,
 	Breadcrumbs,
+	Button,
 	ListView,
 	ListRow,
 	ListRows,
@@ -76,12 +85,7 @@ const quizColumns = computed(() => {
 		{
 			label: __('Member'),
 			key: 'member_name',
-			width: 2,
-		},
-		{
-			label: __('Quiz'),
-			key: 'quiz_title',
-			width: 2,
+			width: 1,
 		},
 		{
 			label: __('Score'),

frontend/src/pages/Quizzes.vue

@@ -46,22 +46,43 @@
 				</router-link>
 			</ListRows>
 		</ListView>
+		<div class="flex justify-center my-5">
+			<Button v-if="quizzes.hasNextPage" @click="quizzes.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+	<div
+		v-else
+		class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+	>
+		<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+		<div class="text-xl font-medium">
+			{{ __('No quizzes found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'You have not created any quizzes yet. To create a new quiz, click on the "New Quiz" button above.'
+				)
+			}}
+		</div>
 	</div>
 </template>
 <script setup>
 import {
 	Breadcrumbs,
+	Button,
 	createListResource,
 	ListView,
 	ListRows,
 	ListRow,
 	ListHeader,
 	ListHeaderItem,
-	Button,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { computed, inject, onMounted } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
@@ -87,9 +108,6 @@ const quizzes = createListResource({
 	auto: true,
 	cache: ['quizzes', user.data?.name],
 	orderBy: 'modified desc',
-	onSuccess(data) {
-		data.forEach((row) => {})
-	},
 })
 
 const quizColumns = computed(() => {

frontend/src/pages/SCORMChapter.vue

@@ -0,0 +1,208 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs class="h-7" :items="breadcrumbs" />
+	</header>
+	<div
+		v-if="
+			readyToRender &&
+			(enrollment.data?.length ||
+				user.data?.is_moderator ||
+				user.data?.is_instructor)
+		"
+	>
+		<iframe :src="chapter.doc.launch_file" class="w-full h-screen" />
+	</div>
+	<div v-else-if="!enrollment.data?.length">
+		<div class="text-center pt-10 px-5 md:px-0 pb-10">
+			<div class="text-center">
+				<div class="mb-4">
+					{{
+						__(
+							'You are not enrolled in this course. Please enroll to access this lesson.'
+						)
+					}}
+				</div>
+				<Button variant="solid" @click="enrollStudent()">
+					{{ __('Start Learning') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	call,
+	createDocumentResource,
+	createListResource,
+	createResource,
+} from 'frappe-ui'
+import { computed, inject, onBeforeMount, ref } from 'vue'
+import { useSidebar } from '@/stores/sidebar'
+import { updateDocumentTitle } from '@/utils'
+
+const sidebarStore = useSidebar()
+const user = inject('$user')
+const readyToRender = ref(false)
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+	chapterName: {
+		type: String,
+		required: true,
+	},
+})
+
+onBeforeMount(() => {
+	sidebarStore.isSidebarCollapsed = true
+	setupSCORMAPI()
+})
+
+const chapter = createDocumentResource({
+	doctype: 'Course Chapter',
+	name: props.chapterName,
+	auto: true,
+	cache: ['chapter', props.chapterName],
+	onSuccess(data) {
+		progress.submit()
+	},
+})
+
+const enrollment = createListResource({
+	doctype: 'LMS Enrollment',
+	fields: ['member', 'course'],
+	filters: {
+		course: props.courseName,
+		member: user.data?.name,
+	},
+	auto: true,
+	cache: ['enrollments', props.courseName, user.data?.name],
+})
+
+const getDataFromLMS = (key) => {
+	if (key == 'cmi.core.lesson_status') {
+		if (progress.data?.status == 'Complete') {
+			return 'passed'
+		}
+		return 'incomplete'
+	}
+	return ''
+}
+
+const saveDataToLMS = (key, value) => {
+	if (key == 'cmi.core.lesson_status' && value == 'passed') {
+		saveProgress()
+	}
+}
+
+const saveProgress = () => {
+	call('lms.lms.doctype.course_lesson.course_lesson.save_progress', {
+		lesson: chapter.doc.lessons[0].lesson,
+		course: props.courseName,
+	})
+}
+
+const progress = createResource({
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Course Progress',
+			fieldname: 'status',
+			filters: {
+				member: user.data?.name,
+				lesson: chapter.doc.lessons[0].lesson,
+				chapter: chapter.doc.name,
+				course: chapter.doc?.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		readyToRender.value = true
+	},
+})
+
+const enrollStudent = () => {
+	enrollment.insert.submit(
+		{
+			course: props.courseName,
+			member: user.data?.name,
+		},
+		{
+			onSuccess(data) {
+				window.location.reload()
+			},
+		}
+	)
+}
+
+const setupSCORMAPI = () => {
+	window.API_1484_11 = {
+		Initialize: () => 'true',
+		Terminate: () => 'true',
+		GetValue: (key) => {
+			console.log(`GET: ${key}`)
+			return getDataFromLMS(key)
+		},
+		SetValue: (key, value) => {
+			console.log(`SET: ${key} to value: ${value}`)
+
+			saveDataToLMS(key, value)
+			return 'true'
+		},
+		Commit: () => 'true',
+		GetLastError: () => '0',
+		GetErrorString: () => '',
+		GetDiagnostic: () => '',
+	}
+	window.API = {
+		LMSInitialize: () => 'true',
+		LMSFinish: () => 'true',
+		LMSGetValue: (key) => {
+			console.log(`GET: ${key}`)
+			return getDataFromLMS(key)
+		},
+		LMSSetValue: (key, value) => {
+			console.log(`SET: ${key} to value: ${value}`)
+			saveDataToLMS(key, value)
+			return 'true'
+		},
+		LMSCommit: () => 'true',
+		LMSGetLastError: () => '0',
+		LMSGetErrorString: () => '',
+		LMSGetDiagnostic: () => '',
+	}
+}
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: 'Courses',
+			route: { name: 'Courses' },
+		},
+		{
+			label: chapter.doc?.course_title,
+			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
+		},
+		{
+			label: chapter.doc?.title,
+		},
+	]
+})
+
+const pageMeta = computed(() => {
+	return {
+		title: chapter?.doc?.title,
+		description: __('This is a chapter in the course {0}').format(
+			chapter?.doc?.course_title
+		),
+	}
+})
+
+updateDocumentTitle(pageMeta)
+</script>

frontend/src/router.js

@@ -27,6 +27,12 @@ const routes = [
 		component: () => import('@/pages/Lesson.vue'),
 		props: true,
 	},
+	{
+		path: '/courses/:courseName/learn/:chapterName',
+		name: 'SCORMChapter',
+		component: () => import('@/pages/SCORMChapter.vue'),
+		props: true,
+	},
 	{
 		path: '/batches',
 		name: 'Batches',
@@ -125,12 +131,6 @@ const routes = [
 		component: () => import('@/pages/JobCreation.vue'),
 		props: true,
 	},
-	{
-		path: '/assignment-submission/:assignmentName/:submissionName',
-		name: 'AssignmentSubmission',
-		component: () => import('@/pages/AssignmentSubmission.vue'),
-		props: true,
-	},
 	{
 		path: '/certified-participants',
 		name: 'CertifiedParticipants',
@@ -176,6 +176,39 @@ const routes = [
 		component: () => import('@/pages/QuizSubmission.vue'),
 		props: true,
 	},
+	{
+		path: '/programs/:programName',
+		name: 'ProgramForm',
+		component: () => import('@/pages/ProgramForm.vue'),
+		props: true,
+	},
+	{
+		path: '/programs',
+		name: 'Programs',
+		component: () => import('@/pages/Programs.vue'),
+	},
+	{
+		path: '/assignments',
+		name: 'Assignments',
+		component: () => import('@/pages/Assignments.vue'),
+	},
+	{
+		path: '/assignments/:assignmentID',
+		name: 'AssignmentForm',
+		component: () => import('@/pages/AssignmentForm.vue'),
+		props: true,
+	},
+	{
+		path: '/assignment-submission/:assignmentID/:submissionName',
+		name: 'AssignmentSubmission',
+		component: () => import('@/pages/AssignmentSubmission.vue'),
+		props: true,
+	},
+	{
+		path: '/assignment-submissions',
+		name: 'AssignmentSubmissionList',
+		component: () => import('@/pages/AssignmentSubmissionList.vue'),
+	},
 ]
 
 let router = createRouter({

frontend/src/stores/settings.js

@@ -1,12 +1,32 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { createResource } from 'frappe-ui'
 
 export const useSettings = defineStore('settings', () => {
 	const isSettingsOpen = ref(false)
 	const activeTab = ref(null)
+	const learningPaths = createResource({
+		url: 'frappe.client.get_single_value',
+		makeParams(values) {
+			return {
+				doctype: 'LMS Settings',
+				field: 'enable_learning_paths',
+			}
+		},
+		auto: true,
+		cache: ['learningPaths'],
+	})
+
+	const onboardingDetails = createResource({
+		url: 'lms.lms.utils.is_onboarding_complete',
+		auto: true,
+		cache: ['onboardingDetails'],
+	})
 
 	return {
 		isSettingsOpen,
 		activeTab,
+		learningPaths,
+		onboardingDetails,
 	}
 })

frontend/src/stores/sidebar.js

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSidebar = defineStore('sidebar', () => {
+	const isSidebarCollapsed = ref(false)
+
+	return {
+		isSidebarCollapsed,
+	}
+})

frontend/src/utils/assignment.js

@@ -0,0 +1,83 @@
+import { Pencil } from 'lucide-vue-next'
+import { createApp, h } from 'vue'
+import AssessmentPlugin from '@/components/AssessmentPlugin.vue'
+import AssignmentBlock from '@/components/AssignmentBlock.vue'
+import translationPlugin from '../translation'
+import { usersStore } from '@/stores/user'
+import router from '../router'
+
+export class Assignment {
+	constructor({ data, api, readOnly }) {
+		this.data = data
+		this.readOnly = readOnly
+	}
+
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(Pencil, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: __('Assignment'),
+			icon: div.innerHTML,
+		}
+	}
+
+	static get isReadOnlySupported() {
+		return true
+	}
+
+	render() {
+		this.wrapper = document.createElement('div')
+		if (Object.keys(this.data).length) {
+			this.renderAssignment(this.data.assignment)
+		} else {
+			this.renderAssignmentModal()
+		}
+		return this.wrapper
+	}
+
+	renderAssignment(assignment) {
+		if (this.readOnly) {
+			const app = createApp(AssignmentBlock, {
+				assignmentID: assignment,
+			})
+			app.use(translationPlugin)
+			app.use(router)
+			const { userResource } = usersStore()
+			app.provide('$user', userResource)
+			app.mount(this.wrapper)
+			return
+		}
+		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-gray-50 mb-2'>
+            <span class="font-medium">
+                Assignment: ${assignment}
+            </span>
+        </div>`
+		return
+	}
+
+	renderAssignmentModal() {
+		if (this.readOnly) {
+			return
+		}
+		const app = createApp(AssessmentPlugin, {
+			onAddition: (assignment) => {
+				this.data.assignment = assignment
+				this.renderAssignment(assignment)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
+	}
+
+	save(blockContent) {
+		return {
+			assignment: this.data.assignment,
+		}
+	}
+}

frontend/src/utils/dayjs.js

@@ -5,6 +5,8 @@ import updateLocale from 'dayjs/esm/plugin/updateLocale'
 import isToday from 'dayjs/esm/plugin/isToday'
 import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter'
+import utc from 'dayjs/esm/plugin/utc'
+import timezone from 'dayjs/esm/plugin/timezone'
 
 dayjs.extend(updateLocale)
 dayjs.extend(relativeTime)
@@ -12,5 +14,7 @@ dayjs.extend(localizedFormat)
 dayjs.extend(isToday)
 dayjs.extend(isSameOrBefore)
 dayjs.extend(isSameOrAfter)
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 export default dayjs

frontend/src/utils/index.js

@@ -1,7 +1,9 @@
 import { toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { Quiz } from '@/utils/quiz'
+import { Assignment } from '@/utils/assignment'
 import { Upload } from '@/utils/upload'
+import { Markdown } from '@/utils/markdownParser'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
 import { CodeBox } from '@/utils/code'
@@ -11,6 +13,7 @@ import { watch } from 'vue'
 import dayjs from '@/utils/dayjs'
 import Embed from '@editorjs/embed'
 import SimpleImage from '@editorjs/simple-image'
+import Table from '@editorjs/table'
 
 export function createToast(options) {
 	toast({
@@ -57,6 +60,15 @@ export function formatNumberIntoCurrency(number, currency) {
 	return ''
 }
 
+// create a function that formats numbers in thousands to k
+
+export function formatAmount(amount) {
+	if (amount > 999) {
+		return (amount / 1000).toFixed(1) + 'k'
+	}
+	return amount
+}
+
 export function convertToTitleCase(str) {
 	if (!str) {
 		return ''
@@ -84,7 +96,7 @@ export function showToast(title, text, icon, iconClasses = null) {
 	if (!iconClasses) {
 		if (icon == 'check') {
 			iconClasses = 'bg-green-600 text-white rounded-md p-px'
-		} else if (icon == 'circle-warn') {
+		} else if (icon == 'alert-circle') {
 			iconClasses = 'bg-yellow-600 text-white rounded-md p-px'
 		} else {
 			iconClasses = 'bg-red-600 text-white rounded-md p-px'
@@ -137,10 +149,18 @@ export function htmlToText(html) {
 
 export function getEditorTools() {
 	return {
-		header: Header,
+		header: {
+			class: Header,
+			config: {
+				placeholder: 'Header',
+			},
+		},
 		quiz: Quiz,
+		assignment: Assignment,
 		upload: Upload,
+		markdown: Markdown,
 		image: SimpleImage,
+		table: Table,
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,

frontend/src/utils/markdownParser.js

@@ -0,0 +1,156 @@
+export class Markdown {
+	constructor({ data, api, readOnly, config }) {
+		this.api = api
+		this.data = data || {}
+		this.config = config || {}
+		this.text = data.text || ''
+		this.readOnly = readOnly
+	}
+
+	static get isReadOnlySupported() {
+		return true
+	}
+
+	static get conversionConfig() {
+		return {
+			export: 'text',
+			import: 'text',
+		}
+	}
+
+	onPaste(event) {
+		const data = {
+			text: event.detail.data.innerHTML,
+		}
+
+		this.data = data
+
+		window.requestAnimationFrame(() => {
+			if (!this.wrapper) {
+				return
+			}
+			this.wrapper.innerHTML = this.data.text || ''
+		})
+	}
+
+	static get pasteConfig() {
+		return {
+			tags: ['P'],
+		}
+	}
+
+	render() {
+		this.wrapper = document.createElement('div')
+		this.wrapper.classList.add('cdx-block')
+		this.wrapper.classList.add('ce-paragraph')
+		this.wrapper.innerHTML = this.text
+
+		if (!this.readOnly) {
+			this.wrapper.contentEditable = true
+			this.wrapper.innerHTML = this.text
+
+			this.wrapper.addEventListener('keydown', (event) => {
+				const value = event.target.textContent
+				if (event.keyCode === 32 && value.startsWith('#')) {
+					this.convertToHeader(event, value)
+				} else if (event.keyCode === 13) {
+					this.parseContent(event)
+				}
+			})
+		}
+
+		return this.wrapper
+	}
+
+	convertToHeader(event, value) {
+		event.preventDefault()
+		if (['#', '##', '###', '####', '#####', '######'].includes(value)) {
+			let level = value.length
+			event.target.textContent = ''
+			this.convertBlock('header', {
+				level: level,
+			})
+		}
+	}
+
+	parseContent(event) {
+		event.preventDefault()
+		const previousLine = this.wrapper.textContent
+		if (previousLine && this.hasImage(previousLine)) {
+			this.wrapper.textContent = ''
+			this.convertBlock('image')
+		} else if (previousLine && this.hasLink(previousLine)) {
+			const { text, url } = this.extractLink(previousLine)
+			const anchorTag = `<a href="${url}" target="_blank">${text}</a>`
+			this.convertBlock('paragraph', {
+				text: previousLine.replace(/\[.+?\]\(.+?\)/, anchorTag),
+			})
+		} else if (previousLine && previousLine.startsWith('- ')) {
+			this.convertBlock('list', {
+				style: 'unordered',
+				items: [
+					{
+						content: previousLine.replace('- ', ''),
+					},
+				],
+			})
+		} else if (previousLine && previousLine.startsWith('1. ')) {
+			this.convertBlock('list', {
+				style: 'ordered',
+				items: [
+					{
+						content: previousLine.replace('1. ', ''),
+					},
+				],
+			})
+		} else if (previousLine && this.canBeEmbed(previousLine)) {
+			this.wrapper.textContent = ''
+			this.convertBlock('embed', {
+				source: previousLine,
+			})
+		}
+	}
+
+	async convertBlock(type, data, index = null) {
+		const currentIndex = this.api.blocks.getCurrentBlockIndex()
+		const currentBlock = this.api.blocks.getBlockByIndex(currentIndex)
+		await this.api.blocks.convert(currentBlock.id, type, data)
+		this.api.caret.focus(true)
+	}
+
+	save(blockContent) {
+		return {
+			text: blockContent.innerHTML,
+		}
+	}
+
+	hasImage(line) {
+		return /!\[.+?\]\(.+?\)/.test(line)
+	}
+
+	extractImage(line) {
+		const match = line.match(/!\[(.+?)\]\((.+?)\)/)
+		if (match) {
+			return { alt: match[1], url: match[2] }
+		}
+		return { alt: '', url: '' }
+	}
+
+	hasLink(line) {
+		return /\[.+?\]\(.+?\)/.test(line)
+	}
+
+	extractLink(line) {
+		const match = line.match(/\[(.+?)\]\((.+?)\)/)
+		if (match) {
+			return { text: match[1], url: match[2] }
+		}
+		return { text: '', url: '' }
+	}
+
+	canBeEmbed(line) {
+		return /^https?:\/\/.+/.test(line)
+	}
+}
+
+export default Markdown

frontend/src/utils/quiz.js

@@ -1,5 +1,5 @@
 import QuizBlock from '@/components/QuizBlock.vue'
-import QuizPlugin from '@/components/QuizPlugin.vue'
+import AssessmentPlugin from '@/components/AssessmentPlugin.vue'
 import { createApp, h } from 'vue'
 import { usersStore } from '../stores/user'
 import translationPlugin from '../translation'
@@ -51,7 +51,7 @@ export class Quiz {
 			app.mount(this.wrapper)
 			return
 		}
-		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-gray-50 mb-2'>
             <span class="font-medium">
                 Quiz: ${quiz}
             </span>
@@ -60,8 +60,11 @@ export class Quiz {
 	}
 
 	renderQuizModal() {
-		const app = createApp(QuizPlugin, {
-			onQuizAddition: (quiz) => {
+		if (this.readOnly) {
+			return
+		}
+		const app = createApp(AssessmentPlugin, {
+			onAddition: (quiz) => {
 				this.data.quiz = quiz
 				this.renderQuiz(quiz)
 			},

lms/__init__.py

@@ -1 +1 @@
-__version__ = "2.9.0"
+__version__ = "2.18.0"

lms/hooks.py

@@ -110,7 +110,8 @@ doc_events = {
 # ---------------
 scheduler_events = {
 	"hourly": [
-		"lms.lms.doctype.lms_certificate_request.lms_certificate_request.schedule_evals"
+		"lms.lms.doctype.lms_certificate_request.lms_certificate_request.schedule_evals",
+		"lms.lms.api.update_course_statistics",
 	],
 	"daily": ["lms.job.doctype.job_opportunity.job_opportunity.update_job_openings"],
 }
@@ -224,6 +225,7 @@ page_renderer = [
 	"lms.page_renderers.ProfileRedirectPage",
 	"lms.page_renderers.ProfilePage",
 	"lms.page_renderers.CoursePage",
+	"lms.page_renderers.SCORMRenderer",
 ]
 
 # set this to "/" to have profiles on the top-level

lms/install.py

@@ -1,10 +1,12 @@
 import frappe
 from frappe.desk.page.setup_wizard.setup_wizard import add_all_roles_to
+from lms.lms.api import give_dicussions_permission
 
 
 def after_install():
 	add_pages_to_nav()
 	create_batch_source()
+	give_dicussions_permission()
 
 
 def after_sync():
@@ -64,7 +66,9 @@ def delete_lms_roles():
 
 
 def create_course_creator_role():
-	if not frappe.db.exists("Role", "Course Creator"):
+	if frappe.db.exists("Role", "Course Creator"):
+		frappe.db.set_value("Role", "Course Creator", "desk_access", 0)
+	else:
 		role = frappe.get_doc(
 			{
 				"doctype": "Role",
@@ -77,7 +81,9 @@ def create_course_creator_role():
 
 
 def create_moderator_role():
-	if not frappe.db.exists("Role", "Moderator"):
+	if frappe.db.exists("Role", "Moderator"):
+		frappe.db.set_value("Role", "Moderator", "desk_access", 0)
+	else:
 		role = frappe.get_doc(
 			{
 				"doctype": "Role",
@@ -90,7 +96,9 @@ def create_moderator_role():
 
 
 def create_evaluator_role():
-	if not frappe.db.exists("Role", "Batch Evaluator"):
+	if frappe.db.exists("Role", "Batch Evaluator"):
+		frappe.db.set_value("Role", "Batch Evaluator", "desk_access", 0)
+	else:
 		role = frappe.new_doc("Role")
 		role.update(
 			{
@@ -103,7 +111,9 @@ def create_evaluator_role():
 
 
 def create_lms_student_role():
-	if not frappe.db.exists("Role", "LMS Student"):
+	if frappe.db.exists("Role", "LMS Student"):
+		frappe.db.set_value("Role", "LMS Student", "desk_access", 0)
+	else:
 		role = frappe.new_doc("Role")
 		role.update(
 			{

lms/lms/api.py

@@ -1,13 +1,23 @@
 """API methods for the LMS.
 """
 
+import json
 import frappe
+import zipfile
+import os
+import re
+import shutil
+import requests
+import xml.etree.ElementTree as ET
 from frappe.translate import get_all_translations
 from frappe import _
 from frappe.query_builder import DocType
 from frappe.query_builder.functions import Count
-from frappe.utils import time_diff, now_datetime, get_datetime
+from frappe.utils import time_diff, now_datetime, get_datetime, flt
 from typing import Optional
+from lms.lms.utils import get_average_rating, get_lesson_count
+from xml.dom.minidom import parseString
+from lms.lms.doctype.course_lesson.course_lesson import save_progress
 
 
 @frappe.whitelist()
@@ -159,6 +169,7 @@ def get_user_info():
 	user.is_instructor = "Course Creator" in user.roles
 	user.is_moderator = "Moderator" in user.roles
 	user.is_evaluator = "Batch Evaluator" in user.roles
+	user.is_student = "LMS Student" in user.roles
 	return user
 
 
@@ -294,7 +305,8 @@ def get_branding():
 
 	for field in image_fields:
 		if website_settings.get(field):
-			website_settings.update({field: get_file_info(website_settings.get(field))})
+			file_info = get_file_info(website_settings.get(field))
+			website_settings.update({field: json.loads(json.dumps(file_info))})
 		else:
 			website_settings.update({field: None})
 
@@ -489,7 +501,15 @@ def delete_sidebar_item(webpage):
 
 @frappe.whitelist()
 def delete_lesson(lesson, chapter):
-	frappe.db.delete("Lesson Reference", {"parent": chapter, "lesson": lesson})
+	# Delete Reference
+	chapter = frappe.get_doc("Course Chapter", chapter)
+	chapter.lessons = [row for row in chapter.lessons if row.lesson != lesson]
+	chapter.save()
+
+	# Delete progress
+	frappe.db.delete("LMS Course Progress", {"lesson": lesson})
+
+	# Delete Lesson
 	frappe.db.delete("Course Lesson", lesson)
 
 
@@ -574,7 +594,7 @@ def get_categories(doctype, filters):
 def get_members(start=0, search=""):
 	"""Get members for the given search term and start index.
 	Args: start (int): Start index for the query.
-	    search (str): Search term to filter the results.
+	        search (str): Search term to filter the results.
 	Returns: List of members.
 	"""
 
@@ -760,3 +780,266 @@ def get_payment_gateway_details(payment_gateway):
 		"doctype": doctype,
 		"docname": docname,
 	}
+
+
+def update_course_statistics():
+	courses = frappe.get_all("LMS Course", fields=["name"])
+
+	for course in courses:
+		lessons = get_lesson_count(course.name)
+
+		enrollments = frappe.db.count(
+			"LMS Enrollment", {"course": course.name, "member_type": "Student"}
+		)
+
+		avg_rating = get_average_rating(course.name) or 0
+		avg_rating = flt(avg_rating, frappe.get_system_settings("float_precision") or 3)
+
+		frappe.db.set_value(
+			"LMS Course",
+			course.name,
+			{"lessons": lessons, "enrollments": enrollments, "rating": avg_rating},
+		)
+
+
+@frappe.whitelist()
+def get_announcements(batch):
+	return frappe.get_all(
+		"Communication",
+		filters={
+			"reference_doctype": "LMS Batch",
+			"reference_name": batch,
+		},
+		fields=[
+			"subject",
+			"content",
+			"recipients",
+			"cc",
+			"communication_date",
+			"sender",
+			"sender_full_name",
+		],
+		order_by="communication_date desc",
+	)
+
+
+@frappe.whitelist()
+def delete_course(course):
+
+	chapters = frappe.get_all("Course Chapter", {"course": course}, pluck="name")
+
+	chapter_references = frappe.get_all(
+		"Chapter Reference", {"parent": course}, pluck="name"
+	)
+
+	for chapter in chapters:
+		lessons = frappe.get_all("Course Lesson", {"chapter": chapter}, pluck="name")
+
+		lesson_references = frappe.get_all(
+			"Lesson Reference", {"parent": chapter}, pluck="name"
+		)
+
+		for lesson in lesson_references:
+			frappe.delete_doc("Lesson Reference", lesson)
+
+		for lesson in lessons:
+			topics = frappe.get_all(
+				"Discussion Topic",
+				{"reference_doctype": "Course Lesson", "reference_docname": lesson},
+				pluck="name",
+			)
+
+			for topic in topics:
+				frappe.db.delete("Discussion Reply", {"topic": topic})
+
+				frappe.db.delete("Discussion Topic", topic)
+
+			frappe.delete_doc("Course Lesson", lesson)
+
+	for chapter in chapter_references:
+		frappe.delete_doc("Chapter Reference", chapter)
+
+	for chapter in chapters:
+		frappe.delete_doc("Course Chapter", chapter)
+
+	frappe.db.delete("LMS Course Progress", {"course": course})
+	frappe.db.delete("LMS Quiz", {"course": course})
+	frappe.db.delete("LMS Quiz Submission", {"course": course})
+	frappe.db.delete("LMS Enrollment", {"course": course})
+	frappe.delete_doc("LMS Course", course)
+
+
+def give_dicussions_permission():
+	doctypes = ["Discussion Topic", "Discussion Reply"]
+	roles = ["LMS Student", "Course Creator", "Moderator", "Batch Evaluator"]
+	for doctype in doctypes:
+		for role in roles:
+			if not frappe.db.exists("Custom DocPerm", {"parent": doctype, "role": role}):
+				frappe.get_doc(
+					{
+						"doctype": "Custom DocPerm",
+						"parent": doctype,
+						"role": role,
+						"read": 1,
+						"write": 1,
+						"create": 1,
+						"delete": 1,
+					}
+				).save(ignore_permissions=True)
+
+
+@frappe.whitelist()
+def upsert_chapter(title, course, is_scorm_package, scorm_package, name=None):
+	values = frappe._dict(
+		{"title": title, "course": course, "is_scorm_package": is_scorm_package}
+	)
+
+	if is_scorm_package:
+		scorm_package = frappe._dict(scorm_package)
+		extract_path = extract_package(course, title, scorm_package)
+
+		values.update(
+			{
+				"scorm_package": scorm_package.name,
+				"scorm_package_path": extract_path.split("public")[1],
+				"manifest_file": get_manifest_file(extract_path).split("public")[1],
+				"launch_file": get_launch_file(extract_path).split("public")[1],
+			}
+		)
+
+	if name:
+		chapter = frappe.get_doc("Course Chapter", name)
+	else:
+		chapter = frappe.new_doc("Course Chapter")
+
+	chapter.update(values)
+	chapter.save()
+
+	if is_scorm_package and not len(chapter.lessons):
+		add_lesson(title, chapter.name, course)
+
+	return chapter
+
+
+def extract_package(course, title, scorm_package):
+	package = frappe.get_doc("File", scorm_package.name)
+	zip_path = package.get_full_path()
+	# check_for_malicious_code(zip_path)
+	extract_path = frappe.get_site_path("public", "scorm", course, title)
+	zipfile.ZipFile(zip_path).extractall(extract_path)
+	return extract_path
+
+
+def check_for_malicious_code(zip_path):
+	suspicious_patterns = [
+		# Unsafe inline JavaScript
+		r'on(click|load|mouseover|error|submit|focus|blur|change|keyup|keydown|keypress|resize)=".*?"',  # Inline event handlers (e.g., onerror, onclick)
+		r'<script.*?src=["\']http',  # External script tags
+		r"eval\(",  # Usage of eval()
+		r"Function\(",  # Usage of Function constructor
+		r"(btoa|atob)\(",  # Base64 encoding/decoding
+		# Dangerous XML patterns
+		r"<!ENTITY",  # XXE-related
+		r"<\?xml-stylesheet .*?>",  # External stylesheets in XML
+	]
+
+	with zipfile.ZipFile(zip_path, "r") as zf:
+		for file_name in zf.namelist():
+			if file_name.endswith((".html", ".js", ".xml")):
+				with zf.open(file_name) as file:
+					content = file.read().decode("utf-8", errors="ignore")
+					for pattern in suspicious_patterns:
+						if re.search(pattern, content):
+							frappe.throw(
+								_("Suspicious pattern found in {0}: {1}").format(file_name, pattern)
+							)
+
+
+def get_manifest_file(extract_path):
+	manifest_file = None
+	for root, dirs, files in os.walk(extract_path):
+		for file in files:
+			if file == "imsmanifest.xml":
+				manifest_file = os.path.join(root, file)
+				break
+		if manifest_file:
+			break
+	return manifest_file
+
+
+def get_launch_file(extract_path):
+	launch_file = None
+	manifest_file = get_manifest_file(extract_path)
+
+	if manifest_file:
+		with open(manifest_file) as file:
+			data = file.read()
+			dom = parseString(data)
+			resource = dom.getElementsByTagName("resource")
+			for res in resource:
+				if (
+					res.getAttribute("adlcp:scormtype") == "sco"
+					or res.getAttribute("adlcp:scormType") == "sco"
+				):
+					launch_file = res.getAttribute("href")
+					break
+
+		if launch_file:
+			launch_file = os.path.join(os.path.dirname(manifest_file), launch_file)
+
+	return launch_file
+
+
+def add_lesson(title, chapter, course):
+	lesson = frappe.new_doc("Course Lesson")
+	lesson.update(
+		{
+			"title": title,
+			"chapter": chapter,
+			"course": course,
+		}
+	)
+	lesson.insert()
+
+	lesson_reference = frappe.new_doc("Lesson Reference")
+	lesson_reference.update(
+		{
+			"lesson": lesson.name,
+			"parent": chapter,
+			"parenttype": "Course Chapter",
+			"parentfield": "lessons",
+		}
+	)
+	lesson_reference.insert()
+
+
+@frappe.whitelist()
+def delete_chapter(chapter):
+	chapterInfo = frappe.db.get_value(
+		"Course Chapter", chapter, ["is_scorm_package", "scorm_package_path"], as_dict=True
+	)
+
+	if chapterInfo.is_scorm_package:
+		delete_scorm_package(chapterInfo.scorm_package_path)
+
+	frappe.db.delete("Chapter Reference", {"chapter": chapter})
+	frappe.db.delete("Lesson Reference", {"parent": chapter})
+	frappe.db.delete("Course Lesson", {"chapter": chapter})
+	frappe.db.delete("Course Chapter", chapter)
+
+
+def delete_scorm_package(scorm_package_path):
+	scorm_package_path = frappe.get_site_path("public", scorm_package_path[1:])
+	if os.path.exists(scorm_package_path):
+		shutil.rmtree(scorm_package_path)
+
+
+@frappe.whitelist()
+def mark_lesson_progress(course, chapter_number, lesson_number):
+	chapter_name = frappe.get_value(
+		"Chapter Reference", {"parent": course, "idx": chapter_number}, "chapter"
+	)
+	lesson_name = frappe.get_value(
+		"Lesson Reference", {"parent": chapter_name, "idx": lesson_number}, "lesson"
+	)
+	save_progress(lesson_name, course)

lms/lms/doctype/batch_student/batch_student.py

@@ -7,17 +7,3 @@ from frappe.model.document import Document
 
 class BatchStudent(Document):
 	pass
-
-
-@frappe.whitelist()
-def enroll_batch(batch_name):
-	if frappe.db.exists(
-		"Batch Student", {"student": frappe.session.user, "parent": batch_name}
-	):
-		frappe.throw("You are already enrolled in this batch")
-	enrollment = frappe.new_doc("Batch Student")
-	enrollment.student = frappe.session.user
-	enrollment.parent = batch_name
-	enrollment.parentfield = "students"
-	enrollment.parenttype = "LMS Batch"
-	enrollment.save(ignore_permissions=True)

lms/lms/doctype/course_chapter/course_chapter.json

@@ -8,10 +8,17 @@
  "editable_grid": 1,
  "engine": "InnoDB",
  "field_order": [
-  "course",
   "title",
   "column_break_3",
-  "description",
+  "course",
+  "course_title",
+  "scorm_section",
+  "is_scorm_package",
+  "scorm_package",
+  "scorm_package_path",
+  "column_break_dlnw",
+  "manifest_file",
+  "launch_file",
   "section_break_5",
   "lessons"
  ],
@@ -35,11 +42,6 @@
    "fieldname": "column_break_3",
    "fieldtype": "Column Break"
   },
-  {
-   "fieldname": "description",
-   "fieldtype": "Small Text",
-   "label": "Description"
-  },
   {
    "fieldname": "section_break_5",
    "fieldtype": "Section Break"
@@ -49,6 +51,56 @@
    "fieldtype": "Table",
    "label": "Lessons",
    "options": "Lesson Reference"
+  },
+  {
+   "default": "0",
+   "fieldname": "is_scorm_package",
+   "fieldtype": "Check",
+   "label": "Is SCORM Package"
+  },
+  {
+   "depends_on": "is_scorm_package",
+   "fieldname": "manifest_file",
+   "fieldtype": "Code",
+   "label": "Manifest File",
+   "read_only": 1
+  },
+  {
+   "depends_on": "is_scorm_package",
+   "fieldname": "launch_file",
+   "fieldtype": "Code",
+   "label": "Launch File",
+   "read_only": 1
+  },
+  {
+   "fieldname": "scorm_section",
+   "fieldtype": "Section Break",
+   "label": "SCORM"
+  },
+  {
+   "fieldname": "scorm_package",
+   "fieldtype": "Link",
+   "label": "SCORM Package",
+   "options": "File",
+   "read_only": 1
+  },
+  {
+   "fieldname": "column_break_dlnw",
+   "fieldtype": "Column Break"
+  },
+  {
+   "depends_on": "is_scorm_package",
+   "fieldname": "scorm_package_path",
+   "fieldtype": "Code",
+   "label": "SCORM Package Path",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "course.title",
+   "fieldname": "course_title",
+   "fieldtype": "Data",
+   "label": "Course Title",
+   "read_only": 1
   }
  ],
  "index_web_pages_for_search": 1,
@@ -59,7 +111,7 @@
    "link_fieldname": "chapter"
   }
  ],
- "modified": "2023-09-29 17:03:58.013819",
+ "modified": "2024-11-15 12:03:31.370943",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Chapter",
@@ -79,17 +131,14 @@
    "write": 1
   },
   {
-   "create": 1,
    "email": 1,
    "export": 1,
-   "if_owner": 1,
    "print": 1,
    "read": 1,
    "report": 1,
    "role": "LMS Student",
    "select": 1,
-   "share": 1,
-   "write": 1
+   "share": 1
   }
  ],
  "search_fields": "title",

lms/lms/doctype/course_chapter/course_chapter.py

@@ -1,10 +1,27 @@
 # Copyright (c) 2021, FOSS United and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
-from frappe.utils.telemetry import capture
+from lms.lms.utils import get_course_progress
+from lms.lms.api import update_course_statistics
 
 
 class CourseChapter(Document):
-	pass
+	def on_update(self):
+		self.recalculate_course_progress()
+		update_course_statistics()
+
+	def recalculate_course_progress(self):
+		previous_lessons = (
+			self.get_doc_before_save() and self.get_doc_before_save().as_dict().lessons
+		)
+		current_lessons = self.lessons
+
+		if previous_lessons and previous_lessons != current_lessons:
+			enrolled_members = frappe.get_all(
+				"LMS Enrollment", {"course": self.course}, ["member", "name"]
+			)
+			for enrollment in enrolled_members:
+				new_progress = get_course_progress(self.course, enrollment.member)
+				frappe.db.set_value("LMS Enrollment", enrollment.name, "progress", new_progress)

lms/lms/doctype/course_lesson/course_lesson.json

@@ -8,12 +8,18 @@
  "editable_grid": 1,
  "engine": "InnoDB",
  "field_order": [
-  "chapter",
-  "course",
-  "column_break_4",
   "title",
   "include_in_preview",
-  "index_label",
+  "column_break_4",
+  "chapter",
+  "is_scorm_package",
+  "course",
+  "section_break_11",
+  "content",
+  "body",
+  "column_break_cjmf",
+  "instructor_content",
+  "instructor_notes",
   "section_break_6",
   "youtube",
   "column_break_9",
@@ -22,13 +28,7 @@
   "question",
   "column_break_15",
   "file_type",
-  "section_break_11",
-  "content",
-  "body",
-  "column_break_cjmf",
-  "instructor_content",
-  "instructor_notes",
-  "help_section",
+  "column_break_syza",
   "help"
  ],
  "fields": [
@@ -59,12 +59,6 @@
    "label": "Title",
    "reqd": 1
   },
-  {
-   "fieldname": "index_label",
-   "fieldtype": "Data",
-   "label": "Index Label",
-   "read_only": 1
-  },
   {
    "fieldname": "section_break_6",
    "fieldtype": "Section Break",
@@ -74,14 +68,7 @@
    "fieldname": "body",
    "fieldtype": "Markdown Editor",
    "ignore_xss_filter": 1,
-   "label": "Body",
-   "reqd": 1
-  },
-  {
-   "fieldname": "help_section",
-   "fieldtype": "Section Break",
-   "hidden": 1,
-   "label": "Help"
+   "label": "Body"
   },
   {
    "fieldname": "help",
@@ -158,11 +145,23 @@
    "fieldname": "instructor_content",
    "fieldtype": "Text",
    "label": "Instructor Content"
+  },
+  {
+   "fieldname": "column_break_syza",
+   "fieldtype": "Column Break"
+  },
+  {
+   "default": "0",
+   "fetch_from": "chapter.is_scorm_package",
+   "fieldname": "is_scorm_package",
+   "fieldtype": "Check",
+   "label": "Is SCORM Package",
+   "read_only": 1
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-10-08 11:04:54.748773",
+ "modified": "2024-11-14 13:46:56.838659",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Lesson",

lms/lms/doctype/course_lesson/course_lesson.py

@@ -52,7 +52,6 @@ class CourseLesson(Document):
 			ex.lesson = None
 			ex.course = None
 			ex.index_ = 0
-			ex.index_label = ""
 			ex.save(ignore_permissions=True)
 
 	def check_and_create_folder(self):
@@ -90,27 +89,25 @@ def save_progress(lesson, course):
 		"LMS Enrollment", {"course": course, "member": frappe.session.user}
 	)
 	if not membership:
-		return
-
-	frappe.db.set_value("LMS Enrollment", membership, "current_lesson", lesson)
-
-	quiz_completed = get_quiz_progress(lesson)
-	if not quiz_completed:
 		return 0
 
-	if frappe.db.exists(
+	frappe.db.set_value("LMS Enrollment", membership, "current_lesson", lesson)
+	already_completed = frappe.db.exists(
 		"LMS Course Progress", {"lesson": lesson, "member": frappe.session.user}
-	):
-		return
+	)
 
-	frappe.get_doc(
-		{
-			"doctype": "LMS Course Progress",
-			"lesson": lesson,
-			"status": "Complete",
-			"member": frappe.session.user,
-		}
-	).save(ignore_permissions=True)
+	quiz_completed = get_quiz_progress(lesson)
+	assignment_completed = get_assignment_progress(lesson)
+
+	if not already_completed and quiz_completed and assignment_completed:
+		frappe.get_doc(
+			{
+				"doctype": "LMS Course Progress",
+				"lesson": lesson,
+				"status": "Complete",
+				"member": frappe.session.user,
+			}
+		).save(ignore_permissions=True)
 
 	progress = get_course_progress(course)
 	capture_progress_for_analytics(progress, course)
@@ -160,6 +157,32 @@ def get_quiz_progress(lesson):
 	return True
 
 
+def get_assignment_progress(lesson):
+	lesson_details = frappe.db.get_value(
+		"Course Lesson", lesson, ["body", "content"], as_dict=1
+	)
+	assignments = []
+
+	if lesson_details.content:
+		content = json.loads(lesson_details.content)
+
+		for block in content.get("blocks"):
+			if block.get("type") == "assignment":
+				assignments.append(block.get("data").get("assignment"))
+
+	elif lesson_details.body:
+		macros = find_macros(lesson_details.body)
+		assignments = [value for name, value in macros if name == "Assignment"]
+
+	for assignment in assignments:
+		if not frappe.db.exists(
+			"LMS Assignment Submission",
+			{"assignment": assignment, "member": frappe.session.user},
+		):
+			return False
+	return True
+
+
 @frappe.whitelist()
 def get_lesson_info(chapter):
 	return frappe.db.get_value("Course Chapter", chapter, "course")

lms/lms/doctype/lms_assignment/lms_assignment.json

@@ -9,10 +9,11 @@
  "engine": "InnoDB",
  "field_order": [
   "title",
-  "grade_assignment",
   "question",
   "column_break_hmwv",
   "type",
+  "grade_assignment",
+  "section_break_sjti",
   "show_answer",
   "answer"
  ],
@@ -20,7 +21,8 @@
   {
    "fieldname": "question",
    "fieldtype": "Text Editor",
-   "label": "Question"
+   "label": "Question",
+   "reqd": 1
   },
   {
    "fieldname": "type",
@@ -28,14 +30,16 @@
    "in_list_view": 1,
    "in_standard_filter": 1,
    "label": "Type",
-   "options": "Document\nPDF\nURL\nImage\nText"
+   "options": "Document\nPDF\nURL\nImage\nText",
+   "reqd": 1
   },
   {
    "fieldname": "title",
    "fieldtype": "Data",
    "in_list_view": 1,
    "in_standard_filter": 1,
-   "label": "Title"
+   "label": "Title",
+   "reqd": 1
   },
   {
    "fieldname": "column_break_hmwv",
@@ -60,11 +64,15 @@
    "fieldname": "grade_assignment",
    "fieldtype": "Check",
    "label": "Grade Assignment"
+  },
+  {
+   "fieldname": "section_break_sjti",
+   "fieldtype": "Section Break"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-04-05 12:01:36.601160",
+ "modified": "2024-12-24 09:36:31.464508",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Assignment",

lms/lms/doctype/lms_assignment_submission/lms_assignment_submission.json

@@ -14,19 +14,17 @@
   "member",
   "member_name",
   "section_break_dlzh",
-  "question",
-  "column_break_zvis",
   "assignment_attachment",
   "answer",
-  "section_break_rqal",
-  "status",
+  "column_break_oqqy",
   "evaluator",
-  "column_break_esgd",
+  "status",
   "comments",
-  "section_break_cwaw",
-  "lesson",
+  "section_break_rqal",
+  "question",
+  "column_break_esgd",
   "course",
-  "column_break_ygdu"
+  "lesson"
  ],
  "fields": [
   {
@@ -89,8 +87,7 @@
    "fieldname": "evaluator",
    "fieldtype": "Link",
    "label": "Evaluator",
-   "options": "User",
-   "read_only": 1
+   "options": "User"
   },
   {
    "depends_on": "eval:!([\"URL\", \"Text\"]).includes(doc.type);",
@@ -128,14 +125,6 @@
    "fieldname": "column_break_esgd",
    "fieldtype": "Column Break"
   },
-  {
-   "fieldname": "section_break_cwaw",
-   "fieldtype": "Section Break"
-  },
-  {
-   "fieldname": "column_break_ygdu",
-   "fieldtype": "Column Break"
-  },
   {
    "depends_on": "eval:([\"URL\", \"Text\"]).includes(doc.type);",
    "fieldname": "answer",
@@ -148,14 +137,14 @@
    "fieldtype": "Section Break"
   },
   {
-   "fieldname": "column_break_zvis",
+   "fieldname": "column_break_oqqy",
    "fieldtype": "Column Break"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
  "make_attachments_public": 1,
- "modified": "2024-04-05 15:57:22.758563",
+ "modified": "2024-12-24 21:22:35.212732",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Assignment Submission",

lms/lms/doctype/lms_assignment_submission/lms_assignment_submission.py

@@ -6,12 +6,14 @@ from frappe import _
 from frappe.model.document import Document
 from frappe.utils import validate_url, validate_email_address
 from frappe.email.doctype.email_template.email_template import get_email_template
+from frappe.desk.doctype.notification_log.notification_log import make_notification_logs
 
 
 class LMSAssignmentSubmission(Document):
 	def validate(self):
 		self.validate_duplicates()
 		self.validate_url()
+		self.validate_status()
 
 	def after_insert(self):
 		if not frappe.flags.in_test:
@@ -69,6 +71,28 @@ class LMSAssignmentSubmission(Document):
 			header=[subject, "green"],
 		)
 
+	def validate_status(self):
+		doc_before_save = self.get_doc_before_save()
+		if doc_before_save.status != self.status or doc_before_save.comments != self.comments:
+			self.trigger_update_notification()
+
+	def trigger_update_notification(self):
+		notification = frappe._dict(
+			{
+				"subject": _(
+					"There has been an update on your submission for assignment {0}"
+				).format(self.assignment_title),
+				"email_content": self.comments,
+				"document_type": self.doctype,
+				"document_name": self.name,
+				"for_user": self.owner,
+				"from_user": self.evaluator,
+				"type": "Alert",
+				"link": f"/assignment-submission/{self.assignment}/{self.name}",
+			}
+		)
+		make_notification_logs(notification, [self.member])
+
 
 @frappe.whitelist()
 def upload_assignment(

lms/lms/doctype/lms_batch/lms_batch.json

@@ -193,13 +193,15 @@
    "depends_on": "paid_batch",
    "fieldname": "amount",
    "fieldtype": "Currency",
-   "label": "Amount"
+   "label": "Amount",
+   "mandatory_depends_on": "paid_batch"
   },
   {
    "depends_on": "paid_batch",
    "fieldname": "currency",
    "fieldtype": "Link",
    "label": "Currency",
+   "mandatory_depends_on": "paid_batch",
    "options": "Currency"
   },
   {
@@ -328,7 +330,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-07-18 18:06:37.229885",
+ "modified": "2024-11-18 16:28:41.336928",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Batch",

lms/lms/doctype/lms_batch/lms_batch.py

@@ -28,11 +28,13 @@ class LMSBatch(Document):
 		self.validate_duplicate_courses()
 		self.validate_duplicate_students()
 		self.validate_payments_app()
+		self.validate_amount_and_currency()
 		self.validate_duplicate_assessments()
 		self.validate_membership()
 		self.validate_timetable()
 		self.send_confirmation_mail()
 		self.validate_evaluation_end_date()
+		self.add_students_to_live_class()
 
 	def validate_batch_end_date(self):
 		if self.end_date < self.start_date:
@@ -63,6 +65,10 @@ class LMSBatch(Document):
 			if "payments" not in installed_apps:
 				frappe.throw(_("Please install the Payments app to create a paid batches."))
 
+	def validate_amount_and_currency(self):
+		if self.paid_batch and (not self.amount or not self.currency):
+			frappe.throw(_("Amount and currency are required for paid batches."))
+
 	def validate_duplicate_assessments(self):
 		assessments = [row.assessment_name for row in self.assessment]
 		for assessment in self.assessment:
@@ -139,6 +145,27 @@ class LMSBatch(Document):
 		if cint(self.seat_count) < len(self.students):
 			frappe.throw(_("There are no seats available in this batch."))
 
+	def add_students_to_live_class(self):
+		for student in self.students:
+			if student.is_new():
+				live_classes = frappe.get_all(
+					"LMS Live Class", {"batch_name": self.name}, ["name", "event"]
+				)
+
+				for live_class in live_classes:
+					if live_class.event:
+						frappe.get_doc(
+							{
+								"doctype": "Event Participants",
+								"reference_doctype": "User",
+								"reference_docname": student.student,
+								"email": student.student,
+								"parent": live_class.event,
+								"parenttype": "Event",
+								"parentfield": "event_participants",
+							}
+						).save()
+
 	def validate_timetable(self):
 		for schedule in self.timetable:
 			if schedule.start_time and schedule.end_time:

lms/lms/doctype/lms_certificate/lms_certificate.json

@@ -114,7 +114,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-11 11:37:20.419955",
+ "modified": "2024-09-11 11:37:20.419956",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Certificate",

lms/lms/doctype/lms_course/lms_course.json

@@ -48,7 +48,12 @@
   "certification_section",
   "enable_certification",
   "column_break_rxww",
-  "expiry"
+  "expiry",
+  "tab_4_tab",
+  "statistics_section",
+  "enrollments",
+  "lessons",
+  "rating"
  ],
  "fields": [
   {
@@ -249,6 +254,36 @@
    "fieldtype": "Link",
    "label": "Category",
    "options": "LMS Category"
+  },
+  {
+   "fieldname": "tab_4_tab",
+   "fieldtype": "Tab Break",
+   "label": "Statistics"
+  },
+  {
+   "fieldname": "statistics_section",
+   "fieldtype": "Section Break"
+  },
+  {
+   "default": "0",
+   "fieldname": "enrollments",
+   "fieldtype": "Data",
+   "label": "Enrollments",
+   "read_only": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "lessons",
+   "fieldtype": "Data",
+   "label": "Lessons",
+   "read_only": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "rating",
+   "fieldtype": "Data",
+   "label": "Rating",
+   "read_only": 1
   }
  ],
  "is_published_field": "published",
@@ -275,7 +310,7 @@
   }
  ],
  "make_attachments_public": 1,
- "modified": "2024-09-21 10:23:58.633912",
+ "modified": "2024-10-30 23:08:31.842860",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course",