chore(release): Bumped to Version 2.21.0

chore: sync translations from crowdin

.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>

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/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Frappe Learning</title>
 		<meta name="title" content="{{ meta.title }}" />

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.72",
+    "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/AppSidebar.vue

@@ -99,6 +99,7 @@ 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'
@@ -114,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) => {
@@ -183,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
@@ -214,7 +258,9 @@ watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
+		addPrograms()
 		addQuizzes()
+		addAssignments()
 	}
 })
 

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">
@@ -11,7 +11,7 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
-		<div v-if="assessments.data?.length">
+		<div v-if="assessments.data?.length" class="text-sm">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
@@ -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/BatchDashboard.vue

@@ -1,17 +1,18 @@
 <template>
-	<div>
+	<div class="space-y-10">
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
-			:isStudent="isStudent"
 		/>
 		<Assessments :batch="batch.data.name" />
+		<StudentHeatmap />
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
+import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const props = defineProps({
 	batch: {

frontend/src/components/BatchFeedback.vue

@@ -0,0 +1,239 @@
+<template>
+	<div v-if="user.data?.is_student">
+		<div
+			v-if="feedbackList.data?.length"
+			class="bg-blue-100 text-blue-700 p-2 rounded-md mb-5"
+		>
+			{{ __('Thank you for providing your feedback!') }}
+		</div>
+		<div v-else class="flex justify-between items-center mb-5">
+			<div class="text-lg font-semibold">
+				{{ __('Help Us Improve') }}
+			</div>
+			<Button @click="submitFeedback()">
+				{{ __('Submit') }}
+			</Button>
+		</div>
+		<div class="space-y-8">
+			<div class="flex items-center justify-between">
+				<Rating
+					v-for="key in ratingKeys"
+					v-model="feedback[key]"
+					:label="__(convertToTitleCase(key))"
+					:readonly="readOnly"
+				/>
+			</div>
+			<FormControl
+				v-model="feedback.feedback"
+				type="textarea"
+				:label="__('Feedback')"
+				:rows="7"
+				:readonly="readOnly"
+			/>
+		</div>
+	</div>
+
+	<div v-else-if="feedbackList.data?.length">
+		<div class="text-lg font-semibold mb-5">
+			{{ __('Average of Feedback Received') }}
+		</div>
+
+		<div class="flex items-center justify-between mb-10">
+			<Rating
+				v-for="key in ratingKeys"
+				v-model="average[key]"
+				:label="__(convertToTitleCase(key))"
+				:readonly="true"
+			/>
+		</div>
+
+		<div class="text-lg font-semibold mb-5">
+			{{ __('All Feedback') }}
+		</div>
+		<ListView
+			:columns="feedbackColumns"
+			:rows="feedbackList.data"
+			row-key="name"
+			:options="{
+				showTooltip: false,
+				rowHeight: 'h-16',
+				selectable: false,
+			}"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+			></ListHeader>
+			<ListRows>
+				<ListRow
+					:row="row"
+					v-for="row in feedbackList.data"
+					class="group cursor-pointer"
+				>
+					<template #default="{ column, item }">
+						<ListRowItem
+							:item="row[column.key]"
+							:align="column.align"
+							class="text-sm"
+						>
+							<template #prefix>
+								<div v-if="column.key == 'member_name'">
+									<Avatar
+										class="flex items-center"
+										:image="row['member_image']"
+										:label="item"
+										size="sm"
+									/>
+								</div>
+							</template>
+							<div v-if="ratingKeys.includes(column.key)">
+								<Rating v-model="row[column.key]" :readonly="true" />
+							</div>
+							<div v-else class="leading-5">
+								{{ row[column.key] }}
+							</div>
+						</ListRowItem>
+					</template>
+				</ListRow>
+			</ListRows>
+		</ListView>
+	</div>
+	<div v-else class="text-sm italic text-center text-gray-700 mt-5">
+		{{ __('No feedback received yet.') }}
+	</div>
+</template>
+<script setup>
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { convertToTitleCase } from '@/utils'
+import {
+	Avatar,
+	Button,
+	createListResource,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Rating,
+} from 'frappe-ui'
+
+const user = inject('$user')
+const ratingKeys = ['content', 'instructors', 'value']
+const readOnly = ref(false)
+const average = reactive({})
+const feedback = reactive({})
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	let filters = {
+		batch: props.batch,
+	}
+	if (user.data?.is_student) {
+		filters['member'] = user.data?.name
+	}
+	feedbackList.update({
+		filters: filters,
+	})
+	feedbackList.reload()
+})
+
+const feedbackList = createListResource({
+	doctype: 'LMS Batch Feedback',
+	filters: {
+		batch: props.batch,
+	},
+	fields: [
+		'content',
+		'instructors',
+		'value',
+		'feedback',
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+	],
+	cache: ['feedbackList', props.batch, user.data?.name],
+})
+
+watch(
+	() => feedbackList.data,
+	() => {
+		if (feedbackList.data.length) {
+			let data = feedbackList.data
+			readOnly.value = true
+
+			ratingKeys.forEach((key) => {
+				average[key] = 0
+			})
+
+			data.forEach((row) => {
+				Object.keys(row).forEach((key) => {
+					if (ratingKeys.includes(key)) row[key] = row[key] * 5
+					feedback[key] = row[key]
+				})
+				ratingKeys.forEach((key) => {
+					average[key] += row[key]
+				})
+			})
+			Object.keys(average).forEach((key) => {
+				average[key] = average[key] / data.length
+			})
+		}
+	}
+)
+
+const submitFeedback = () => {
+	ratingKeys.forEach((key) => {
+		feedback[key] = feedback[key] / 5
+	})
+	feedbackList.insert.submit(
+		{
+			member: user.data?.name,
+			batch: props.batch,
+			...feedback,
+		},
+		{
+			onSuccess: () => {
+				feedbackList.reload()
+			},
+		}
+	)
+}
+
+const feedbackColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: '10rem',
+		},
+		{
+			label: 'Feedback',
+			key: 'feedback',
+			width: '15rem',
+		},
+		{
+			label: 'Content',
+			key: 'content',
+			width: '9rem',
+		},
+		{
+			label: 'Instructors',
+			key: 'instructors',
+			width: '9rem',
+		},
+		{
+			label: 'Value',
+			key: 'value',
+			width: '9rem',
+		},
+	]
+})
+</script>

frontend/src/components/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-5 h-5 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ 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-5 h-5 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ 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-5 h-5 stroke-1.5 text-gray-700" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ assessmentCount }}
+					</span>
+					<span class="text-gray-700">
+						{{ __('Assessments') }}
+					</span>
+				</div>
+			</div>
+		</div>
+		<div v-if="showProgressChart" class="mb-8">
+			<div class="text-gray-600 font-medium">
+				{{ __('Progress') }}
+			</div>
+			<ApexChart
+				:options="chartOptions"
+				:series="chartData"
+				type="bar"
+				height="200"
+			/>
+			<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 rounded-sm"
+						:style="{ 'background-color': theme.colors.green[600] }"
+					></div>
+					<div>
+						{{ __('Courses') }}
 					</div>
+				</div>
+				<div class="flex items-center space-x-2">
+					<div
+						class="w-3 h-3 rounded-sm"
+						:style="{ 'background-color': theme.colors.blue[600] }"
+					></div>
+					<div>
+						{{ __('Assessments') }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</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"
+								class="text-sm"
+							>
+								<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 class="text-xs">{{ row[column.key] }}%</div>
+								</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,86 @@ 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'
+import { theme } from '@/utils/theme'
 
 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: '15rem',
+			icon: 'activity',
 		},
 		{
 			label: 'Last Active',
 			key: 'last_active',
+			width: '10rem',
+			align: 'center',
+			icon: 'clock',
 		},
 	]
+
+	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 +305,106 @@ 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 = theme.colors.green[700]
+	const assessmentColor = theme.colors.blue[700]
+	const maxY =
+		students.data?.length % 5
+			? students.data?.length + (5 - (students.data?.length % 5))
+			: students.data?.length
+
+	return {
+		chart: {
+			type: 'bar',
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			bar: {
+				distributed: true,
+				borderRadius: 3,
+				borderRadiusApplication: 'end',
+				horizontal: true,
+				barHeight: '40%',
+			},
+		},
+		colors: Object.values(categories).map((item) =>
+			item.type === 'course' ? courseColor : assessmentColor
+		),
+		xaxis: {
+			categories: Object.values(categories).map((item) => item.label),
+			labels: {
+				style: {
+					fontSize: '10px',
+				},
+				rotate: 0,
+				formatter: function (value) {
+					return value.length > 30 ? `${value.substring(0, 30)}...` : value
+				},
+			},
+		},
+		yaxis: {
+			max: maxY,
+			min: 0,
+			stepSize: 10,
+			tickAmount: maxY / 5,
+			/* reversed: true */
+		},
+	}
+}
+
+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

@@ -29,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"
@@ -42,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>
 
@@ -51,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({
@@ -67,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({
@@ -118,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,
 			}
@@ -126,7 +141,7 @@ const options = createResource({
 	},
 })
 
-function reload(val) {
+const reload = (val) => {
 	options.update({
 		params: {
 			txt: val,
@@ -137,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/CourseCard.vue

@@ -59,7 +59,7 @@
 
 				<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,25 +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.lessons }} {{ __('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">
-					{{ formatAmount(course.data.enrollments) }}
-					{{ __('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.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>

frontend/src/components/CourseOutline.vue

@@ -303,9 +303,9 @@ const trashChapter = (chapterName) => {
 }
 
 const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
 	event.preventDefault()
 	if (props.allowEdit) return
-	if (!chapter.is_scorm_package) return
 	if (!user.data) {
 		showToast(
 			__('You are not enrolled'),

frontend/src/components/DiscussionReplies.vue

@@ -71,6 +71,7 @@
 		</div>
 
 		<TextEditor
+			v-if="renderEditor"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
@@ -94,7 +95,7 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted, computed } from 'vue'
+import { ref, inject, onMounted } from 'vue'
 import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
@@ -102,6 +103,8 @@ const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
 const allUsers = inject('$allUsers')
+const mentionUsers = ref([])
+const renderEditor = ref(false)
 
 const props = defineProps({
 	topic: {
@@ -124,6 +127,7 @@ onMounted(() => {
 	socket.on('delete_message', (data) => {
 		replies.reload()
 	})
+	fetchMentionUsers()
 })
 
 const replies = createResource({
@@ -150,15 +154,26 @@ const newReplyResource = createResource({
 	},
 })
 
-const mentionUsers = computed(() => {
-	let users = Object.values(allUsers.data).map((user) => {
-		return {
-			value: user.name,
-			label: user.full_name,
-		}
-	})
-	return users
-})
+const fetchMentionUsers = () => {
+	if (user.data?.is_student) {
+		renderEditor.value = true
+	} else {
+		allUsers.reload(
+			{},
+			{
+				onSuccess(data) {
+					mentionUsers.value = Object.values(data).map((user) => {
+						return {
+							value: user.name,
+							label: user.full_name,
+						}
+					})
+					renderEditor.value = true
+				},
+			}
+		)
+	}
+}
 
 const postReply = () => {
 	newReplyResource.submit(

frontend/src/components/JobCard.vue

@@ -1,71 +1,41 @@
 <template>
-	<div class="flex rounded p-1 lg:px-2 lg:py-2.5 hover:bg-gray-100">
-		<div class="flex w-3/5 md:w-2/5">
-			<img
-				:src="job.company_logo"
-				class="w-12 h-12 rounded-lg object-contain mr-4"
-				:alt="job.company_name"
-			/>
-			<div>
-				<div class="font-medium mb-1">
+	<div class="flex space-x-4 border rounded-md p-2">
+		<Avatar :image="job.company_logo" :label="job.job_title" size="2xl" />
+		<div class="flex flex-col space-y-2 flex-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold">
 					{{ job.job_title }}
-				</div>
-				<div class="text-gray-700">
-					{{ job.company_name }}
-				</div>
-			</div>
-		</div>
-		<div class="flex justify-end w-1/5 text-gray-700">
-			{{ job.location.replace(',', '').split(' ')[0] }}
-		</div>
-		<div
-			class="flex justify-end w-1/5 text-gray-700 text-right hidden md:block"
-		>
-			{{ job.type }}
-		</div>
-		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">
-			{{ dayjs(job.creation).format('DD MMM YYYY') }}
-		</div>
-	</div>
-	<!-- <div class="flex flex-col shadow rounded-md p-4 h-full">
-		<div class="flex justify-between">
-			<div>
-				<div class="text-xl font-semibold mb-2">
-					{{ job.job_title }}
-				</div>
-				<div>
-					{{ __("posted by") }}
-					<span class="font-medium">
-						{{ job.company_name }}
-					</span>
-				</div>
-			</div>
-			<img
-				:src="job.company_logo"
-				class="w-12 h-12 rounded-lg object-contain"
-			/>
-		</div>
-		<div class="flex justify-between mt-8">
-			<div class="flex items-center">
-				<Badge :label="job.type" theme="green" size="lg" class="mr-4"/>
-				<Badge :label="job.location" theme="gray" size="lg">
-					<template #prefix>
-						<MapPin class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Badge>
-			</div>
-			<div>
-				<span class="font-medium">
-					{{ dayjs(job.creation).format('DD MMM YYYY') }}
 				</span>
 			</div>
+			<div class="flex items-center space-x-2">
+				<Building2 class="w-4 h-4 stroke-1.5 text-gray-600" />
+				<span>
+					{{ job.company_name }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2">
+				<MapPin class="w-4 h-4 stroke-1.5 text-gray-600" />
+				<span>
+					{{ job.location }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2">
+				<Shapes class="w-4 h-4 stroke-1.5 text-gray-600" />
+				<span>
+					{{ job.type }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2">
+				<Calendar class="w-4 h-4 stroke-1.5 text-gray-600" />
+				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
+			</div>
 		</div>
-	</div> -->
+	</div>
 </template>
 <script setup>
-import { MapPin } from 'lucide-vue-next'
-import { Badge } from 'frappe-ui'
+import { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { inject } from 'vue'
+import { Avatar } from 'frappe-ui'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({

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"
@@ -25,7 +40,7 @@
 				@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>
@@ -56,23 +71,8 @@
 				}}
 			</div>
 		</div>
-
-		<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>
-	<ExplanationVideos v-model="showExplanation" :type="type" />
+	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
 </template>
 <script setup>
 import { Info } from 'lucide-vue-next'
@@ -81,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

@@ -15,45 +15,55 @@
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
 		<div
 			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full text-sm text-gray-700 p-3"
+			class="flex flex-col border rounded-md h-full text-gray-700 p-3"
 		>
-			<div class="font-semibold text-gray-900 text-lg mb-4">
+			<div class="font-semibold text-gray-900 text-lg mb-1">
 				{{ cls.title }}
 			</div>
-			<div class="leading-5 text-gray-700 text-sm mb-4">
+			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="flex items-center mb-2">
-				<Calendar class="w-4 h-4 stroke-1.5 text-gray-700" />
-				<span class="ml-2">
-					{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-5">
-				<Clock class="w-4 h-4 stroke-1.5" />
-				<span class="ml-2">
-					{{ formatTime(cls.time) }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-gray-900 mt-auto">
-				<a
-					v-if="user.data?.is_moderator || user.data?.is_evaluator"
-					:href="cls.start_url"
-					target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-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"
+			<div class="space-y-3">
+				<div class="flex items-center space-x-2">
+					<Calendar class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
+					</span>
+				</div>
+				<div class="flex items-center space-x-2">
+					<Clock class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ formatTime(cls.time) }}
+					</span>
+				</div>
+				<div
+					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
+					class="flex items-center space-x-2 text-gray-900 mt-auto"
 				>
-					<Monitor class="h-4 w-4 stroke-1.5" />
-					{{ __('Start') }}
-				</a>
-				<a
-					v-if="cls.date <= dayjs().format('YYYY-MM-DD')"
-					:href="cls.join_url"
-					target="_blank"
-					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') }}
-				</a>
+					<a
+						v-if="user.data?.is_moderator || user.data?.is_evaluator"
+						:href="cls.start_url"
+						target="_blank"
+						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-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"
+					>
+						<Monitor class="h-4 w-4 stroke-1.5" />
+						{{ __('Start') }}
+					</a>
+					<a
+						:href="cls.join_url"
+						target="_blank"
+						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') }}
+					</a>
+				</div>
+				<div v-else class="flex items-center space-x-2 text-yellow-700">
+					<Info class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ __('This class has ended') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -68,7 +78,7 @@
 </template>
 <script setup>
 import { createListResource, Button } from 'frappe-ui'
-import { Plus, Clock, Calendar, Video, Monitor } from 'lucide-vue-next'
+import { Plus, Clock, Calendar, Video, Monitor, Info } from 'lucide-vue-next'
 import { inject } from 'vue'
 import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
 import { ref } from 'vue'
@@ -107,3 +117,15 @@ const openLiveClassModal = () => {
 	showLiveClassModal.value = true
 }
 </script>
+<style>
+.short-introduction {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin: 0.25rem 0 1.5rem;
+	line-height: 1.5;
+}
+</style>

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/BatchStudentProgress.vue

@@ -0,0 +1,111 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 space-y-10 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>
+
+				<div class="space-y-8">
+					<!-- Assessments -->
+					<div class="space-y-2 text-sm">
+						<div class="flex items-center border-b pb-1 font-medium">
+							<span class="flex-1">
+								{{ __('Assessment') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="assessment in Object.keys(student.assessments)"
+							class="flex items-center text-gray-700 font-medium"
+						>
+							<span class="flex-1">
+								{{ 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>
+
+					<!-- Courses -->
+					<div class="space-y-2 text-sm">
+						<div class="flex items-center border-b pb-1 font-medium">
+							<span class="flex-1">
+								{{ __('Courses') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="course in Object.keys(student.courses)"
+							class="flex items-center text-gray-700 font-medium"
+						>
+							<span class="flex-1">
+								{{ course }}
+							</span>
+							<span>
+								{{ Math.floor(student.courses[course]) }}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Heatmap -->
+				<StudentHeatmap :member="student.email" :base_days="120" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Avatar, Badge, Dialog } from 'frappe-ui'
+import StudentHeatmap from '@/components/StudentHeatmap.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">
+				<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')"
+				/>
+				<FormControl
+					type="select"
+					v-model="details.course"
+					:label="__('Course')"
+					:options="getCourses()"
+				/>
+				<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_name: 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

@@ -17,10 +17,15 @@
 		<template #body-content>
 			<div class="space-y-4 text-base">
 				<FormControl label="Title" v-model="chapter.title" :required="true" />
-				<FormControl
-					:label="__('Is SCORM Package')"
+				<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"
-					type="checkbox"
 				/>
 				<div v-if="chapter.is_scorm_package">
 					<FileUploader
@@ -70,14 +75,17 @@ import {
 	Dialog,
 	FileUploader,
 	FormControl,
+	Switch,
 } from 'frappe-ui'
-import { defineModel, reactive, watch, ref } from 'vue'
+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 settingsStore = useSettings()
 
 const props = defineProps({
 	course: {
@@ -137,6 +145,9 @@ const addChapter = async (close) => {
 					{
 						onSuccess(data) {
 							cleanChapter()
+							if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+								settingsStore.onboardingDetails.reload()
+							}
 							outline.value.reload()
 							showToast(
 								__('Success'),

frontend/src/components/Modals/EditProfile.vue

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

frontend/src/components/Modals/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/Question.vue

@@ -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>

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

@@ -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/StudentHeatmap.vue

@@ -0,0 +1,138 @@
+<template>
+	<div v-if="heatmap.data">
+		<div class="text-lg font-semibold mb-2">
+			{{ heatmap.data.total_activities }}
+			{{
+				heatmap.data.total_activities > 1 ? __('activities') : __('activity')
+			}}
+			{{ __('in the last') }}
+			{{ heatmap.data.weeks }}
+			{{ __('weeks') }}
+		</div>
+
+		<ApexChart :options="chartOptions" :series="chartSeries" height="240" />
+	</div>
+</template>
+<script setup>
+import { createResource } from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import ApexChart from 'vue3-apexcharts'
+import { theme } from '@/utils/theme'
+
+const user = inject('$user')
+const labels = ref([])
+const memberName = ref(null)
+
+const props = defineProps({
+	member: {
+		type: String,
+	},
+	base_days: {
+		type: Number,
+		default: 200,
+	},
+})
+
+onMounted(() => {
+	memberName.value = props.member || user.data?.name
+})
+
+const heatmap = createResource({
+	url: 'lms.lms.api.get_heatmap_data',
+	makeParams(values) {
+		return {
+			member: values.member,
+			base_days: props.base_days,
+		}
+	},
+	auto: false,
+	cache: ['heatmap', memberName.value],
+})
+
+watch(memberName, (newVal) => {
+	heatmap.reload(
+		{
+			member: newVal,
+		},
+		{
+			onSuccess(data) {
+				labels.value = data.labels
+			},
+		}
+	)
+})
+
+const chartOptions = computed(() => {
+	return {
+		chart: {
+			type: 'heatmap',
+			toolbar: {
+				show: false,
+			},
+		},
+		highlightOnHover: false,
+		grid: {
+			show: false,
+		},
+		plotOptions: {
+			heatmap: {
+				radius: 8,
+				shadeIntensity: 0.2,
+				enableShades: true,
+				colorScale: {
+					ranges: [
+						{ from: 0, to: 0, color: theme.colors.gray[400] },
+						{ from: 1, to: 5, color: theme.colors.green[200] },
+						{ from: 6, to: 15, color: theme.colors.green[500] },
+						{ from: 16, to: 30, color: theme.colors.green[700] },
+						{ from: 31, to: 100, color: theme.colors.green[800] },
+					],
+				},
+			},
+		},
+		dataLabels: {
+			enabled: false,
+		},
+		xaxis: {
+			type: 'category',
+			categories: labels.value,
+			position: 'top',
+			axisBorder: {
+				show: false,
+			},
+			axisTicks: {
+				show: false,
+			},
+			tooltip: {
+				enabled: false,
+			},
+		},
+		yaxis: {
+			type: 'category',
+			categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+			reversed: true,
+			tooltip: {
+				enabled: false,
+			},
+		},
+		tooltip: {
+			custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+				return `<div class="text-xs bg-gray-900 text-white font-medium p-1">
+					<div class="text-center">${heatmap.data.heatmap_data[seriesIndex].data[dataPointIndex].label}</div>
+				</div>`
+			},
+		},
+	}
+})
+
+const chartSeries = computed(() => {
+	if (!heatmap.data) return []
+	let series = heatmap.data.heatmap_data.map((row) => {
+		return {
+			name: row.name,
+			data: row.data.map((value) => value.count),
+		}
+	})
+	return series
+})
+</script>

frontend/src/components/UpcomingEvaluations.vue

@@ -1,10 +1,12 @@
 <template>
-	<div class="mb-10">
-		<Button v-if="isStudent" @click="openEvalModal" class="float-right">
-			{{ __('Schedule Evaluation') }}
-		</Button>
-		<div class="text-lg font-semibold mb-4">
-			{{ __('Upcoming Evaluations') }}
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-lg font-semibold">
+				{{ __('Upcoming Evaluations') }}
+			</div>
+			<Button @click="openEvalModal">
+				{{ __('Schedule Evaluation') }}
+			</Button>
 		</div>
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-2 gap-4">
@@ -67,10 +69,6 @@ const props = defineProps({
 		type: Array,
 		default: [],
 	},
-	isStudent: {
-		type: Boolean,
-		default: false,
-	},
 	endDate: {
 		type: String,
 		default: null,

frontend/src/main.js

@@ -1,5 +1,4 @@
 import './index.css'
-
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
@@ -8,15 +7,8 @@ import dayjs from '@/utils/dayjs'
 import { createDialog } from '@/utils/dialogs'
 import translationPlugin from './translation'
 import { usersStore } from './stores/user'
-import { sessionStore } from './stores/session'
 import { initSocket } from './socket'
-import {
-	FrappeUI,
-	setConfig,
-	frappeRequest,
-	resourcesPlugin,
-	pageMetaPlugin,
-} from 'frappe-ui'
+import { FrappeUI, setConfig, frappeRequest, pageMetaPlugin } from 'frappe-ui'
 
 let pinia = createPinia()
 let app = createApp(App)
@@ -32,8 +24,6 @@ app.provide('$socket', initSocket())
 app.mount('#app')
 
 const { userResource, allUsers } = usersStore()
-let { isLoggedIn } = sessionStore()
-
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
 app.config.globalProperties.$user = userResource

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/Badge.vue

@@ -1,32 +1,33 @@
 <template>
-	<div v-if="badge.doc">
+	<div v-if="badge.data">
 		<div class="p-5 flex flex-col items-center mt-40">
 			<div class="text-3xl font-semibold">
-				{{ badge.doc.title }}
+				{{ badge.data.badge }}
 			</div>
-			<img :src="badge.doc.image" :alt="badge.doc.title" class="h-60 mt-2" />
-			<div class="text-lg">
+			<img
+				:src="badge.data.badge_image"
+				:alt="badge.data.badge"
+				class="h-60 mt-2"
+			/>
+			<div class="">
 				{{
 					__('This badge has been awarded to {0} on {1}.').format(
-						userName,
-						dayjs(issuedOn.data?.issued_on).format('DD MMM YYYY')
+						badge.data.member_name,
+						dayjs(badge.data.issued_on).format('DD MMM YYYY')
 					)
 				}}
 			</div>
-			<div class="text-lg mt-2">
-				{{ badge.doc.description }}
+			<div class="mt-2">
+				{{ badge.data.badge_description }}
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { createDocumentResource, createResource, Breadcrumbs } from 'frappe-ui'
+import { createDocumentResource, createResource } from 'frappe-ui'
 import { computed, inject } from 'vue'
-import { useRouter } from 'vue-router'
 
-const allUsers = inject('$allUsers')
 const dayjs = inject('$dayjs')
-const router = useRouter()
 
 const props = defineProps({
 	badgeName: {
@@ -39,33 +40,15 @@ const props = defineProps({
 	},
 })
 
-const badge = createDocumentResource({
-	doctype: 'LMS Badge',
-	name: props.badgeName,
-})
-
-const userName = computed(() => {
-	const user = Object.values(allUsers.data).find(
-		(user) => user.name === props.email
-	)
-	return user ? user.full_name : props.email
-})
-
-const issuedOn = createResource({
-	url: 'frappe.client.get_value',
+const badge = createResource({
+	url: 'frappe.client.get',
 	makeParams(values) {
 		return {
 			doctype: 'LMS Badge Assignment',
 			filters: {
-				member: props.email,
 				badge: props.badgeName,
+				member: props.email,
 			},
-			fieldname: 'issued_on',
-		}
-	},
-	onSuccess(data) {
-		if (!data.issued_on) {
-			router.push({ name: 'Courses' })
 		}
 	},
 	auto: true,
@@ -77,11 +60,11 @@ const breadcrumbs = computed(() => {
 			label: 'Badges',
 		},
 		{
-			label: badge.doc.title,
+			label: badge.data.badge,
 			route: {
 				name: 'Badge',
 				params: {
-					badge: badge.doc.name,
+					badge: badge.data.badge,
 				},
 			},
 		},

frontend/src/pages/Batch.vue

@@ -4,21 +4,29 @@
 			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">
+		<div v-if="batch.data" class="grid grid-cols-[75%,25%] h-screen">
+			<div class="border-r">
 				<Tabs
 					v-model="tabIndex"
 					:tabs="tabs"
-					tablistClass="overflow-y-hidden sticky top-11 bg-white z-10"
+					tablistClass="overflow-y-hidden bg-white"
 				>
 					<template #tab="{ tab, selected }" class="overflow-x-hidden">
 						<div>
@@ -51,14 +59,14 @@
 							<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 == 'Live Class'">
-								<LiveClass :batch="batch.data.name" />
+							<div v-else-if="tab.label == 'Dashboard'">
+								<BatchStudents :batch="batch.data" />
 							</div>
-							<div v-else-if="tab.label == 'Students'">
-								<BatchStudents :batch="batch.data.name" />
+							<div v-else-if="tab.label == 'Classes'">
+								<LiveClass :batch="batch.data.name" />
 							</div>
 							<div v-else-if="tab.label == 'Assessments'">
 								<Assessments :batch="batch.data.name" />
@@ -73,20 +81,23 @@
 									:title="__('Discussions')"
 									:key="batch.data.name"
 									:singleThread="true"
-									:scrollToBottom="true"
+									:scrollToBottom="false"
 								/>
 							</div>
+							<div v-else-if="tab.label == 'Feedback'">
+								<BatchFeedback :batch="batch.data.name" />
+							</div>
 						</div>
 					</template>
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-2xl font-semibold mb-2">
-					{{ batch.data.title }}
+				<div class="text-gray-700 font-semibold mb-4">
+					{{ __('About this batch') }}:
 				</div>
-				<div v-html="batch.data.description" class="leading-5 mb-2"></div>
+				<div v-html="batch.data.description" class="leading-5 mb-4"></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="{
@@ -169,6 +180,7 @@
 			</div>
 		</div>
 	</div>
+	<BulkCertificates v-model="openCertificateDialog" :batch="batch.data" />
 </template>
 <script setup>
 import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
@@ -181,11 +193,11 @@ import {
 	BookOpen,
 	Laptop,
 	BookOpenCheck,
-	Contact2,
 	Mail,
 	SendIcon,
 	MessageCircle,
 	Globe,
+	ClipboardPen,
 } from 'lucide-vue-next'
 import { formatTime, updateDocumentTitle } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
@@ -197,9 +209,12 @@ 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'
+import BatchFeedback from '@/components/BatchFeedback.vue'
 
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
+const openCertificateDialog = ref(false)
 
 const props = defineProps({
 	batchName: {
@@ -218,7 +233,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',
@@ -248,38 +263,42 @@ 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: 'Classes',
+		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,
 	})
+
+	batchTabs.push({
+		label: 'Feedback',
+		icon: ClipboardPen,
+	})
 	return batchTabs
 })
 

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

@@ -252,7 +252,7 @@ import {
 } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { useRouter } from 'vue-router'
-import { showToast } from '../utils'
+import { showToast } from '@/utils'
 import { Image } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
@@ -345,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

@@ -1,254 +1,296 @@
 <template>
-	<div class="">
-		<header
-			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<router-link
+			v-if="user.data?.is_moderator"
+			:to="{
+				name: 'BatchForm',
+				params: { batchName: 'new' },
+			}"
 		>
-			<Breadcrumbs
-				class="h-7"
-				:items="[{ label: __('Batches'), route: { name: 'Batches' } }]"
-			/>
-			<div class="flex space-x-2">
-				<div class="w-44">
-					<Select
-						v-if="categories.data?.length"
-						v-model="currentCategory"
-						:options="categories.data"
-						:placeholder="__('Category')"
+			<Button variant="solid">
+				<template #prefix>
+					<Plus class="h-4 w-4 stroke-1.5" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</router-link>
+	</header>
+	<div class="p-5 pb-10">
+		<div
+			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
+		>
+			<div class="text-lg font-semibold">
+				{{ __('All Batches') }}
+			</div>
+			<div
+				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-2"
+			>
+				<TabButtons
+					v-if="user.data"
+					:buttons="batchTabs"
+					v-model="currentTab"
+				/>
+				<div class="grid grid-cols-2 gap-2">
+					<FormControl
+						v-model="title"
+						:placeholder="__('Search by Title')"
+						type="text"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						@input="updateBatches()"
 					/>
-				</div>
-				<router-link
-					v-if="user.data?.is_moderator"
-					:to="{
-						name: 'BatchForm',
-						params: { batchName: 'new' },
-					}"
-				>
-					<Button variant="solid">
-						<template #prefix>
-							<Plus class="h-4 w-4 stroke-1.5" />
-						</template>
-						{{ __('New') }}
-					</Button>
-				</router-link>
-			</div>
-		</header>
-		<div v-if="batches.data" class="pb-5">
-			<div
-				v-if="batches.data.length == 0 && batches.list.loading"
-				class="p-5 text-base text-gray-700"
-			>
-				{{ __('Loading Batches...') }}
-			</div>
-			<Tabs
-				v-if="hasBatches"
-				v-model="tabIndex"
-				:tabs="makeTabs"
-				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
-			>
-				<template #tab="{ tab, selected }">
-					<div>
-						<button
-							class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-							:class="{ 'text-gray-900': selected }"
-						>
-							<component v-if="tab.icon" :is="tab.icon" class="h-5" />
-							{{ __(tab.label) }}
-							<Badge
-								:class="
-									selected
-										? 'text-gray-800 border border-gray-800'
-										: 'border border-gray-500'
-								"
-								variant="subtle"
-								theme="gray"
-								size="sm"
-							>
-								{{ tab.count }}
-							</Badge>
-						</button>
+					<div class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40">
+						<Select
+							v-if="categories.length"
+							v-model="currentCategory"
+							:options="categories"
+							:placeholder="__('Category')"
+							@change="updateBatches()"
+						/>
 					</div>
-				</template>
-				<template #default="{ tab }">
-					<div
-						v-if="tab.batches && tab.batches.value.length"
-						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 m-5"
-					>
-						<router-link
-							v-for="batch in tab.batches.value"
-							:to="{ name: 'BatchDetail', params: { batchName: batch.name } }"
-						>
-							<BatchCard :batch="batch" />
-						</router-link>
-					</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
+			v-if="batches.data?.length"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"
+		>
+			<router-link
+				v-for="batch in batches.data"
+				:to="{ name: 'BatchDetail', params: { batchName: batch.name } }"
+			>
+				<BatchCard :batch="batch" />
+			</router-link>
+		</div>
+		<div
+			v-else-if="!batches.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-gray-600 italic mt-48"
+		>
+			<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No batches found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{
+					__(
+						'There are no batches matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
+					)
+				}}
+			</div>
+		</div>
+		<div
+			v-if="!batches.list.loading && batches.hasNextPage"
+			class="flex justify-center mt-5"
+		>
+			<Button @click="batches.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
 	</div>
 </template>
 <script setup>
 import {
-	createResource,
 	Breadcrumbs,
 	Button,
-	Tabs,
-	Badge,
+	createListResource,
+	FormControl,
 	Select,
+	TabButtons,
 } from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 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'
+import BatchCard from '@/components/BatchCard.vue'
 
 const user = inject('$user')
+const dayjs = inject('$dayjs')
+const start = ref(0)
+const pageLength = ref(20)
+const categories = ref([])
 const currentCategory = ref(null)
-const hasBatches = ref(false)
+const title = ref('')
+const filters = ref({})
+const currentTab = ref(user.data?.is_student ? 'All' : 'Upcoming')
+const orderBy = ref('start_date')
 
 onMounted(() => {
-	let queries = new URLSearchParams(location.search)
-	if (queries.has('category')) {
-		currentCategory.value = queries.get('category')
-	}
-})
-
-const batches = createResource({
-	doctype: 'LMS Batch',
-	url: 'lms.lms.utils.get_batches',
-	cache: ['batches', user.data?.email],
-	auto: true,
-})
-
-const categories = createResource({
-	url: 'lms.lms.api.get_categories',
-	makeParams() {
-		return {
-			doctype: 'LMS Batch',
-			filters: {
-				published: 1,
-			},
-		}
-	},
-	cache: ['batchCategories'],
-	auto: true,
-	transform(data) {
-		data.unshift({
+	setFiltersFromQuery()
+	updateBatches()
+	categories.value = [
+		{
 			label: '',
 			value: null,
-		})
+		},
+	]
+})
+
+const setFiltersFromQuery = () => {
+	let queries = new URLSearchParams(location.search)
+	title.value = queries.get('title') || ''
+	currentCategory.value = queries.get('category') || null
+}
+
+const batches = createListResource({
+	doctype: 'LMS Batch',
+	url: 'lms.lms.utils.get_batches',
+	cache: ['batches', user.data?.name],
+	pageLength: pageLength.value,
+	start: start.value,
+	onSuccess(data) {
+		let allCategories = data.map((batch) => batch.category)
+		allCategories = allCategories.filter(
+			(category, index) => allCategories.indexOf(category) === index && category
+		)
+		if (categories.value.length <= allCategories.length) {
+			updateCategories(data)
+		}
 	},
 })
 
-const tabIndex = ref(0)
-let tabs
+const updateBatches = () => {
+	updateFilters()
+	batches.update({
+		filters: filters.value,
+		orderBy: orderBy.value,
+	})
+	batches.reload()
+}
 
-const makeTabs = computed(() => {
-	tabs = []
-	addToTabs('Upcoming')
+const updateFilters = () => {
+	updateCategoryFilter()
+	updateTitleFilter()
+	updateTabFilter()
+	updateStudentFilter()
+	setQueryParams()
+}
 
+const updateCategoryFilter = () => {
+	if (currentCategory.value) {
+		filters.value['category'] = currentCategory.value
+	} else {
+		delete filters.value['category']
+	}
+}
+
+const updateTitleFilter = () => {
+	if (title.value) {
+		filters.value['title'] = ['like', `%${title.value}%`]
+	} else {
+		delete filters.value['title']
+	}
+}
+
+const updateTabFilter = () => {
+	orderBy.value = 'start_date'
+	if (!user.data) {
+		return
+	}
+	if (currentTab.value == 'Enrolled' && user.data?.is_student) {
+		filters.value['enrolled'] = 1
+		delete filters.value['start_date']
+		delete filters.value['published']
+		orderBy.value = 'start_date desc'
+	} else if (user.data?.is_student) {
+		delete filters.value['enrolled']
+	} else {
+		delete filters.value['start_date']
+		delete filters.value['published']
+		orderBy.value = 'start_date desc'
+		if (currentTab.value == 'Upcoming') {
+			filters.value['start_date'] = ['>=', dayjs().format('YYYY-MM-DD')]
+			filters.value['published'] = 1
+			orderBy.value = 'start_date'
+		} else if (currentTab.value == 'Archived') {
+			filters.value['start_date'] = ['<=', dayjs().format('YYYY-MM-DD')]
+		} else if (currentTab.value == 'Unpublished') {
+			filters.value['published'] = 0
+		}
+	}
+}
+
+const updateStudentFilter = () => {
+	if (!user.data || (user.data?.is_student && currentTab.value != 'Enrolled')) {
+		filters.value['start_date'] = ['>=', dayjs().format('YYYY-MM-DD')]
+		filters.value['published'] = 1
+	}
+}
+
+const setQueryParams = () => {
+	let queries = new URLSearchParams(location.search)
+	let filterKeys = {
+		title: title.value,
+		category: currentCategory.value,
+	}
+
+	Object.keys(filterKeys).forEach((key) => {
+		if (filterKeys[key]) {
+			queries.set(key, filterKeys[key])
+		} else {
+			queries.delete(key)
+		}
+	})
+
+	history.replaceState({}, '', `${location.pathname}?${queries.toString()}`)
+}
+
+const updateCategories = (data) => {
+	data.forEach((batch) => {
+		if (
+			batch.category &&
+			!categories.value.find((category) => category.value === batch.category)
+		)
+			categories.value.push({
+				label: batch.category,
+				value: batch.category,
+			})
+	})
+}
+
+watch(currentTab, () => {
+	updateBatches()
+})
+
+const batchType = computed(() => {
+	let types = [
+		{ label: __(''), value: null },
+		{ label: __('Upcoming'), value: 'Upcoming' },
+		{ label: __('Archived'), value: 'Archived' },
+	]
 	if (user.data?.is_moderator) {
-		addToTabs('Archived')
-		addToTabs('Private')
+		types.push({ label: __('Unpublished'), value: 'Unpublished' })
 	}
+	return types
+})
 
-	if (user.data) {
-		addToTabs('Enrolled')
+const batchTabs = computed(() => {
+	let tabs = [
+		{
+			label: __('All'),
+		},
+	]
+	if (user.data?.is_student) {
+		tabs.push({ label: __('Enrolled') })
+	} else {
+		tabs.push({ label: __('Upcoming') })
+		tabs.push({ label: __('Archived') })
+		tabs.push({ label: __('Unpublished') })
 	}
-
 	return tabs
 })
 
-const getBatches = (type) => {
-	if (currentCategory.value && currentCategory.value != '') {
-		return batches.data[type].filter(
-			(batch) => batch.category == currentCategory.value
-		)
-	}
-	return batches.data[type]
-}
-
-const addToTabs = (label) => {
-	let batches = getBatches(label.toLowerCase().split(' ').join('_'))
-	tabs.push({
-		label,
-		batches: computed(() => batches),
-		count: computed(() => batches.length),
-	})
-}
-
-watch(batches, () => {
-	Object.keys(batches.data).forEach((key) => {
-		if (batches.data[key].length) {
-			hasBatches.value = true
-		}
-	})
-})
-
-watch(
-	() => currentCategory.value,
-	() => {
-		let queries = new URLSearchParams(location.search)
-		if (currentCategory.value) {
-			queries.set('category', currentCategory.value)
-		} else {
-			queries.delete('category')
-		}
-		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
-	}
-)
+const breadcrumbs = computed(() => [
+	{
+		label: __('Batches'),
+		route: { name: 'Batches' },
+	},
+])
 
 const pageMeta = computed(() => {
 	return {
 		title: 'Batches',
-		description: 'All batches divided by categories',
+		description: 'All upcoming batches.',
 	}
 })
 

frontend/src/pages/CertifiedParticipants.vue

@@ -1,93 +1,175 @@
 <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"
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div>
-			<FormControl
-				type="text"
-				placeholder="Search"
-				v-model="searchQuery"
-				@input="participants.reload()"
-				class="w-40"
-			>
-				<template #prefix>
-					<Search class="w-4 stroke-1.5 text-gray-600" name="search" />
-				</template>
-			</FormControl>
-		</div>
 	</header>
-
-	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 m-5">
+	<div class="p-5 lg:w-3/4 mx-auto">
 		<div
-			v-if="participants.data?.length"
-			v-for="participant in participantsList"
+			class="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 justify-between mb-5"
 		>
-			<router-link
-				:to="{
-					name: 'Profile',
-					params: { username: participant.username },
-				}"
-			>
-				<div class="flex shadow rounded-md h-full p-2">
-					<UserAvatar :user="participant" size="3xl" class="mr-2" />
-					<div>
-						<router-link
-							:to="{
-								name: 'Profile',
-								params: { username: participant.username },
-							}"
-						>
-							<div class="text-lg font-semibold mb-2">
+			<div class="text-lg font-semibold">
+				{{ __('All Certified Participants') }}
+			</div>
+			<div class="grid grid-cols-2 gap-2">
+				<FormControl
+					v-model="nameFilter"
+					:placeholder="__('Search by Name')"
+					type="text"
+					class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+					@input="updateParticipants()"
+				/>
+				<div
+					v-if="categories.data?.length"
+					class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+				>
+					<Select
+						v-model="currentCategory"
+						:options="categories.data"
+						:placeholder="__('Category')"
+						@change="updateParticipants()"
+					/>
+				</div>
+			</div>
+		</div>
+		<div v-if="participants.data?.length">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+				<router-link
+					v-for="participant in participants.data"
+					:to="{
+						name: 'ProfileCertificates',
+						params: { username: participant.username },
+					}"
+				>
+					<div
+						class="flex items-center space-x-2 border rounded-md hover:bg-gray-50 p-2"
+					>
+						<Avatar
+							:image="participant.user_image"
+							:label="participant.full_name"
+							size="2xl"
+						/>
+						<div class="flex flex-col space-y-2">
+							<div class="font-medium">
 								{{ participant.full_name }}
 							</div>
-						</router-link>
-						<div class="leading-5" v-for="course in participant.courses">
-							{{ course }}
+							<div
+								v-if="participant.headline"
+								class="headline text-sm text-gray-700"
+							>
+								{{ participant.headline }}
+							</div>
 						</div>
 					</div>
-				</div>
-			</router-link>
+				</router-link>
+			</div>
+			<div
+				v-if="!participants.list.loading && participants.hasNextPage"
+				class="flex justify-center mt-5"
+			>
+				<Button @click="participants.next()">
+					{{ __('Load More') }}
+				</Button>
+			</div>
+		</div>
+		<div
+			v-else-if="!participants.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-gray-600 italic mt-48"
+		>
+			<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No participants found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{ __('There are no participants matching this criteria.') }}
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, FormControl, createResource } from 'frappe-ui'
-import { ref, computed } from 'vue'
-import UserAvatar from '@/components/UserAvatar.vue'
-import { Search } from 'lucide-vue-next'
+import {
+	Avatar,
+	Breadcrumbs,
+	Button,
+	createListResource,
+	FormControl,
+	Select,
+} from 'frappe-ui'
+import { computed, onMounted, ref } from 'vue'
 import { updateDocumentTitle } from '@/utils'
+import { BookOpen } from 'lucide-vue-next'
 
-const searchQuery = ref('')
+const currentCategory = ref('')
+const filters = ref({})
+const nameFilter = ref('')
 
-const participants = createResource({
+onMounted(() => {
+	updateParticipants()
+})
+
+const participants = createListResource({
+	doctype: 'LMS Certificate',
 	url: 'lms.lms.api.get_certified_participants',
-	method: 'GET',
-	cache: 'certified-participants',
-	auto: true,
+	cache: ['certified_participants'],
+	start: 0,
+	pageLength: 30,
 })
 
-const breadcrumbs = computed(() => {
-	return [{ label: 'Certified Participants', to: '/certified-participants' }]
+const categories = createListResource({
+	doctype: 'LMS Certificate',
+	url: 'lms.lms.api.get_certification_categories',
+	cache: ['certification_categories'],
+	auto: true,
+	transform(data) {
+		data.unshift({ label: __(''), value: '' })
+		return data
+	},
 })
 
+const updateParticipants = () => {
+	updateFilters()
+	participants.update({
+		filters: filters.value,
+	})
+	participants.reload()
+}
+
+const updateFilters = () => {
+	if (currentCategory.value) {
+		filters.value.category = currentCategory.value
+	} else {
+		delete filters.value.category
+	}
+
+	if (nameFilter.value) {
+		filters.value.member_name = ['like', `%${nameFilter.value}%`]
+	} else {
+		delete filters.value.member_name
+	}
+}
+
+const breadcrumbs = computed(() => [
+	{
+		label: __('Certified Participants'),
+		route: { name: 'CertifiedParticipants' },
+	},
+])
+
 const pageMeta = computed(() => {
 	return {
 		title: 'Certified Participants',
 		description: 'All participants that have been certified.',
 	}
 })
-
-const participantsList = computed(() => {
-	if (searchQuery.value) {
-		return participants.data.filter((participant) => {
-			return participant.full_name
-				.toLowerCase()
-				.includes(searchQuery.value.toLowerCase())
-		})
-	}
-	return participants.data
-})
-
 updateDocumentTitle(pageMeta)
 </script>
+<style>
+.headline {
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+}
+</style>

frontend/src/pages/CourseDetail.vue

@@ -16,7 +16,7 @@
 					</div>
 					<div class="flex items-center">
 						<Tooltip
-							v-if="course.data.rating"
+							v-if="parseInt(course.data.rating) > 0"
 							:text="__('Average Rating')"
 							class="flex items-center"
 						>
@@ -25,7 +25,9 @@
 								{{ course.data.rating }}
 							</span>
 						</Tooltip>
-						<span v-if="course.data.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')"
@@ -117,7 +119,7 @@ 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: { courseName: course?.data?.name } },

frontend/src/pages/CourseForm.vue

@@ -133,8 +133,8 @@
 								</div>
 								<FormControl
 									v-model="newTag"
-									:placeholder="__('Keywords for the course')"
-									class="w-52"
+									:placeholder="__('Add a keyword and then press enter')"
+									class="w-72"
 									@keyup.enter="updateTags()"
 									id="tags"
 								/>
@@ -288,6 +288,7 @@ const course = reactive({
 	video_link: '',
 	course_image: null,
 	tags: '',
+	category: '',
 	published: false,
 	published_on: '',
 	featured: false,
@@ -434,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 },

frontend/src/pages/Courses.vue

@@ -71,7 +71,7 @@
 				<template #default="{ tab }">
 					<div
 						v-if="tab.courses && tab.courses.value.length"
-						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-5 mx-5"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-7 my-5 mx-5"
 					>
 						<router-link
 							v-for="course in tab.courses.value"
@@ -160,30 +160,45 @@
 
 <script setup>
 import {
-	Breadcrumbs,
-	Tabs,
 	Badge,
+	Breadcrumbs,
 	Button,
-	FormControl,
+	call,
 	createResource,
+	FormControl,
+	Tabs,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
 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],

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,44 +7,63 @@
 				class="h-7"
 				:items="[{ label: __('Jobs'), route: { name: 'Jobs' } }]"
 			/>
-			<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="{
-						name: 'JobCreation',
-						params: {
-							jobName: 'new',
-						},
-					}"
-				>
-					<Button variant="solid">
-						<template #prefix>
-							<Plus class="h-4 w-4" />
-						</template>
-						{{ __('New Job') }}
-					</Button>
-				</router-link>
-			</div>
+			<router-link
+				v-if="user.data?.name"
+				:to="{
+					name: 'JobCreation',
+					params: {
+						jobName: 'new',
+					},
+				}"
+			>
+				<Button variant="solid">
+					<template #prefix>
+						<Plus class="h-4 w-4" />
+					</template>
+					{{ __('New Job') }}
+				</Button>
+			</router-link>
 		</header>
-		<div v-if="jobsList?.length">
-			<div class="divide-y lg:w-3/4 mx-auto p-5">
-				<div v-for="job in jobsList">
+		<div>
+			<div class="lg:w-3/4 mx-auto p-5">
+				<div
+					class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
+				>
+					<div class="text-xl font-semibold">
+						{{ __('Find the perfect job for you') }}
+					</div>
+					<div class="grid grid-cols-2 gap-2">
+						<FormControl
+							type="text"
+							:placeholder="__('Search')"
+							v-model="searchQuery"
+							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+							@input="updateJobs"
+						>
+							<template #prefix>
+								<Search
+									class="w-4 h-4 stroke-1.5 text-gray-600"
+									name="search"
+								/>
+							</template>
+						</FormControl>
+						<FormControl
+							v-model="jobType"
+							type="select"
+							:options="jobTypes"
+							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+							:placeholder="__('Type')"
+							@change="updateJobs"
+						/>
+					</div>
+				</div>
+
+				<div
+					v-if="jobs.data?.length"
+					class="grid grid-cols-1 lg:grid-cols-2 gap-5"
+				>
 					<router-link
+						v-for="job in jobs.data"
 						:to="{
 							name: 'JobDetail',
 							params: { job: job.name },
@@ -54,15 +73,15 @@
 						<JobCard :job="job" />
 					</router-link>
 				</div>
+				<div v-else class="text-gray-700 italic p-5 w-fit mx-auto">
+					{{ __('No jobs posted') }}
+				</div>
 			</div>
 		</div>
-		<div v-else class="text-gray-700 italic p-5 w-fit mx-auto">
-			{{ __('No jobs posted') }}
-		</div>
 	</div>
 </template>
 <script setup>
-import { Button, Breadcrumbs, createResource, FormControl } from 'frappe-ui'
+import { Button, Breadcrumbs, createListResource, FormControl } from 'frappe-ui'
 import { Plus, Search } from 'lucide-vue-next'
 import { inject, computed, ref, onMounted } from 'vue'
 import JobCard from '@/components/JobCard.vue'
@@ -71,43 +90,59 @@ import { updateDocumentTitle } from '@/utils'
 const user = inject('$user')
 const jobType = ref(null)
 const searchQuery = ref('')
+const filters = ref({})
+const orFilters = ref({})
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
 	if (queries.has('type')) {
 		jobType.value = queries.get('type')
 	}
+	updateJobs()
 })
 
-const jobs = createResource({
-	url: 'lms.lms.api.get_job_opportunities',
-	cache: ['jobs'],
-	auto: true,
+const jobs = createListResource({
+	doctype: 'Job Opportunity',
+	fields: [
+		'name',
+		'job_title',
+		'company_name',
+		'company_logo',
+		'location',
+		'type',
+		'creation',
+	],
+	start: 0,
+	pageLength: 20,
+	cache: ['jobOpportunities'],
 })
 
-const pageMeta = computed(() => {
-	return {
-		title: 'Jobs',
-		description: 'An open job board for the community',
+const updateJobs = () => {
+	updateFilters()
+	jobs.update({
+		filters: filters.value,
+		orFilters: orFilters.value,
+	})
+	jobs.reload()
+}
+
+const updateFilters = () => {
+	if (jobType.value) {
+		filters.value.type = jobType.value
+	} else {
+		delete filters.value.type
 	}
-})
 
-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)
-		)
+		orFilters.value = {
+			job_title: ['like', `%${searchQuery.value}%`],
+			company_name: ['like', `%${searchQuery.value}%`],
+			location: ['like', `%${searchQuery.value}%`],
+		}
+	} else {
+		orFilters.value = {}
 	}
-	return jobData
-})
+}
 
 const jobTypes = computed(() => {
 	return [
@@ -118,6 +153,12 @@ const jobTypes = computed(() => {
 		{ label: __('Freelance'), value: 'Freelance' },
 	]
 })
+const pageMeta = computed(() => {
+	return {
+		title: 'Jobs',
+		description: 'An open job board for the community',
+	}
+})
 
 updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Lesson.vue

@@ -305,7 +305,7 @@ 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: { courseName: props.courseName } },
@@ -475,7 +475,8 @@ updateDocumentTitle(pageMeta)
 	font-weight: 500;
 }
 
-.embed-tool__caption {
+.embed-tool__caption,
+.cdx-simple-image__caption {
 	display: none;
 }
 
@@ -585,4 +586,8 @@ iframe {
 	border-top: 3px solid theme('colors.gray.700');
 	border-bottom: 3px solid theme('colors.gray.700');
 }
+
+.tc-table {
+	border-left: 1px solid #e8e8eb;
+}
 </style>

frontend/src/pages/LessonForm.vue

@@ -92,11 +92,13 @@ 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
 
@@ -130,6 +132,7 @@ const renderEditor = (holder) => {
 		holder: holder,
 		tools: getEditorTools(true),
 		autofocus: true,
+		defaultBlock: 'markdown',
 	})
 }
 
@@ -393,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()
 						},
 					}
@@ -613,4 +619,8 @@ iframe {
 	border-top: 3px solid theme('colors.gray.700');
 	border-bottom: 3px solid theme('colors.gray.700');
 }
+
+.tc-table {
+	border-left: 1px solid #e8e8eb;
+}
 </style>

frontend/src/pages/Notifications.vue

@@ -25,7 +25,7 @@
 			class="flex items-center py-2 justify-between"
 		>
 			<div class="flex items-center">
-				<UserAvatar :user="allUsers.data[log.from_user]" class="mr-2" />
+				<Avatar :image="log.user_image" :label="log.full_name" class="mr-2" />
 				<div class="notification" v-html="log.subject"></div>
 			</div>
 			<div class="flex items-center space-x-2">
@@ -57,6 +57,7 @@
 </template>
 <script setup>
 import {
+	Avatar,
 	createListResource,
 	createResource,
 	Breadcrumbs,
@@ -66,14 +67,12 @@ import {
 	Tooltip,
 } from 'frappe-ui'
 import { computed, inject, ref, onMounted } from 'vue'
-import UserAvatar from '@/components/UserAvatar.vue'
 import { useRouter } from 'vue-router'
 import { X } from 'lucide-vue-next'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const socket = inject('$socket')
-const allUsers = inject('$allUsers')
 const activeTab = ref('Unread')
 const router = useRouter()
 
@@ -93,24 +92,22 @@ const notifications = computed(() => {
 
 const unReadNotifications = createListResource({
 	doctype: 'Notification Log',
-	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	url: 'lms.lms.api.get_notifications',
 	filters: {
 		for_user: user.data?.name,
 		read: 0,
 	},
-	orderBy: 'creation desc',
 	auto: true,
 	cache: 'Unread Notifications',
 })
 
 const readNotifications = createListResource({
 	doctype: 'Notification Log',
-	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	url: 'lms.lms.api.get_notifications',
 	filters: {
 		for_user: user.data?.name,
 		read: 1,
 	},
-	orderBy: 'creation desc',
 	auto: true,
 	cache: 'Read Notifications',
 })

frontend/src/pages/ProfileCertificates.vue

@@ -7,14 +7,14 @@
 			<div
 				v-for="certificate in certificates.data"
 				:key="certificate.name"
-				class="bg-white shadow rounded-lg p-3 cursor-pointer"
+				class="flex flex-col bg-white shadow rounded-lg p-3 cursor-pointer hover:bg-gray-50"
 				@click="openCertificate(certificate)"
 			>
-				<div class="font-medium leading-5">
-					{{ certificate.course_title }}
+				<div class="font-medium leading-5 mb-2">
+					{{ certificate.course_title || certificate.batch_title }}
 				</div>
-				<div class="mt-2">
-					<span class="text-xs text-gray-700"> {{ __('issued on') }}: </span>
+				<div class="text-sm text-gray-700 font-medium mt-auto">
+					<span> {{ __('Issued on') }}: </span>
 					{{ dayjs(certificate.issue_date).format('DD MMM YYYY') }}
 				</div>
 			</div>
@@ -22,8 +22,8 @@
 	</div>
 </template>
 <script setup>
-import { createResource } from 'frappe-ui'
-import { inject } from 'vue'
+import { createListResource } from 'frappe-ui'
+import { inject, onMounted } from 'vue'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({
@@ -33,12 +33,19 @@ const props = defineProps({
 	},
 })
 
-const certificates = createResource({
-	url: 'lms.lms.api.get_certificates',
-	params: {
-		member: props.profile.data.name,
+onMounted(() => {
+	if (props.profile.data?.name) {
+		certificates.reload()
+	}
+})
+
+const certificates = createListResource({
+	doctype: 'LMS Certificate',
+	filters: {
+		member: props.profile.data?.name,
 	},
-	auto: true,
+	fields: ['name', 'course_title', 'batch_title', 'issue_date'],
+	cache: ['certificates', props.profile.data?.name],
 })
 
 const openCertificate = (certificate) => {

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,213 @@
+<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 ? __('member') : __('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 } 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">
@@ -205,7 +206,6 @@ import {
 	inject,
 	onBeforeUnmount,
 	watch,
-	isReactive,
 } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
 import Question from '@/components/Modals/Question.vue'
@@ -256,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,6 +46,11 @@
 				</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
@@ -67,13 +72,13 @@
 <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'
@@ -103,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

@@ -61,41 +61,28 @@ const props = defineProps({
 
 onBeforeMount(() => {
 	sidebarStore.isSidebarCollapsed = true
-	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}`)
+	setupSCORMAPI()
+})
 
-			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 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) => {
@@ -114,27 +101,6 @@ const saveDataToLMS = (key, value) => {
 	}
 }
 
-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 chapter = createDocumentResource({
-	doctype: 'Course Chapter',
-	name: props.chapterName,
-	auto: true,
-	cache: ['chapter', props.chapterName],
-	onSuccess(data) {
-		progress.submit()
-	},
-})
-
 const saveProgress = () => {
 	call('lms.lms.doctype.course_lesson.course_lesson.save_progress', {
 		lesson: chapter.doc.lessons[0].lesson,
@@ -175,6 +141,44 @@ const enrollStudent = () => {
 	)
 }
 
+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 [
 		{

frontend/src/router.js

@@ -131,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',
@@ -182,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({
@@ -190,22 +217,13 @@ let router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-	const { userResource, allUsers } = usersStore()
+	const { userResource } = usersStore()
 	let { isLoggedIn } = sessionStore()
 
 	try {
 		if (isLoggedIn) {
 			await userResource.promise
 		}
-		if (
-			isLoggedIn &&
-			(to.name == 'Lesson' ||
-				to.name == 'Batch' ||
-				to.name == 'Notifications' ||
-				to.name == 'Badge')
-		) {
-			await allUsers.promise
-		}
 	} catch (error) {
 		isLoggedIn = false
 	}

frontend/src/stores/session.js

@@ -5,7 +5,7 @@ import router from '@/router'
 import { ref, computed } from 'vue'
 
 export const sessionStore = defineStore('lms-session', () => {
-	let { userResource, allUsers } = usersStore()
+	let { userResource } = usersStore()
 
 	function sessionUser() {
 		let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
@@ -17,9 +17,6 @@ export const sessionStore = defineStore('lms-session', () => {
 	}
 
 	let user = ref(sessionUser())
-	if (user.value) {
-		allUsers.reload()
-	}
 	const isLoggedIn = computed(() => !!user.value)
 
 	const login = createResource({

frontend/src/stores/settings.js

@@ -1,12 +1,34 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { createResource } from 'frappe-ui'
+import { sessionStore } from './session'
 
 export const useSettings = defineStore('settings', () => {
+	const { isLoggedIn } = sessionStore()
 	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: isLoggedIn ? true : false,
+		cache: ['learningPaths'],
+	})
+
+	const onboardingDetails = createResource({
+		url: 'lms.lms.utils.is_onboarding_complete',
+		auto: isLoggedIn ? true : false,
+		cache: ['onboardingDetails'],
+	})
 
 	return {
 		isSettingsOpen,
 		activeTab,
+		learningPaths,
+		onboardingDetails,
 	}
 })

frontend/src/utils/assignment.js

@@ -0,0 +1,84 @@
+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, {
+			type: 'assignment',
+			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/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({
@@ -146,10 +149,21 @@ 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: {
+			class: Table,
+			inlineToolbar: true,
+		},
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,
@@ -168,6 +182,7 @@ export function getEditorTools() {
 		},
 		list: {
 			class: NestedList,
+			inlineToolbar: true,
 			config: {
 				defaultStyle: 'ordered',
 			},
@@ -518,3 +533,21 @@ export const validateFile = (file) => {
 		return __('Only image file is allowed.')
 	}
 }
+
+export const escapeHTML = (text) => {
+	if (!text) return ''
+	let escape_html_mapping = {
+		'&': '&',
+		'<': '&lt;',
+		'>': '&gt;',
+		'"': '&quot;',
+		"'": '&#39;',
+		'`': '&#x60;',
+		'=': '&#x3D;',
+	}
+
+	return String(text).replace(
+		/[&<>"'`=]/g,
+		(char) => escape_html_mapping[char] || char
+	)
+}

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'
@@ -60,8 +60,12 @@ export class Quiz {
 	}
 
 	renderQuizModal() {
-		const app = createApp(QuizPlugin, {
-			onQuizAddition: (quiz) => {
+		if (this.readOnly) {
+			return
+		}
+		const app = createApp(AssessmentPlugin, {
+			type: 'quiz',
+			onAddition: (quiz) => {
 				this.data.quiz = quiz
 				this.renderQuiz(quiz)
 			},

frontend/src/utils/theme.js

@@ -0,0 +1,5 @@
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from 'tailwind.config.js'
+
+export const config = resolveConfig(tailwindConfig)
+export const theme = config.theme

frontend/tailwind.config.js

@@ -11,6 +11,10 @@ module.exports = {
 			strokeWidth: {
 				1.5: '1.5',
 			},
+			screens: {
+				'2xl': '1536px',
+				'3xl': '1920px',
+			},
 		},
 	},
 	plugins: [],

frontend/vite.config.js

@@ -17,6 +17,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, 'src'),
+			'tailwind.config.js': path.resolve(__dirname, 'tailwind.config.js'),
 		},
 	},
 	build: {
@@ -36,6 +37,11 @@ export default defineConfig({
 		},
 	},
 	optimizeDeps: {
-		include: ['frappe-ui > feather-icons', 'showdown', 'engine.io-client'],
+		include: [
+			'feather-icons',
+			'showdown',
+			'engine.io-client',
+			'tailwind.config.js',
+		],
 	},
 })

lms/__init__.py

@@ -1 +1 @@
-__version__ = "2.12.0"
+__version__ = "2.21.0"

lms/hooks.py

@@ -225,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

@@ -66,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",
@@ -79,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",
@@ -92,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(
 			{
@@ -105,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/job/doctype/job_opportunity/job_opportunity.js

@@ -4,6 +4,9 @@
 frappe.ui.form.on("Job Opportunity", {
 	refresh: (frm) => {
 		if (frm.doc.name)
-			frm.add_web_link(`/job-openings/${frm.doc.name}`, "See on Website");
+			frm.add_web_link(
+				`/lms/job-openings/${frm.doc.name}`,
+				"See on Website"
+			);
 	},
 });

lms/job/doctype/job_opportunity/job_opportunity.json

@@ -2,7 +2,6 @@
  "actions": [],
  "allow_import": 1,
  "allow_rename": 1,
- "autoname": "format: JOB-{#####}",
  "creation": "2022-02-07 12:01:41.074418",
  "doctype": "DocType",
  "editable_grid": 1,
@@ -117,11 +116,10 @@
  "index_web_pages_for_search": 1,
  "links": [],
  "make_attachments_public": 1,
- "modified": "2024-02-07 23:02:06.102120",
+ "modified": "2025-01-17 12:38:57.134919",
  "modified_by": "Administrator",
  "module": "Job",
  "name": "Job Opportunity",
- "naming_rule": "Expression",
  "owner": "Administrator",
  "permissions": [
   {

lms/job/doctype/job_opportunity/job_opportunity.py

@@ -6,8 +6,7 @@ from frappe import _
 from frappe.model.document import Document
 from frappe.utils import get_link_to_form, add_months, getdate
 from frappe.utils.user import get_system_managers
-
-from lms.lms.utils import validate_image
+from lms.lms.utils import validate_image, generate_slug
 
 
 class JobOpportunity(Document):
@@ -18,6 +17,10 @@ class JobOpportunity(Document):
 	def validate_urls(self):
 		frappe.utils.validate_url(self.company_website, True)
 
+	def autoname(self):
+		if not self.name:
+			self.name = generate_slug(f"{self.job_title}-${self.company_name}", "LMS Course")
+
 
 def update_job_openings():
 	old_jobs = frappe.get_all(

lms/lms/api.py

@@ -5,16 +5,29 @@ 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, flt
+from frappe.utils import (
+	time_diff,
+	now_datetime,
+	get_datetime,
+	cint,
+	flt,
+	now,
+	add_days,
+	format_date,
+	date_diff,
+)
 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()
@@ -166,6 +179,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
 
 
@@ -347,34 +361,59 @@ def get_evaluator_details(evaluator):
 
 
 @frappe.whitelist(allow_guest=True)
-def get_certified_participants():
-	LMSCertificate = DocType("LMS Certificate")
-	participants = (
-		frappe.qb.from_(LMSCertificate)
-		.select(LMSCertificate.member)
-		.distinct()
-		.where(LMSCertificate.published == 1)
-		.orderby(LMSCertificate.creation, order=frappe.qb.desc)
-		.run(as_dict=1)
+def get_certified_participants(filters=None, start=0, page_length=30, search=None):
+	or_filters = {}
+	if not filters:
+		filters = {}
+
+	filters.update({"published": 1})
+
+	category = filters.get("category")
+	if category:
+		del filters["category"]
+		or_filters["course_title"] = ["like", f"%{category}%"]
+		or_filters["batch_title"] = ["like", f"%{category}%"]
+
+	participants = frappe.get_all(
+		"LMS Certificate",
+		filters=filters,
+		or_filters=or_filters,
+		fields=["member"],
+		group_by="member",
+		order_by="creation desc",
+		start=start,
+		page_length=page_length,
 	)
 
-	participant_details = []
 	for participant in participants:
 		details = frappe.db.get_value(
 			"User",
 			participant.member,
-			["name", "full_name", "username", "user_image"],
-			as_dict=True,
+			["full_name", "user_image", "username", "country", "headline"],
+			as_dict=1,
 		)
-		course_names = frappe.get_all(
-			"LMS Certificate", {"member": participant.member}, pluck="course"
-		)
-		courses = []
-		for course in course_names:
-			courses.append(frappe.db.get_value("LMS Course", course, "title"))
-		details["courses"] = courses
-		participant_details.append(details)
-	return participant_details
+		participant.update(details)
+
+	return participants
+
+
+@frappe.whitelist()
+def get_certification_categories():
+	categories = []
+	docs = frappe.get_all(
+		"LMS Certificate",
+		filters={
+			"published": 1,
+		},
+		fields=["course_title", "batch_title"],
+	)
+
+	for doc in docs:
+		category = doc.course_title if doc.course_title else doc.batch_title
+		if category not in categories:
+			categories.append(category)
+
+	return categories
 
 
 @frappe.whitelist()
@@ -393,19 +432,9 @@ def get_assigned_badges(member):
 	return assigned_badges
 
 
-@frappe.whitelist()
-def get_certificates(member):
-	"""Get certificates for a member."""
-	return frappe.get_all(
-		"LMS Certificate",
-		filters={"member": member},
-		fields=["name", "course", "course_title", "issue_date", "template"],
-		order_by="creation desc",
-	)
-
-
 @frappe.whitelist()
 def get_all_users():
+	frappe.only_for(["Moderator", "Course Creator", "Batch Evaluator"])
 	users = frappe.get_all(
 		"User",
 		{
@@ -589,9 +618,13 @@ def get_categories(doctype, filters):
 @frappe.whitelist()
 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.
-	Returns: List of members.
+	        Args: start (int): Start index for the query.
+	<<<<<<< HEAD
+	        search (str): Search term to filter the results.
+	=======
+	                                        search (str): Search term to filter the results.
+	>>>>>>> 4869bba7bbb2fb38477d6fc29fb3b5838e075577
+	        Returns: List of members.
 	"""
 
 	filters = {"enabled": 1, "name": ["not in", ["Administrator", "Guest"]]}
@@ -839,8 +872,6 @@ def delete_course(course):
 			frappe.delete_doc("Lesson Reference", lesson)
 
 		for lesson in lessons:
-			frappe.db.delete("LMS Course Progress", {"lesson": lesson})
-
 			topics = frappe.get_all(
 				"Discussion Topic",
 				{"reference_doctype": "Course Lesson", "reference_docname": lesson},
@@ -860,6 +891,9 @@ def delete_course(course):
 	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)
 
@@ -919,12 +953,37 @@ def upsert_chapter(title, course, is_scorm_package, scorm_package, name=None):
 def extract_package(course, title, scorm_package):
 	package = frappe.get_doc("File", scorm_package.name)
 	zip_path = package.get_full_path()
-
-	extract_path = frappe.get_site_path("public", "files", "scorm", course, title)
+	# 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):
@@ -999,6 +1058,153 @@ def delete_chapter(chapter):
 
 
 def delete_scorm_package(scorm_package_path):
-	scorm_package_path = frappe.get_site_path("public", 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)
+
+
+@frappe.whitelist()
+def get_heatmap_data(member=None, base_days=200):
+	if not member:
+		member = frappe.session.user
+
+	base_date, start_date, number_of_days, days = calculate_date_ranges(base_days)
+	date_count = initialize_date_count(days)
+
+	lesson_completions, quiz_submissions, assignment_submissions = fetch_activity_data(
+		member, start_date
+	)
+	count_dates(lesson_completions, date_count)
+	count_dates(quiz_submissions, date_count)
+	count_dates(assignment_submissions, date_count)
+
+	heatmap_data, labels, total_activities, weeks = prepare_heatmap_data(
+		start_date, number_of_days, date_count
+	)
+
+	return {
+		"heatmap_data": heatmap_data,
+		"labels": labels,
+		"total_activities": total_activities,
+		"weeks": weeks,
+	}
+
+
+def calculate_date_ranges(base_days):
+	today = format_date(now(), "YYYY-MM-dd")
+	day_today = get_datetime(today).strftime("%w")
+	padding_end = 6 - cint(day_today)
+
+	base_date = add_days(today, -base_days)
+	day_of_base_date = cint(get_datetime(base_date).strftime("%w"))
+	start_date = add_days(base_date, -day_of_base_date)
+	number_of_days = base_days + day_of_base_date + padding_end
+	days = [add_days(start_date, i) for i in range(number_of_days + 1)]
+
+	return base_date, start_date, number_of_days, days
+
+
+def initialize_date_count(days):
+	return {format_date(day, "YYYY-MM-dd"): 0 for day in days}
+
+
+def fetch_activity_data(member, start_date):
+	lesson_completions = frappe.get_all(
+		"LMS Course Progress",
+		fields=["creation"],
+		filters={"member": member, "creation": [">=", start_date]},
+	)
+
+	quiz_submissions = frappe.get_all(
+		"LMS Quiz Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">=", start_date]},
+	)
+
+	assignment_submissions = frappe.get_all(
+		"LMS Assignment Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">=", start_date]},
+	)
+
+	return lesson_completions, quiz_submissions, assignment_submissions
+
+
+def count_dates(data, date_count):
+	for entry in data:
+		date = format_date(entry.creation, "YYYY-MM-dd")
+		if date in date_count:
+			date_count[date] += 1
+
+
+def prepare_heatmap_data(start_date, number_of_days, date_count):
+	days_of_week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+	heatmap_data = {day: [] for day in days_of_week}
+	week_count = -(number_of_days // -7)
+	labels = [None] * week_count
+	last_seen_month = None
+	sorted_dates = sorted(date_count.keys())
+
+	for date in sorted_dates:
+		activity_count = date_count[date]
+		day_of_week = get_datetime(date).strftime("%a")
+		current_month = get_datetime(date).strftime("%b")
+		column_index = get_week_difference(start_date, date)
+
+		if 0 <= column_index < week_count:
+			heatmap_data[day_of_week].append(
+				{
+					"date": date,
+					"count": activity_count,
+					"label": f"{activity_count} activities on {format_date(date, 'dd MMM')}",
+				}
+			)
+
+			if last_seen_month != current_month:
+				labels[column_index] = current_month
+				last_seen_month = current_month
+
+	for (index, label) in enumerate(labels):
+		if not label:
+			labels[index] = ""
+
+	formatted_heatmap_data = [
+		{"name": day, "data": heatmap_data[day]} for day in days_of_week
+	]
+
+	total_activities = sum(date_count.values())
+	return formatted_heatmap_data, labels, total_activities, week_count
+
+
+def get_week_difference(start_date, current_date):
+	diff_in_days = date_diff(current_date, start_date)
+	return diff_in_days // 7
+
+
+@frappe.whitelist()
+def get_notifications(filters):
+	notifications = frappe.get_all(
+		"Notification Log",
+		filters,
+		["subject", "from_user", "link", "read", "name"],
+		order_by="creation desc",
+	)
+
+	for notification in notifications:
+		from_user_details = frappe.db.get_value(
+			"User", notification.from_user, ["full_name", "user_image"], as_dict=1
+		)
+		notification.update(from_user_details)
+
+	return notifications

lms/lms/doctype/course_lesson/course_lesson.py

@@ -72,16 +72,6 @@ class CourseLesson(Document):
 		exercises = [value for name, value in macros if name == "Exercise"]
 		return [frappe.get_doc("LMS Exercise", name) for name in exercises]
 
-	def get_progress(self):
-		return frappe.db.get_value(
-			"LMS Course Progress", {"lesson": self.name, "owner": frappe.session.user}, "status"
-		)
-
-	def get_slugified_class(self):
-		if self.get_progress():
-			return ("").join([s for s in self.get_progress().lower().split()])
-		return
-
 
 @frappe.whitelist()
 def save_progress(lesson, course):
@@ -89,27 +79,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)
@@ -159,6 +147,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,31 @@ class LMSAssignmentSubmission(Document):
 			header=[subject, "green"],
 		)
 
+	def validate_status(self):
+		if not self.is_new():
+			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_badge_assignment/lms_badge_assignment.js

@@ -10,5 +10,11 @@ frappe.ui.form.on("LMS Badge Assignment", {
 				},
 			};
 		});
+
+		if (frm.doc.name)
+			frm.add_web_link(
+				`/badges/${frm.doc.badge}/${frm.doc.member}`,
+				"See on Website"
+			);
 	},
 });

lms/lms/doctype/lms_badge_assignment/lms_badge_assignment.json

@@ -6,6 +6,7 @@
  "engine": "InnoDB",
  "field_order": [
   "member",
+  "member_name",
   "issued_on",
   "column_break_ugix",
   "badge",
@@ -57,11 +58,18 @@
    "label": "Badge Description",
    "read_only": 1,
    "reqd": 1
+  },
+  {
+   "fetch_from": "member.full_name",
+   "fieldname": "member_name",
+   "fieldtype": "Data",
+   "label": "Member Name",
+   "read_only": 1
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-05-13 20:16:00.191517",
+ "modified": "2025-01-06 12:32:28.450028",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Badge Assignment",

lms/lms/doctype/lms_batch/lms_batch.js

@@ -48,7 +48,10 @@ frappe.ui.form.on("LMS Batch", {
 	},
 
 	refresh: (frm) => {
-		frm.add_web_link(`/batches/details/${frm.doc.name}`, "See on website");
+		frm.add_web_link(
+			`/lms/batches/details/${frm.doc.name}`,
+			"See on website"
+		);
 	},
 });
 

lms/lms/doctype/lms_batch/lms_batch.json

@@ -2,7 +2,6 @@
  "actions": [],
  "allow_import": 1,
  "allow_rename": 1,
- "autoname": "format: CLS-{#####}",
  "creation": "2022-11-09 16:14:05.876933",
  "default_view": "List",
  "doctype": "DocType",
@@ -330,11 +329,10 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-11-18 16:28:41.336928",
+ "modified": "2025-01-17 10:23:10.580311",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Batch",
- "naming_rule": "Expression (old style)",
  "owner": "Administrator",
  "permissions": [
   {