chore(release): Bumped to Version 2.19.0

fix: fixed typo in spelling in frappe.utils.date_diff import

.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/helper/update_pot_file.sh

@@ -22,7 +22,7 @@ git config user.name "frappe-pr-bot"
 
 echo "Setting the correct git remote..."
 # Here, the git remote is a local file path by default. Let's change it to the upstream repo.
-git remote add upstream https://github.com/frappe/lms.git
+git remote set-url upstream https://github.com/frappe/lms.git
 
 echo "Creating a new branch..."
 isodate=$(date -u +"%Y-%m-%d")

.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/generate-pot-file.yml

@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  regeneratee-pot-file:
+  regenerate-pot-file:
     name: Release
     runs-on: ubuntu-latest
     strategy:

.github/workflows/make_release_pr.yml

@@ -0,0 +1,27 @@
+name: Create weekly release
+on:
+  schedule:
+    # 13:00 UTC -> 7pm IST on every Wednesday
+    - cron: '30 4 * * 3'
+  workflow_dispatch:
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - uses: octokit/request-action@v2.x
+        with:
+          route: POST /repos/{owner}/{repo}/pulls
+          owner: frappe
+          repo: lms
+          title: |-
+            "chore: merge 'develop' into 'main'"
+          body: "Automated weekly release"
+          base: main
+          head: develop
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}

.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:
@@ -99,6 +99,7 @@ jobs:
           cd ~/frappe-bench/
           bench --site lms.test execute frappe.utils.install.complete_setup_wizard
           bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
+          bench --site lms.test set-password frappe@example.com admin
 
       - name: cypress pre-requisites
         run: |

.gitignore

@@ -12,3 +12,4 @@ node_modules
 package-lock.json
 lms/public/frontend
 lms/www/lms.html
+frappe-ui

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "frappe-ui"]
+	path = frappe-ui
+	url = https://github.com/frappe/frappe-ui

README.md

@@ -1,115 +1,174 @@
-<p align="center">
+<div align="center" markdown="1">
-  <a href="https://www.frappelms.com/">
+
-    <img src="https://frappe.io/files/lms.png" alt="Frappe LMS" width="50px" height="50px">
+<img src=".github/lms-logo.png" alt="Frappe Learning logo" width="80" height="80"/>
-  </a>
+<h1>Frappe Learning</h1>
-  <p align="center">Easy to use, open source, learning management system.</p>
+
-</p>
+**Easy to use, open source, Learning Management System**
+
+![Tests](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress)
+
+</div>
 
 
-&nbsp;
+<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>
 
-<p align="center">
+## Frappe Learning
-    <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>
+Frappe Learning is an easy-to-use learning system that helps you bring structure to your content.
-</p>
+
+### 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>View Screenshots</summary>
 
 
-<div align="center" style="max-height: 40px;">
+![Batch](.github/batch.png)
-    <a href="https://frappecloud.com/lms/signup">
+<div align="center">
-        <img src=".github/try-on-f-cloud.svg" height="40">
+	<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>
+
+
+### Under the Hood
+
+- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework.
+
+- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
+
+## Production Setup
+
+### Managed Hosting
+
+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.
+
+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.
+
+<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>
 
-&nbsp;
+### Self Hosting
 
-<p align="center">
+Follow these steps to set up Frappe Learning in production:
-	<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>
 
-<img width="1402" alt="Lesson" src="https://frappelms.com/files/banner.png">
+**Step 1**: Download the easy install script
 
-<details>
+```bash
-	<summary>Show more screenshots</summary>
+wget https://frappe.io/easy-install.py
-	<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">
-</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.
+**Step 2**: Run the deployment command
 
-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.
+```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
+```
 
-## Features
+Replace the following parameters with your values:
-- Create online courses. 📚
+- `your_email.example.com`: Your email address
-- Add detailed descriptions and preview videos to the course. 🎬
+- `subdomain.domain.tld`: Your domain name where Learning will be hosted
-- 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 ✨
 
-## Tech Stack
+The script will set up a production-ready instance of Frappe Learning with all the necessary configurations in about 5 minutes.
 
-Frappe LMS is built on [Frappe Framework](https://frappeframework.com) which is a batteries-included python web framework.
+## Development Setup
-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 need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, follow below steps:
-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.
 
-```
+**Step 1**: Setup folder and download the required files
-Username: Administrator
-password: admin
-```
 
-### Frappe Bench
+    mkdir frappe-learning
+    cd frappe-learning
 
-Currently, this app depends on the `develop` branch of [frappe](https://github.com/frappe/frappe).
+    # Download the docker-compose file
+    wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/lms/develop/docker/docker-compose.yml
 
-1. Setup frappe-bench by following [this guide](https://frappeframework.com/docs/v14/user/en/installation)
+    # Download the setup script
-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.
+    wget -O init.sh https://raw.githubusercontent.com/frappe/lms/develop/docker/init.sh
-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`
+**Step 2**: Run the container and daemonize it
 
+    docker compose up -d
 
-## Deployment
+**Step 3**: The site [http://lms.localhost:8000/lms](http://lms.localhost:8000/lms) should now be available. The default credentials are:
-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.
+- Username: Administrator
+- Password: admin
 
-### Managed Hosting
+### Local
-Frappe LMS can be deployed in a few clicks on [Frappe Cloud](https://frappecloud.com/marketplace/apps/lms).
 
-### Self-hosting
+To setup the repository locally follow the steps mentioned below:
-If you want to self-host, you can follow official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
 
-## Bugs and Feature Requests
+1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
-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.
+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
 
-## License
+## Learn and connect
-Distributed under [GNU AFFERO GENERAL PUBLIC LICENSE](license.txt)
+
+- [Telegram Public Group](https://t.me/frappelms)
+- [Discuss Forum](https://discuss.frappe.io/c/lms/70)
+- [Documentation](https://docs.frappe.io/learning)
+- [YouTube](https://www.youtube.com/channel/UCn3bV5kx77HsVwtnlCeEi_A)
+
+<br>
+<br>
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

cypress.config.js

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

cypress/e2e/course_creation.cy.js

@@ -5,7 +5,7 @@ describe("Course Creation", () => {
 		cy.visit("/lms/courses");
 
 		// Create a course
-		cy.get("a").contains("New Course").click();
+		cy.get("header").children().last().children().last().click();
 		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
 
@@ -31,12 +31,35 @@ describe("Course Creation", () => {
 			.contains("Preview Video")
 			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
 		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
-		cy.get(".search-input").click().type("frappe");
+		cy.get("label")
-		cy.wait(1000);
+			.contains("Category")
+			.parent()
+			.within(() => {
+				cy.get("button").click();
+			});
 		cy.get("[id^=headlessui-combobox-option-")
 			.should("be.visible")
 			.first()
 			.click();
+
+		/* Instructor */
+		cy.get("label")
+			.contains("Instructors")
+			.parent()
+			.within(() => {
+				cy.get("input").click().type("frappe");
+				cy.get("input")
+					.invoke("attr", "aria-controls")
+					.as("instructor_list_id");
+			});
+		cy.get("@instructor_list_id").then((instructor_list_id) => {
+			cy.get(`[id^=${instructor_list_id}`)
+				.should("be.visible")
+				.within(() => {
+					cy.get("[id^=headlessui-combobox-option-").first().click();
+				});
+		});
+
 		cy.get("label").contains("Published").click();
 		cy.get("label").contains("Published On").type("2021-01-01");
 		cy.button("Save").click();
@@ -50,7 +73,7 @@ describe("Course Creation", () => {
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Add Chapter").click();
+				cy.button("Create").click();
 			});
 
 		// Add Lesson
@@ -61,21 +84,7 @@ describe("Course Creation", () => {
 		cy.wait(1000);
 
 		cy.get("label").contains("Title").type("Test Lesson");
-		/* cy.get("#content .ce-block")
-			.click()
-			.invoke("text", "https://www.youtube.com/watch?v=GoDtyItReto"); */
-		/* cy.get("#content .ce-block")
-			.click()
-			.paste("https://www.youtube.com/watch?v=GoDtyItReto"); */
 
-		cy.fixture("Youtube.mov", "base64").then((fileContent) => {
-			cy.get('input[type="file"]').attachFile({
-				fileContent,
-				fileName: "Youtube.mov",
-				mimeType: "image/png",
-				encoding: "base64",
-			});
-		});
 		cy.get("#content .ce-block").type(
 			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
@@ -119,12 +128,6 @@ describe("Course Creation", () => {
 		cy.url().should("include", "/learn/1-1");
 		cy.get("div").contains("Test Lesson");
 
-		cy.get("video")
-			.should("be.visible")
-			.children("source")
-			.invoke("attr", "src")
-			.should("include", "/files/Youtube");
-
 		cy.get("div").contains(
 			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);

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

docker/init.sh

@@ -35,7 +35,6 @@ bench new-site lms.localhost \
 bench --site lms.localhost install-app lms
 bench --site lms.localhost set-config developer_mode 1
 bench --site lms.localhost clear-cache
-bench --site lms.localhost set-config mute_emails 1
 bench use lms.localhost
 
 bench start

frontend/package.json

@@ -18,19 +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.56",
+    "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/App.vue

@@ -8,12 +8,16 @@
 <script setup>
 import { Toasts } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
+import { stopSession } from '@/telemetry'
+import { init as initTelemetry } from '@/telemetry'
+import { usersStore } from '@/stores/user'
 
 const screenSize = useScreenSize()
+let { userResource } = usersStore()
 
 const Layout = computed(() => {
 	if (screenSize.width < 640) {
@@ -22,4 +26,13 @@ const Layout = computed(() => {
 		return DesktopLayout
 	}
 })
+
+onMounted(async () => {
+	if (!userResource.data) return
+	await initTelemetry()
+})
+
+onUnmounted(() => {
+	stopSession()
+})
 </script>

frontend/src/components/Annoucements.vue

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

frontend/src/components/AppSidebar.vue

@@ -1,18 +1,18 @@
 <template>
 	<div
 		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
+		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
 			class="flex flex-col overflow-hidden"
-			:class="isSidebarCollapsed ? 'items-center' : ''"
+			:class="sidebarStore.isSidebarCollapsed ? 'items-center' : ''"
 		>
-			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
 					v-for="link in sidebarLinks"
 					:link="link"
-					:isCollapsed="isSidebarCollapsed"
+					:isCollapsed="sidebarStore.isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
 			</div>
@@ -22,11 +22,11 @@
 			>
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
-					:class="isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
 					@click="showWebPages = !showWebPages"
 				>
 					<div
-						v-if="!isSidebarCollapsed"
+						v-if="!sidebarStore.isSidebarCollapsed"
 						class="flex items-center text-sm text-gray-600 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
@@ -53,7 +53,7 @@
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
 						:link="link"
-						:isCollapsed="isSidebarCollapsed"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
 						class="mx-2 my-0.5"
 						:showControls="isModerator ? true : false"
 						@openModal="openPageModal"
@@ -64,17 +64,19 @@
 		</div>
 		<SidebarLink
 			:link="{
-				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
+				label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
 			}"
-			:isCollapsed="isSidebarCollapsed"
+			:isCollapsed="sidebarStore.isSidebarCollapsed"
-			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			@click="toggleSidebar()"
 			class="m-2"
 		>
 			<template #icon>
 				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 					<CollapseSidebar
 						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+						:class="{
+							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						}"
 					/>
 				</span>
 			</template>
@@ -96,25 +98,44 @@ import { ref, onMounted, inject, watch } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
+import { useSidebar } from '@/stores/sidebar'
+import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 
-const { user } = sessionStore()
+const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
+let sidebarStore = useSidebar()
 const socket = inject('$socket')
 const unreadCount = ref(0)
 const sidebarLinks = ref(getSidebarLinks())
 const showPageModal = ref(false)
 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) => {
 		unreadNotifications.reload()
 	})
 	addNotifications()
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+			},
+		}
+	)
 })
 
 const unreadNotifications = createResource({
@@ -153,20 +174,58 @@ const addNotifications = () => {
 	}
 }
 
-const sidebarSettings = createResource({
+const addQuizzes = () => {
-	url: 'lms.lms.api.get_sidebar_settings',
+	if (isInstructor.value || isModerator.value) {
-	cache: 'Sidebar Settings',
+		sidebarLinks.value.push({
-	auto: true,
+			label: 'Quizzes',
-	onSuccess(data) {
+			icon: 'CircleHelp',
-		Object.keys(data).forEach((key) => {
+			to: 'Quizzes',
-			if (!parseInt(data[key])) {
+			activeFor: ['Quizzes', 'QuizForm'],
-				sidebarLinks.value = sidebarLinks.value.filter(
+		})
-					(link) => link.label.toLowerCase().split(' ').join('_') !== key
-				)
 	}
+}
+
+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
@@ -198,8 +257,14 @@ const getSidebarFromStorage = () => {
 watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
+		isInstructor.value = userResource.data.is_instructor
+		addPrograms()
+		addQuizzes()
+		addAssignments()
 	}
 })
 
-let isSidebarCollapsed = ref(getSidebarFromStorage())
+const toggleSidebar = () => {
+	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+}
 </script>

frontend/src/components/Apps.vue

@@ -0,0 +1,67 @@
+<template>
+	<Popover placement="right-start" class="flex w-full">
+		<template #target="{ togglePopover }">
+			<button
+				:class="[
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+				]"
+				@click.prevent="togglePopover()"
+			>
+				<div class="flex gap-2">
+					<LayoutGrid class="size-4 stroke-1.5" />
+					<span class="whitespace-nowrap">
+						{{ __('Apps') }}
+					</span>
+				</div>
+				<ChevronRight class="h-4 w-4 stroke-1.5" />
+			</button>
+		</template>
+		<template #body>
+			<div
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+			>
+				<div v-for="app in apps.data" key="name">
+					<a
+						:href="app.route"
+						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+					>
+						<img class="size-8" :src="app.logo" />
+						<div class="text-sm" @click="app.onClick">
+							{{ app.title }}
+						</div>
+					</a>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import { Popover, createResource } from 'frappe-ui'
+import { LayoutGrid, ChevronRight } from 'lucide-vue-next'
+
+const apps = createResource({
+	url: 'frappe.apps.get_apps',
+	cache: 'apps',
+	auto: true,
+	transform: (data) => {
+		let _apps = [
+			{
+				name: 'frappe',
+				logo: '/assets/lms/images/desk.png',
+				title: __('Desk'),
+				route: '/app',
+			},
+		]
+		data.map((app) => {
+			if (app.name === 'lms') return
+			_apps.push({
+				name: app.name,
+				logo: app.logo,
+				title: __(app.title),
+				route: app.route,
+			})
+		})
+		return _apps
+	},
+})
+</script>

frontend/src/components/AssessmentPlugin.vue

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

frontend/src/components/Assessments.vue

@@ -1,49 +1,105 @@
 <template>
 	<div>
-		<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>
-		<div v-if="assessments.data?.length">
+			<Button v-if="canSeeAddButton()" @click="showModal = true">
+				<template #prefix>
+					<Plus class="h-4 w-4" />
+				</template>
+				{{ __('Add') }}
+			</Button>
+		</div>
+		<div v-if="assessments.data?.length" class="text-sm">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
 				row-key="name"
 				:options="{
-					selectable: false,
 					showTooltip: false,
-					getRowRoute: (row) => {
+					getRowRoute: (row) => getRowRoute(row),
-						if (row.submission) {
+					selectable: user.data?.is_student ? false : true,
-							return {
-								name: 'AssignmentSubmission',
-								params: {
-									assignmentName: row.assessment_name,
-									submissionName: row.submission.name,
-								},
-							}
-						} else {
-							return {
-								name: 'AssignmentSubmission',
-								params: {
-									assignmentName: row.assessment_name,
-									submissionName: 'new',
-								},
-							}
-						}
-					},
 				}"
 			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in getAssessmentColumns()">
+						<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 assessments.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div v-if="column.key == 'assessment_type'">
+									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+								</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>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeAssessments(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">
 			{{ __('No Assessments') }}
 		</div>
 	</div>
+	<AssessmentModal
+		v-model="showModal"
+		v-model:assessments="assessments"
+		:batch="props.batch"
+	/>
 </template>
 <script setup>
-import { ListView, createResource } from 'frappe-ui'
+import {
-import { inject } from 'vue'
+	ListView,
+	ListRow,
+	ListRows,
+	ListHeader,
+	ListHeaderItem,
+	ListRowItem,
+	ListSelectBanner,
+	createResource,
+	Button,
+	Badge,
+} from 'frappe-ui'
+import { inject, ref } from 'vue'
+import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
 
 const user = inject('$user')
+const showModal = ref(false)
 
 const props = defineProps({
 	batch: {
@@ -74,25 +130,93 @@ const assessments = createResource({
 	auto: true,
 })
 
+const deleteAssessments = createResource({
+	url: 'lms.lms.api.delete_documents',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Assessment',
+			documents: values.assessments,
+		}
+	},
+})
+
+const removeAssessments = (selections, unselectAll) => {
+	deleteAssessments.submit(
+		{ assessments: Array.from(selections) },
+		{
+			onSuccess(data) {
+				assessments.reload()
+				unselectAll()
+			},
+		}
+	)
+}
+
+const getRowRoute = (row) => {
+	if (row.assessment_type == 'LMS Assignment') {
+		if (row.submission) {
+			return {
+				name: 'AssignmentSubmission',
+				params: {
+					assignmentID: row.assessment_name,
+					submissionName: row.submission.name,
+				},
+			}
+		} else {
+			return {
+				name: 'AssignmentSubmission',
+				params: {
+					assignmentID: row.assessment_name,
+					submissionName: 'new',
+				},
+			}
+		}
+	} else {
+		return {
+			name: 'QuizPage',
+			params: {
+				quizID: row.assessment_name,
+			},
+		}
+	}
+}
+
+const canSeeAddButton = () => {
+	return user.data?.is_moderator || user.data?.is_evaluator
+}
+
 const getAssessmentColumns = () => {
 	let columns = [
 		{
 			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/AudioBlock.vue

@@ -56,7 +56,6 @@ const props = defineProps({
 onMounted(() => {
 	setTimeout(() => {
 		audio.value = document.querySelector('audio')
-		console.log(audio.value)
 		audio.value.onloadedmetadata = () => {
 			duration.value = audio.value.duration
 		}

frontend/src/components/BatchCourses.vue

@@ -1,18 +1,14 @@
 <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
+			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
-				v-if="user.data?.is_moderator"
-				variant="solid"
-				@click="openCourseModal()"
-			>
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
-				{{ __('Add Course') }}
+				{{ __('Add') }}
 			</Button>
 		</div>
 		<div v-if="courses.data?.length">
@@ -88,6 +84,7 @@ import {
 	ListRowItem,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
+import { showToast } from '@/utils'
 
 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -121,34 +118,43 @@ const getCoursesColumns = () => {
 		},
 		{
 			label: 'Lessons',
-			key: 'lesson_count',
+			key: 'lessons',
 			align: 'right',
 		},
 		{
 			label: 'Enrollments',
 			align: 'right',
-			key: 'enrollment_count',
+			key: 'enrollments',
 		},
 	]
 }
 
-const removeCourse = createResource({
+const deleteCourses = createResource({
-	url: 'frappe.client.delete',
+	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
 			doctype: 'Batch Course',
-			name: values.course,
+			documents: values.courses,
 		}
 	},
 })
 
 const removeCourses = (selections, unselectAll) => {
-	selections.forEach(async (course) => {
+	deleteCourses.submit(
-		removeCourse.submit({ course })
+		{
-	})
+			courses: Array.from(selections),
-	setTimeout(() => {
+		},
+		{
+			onSuccess(data) {
 				courses.reload()
+				showToast(__('Success'), __('Courses deleted successfully'), 'check')
 				unselectAll()
-	}, 1000)
+			},
+		}
+	)
+}
+
+const canSeeAddButton = () => {
+	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>

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

@@ -75,13 +75,14 @@
 			variant="solid"
 			class="w-full mt-2"
 			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+			@click="enrollInBatch()"
 		>
 			{{ __('Enroll Now') }}
 		</Button>
 		<router-link
 			v-if="isModerator"
 			:to="{
-				name: 'BatchCreation',
+				name: 'BatchForm',
 				params: {
 					batchName: batch.data.name,
 				},
@@ -97,11 +98,13 @@
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Badge, Button } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
 import { BookOpen, Clock, Globe } from 'lucide-vue-next'
-import { formatNumberIntoCurrency, formatTime } from '@/utils'
+import { formatNumberIntoCurrency, formatTime, showToast } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const user = inject('$user')
 
 const props = defineProps({
@@ -111,6 +114,39 @@ const props = defineProps({
 	},
 })
 
+const enroll = createResource({
+	url: 'lms.lms.utils.enroll_in_batch',
+	makeParams(values) {
+		return {
+			batch: props.batch.data.name,
+		}
+	},
+})
+
+const enrollInBatch = () => {
+	if (!user.data) {
+		window.location.href = `/login?redirect-to=/batches/details/${props.batch.data.name}`
+	}
+	enroll.submit(
+		{},
+		{
+			onSuccess(data) {
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this batch'),
+					'check'
+				)
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: props.batch.data.name,
+					},
+				})
+			},
+		}
+	)
+}
+
 const seats_left = computed(() => {
 	if (props.batch.data?.seat_count) {
 		return props.batch.data?.seat_count - props.batch.data?.students?.length

frontend/src/components/BatchStudents.vue

@@ -1,37 +1,140 @@
 <template>
-	<Button class="float-right mb-3" variant="solid" @click="openStudentModal()">
+	<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"
+			>
+				<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>
-		{{ __('Add Student') }}
+				{{ __('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 }"
+				: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()">
+					<ListHeaderItem
+						:item="item"
+						v-for="item in getStudentColumns()"
+						:title="item.label"
+					>
 						<template #prefix="{ item }">
-						<component
+							<FeatherIcon
 								v-if="item.icon"
-							:is="item.icon"
+								:name="item.icon"
-							class="h-4 w-4 stroke-1.5 ml-4"
+								class="h-4 w-4 stroke-1.5"
 							/>
 						</template>
 					</ListHeaderItem>
 				</ListHeader>
 				<ListRows>
-				<ListRow :row="row" v-for="row in students.data">
+					<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">
+							<ListRowItem
+								:item="row[column.key]"
+								:align="column.align"
+								class="text-sm"
+							>
 								<template #prefix>
 									<div v-if="column.key == 'full_name'">
 										<Avatar
@@ -42,7 +145,14 @@
 										/>
 									</div>
 								</template>
-							<div>
+								<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>
@@ -66,15 +176,24 @@
 		<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,76 +201,210 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	Avatar,
-	Button,
 } from 'frappe-ui'
-import { Trash2, Plus } from 'lucide-vue-next'
+import {
-import { ref } from 'vue'
+	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',
+			label: 'Progress',
-			key: 'courses_completed',
+			key: 'progress',
-			align: 'center',
+			width: '15rem',
-		},
+			icon: 'activity',
-		{
-			label: 'Assessments Done',
-			key: 'assessments_completed',
-			align: 'center',
 		},
 		{
 			label: 'Last Active',
 			key: 'last_active',
+			width: '10rem',
+			align: 'center',
+			icon: 'clock',
 		},
 	]
+
+	return columns
 }
 
 const openStudentModal = () => {
 	showStudentModal.value = true
 }
 
-const removeStudent = createResource({
+const openStudentProgressModal = (row) => {
-	url: 'frappe.client.delete',
+	showStudentProgressModal.value = true
+	selectedStudent.value = row
+}
+
+const deleteStudents = createResource({
+	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
 			doctype: 'Batch Student',
-			name: values.student,
+			documents: values.students,
 		}
 	},
 })
 
 const removeStudents = (selections, unselectAll) => {
-	selections.forEach(async (student) => {
+	deleteStudents.submit(
-		removeStudent.submit({ student })
+		{
-	})
+			students: Array.from(selections),
-	setTimeout(() => {
+		},
+		{
+			onSuccess(data) {
 				students.reload()
+				showToast(__('Success'), __('Students deleted successfully'), 'check')
 				unselectAll()
-	}, 500)
+			},
 		}
+	)
+}
+
+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 // Trim long labels
+				},
+			},
+		},
+		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/BrandSettings.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="flex flex-col justify-between min-h-0">
+		<div>
+			<div class="flex items-center justify-between">
+				<div class="font-semibold mb-1">
+					{{ __(label) }}
+				</div>
+				<Badge
+					v-if="isDirty"
+					:label="__('Not Saved')"
+					variant="subtle"
+					theme="orange"
+				/>
+			</div>
+			<div class="text-xs text-gray-600">
+				{{ __(description) }}
+			</div>
+		</div>
+		<div class="overflow-y-auto">
+			<SettingFields :fields="fields" :data="data.data" />
+			<div class="flex flex-row-reverse mt-auto">
+				<Button variant="solid" :loading="saveSettings.loading" @click="update">
+					{{ __('Update') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { createResource, Button, Badge } from 'frappe-ui'
+import SettingFields from '@/components/SettingFields.vue'
+import { watch, ref } from 'vue'
+
+const isDirty = ref(false)
+
+const props = defineProps({
+	fields: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+	},
+})
+
+const saveSettings = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'Website Settings',
+			name: 'Website Settings',
+			fieldname: values.fields,
+		}
+	},
+})
+
+const update = () => {
+	let fieldsToSave = {}
+	let imageFields = ['favicon', 'banner_image', 'footer_logo']
+	props.fields.forEach((f) => {
+		if (imageFields.includes(f.name)) {
+			fieldsToSave[f.name] = f.value ? f.value.file_url : null
+		} else {
+			fieldsToSave[f.name] = f.value
+		}
+	})
+	saveSettings.submit(
+		{
+			fields: fieldsToSave,
+		},
+		{
+			onSuccess(data) {
+				isDirty.value = false
+			},
+		}
+	)
+}
+
+watch(props.data, (newData) => {
+	if (newData && !isDirty.value) {
+		isDirty.value = true
+	}
+})
+</script>

frontend/src/components/Categories.vue

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

frontend/src/components/Controls/Autocomplete.vue

@@ -75,7 +75,7 @@
 								>
 									<li
 										:class="[
-											'flex items-center rounded px-2.5 py-1.5 text-base',
+											'flex items-center rounded px-2.5 py-2 text-base',
 											{ 'bg-gray-100': active },
 										]"
 									>
@@ -87,7 +87,16 @@
 											name="item-label"
 											v-bind="{ active, selected, option }"
 										>
+											<div class="flex flex-col space-y-1">
+												<div>
 													{{ option.label }}
+												</div>
+												<div
+													v-if="option.description"
+													class="text-xs text-gray-700"
+													v-html="option.description"
+												></div>
+											</div>
 										</slot>
 									</li>
 								</ComboboxOption>

frontend/src/components/Controls/CodeEditor.vue

@@ -0,0 +1,204 @@
+<template>
+	<div
+		class="editor flex flex-col gap-1"
+		:style="{
+			height: height,
+		}"
+	>
+		<span class="text-xs" v-if="label">
+			{{ label }}
+		</span>
+		<div
+			ref="editor"
+			class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900"
+		/>
+		<span
+			class="mt-1 text-xs text-gray-600"
+			v-show="description"
+			v-html="description"
+		></span>
+		<Button
+			v-if="showSaveButton"
+			@click="emit('save', aceEditor?.getValue())"
+			class="mt-3"
+		>
+			{{ __('Save') }}
+		</Button>
+	</div>
+</template>
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import ace from 'ace-builds'
+import 'ace-builds/src-min-noconflict/ext-searchbox'
+import 'ace-builds/src-min-noconflict/theme-chrome'
+import 'ace-builds/src-min-noconflict/theme-twilight'
+import { PropType, onMounted, ref, watch } from 'vue'
+import { Button } from 'frappe-ui'
+
+const isDark = useDark({
+	attribute: 'data-theme',
+})
+
+const props = defineProps({
+	modelValue: {
+		type: [Object, String, Array],
+	},
+	type: {
+		type: String as PropType<'JSON' | 'HTML' | 'Python' | 'JavaScript' | 'CSS'>,
+		default: 'JSON',
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+	height: {
+		type: String,
+		default: '250px',
+	},
+	showLineNumbers: {
+		type: Boolean,
+		default: false,
+	},
+	autofocus: {
+		type: Boolean,
+		default: true,
+	},
+	showSaveButton: {
+		type: Boolean,
+		default: false,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const emit = defineEmits(['save', 'update:modelValue'])
+const editor = ref<HTMLElement | null>(null)
+let aceEditor = null as ace.Ace.Editor | null
+
+onMounted(() => {
+	setupEditor()
+})
+
+const setupEditor = () => {
+	aceEditor = ace.edit(editor.value as HTMLElement)
+	resetEditor(props.modelValue as string, true)
+	aceEditor.setReadOnly(props.readonly)
+	aceEditor.setOptions({
+		fontSize: '12px',
+		useWorker: false,
+		showGutter: props.showLineNumbers,
+		wrap: props.showLineNumbers,
+	})
+	if (props.type === 'CSS') {
+		import('ace-builds/src-noconflict/mode-css').then(() => {
+			aceEditor?.session.setMode('ace/mode/css')
+		})
+	} else if (props.type === 'JavaScript') {
+		import('ace-builds/src-noconflict/mode-javascript').then(() => {
+			aceEditor?.session.setMode('ace/mode/javascript')
+		})
+	} else if (props.type === 'Python') {
+		import('ace-builds/src-noconflict/mode-python').then(() => {
+			aceEditor?.session.setMode('ace/mode/python')
+		})
+	} else if (props.type === 'JSON') {
+		import('ace-builds/src-noconflict/mode-json').then(() => {
+			aceEditor?.session.setMode('ace/mode/json')
+		})
+	} else {
+		import('ace-builds/src-noconflict/mode-html').then(() => {
+			aceEditor?.session.setMode('ace/mode/html')
+		})
+	}
+	aceEditor.on('blur', () => {
+		try {
+			let value = aceEditor?.getValue() || ''
+			if (props.type === 'JSON') {
+				value = JSON.parse(value)
+			}
+			if (value === props.modelValue) return
+			if (!props.showSaveButton && !props.readonly) {
+				emit('update:modelValue', value)
+			}
+		} catch (e) {
+			// do nothing
+		}
+	})
+}
+
+const getModelValue = () => {
+	let value = props.modelValue || ''
+	try {
+		if (props.type === 'JSON' || typeof value === 'object') {
+			value = JSON.stringify(value, null, 2)
+		}
+	} catch (e) {
+		// do nothing
+	}
+	return value as string
+}
+
+function resetEditor(value: string, resetHistory = false) {
+	value = getModelValue()
+	aceEditor?.setValue(value)
+	aceEditor?.clearSelection()
+	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
+	props.autofocus && aceEditor?.focus()
+	if (resetHistory) {
+		aceEditor?.session.getUndoManager().reset()
+	}
+}
+
+watch(isDark, () => {
+	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
+})
+
+watch(
+	() => props.type,
+	() => {
+		setupEditor()
+	}
+)
+
+watch(
+	() => props.modelValue,
+	() => {
+		resetEditor(props.modelValue as string)
+	}
+)
+
+defineExpose({ resetEditor })
+</script>
+<style scoped>
+.editor .ace_editor {
+	height: 100%;
+	width: 100%;
+	border-radius: 5px;
+	overscroll-behavior: none;
+}
+.editor :deep(.ace_scrollbar-h) {
+	display: none;
+}
+.editor :deep(.ace_search) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+.editor :deep(.ace_searchbtn) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+.editor :deep(.ace_button) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+}
+
+.editor :deep(.ace_search_field) {
+	@apply dark:bg-gray-900 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+</style>

frontend/src/components/Controls/Link.vue

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

frontend/src/components/Controls/MultiSelect.vue

@@ -2,6 +2,7 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
+			<span class="text-red-500" v-if="required">*</span>
 		</label>
 		<div class="grid grid-cols-3 gap-1">
 			<Button
@@ -115,6 +116,9 @@ const props = defineProps({
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
+	required: {
+		type: Boolean,
+	},
 })
 
 const values = defineModel()
@@ -152,24 +156,11 @@ const filterOptions = createResource({
 	url: 'frappe.desk.search.search_link',
 	method: 'POST',
 	cache: [text.value, props.doctype],
+	auto: true,
 	params: {
 		txt: text.value,
 		doctype: props.doctype,
 	},
-	/* transform: (data) => {
-        let allData = data
-            .filter((c) => {
-                return c.description.split(', ')[1]
-            })
-            .map((option) => {
-                let email = option.description.split(', ')[1]
-                return {
-                    label: option.label || email,
-                    value: email,
-                }
-            })
-        return allData
-    }, */
 })
 
 const options = computed(() => {

frontend/src/components/Controls/Rating.vue

@@ -1,18 +1,28 @@
 <template>
+	<div class="space-y-1">
+		<label class="block text-xs text-gray-600" v-if="props.label">
+			{{ props.label }}
+		</label>
 		<div class="flex text-center">
-		<div v-for="index in 5">
+			<div
+				v-for="index in 5"
+				@mouseover="hoveredRating = index"
+				@mouseleave="hoveredRating = 0"
+			>
 				<Star
-				:class="index <= rating ? 'fill-orange-500' : ''"
+					class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
-				class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
+					:class="iconClasses(index)"
 					@click="markRating(index)"
 				/>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script setup>
 import { Star } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
 const props = defineProps({
 	id: {
 		type: String,
@@ -22,10 +32,36 @@ const props = defineProps({
 		type: Number,
 		default: 0,
 	},
+	label: {
+		type: String,
+		default: '',
+	},
+	size: {
+		type: String,
+		default: 'md',
+	},
 })
 
+const iconClasses = (index) => {
+	let classes = [
+		{
+			sm: 'size-4',
+			md: 'size-5',
+			lg: 'size-6',
+			xl: 'size-7',
+		}[props.size],
+	]
+	if (index <= hoveredRating.value && index > rating.value) {
+		classes.push('fill-yellow-200')
+	} else if (index <= rating.value) {
+		classes.push('fill-yellow-500')
+	}
+	return classes.join(' ')
+}
+
 const emit = defineEmits(['update:modelValue'])
-let rating = ref(props.modelValue)
+const rating = ref(props.modelValue)
+const hoveredRating = ref(0)
 
 let emitChange = (value) => {
 	emit('update:modelValue', value)
@@ -35,4 +71,11 @@ function markRating(index) {
 	emitChange(index)
 	rating.value = index
 }
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		rating.value = newVal
+	}
+)
 </script>

frontend/src/components/CourseCard.vue

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

frontend/src/components/CourseCardOverlay.vue

@@ -75,7 +75,7 @@
 			<router-link
 				v-if="user?.data?.is_moderator || is_instructor()"
 				:to="{
-					name: 'CreateCourse',
+					name: 'CourseForm',
 					params: {
 						courseName: course.data.name,
 					},
@@ -87,28 +87,30 @@
 					</span>
 				</Button>
 			</router-link>
-			<div class="mt-8 mb-4 font-medium">
+			<div class="space-y-4">
+				<div class="mt-8 font-medium">
 					{{ __('This course has:') }}
 				</div>
-			<div class="flex items-center mb-3">
+				<div class="flex items-center">
-				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
+					<BookOpen class="h-4 w-4 stroke-1.5 text-gray-600" />
 					<span class="ml-2">
-					{{ course.data.lesson_count }} {{ __('Lessons') }}
+						{{ 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">
-					{{ course.data.enrollment_count_formatted }}
-					{{ __('Enrolled Students') }}
 					</span>
 				</div>
 				<div class="flex items-center">
-				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
+					<Users class="h-4 w-4 stroke-1.5 text-gray-600" />
 					<span class="ml-2">
-					{{ course.data.avg_rating }} {{ __('Rating') }}
+						{{ 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>
 </template>
@@ -116,7 +118,8 @@
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
-import { createToast } from '@/utils/'
+import { showToast, formatAmount } from '@/utils/'
+import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -138,11 +141,11 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		createToast({
+		showToast(
-			title: 'Please Login',
+			__('Please Login'),
-			icon: 'alert-circle',
+			__('You need to login first to enroll for this course'),
-			iconClasses: 'text-yellow-600 bg-yellow-100',
+			'alert-circle'
-		})
+		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
 		}, 2000)
@@ -155,11 +158,14 @@ function enrollStudent() {
 				course: props.course.data.name,
 			})
 			.then(() => {
-				createToast({
+				capture('enrolled_in_course', {
-					title: 'Enrolled Successfully',
+					course: props.course.data.name,
-					icon: 'check',
-					iconClasses: 'text-green-600 bg-green-100',
 				})
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this course'),
+					'check'
+				)
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',
@@ -169,7 +175,7 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 3000)
+				}, 2000)
 			})
 	}
 }
@@ -202,7 +208,6 @@ const certificate = createResource({
 		}
 	},
 	onSuccess(data) {
-		console.log(data)
 		window.open(
 			`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
 				data.name

frontend/src/components/CourseInstructors.vue

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

frontend/src/components/CourseOutline.vue

@@ -4,7 +4,7 @@
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="grid grid-cols-[70%,30%] mb-4 px-2"
 		>
-			<div class="font-semibold text-lg">
+			<div class="font-semibold text-lg leading-5">
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
@@ -16,7 +16,7 @@
 		</div>
 		<div
 			:class="{
-				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
+				'shadow rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
 			<Disclosure
@@ -25,22 +25,44 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full p-2">
+				<DisclosureButton ref="" class="flex items-center w-full p-2 group">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
 							'duration-200': !open,
+							hidden: chapter.is_scorm_package,
 							open: index == 1,
 						}"
-						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+						class="h-4 w-4 text-gray-900 stroke-1"
 					/>
-					<div class="text-base text-left font-medium leading-5">
+					<div
+						class="text-base text-left font-medium leading-5 ml-2"
+						@click="redirectToChapter(chapter)"
+					>
 						{{ chapter.title }}
 					</div>
+					<div class="flex ml-auto space-x-4">
+						<Tooltip :text="__('Edit Chapter')" placement="bottom">
+							<FilePenLine
+								v-if="allowEdit"
+								@click.prevent="openChapterModal(chapter)"
+								class="h-4 w-4 text-gray-900 invisible group-hover:visible"
+							/>
+						</Tooltip>
+						<Tooltip :text="__('Delete Chapter')" placement="bottom">
+							<Trash2
+								v-if="allowEdit"
+								@click.prevent="trashChapter(chapter.name)"
+								class="h-4 w-4 text-red-500 invisible group-hover:visible"
+							/>
+						</Tooltip>
+					</div>
 				</DisclosureButton>
-				<DisclosurePanel>
+				<DisclosurePanel v-if="!chapter.is_scorm_package">
 					<Draggable
+						v-if="!chapter.is_scorm_package"
 						:list="chapter.lessons"
+						:disabled="!allowEdit"
 						item-key="name"
 						group="items"
 						@end="updateOutline"
@@ -50,7 +72,7 @@
 							<div class="outline-lesson pl-8 py-2 pr-4">
 								<router-link
 									:to="{
-										name: allowEdit ? 'CreateLesson' : 'Lesson',
+										name: allowEdit ? 'LessonForm' : 'Lesson',
 										params: {
 											courseName: courseName,
 											chapterNumber: lesson.number.split('.')[0],
@@ -75,7 +97,7 @@
 										<Trash2
 											v-if="allowEdit"
 											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 stroke-1.5 text-gray-700 ml-auto invisible group-hover:visible"
+											class="h-4 w-4 text-red-500 ml-auto invisible group-hover:visible"
 										/>
 										<Check
 											v-if="lesson.is_complete"
@@ -88,8 +110,9 @@
 					</Draggable>
 					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
 						<router-link
+							v-if="!chapter.is_scorm_package"
 							:to="{
-								name: 'CreateLesson',
+								name: 'LessonForm',
 								params: {
 									courseName: courseName,
 									chapterNumber: chapter.idx,
@@ -101,9 +124,6 @@
 								{{ __('Add Lesson') }}
 							</Button>
 						</router-link>
-						<Button class="ml-2" @click="openChapterModal(chapter)">
-							{{ __('Edit Chapter') }}
-						</Button>
 					</div>
 				</DisclosurePanel>
 			</Disclosure>
@@ -117,26 +137,30 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource } from 'frappe-ui'
+import { Button, createResource, Tooltip } from 'frappe-ui'
-import { ref } from 'vue'
+import { getCurrentInstance, inject, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
-	ChevronRight,
-	MonitorPlay,
-	HelpCircle,
-	FileText,
 	Check,
+	ChevronRight,
+	FileText,
+	FilePenLine,
+	HelpCircle,
+	MonitorPlay,
 	Trash2,
 } from 'lucide-vue-next'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
 import { showToast } from '@/utils'
 
 const route = useRoute()
-const expandAll = ref(true)
+const router = useRouter()
+const user = inject('$user')
 const showChapterModal = ref(false)
 const currentChapter = ref(null)
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -201,10 +225,26 @@ const updateLessonIndex = createResource({
 })
 
 const trashLesson = (lessonName, chapterName) => {
+	$dialog({
+		title: __('Delete this lesson?'),
+		message: __(
+			'Deleting this lesson will permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
 					deleteLesson.submit({
 						lesson: lessonName,
 						chapter: chapterName,
 					})
+					close()
+				},
+			},
+		],
+	})
 }
 
 const openChapterDetail = (index) => {
@@ -228,6 +268,61 @@ const updateOutline = (e) => {
 		idx: e.newIndex,
 	})
 }
+
+const deleteChapter = createResource({
+	url: 'lms.lms.api.delete_chapter',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Chapter deleted successfully', 'check')
+	},
+})
+
+const trashChapter = (chapterName) => {
+	$dialog({
+		title: __('Delete this chapter?'),
+		message: __(
+			'Deleting this chapter will also delete all its lessons and permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteChapter.submit({ chapter: chapterName })
+					close()
+				},
+			},
+		],
+	})
+}
+
+const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
+	event.preventDefault()
+	if (props.allowEdit) return
+	if (!user.data) {
+		showToast(
+			__('You are not enrolled'),
+			__('Please enroll for this course to view this lesson'),
+			'alert-circle'
+		)
+		return
+	}
+
+	router.push({
+		name: 'SCORMChapter',
+		params: {
+			courseName: props.courseName,
+			chapterName: chapter.name,
+		},
+	})
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {

frontend/src/components/CourseReviews.vue

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

frontend/src/components/Discussions.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
-			{{ __('New {0}').format(title) }}
+			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
 		<div class="text-xl font-semibold">
 			{{ __(title) }}
@@ -65,7 +65,7 @@
 <script setup>
 import { createResource, Button } from 'frappe-ui'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { timeAgo } from '../utils'
+import { singularize, timeAgo } from '../utils'
 import { ref, onMounted, inject } from 'vue'
 import DiscussionReplies from '@/components/DiscussionReplies.vue'
 import DiscussionModal from '@/components/Modals/DiscussionModal.vue'

frontend/src/components/LessonContent.vue

@@ -9,7 +9,7 @@
 			allowfullscreen
 		></iframe>
 	</div>
-	<div v-for="block in content.split('\n\n')">
+	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
 				class="youtube-video"
@@ -37,7 +37,7 @@
 			<iframe
 				:src="getPDFSource(block)"
 				width="100%"
-				height="400"
+				height="700px"
 				frameborder="0"
 				allowfullscreen
 			></iframe>

frontend/src/components/LessonHelp.vue

@@ -0,0 +1,96 @@
+<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"
+				@click="openHelpDialog('quiz')"
+			>
+				<span>
+					{{ __('How to add a Quiz?') }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
+					)
+				}}
+			</div>
+		</div>
+
+		<div class="space-y-2">
+			<div
+				class="flex text-sm font-medium space-x-2 cursor-pointer"
+				@click="openHelpDialog('upload')"
+			>
+				<span class="leading-5">
+					{{ __(contentMap['upload']) }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
+					)
+				}}
+			</div>
+		</div>
+
+		<div class="space-y-2">
+			<div
+				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				@click="openHelpDialog('youtube')"
+			>
+				<span>
+					{{ __(contentMap['youtube']) }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'Copy the URL of the video from YouTube and paste it in the editor.'
+					)
+				}}
+			</div>
+		</div>
+	</div>
+	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
+</template>
+<script setup>
+import { Info } from 'lucide-vue-next'
+import { ref } from 'vue'
+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/LessonPlugins.vue

@@ -1,163 +0,0 @@
-<template>
-	<div class="text-lg font-semibold">
-		{{ __('Components') }}
-	</div>
-	<div class="mt-5">
-		<Tooltip
-			:text="
-				__(
-					'Content such as quiz, video and image will be added in the editor you select.'
-				)
-			"
-			placement="bottom"
-		>
-			<div class="">
-				<div class="text-xs text-gray-600 mb-1">
-					{{ __('Select an Editor') }}
-				</div>
-				<Select v-model="currentEditor" :options="getEditorOptions()" />
-			</div>
-		</Tooltip>
-		<div class="flex mt-4">
-			<Link
-				v-model="quiz"
-				class="flex-1"
-				doctype="LMS Quiz"
-				:label="__('Select a Quiz')"
-			/>
-			<Button @click="addQuiz()" class="self-end ml-2">
-				<template #icon>
-					<Plus class="h-4 w-4 stroke-1.5" />
-				</template>
-			</Button>
-		</div>
-		<div class="mt-4">
-			<div class="text-xs text-gray-600 mb-1">
-				{{ __('Add an image, video, pdf or audio.') }}
-			</div>
-			<div class="flex">
-				<FileUploader
-					v-if="!file"
-					:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
-					:validateFile="validateFile"
-					@success="(data) => addFile(data)"
-				>
-					<template v-slot="{ file, progress, uploading, openFileSelector }">
-						<div class="">
-							<Button @click="openFileSelector" :loading="uploading">
-								{{
-									uploading
-										? __('Uploading {0}%').format(progress)
-										: __('Upload a File')
-								}}
-							</Button>
-						</div>
-					</template>
-				</FileUploader>
-				<div v-else class="">
-					<div class="flex items-center">
-						<div class="border rounded-md p-2 mr-2">
-							<FileText class="h-4 w-4 stroke-1.5 text-gray-700" />
-						</div>
-						<div class="flex flex-col">
-							<span class="text-xs">
-								{{ file.file_name }}
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="mt-4">
-			<div class="text-xs text-gray-600 mb-1">
-				{{
-					__(
-						'To add a YouTube video, paste the URL of the video in the editor.'
-					)
-				}}
-			</div>
-			<YouTubeExplanation>
-				<template v-slot="{ togglePopover }">
-					<div
-						@click="togglePopover()"
-						class="flex items-center text-sm underline cursor-pointer"
-					>
-						<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
-						{{ __('Learn More') }}
-					</div>
-				</template>
-			</YouTubeExplanation>
-		</div>
-	</div>
-</template>
-<script setup>
-import Link from '@/components/Controls/Link.vue'
-import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText, Info } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.vue'
-
-const quiz = ref(null)
-const file = ref(null)
-const lessonEditor = ref(null)
-const instructorEditor = ref(null)
-const currentEditor = ref('Lesson Content')
-
-const props = defineProps({
-	editor: {
-		required: true,
-	},
-	notesEditor: {
-		required: true,
-	},
-})
-
-const addQuiz = () => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	if (quiz.value) {
-		getCurrentEditor().blocks.insert('quiz', {
-			quiz: quiz.value,
-		})
-		quiz.value = null
-	}
-}
-
-const addFile = (data) => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	getCurrentEditor().blocks.insert('upload', data)
-}
-
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3', 'pdf'].includes(extension)) {
-		return 'Only image and video files are allowed.'
-	}
-}
-
-const getEditorOptions = () => {
-	return [
-		{
-			label: 'Lesson Content',
-			value: 'Lesson Content',
-		},
-		{
-			label: 'Instructor Content',
-			value: 'Instructor Content',
-		},
-	]
-}
-
-const getCurrentEditor = () => {
-	return currentEditor.value == 'Lesson Content'
-		? lessonEditor.value
-		: instructorEditor.value
-}
-
-watch(
-	() => [props.editor, props.notesEditor],
-	([newEditor, newNotesEditor], [oldEditor, oldNotesEditor]) => {
-		lessonEditor.value = newEditor
-		instructorEditor.value = newNotesEditor
-	}
-)
-</script>

frontend/src/components/LiveClass.vue

@@ -1,45 +1,47 @@
 <template>
-	<Button
+	<div class="flex items-center justify-between mb-5">
-		v-if="user.data.is_moderator"
+		<div class="text-lg font-semibold">
-		variant="solid"
+			{{ __('Live Class') }}
-		class="float-right mb-5"
+		</div>
-		@click="openLiveClassModal"
+		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
-	>
 			<template #prefix>
 				<Plus class="h-4 w-4" />
 			</template>
 			<span>
-			{{ __('Add Live Class') }}
+				{{ __('Add') }}
 			</span>
 		</Button>
-	<div class="text-lg font-semibold mb-5">
-		{{ __('Live Class') }}
 	</div>
 	<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 p-3"
+			class="flex flex-col border rounded-md h-full text-gray-700 p-3"
 		>
-			<div class="font-semibold text-lg mb-4">
+			<div class="font-semibold text-gray-900 text-lg mb-1">
 				{{ cls.title }}
 			</div>
-			<div class="mb-4">
+			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="flex items-center mb-2">
+			<div class="space-y-3">
+				<div class="flex items-center space-x-2">
 					<Calendar class="w-4 h-4 stroke-1.5" />
-				<span class="ml-2">
+					<span>
 						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 					</span>
 				</div>
-			<div class="flex items-center mb-5">
+				<div class="flex items-center space-x-2">
 					<Clock class="w-4 h-4 stroke-1.5" />
-				<span class="ml-2">
+					<span>
 						{{ formatTime(cls.time) }}
 					</span>
 				</div>
-			<div class="flex items-center space-x-2 mt-auto">
+				<div
+					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
+					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"
@@ -50,12 +52,19 @@
 					<a
 						:href="cls.join_url"
 						target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+						class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
 					>
 						<Video class="h-4 w-4 stroke-1.5" />
 						{{ __('Join') }}
 					</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>
 	<div v-else class="text-sm italic text-gray-600">
@@ -69,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'
@@ -90,7 +99,6 @@ const liveClasses = createListResource({
 	doctype: 'LMS Live Class',
 	filters: {
 		batch_name: props.batch,
-		date: ['>=', new Date()],
 	},
 	fields: [
 		'title',
@@ -109,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

@@ -0,0 +1,214 @@
+<template>
+	<div class="flex min-h-0 flex-col text-base">
+		<div class="flex items-center justify-between">
+			<div>
+				<div class="text-xl font-semibold mb-1">
+					{{ __(label) }}
+				</div>
+				<!-- <div class="text-xs text-gray-600">
+					{{ __(description) }}
+				</div> -->
+			</div>
+			<div class="flex item-center space-x-2">
+				<FormControl
+					v-model="search"
+					:placeholder="__('Search')"
+					type="text"
+					:debounce="300"
+				/>
+				<Button @click="() => (showForm = !showForm)">
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
+		</div>
+
+		<!-- Form to add new member -->
+		<div v-if="showForm" class="flex items-center space-x-2 my-4">
+			<FormControl
+				v-model="member.email"
+				:placeholder="__('Email')"
+				type="email"
+				class="w-full"
+			/>
+			<FormControl
+				v-model="member.first_name"
+				:placeholder="__('First Name')"
+				type="test"
+				class="w-full"
+			/>
+			<Button @click="addMember()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="mt-2 pb-10 overflow-auto">
+			<!-- Member list -->
+			<div class="overflow-y-scroll">
+				<ul class="divide-y">
+					<li
+						v-for="member in memberList"
+						class="grid grid-cols-3 gap-10 py-2 cursor-pointer"
+					>
+						<div
+							@click="openProfile(member.username)"
+							class="flex items-center space-x-3 col-span-2"
+						>
+							<Avatar
+								:image="member.user_image"
+								:label="member.full_name"
+								size="lg"
+							/>
+							<div class="space-y-1">
+								<div class="flex">
+									<div class="text-gray-900">
+										{{ member.full_name }}
+									</div>
+									<div
+										class="px-1"
+										v-if="member.role && getRole(member.role) !== 'Student'"
+									>
+										<Badge
+											:variant="'subtle'"
+											:ref_for="true"
+											theme="blue"
+											size="sm"
+											label="Badge"
+										>
+											{{ getRole(member.role) }}
+										</Badge>
+									</div>
+								</div>
+								<div class="text-sm text-gray-700">
+									{{ member.name }}
+								</div>
+							</div>
+						</div>
+						<div class="flex items-center justify-center text-gray-700 text-sm">
+							<div v-if="member.last_active">
+								{{ dayjs(member.last_active).format('DD MMM, YYYY HH:mm a') }}
+							</div>
+							<div v-else>-</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div
+				v-if="memberList.length && hasNextPage"
+				class="flex justify-center mt-4"
+			>
+				<Button @click="members.reload()">
+					<template #prefix>
+						<RefreshCw class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('Load More') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+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'
+
+const router = useRouter()
+const show = defineModel('show')
+const search = ref('')
+const start = ref(0)
+const memberList = ref([])
+const hasNextPage = ref(false)
+const showForm = ref(false)
+const dayjs = inject('$dayjs')
+
+const member = reactive({
+	email: '',
+	first_name: '',
+})
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	show: {
+		type: Boolean,
+	},
+})
+
+const members = createResource({
+	url: 'lms.lms.api.get_members',
+	makeParams: () => {
+		return {
+			search: search.value,
+			start: start.value,
+		}
+	},
+	onSuccess(data) {
+		memberList.value = memberList.value.concat(data)
+		start.value = start.value + 20
+		hasNextPage.value = data.length === 20
+	},
+	auto: true,
+})
+
+const openProfile = (username) => {
+	show.value = false
+	router.push({
+		name: 'Profile',
+		params: {
+			username: username,
+		},
+	})
+}
+
+const newMember = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'User',
+				first_name: member.first_name,
+				email: member.email,
+			},
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		show.value = false
+		router.push({
+			name: 'Profile',
+			params: {
+				username: data.username,
+			},
+		})
+	},
+})
+
+const addMember = () => {
+	newMember.reload()
+}
+
+watch(search, () => {
+	memberList.value = []
+	start.value = 0
+	members.reload()
+})
+
+const getRole = (role) => {
+	const map = {
+		'LMS Student': 'Student',
+		'Course Creator': 'Instructor',
+		Moderator: 'Moderator',
+		'Batch Evaluator': 'Evaluator',
+	}
+	return map[role]
+}
+</script>

frontend/src/components/MobileLayout.vue

@@ -4,14 +4,16 @@
 			<slot />
 		</div>
 		<div
-			v-if="tabs"
+			v-if="sidebarSettings.data"
-			class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
+			class="fixed flex items-center justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
 			:style="{
-				gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${
+					sidebarLinks.length + 1
+				}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
-				v-for="tab in tabs"
+				v-for="tab in sidebarLinks"
 				:key="tab.label"
 				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
@@ -23,50 +25,114 @@
 					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
 				/>
 			</button>
+			<Popover
+				trigger="hover"
+				popoverClass="bottom-28 mx-2"
+				placement="top-start"
+			>
+				<template #target>
+					<component
+						:is="icons['List']"
+						class="h-6 w-6 stroke-1.5 text-gray-600"
+					/>
+				</template>
+				<template #body-main>
+					<div class="text-base p-5 space-y-4">
+						<div
+							v-for="link in otherLinks"
+							:key="link.label"
+							class="flex items-center space-x-2"
+							@click="handleClick(link)"
+						>
+							<component
+								:is="icons[link.icon]"
+								class="h-4 w-4 stroke-1.5 text-gray-600"
+							/>
+							<div>
+								{{ link.label }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</Popover>
 		</div>
 	</div>
 </template>
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { watch, ref, onMounted } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/user'
+import { Popover } from 'frappe-ui'
 import * as icons from 'lucide-vue-next'
 
-const { logout, user } = sessionStore()
+const { logout, user, sidebarSettings } = sessionStore()
 let { isLoggedIn } = sessionStore()
 const router = useRouter()
 let { userResource } = usersStore()
+const sidebarLinks = ref(getSidebarLinks())
+const otherLinks = ref([])
 
-const tabs = computed(() => {
+onMounted(() => {
-	let links = getSidebarLinks()
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
 
+				addOtherLinks()
+			},
+		}
+	)
+})
+
+const addOtherLinks = () => {
 	if (user) {
-		links.push({
+		otherLinks.value.push({
+			label: 'Notifications',
+			icon: 'Bell',
+			to: 'Notifications',
+		})
+		otherLinks.value.push({
 			label: 'Profile',
 			icon: 'UserRound',
-			activeFor: [
-				'Profile',
-				'ProfileAbout',
-				'ProfileCertification',
-				'ProfileEvaluator',
-				'ProfileRoles',
-			],
 		})
-		links.push({
+		otherLinks.value.push({
 			label: 'Log out',
 			icon: 'LogOut',
 		})
 	} else {
-		links.push({
+		otherLinks.value.push({
 			label: 'Log in',
 			icon: 'LogIn',
 		})
 	}
-	return links
+}
+
+watch(userResource, () => {
+	if (
+		userResource.data &&
+		(userResource.data.is_moderator || userResource.data.is_instructor)
+	) {
+		addQuizzes()
+	}
 })
 
+const addQuizzes = () => {
+	otherLinks.value.push({
+		label: 'Quizzes',
+		icon: 'CircleHelp',
+		to: 'Quizzes',
+	})
+}
+
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }

frontend/src/components/Modals/AnnouncementModal.vue

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

frontend/src/components/Modals/AssessmentModal.vue

@@ -0,0 +1,86 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add an assessment'),
+			size: 'sm',
+			actions: [
+				{
+					label: __('Submit'),
+					variant: 'solid',
+					onClick: (close) => addAssessment(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					type="select"
+					:options="assessmentTypes"
+					v-model="assessmentType"
+					:label="__('Type')"
+				/>
+				<Link
+					v-model="assessment"
+					:doctype="assessmentType"
+					:label="__('Assessment')"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, FormControl, createResource } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { computed, ref } from 'vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const assessmentType = ref(null)
+const assessment = ref(null)
+const assessments = defineModel('assessments')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		default: null,
+	},
+})
+
+const assessmentResource = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Assessment',
+				parent: props.batch,
+				parenttype: 'LMS Batch',
+				parentfield: 'assessment',
+				assessment_type: assessmentType.value,
+				assessment_name: assessment.value,
+			},
+		}
+	},
+})
+
+const addAssessment = (close) => {
+	assessmentResource.submit(
+		{},
+		{
+			onSuccess(data) {
+				assessments.value.reload()
+				showToast(__('Success'), __('Assessment added successfully'), 'check')
+				close()
+			},
+		}
+	)
+}
+
+const assessmentTypes = computed(() => {
+	return [
+		{ label: 'Quiz', value: 'LMS Quiz' },
+		{ label: 'Assignment', value: 'LMS Assignment' },
+	]
+})
+</script>

frontend/src/components/Modals/BatchCourseModal.vue

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

frontend/src/components/Modals/BatchStudentProgress.vue

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

frontend/src/components/Modals/ChapterModal.vue

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

frontend/src/components/Modals/DiscussionModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<Dialog
 		:options="{
-			title: props.title,
+			title: singularize(props.title),
 			size: '2xl',
 			actions: [
 				{
@@ -35,8 +35,8 @@
 </template>
 <script setup>
 import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
-import { reactive, defineModel, computed } from 'vue'
+import { reactive, defineModel } from 'vue'
-import { showToast } from '@/utils'
+import { showToast, singularize } from '@/utils'
 
 const topics = defineModel('reloadTopics')
 

frontend/src/components/Modals/EditProfile.vue

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

frontend/src/components/Modals/EvaluationModal.vue

@@ -131,10 +131,16 @@ function submitEvaluation(close) {
 		},
 		onError(err) {
 			let message = err.messages?.[0] || err
-			let unavailabilityMessage = message.includes('unavailable')
+			let unavailabilityMessage
+
+			if (typeof message === 'string') {
+				unavailabilityMessage = message?.includes('unavailable')
+			} else {
+				unavailabilityMessage = false
+			}
 
 			createToast({
-				title: unavailabilityMessage ? 'Evaluator is Unavailable' : 'Error',
+				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
 				text: message,
 				icon: unavailabilityMessage ? 'alert-circle' : 'x',
 				iconClasses: 'bg-yellow-600 text-white rounded-md p-px',
@@ -148,11 +154,13 @@ function submitEvaluation(close) {
 const getCourses = () => {
 	let courses = []
 	for (const course of props.courses) {
+		if (course.evaluator) {
 			courses.push({
 				label: course.title,
 				value: course.course,
 			})
 		}
+	}
 	return courses
 }
 

frontend/src/components/Modals/Event.vue

@@ -0,0 +1,378 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '2xl',
+		}"
+	>
+		<template #body>
+			<div class="flex text-base">
+				<div class="flex flex-col w-1/2 p-5">
+					<div class="text-lg font-semibold mb-4">
+						{{ event.title }}
+					</div>
+
+					<div class="flex flex-col space-y-4 text-sm text-gray-800">
+						<Tooltip :text="__('Email ID')">
+							<div class="flex items-center space-x-2 w-fit">
+								<User class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.member }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Course')">
+							<div class="flex items-center space-x-2 w-fit">
+								<BookOpen class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.course_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip v-if="event.batch_title" :text="__('Batch')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Users class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.batch_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Date')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Calendar class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ dayjs(event.date).format('DD MMM YYYY') }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Time')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Clock class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ formatTime(event.start_time) }} -
+									{{ formatTime(event.end_time) }}
+								</span>
+							</div>
+						</Tooltip>
+					</div>
+					<div class="flex items-center space-x-2 mt-auto">
+						<Button
+							v-if="certificate.name"
+							@click="openCertificate(certificate)"
+							class="w-full"
+						>
+							<template #prefix>
+								<FileText class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('View Certificate') }}
+						</Button>
+						<Button v-else @click="openCallLink(event.venue)" class="w-full">
+							<template #prefix>
+								<Video class="h-4 w-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Join Meeting') }}
+							</span>
+						</Button>
+					</div>
+				</div>
+				<Tabs :tabs="tabs" v-model="tabIndex" class="border-l w-1/2">
+					<template #default="{ tab }">
+						<div
+							v-if="tab.label == 'Evaluation'"
+							class="flex flex-col space-y-4 p-5"
+						>
+							<div class="flex items-center justify-between">
+								<Rating v-model="evaluation.rating" :label="__('Rating')" />
+								<FormControl
+									type="select"
+									:options="statusOptions"
+									v-model="evaluation.status"
+									:label="__('Status')"
+									class="w-1/2"
+								/>
+							</div>
+							<Textarea
+								v-model="evaluation.summary"
+								:label="__('Summary')"
+								:rows="7"
+							/>
+							<Button variant="solid" @click="saveEvaluation()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+						<div v-else class="flex flex-col space-y-4 p-5">
+							<FormControl
+								type="checkbox"
+								v-model="certificate.published"
+								:label="__('Published')"
+							/>
+							<Link
+								v-model="certificate.template"
+								:label="__('Template')"
+								doctype="Print Format"
+								:filters="{
+									doc_type: 'LMS Certificate',
+								}"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.issue_date"
+								:label="__('Issue Date')"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.expiry_date"
+								:label="__('Expiry Date')"
+							/>
+							<Button variant="solid" @click="saveCertificate()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+					</template>
+				</Tabs>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Dialog,
+	Button,
+	FormControl,
+	createResource,
+	Tabs,
+	Tooltip,
+	Textarea,
+} from 'frappe-ui'
+import {
+	User,
+	Calendar,
+	Clock,
+	Video,
+	BookOpen,
+	FileText,
+	GraduationCap,
+	Users,
+	ClipboardList,
+} from 'lucide-vue-next'
+import { inject, reactive, watch, ref, computed } from 'vue'
+import { formatTime, showToast } from '@/utils'
+import Rating from '@/components/Controls/Rating.vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = defineModel()
+const dayjs = inject('$dayjs')
+const tabIndex = ref(0)
+const showCertification = ref(false)
+
+const props = defineProps({
+	event: {
+		type: [Object, null],
+		required: true,
+	},
+})
+
+const evaluation = reactive({})
+
+const certificate = reactive({})
+
+const defaultTemplate = createResource({
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'Property Setter',
+			fieldname: 'value',
+			filters: {
+				doc_type: 'LMS Certificate',
+				property: 'default_print_format',
+			},
+		}
+	},
+	auto: true,
+	onSuccess(data) {
+		certificate.template = data.value
+	},
+})
+
+const openCallLink = (link) => {
+	window.open(link, '_blank')
+}
+
+const evaluationResource = createResource({
+	url: 'lms.lms.api.save_evaluation_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			date: props.event.date,
+			start_time: props.event.start_time,
+			end_time: props.event.end_time,
+			status: evaluation.status,
+			rating: evaluation.rating,
+			summary: evaluation.summary,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		evaluation.name = data.name
+	},
+})
+
+const evaluationDetails = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate Evaluation',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in evaluation) evaluation[key] = data[key]
+			if (key == 'rating') evaluation.rating = data.rating * 5
+			if (evaluation.status == 'Pass') showCertification.value = true
+		}
+	},
+	auto: false,
+})
+
+const saveEvaluation = () => {
+	evaluationResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				if (evaluation.status == 'Pass') {
+					showCertification.value = true
+				} else {
+					show.value = false
+				}
+				showToast(__('Success'), __('Evaluation saved successfully'), 'check')
+			},
+		}
+	)
+}
+
+const certificateResource = createResource({
+	url: 'lms.lms.api.save_certificate_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			published: certificate.published,
+			issue_date: certificate.issue_date,
+			expiry_date: certificate.expiry_date,
+			template: certificate.template,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		certificate.name = data
+	},
+})
+
+const certificateDetails = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in certificate) certificate[key] = data[key]
+			certificate.name = data.name
+			showCertification.value = true
+		}
+	},
+	onError(err) {
+		certificate.template = defaultTemplate.data.value
+	},
+	auto: false,
+})
+
+const saveCertificate = () => {
+	certificateResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				showToast(__('Success'), __('Certificate saved successfully'), 'check')
+			},
+		}
+	)
+}
+
+watch(show, () => {
+	if (show.value) {
+		evaluation.rating = 0
+		evaluation.status = 'Pending'
+		evaluation.summary = ''
+		evaluationDetails.reload()
+
+		certificate.published = true
+		certificate.issue_date = dayjs().format('YYYY-MM-DD')
+		certificate.expiry_date = null
+		certificate.template = null
+		certificate.name = null
+		certificateDetails.reload()
+	}
+})
+
+const openCertificate = (certificate) => {
+	window.open(
+		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+			certificate.name
+		}&format=${encodeURIComponent(certificate.template)}`
+	)
+}
+
+const statusOptions = computed(() => {
+	return [
+		{
+			value: 'Pending',
+			label: __('Pending'),
+		},
+		{
+			value: 'In Progress',
+			label: __('In Progress'),
+		},
+		{
+			value: 'Pass',
+			label: __('Pass'),
+		},
+		{
+			value: 'Fail',
+			label: __('Fail'),
+		},
+	]
+})
+
+const tabs = computed(() => {
+	const tabsArray = [
+		{
+			label: __('Evaluation'),
+			icon: ClipboardList,
+		},
+	]
+
+	if (showCertification.value) {
+		tabsArray.push({
+			label: __('Certification'),
+			icon: GraduationCap,
+		})
+	}
+
+	return tabsArray
+})
+</script>

frontend/src/components/Modals/ExplanationVideos.vue

@@ -0,0 +1,39 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+			title: title,
+		}"
+	>
+		<template #body-content>
+			<div>
+				<VideoBlock :file="file" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog } from 'frappe-ui'
+import { computed } from 'vue'
+import VideoBlock from '@/components/VideoBlock.vue'
+
+const show = defineModel()
+
+const props = defineProps({
+	type: {
+		type: [String, null],
+		required: true,
+	},
+	title: {
+		type: [String, null],
+		required: true,
+	},
+})
+
+const file = computed(() => {
+	if (props.type == 'youtube') return '/assets/lms/frontend/Youtube.mp4'
+	if (props.type == 'quiz') return '/assets/lms/frontend/Quiz.mp4'
+	if (props.type == 'upload') return '/assets/lms/frontend/Upload.mp4'
+})
+</script>

frontend/src/components/Modals/LiveClassModal.vue

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

frontend/src/components/Modals/Question.vue

@@ -0,0 +1,354 @@
+<template>
+	<Dialog v-model="show" :options="dialogOptions">
+		<template #body-content>
+			<div class="space-y-4">
+				<div
+					v-if="!editMode"
+					class="flex items-center text-xs text-gray-700 space-x-5"
+				>
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="existing"
+							value="existing"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="existing" class="cursor-pointer">
+							{{ __('Add an existing question') }}
+						</label>
+					</div>
+
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="new"
+							value="new"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="new" class="cursor-pointer">
+							{{ __('Create a new question') }}
+						</label>
+					</div>
+				</div>
+				<div v-if="questionType == 'new' || editMode" class="space-y-2">
+					<div>
+						<label class="block text-xs text-gray-600 mb-1">
+							{{ __('Question') }}
+						</label>
+						<TextEditor
+							:content="question.question"
+							@change="(val) => (question.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>
+					<FormControl
+						v-model="question.marks"
+						:label="__('Marks')"
+						type="number"
+					/>
+					<FormControl
+						:label="__('Type')"
+						v-model="question.type"
+						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')"
+								v-model="question[`explanation_${n}`]"
+							/>
+							<FormControl
+								:label="__('Correct Answer')"
+								v-model="question[`is_correct_${n}`]"
+								type="checkbox"
+							/>
+						</div>
+					</div>
+					<div
+						v-else-if="question.type == 'User Input'"
+						v-for="n in 4"
+						class="space-y-2"
+					>
+						<FormControl
+							:label="__('Possibility') + ' ' + n"
+							v-model="question[`possibility_${n}`]"
+							:required="n == 1 ? true : false"
+						/>
+					</div>
+				</div>
+				<div v-else-if="questionType == 'existing'" class="space-y-2">
+					<Link
+						v-model="existingQuestion.question"
+						:label="__('Select a question')"
+						doctype="LMS Question"
+					/>
+					<FormControl
+						v-model="existingQuestion.marks"
+						:label="__('Marks')"
+						type="number"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
+import { computed, watch, reactive, ref } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const quiz = defineModel('quiz')
+const questionType = ref(null)
+const editMode = ref(false)
+
+const existingQuestion = reactive({
+	question: '',
+	marks: 0,
+})
+const question = reactive({
+	question: '',
+	type: 'Choices',
+	marks: 0,
+})
+
+const populateFields = () => {
+	let fields = ['option', 'is_correct', 'explanation', 'possibility']
+	let counter = 1
+	fields.forEach((field) => {
+		while (counter <= 4) {
+			question[`${field}_${counter}`] = field === 'is_correct' ? false : null
+			counter++
+		}
+	})
+}
+
+populateFields()
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: __('Add a new question'),
+	},
+	questionDetail: {
+		type: [Object, null],
+		required: true,
+	},
+})
+
+const questionData = createResource({
+	url: 'frappe.client.get',
+	makeParams() {
+		return {
+			doctype: 'LMS Question',
+			name: props.questionDetail.question,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		let counter = 1
+		editMode.value = true
+		Object.keys(data).forEach((key) => {
+			if (Object.hasOwn(question, key)) question[key] = data[key]
+		})
+		while (counter <= 4) {
+			question[`is_correct_${counter}`] = data[`is_correct_${counter}`]
+				? true
+				: false
+			counter++
+		}
+		question.marks = props.questionDetail.marks
+	},
+})
+
+watch(show, () => {
+	if (show.value) {
+		editMode.value = false
+		if (props.questionDetail.question) questionData.fetch()
+		else {
+			;(question.question = ''), (question.marks = 0)
+			question.type = 'Choices'
+			existingQuestion.question = ''
+			existingQuestion.marks = 0
+			questionType.value = null
+			populateFields()
+		}
+
+		if (props.questionDetail.marks) question.marks = props.questionDetail.marks
+	}
+})
+
+const questionRow = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Quiz Question',
+				parent: quiz.value.data.name,
+				parentfield: 'questions',
+				parenttype: 'LMS Quiz',
+				...values,
+			},
+		}
+	},
+})
+
+const questionCreation = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Question',
+				...question,
+			},
+		}
+	},
+})
+
+const submitQuestion = (close) => {
+	if (props.questionDetail?.question) updateQuestion(close)
+	else addQuestion(close)
+}
+
+const addQuestion = (close) => {
+	if (questionType.value == 'existing') {
+		addQuestionRow(
+			{
+				question: existingQuestion.question,
+				marks: existingQuestion.marks,
+			},
+			close
+		)
+	} else {
+		questionCreation.submit(
+			{},
+			{
+				onSuccess(data) {
+					addQuestionRow(
+						{
+							question: data.name,
+							marks: question.marks,
+						},
+						close
+					)
+				},
+				onError(err) {
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				},
+			}
+		)
+	}
+}
+
+const addQuestionRow = (question, close) => {
+	questionRow.submit(
+		{
+			...question,
+		},
+		{
+			onSuccess() {
+				show.value = false
+				showToast(__('Success'), __('Question added successfully'), 'check')
+				quiz.value.reload()
+				close()
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				close()
+			},
+		}
+	)
+}
+
+const questionUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Question',
+			name: questionData.data?.name,
+			fieldname: {
+				...question,
+			},
+		}
+	},
+})
+
+const marksUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Quiz Question',
+			name: props.questionDetail.name,
+			fieldname: {
+				marks: question.marks,
+			},
+		}
+	},
+})
+
+const updateQuestion = (close) => {
+	questionUpdate.submit(
+		{},
+		{
+			onSuccess() {
+				marksUpdate.submit(
+					{},
+					{
+						onSuccess() {
+							show.value = false
+							showToast(
+								__('Success'),
+								__('Question updated successfully'),
+								'check'
+							)
+							quiz.value.reload()
+							close()
+						},
+					}
+				)
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
+
+const dialogOptions = computed(() => {
+	return {
+		title: __(props.title),
+		size: 'xl',
+		actions: [
+			{
+				label: __('Submit'),
+				variant: 'solid',
+				onClick: (close) => {
+					submitQuestion(close)
+				},
+			},
+		],
+	}
+})
+</script>
+<style>
+input[type='radio']:checked {
+	background-color: theme('colors.gray.900') !important;
+	border-color: theme('colors.gray.900') !important;
+	--tw-ring-color: theme('colors.gray.900') !important;
+}
+</style>

frontend/src/components/Modals/Settings.vue

@@ -0,0 +1,354 @@
+<template>
+	<Dialog v-model="show" :options="{ size: '4xl' }">
+		<template #body>
+			<div class="flex h-[calc(100vh_-_8rem)]">
+				<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
+					<h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
+						{{ __('Settings') }}
+					</h1>
+					<div v-for="tab in tabs" :key="tab.label">
+						<div
+							v-if="!tab.hideLabel"
+							class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+						>
+							<span>{{ __(tab.label) }}</span>
+						</div>
+						<nav class="space-y-1">
+							<SidebarLink
+								v-for="item in tab.items"
+								:link="item"
+								:key="item.label"
+								class="w-full"
+								:class="
+									activeTab?.label == item.label
+										? 'bg-white shadow-sm'
+										: 'hover:bg-gray-100'
+								"
+								@click="activeTab = item"
+							/>
+						</nav>
+					</div>
+				</div>
+				<div
+					v-if="activeTab && data.doc"
+					:key="activeTab.label"
+					class="flex flex-1 flex-col px-10 py-8"
+				>
+					<Members
+						v-if="activeTab.label === 'Members'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						v-model:show="show"
+					/>
+					<Categories
+						v-else-if="activeTab.label === 'Categories'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+					/>
+					<PaymentSettings
+						v-else-if="activeTab.label === 'Payment Gateway'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
+						:fields="activeTab.fields"
+					/>
+					<BrandSettings
+						v-else-if="activeTab.label === 'Branding'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:fields="activeTab.fields"
+						:data="branding"
+					/>
+					<SettingDetails
+						v-else
+						:fields="activeTab.fields"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, createDocumentResource, createResource } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
+import { useSettings } from '@/stores/settings'
+import SettingDetails from '../SettingDetails.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import Members from '@/components/Members.vue'
+import Categories from '@/components/Categories.vue'
+import BrandSettings from '@/components/BrandSettings.vue'
+import PaymentSettings from '@/components/PaymentSettings.vue'
+
+const show = defineModel()
+const doctype = ref('LMS Settings')
+const activeTab = ref(null)
+const settingsStore = useSettings()
+
+const data = createDocumentResource({
+	doctype: doctype.value,
+	name: doctype.value,
+	fields: ['*'],
+	cache: doctype.value,
+	auto: true,
+})
+
+const branding = createResource({
+	url: 'lms.lms.api.get_branding',
+	auto: true,
+	cache: 'brand',
+})
+
+const tabsStructure = computed(() => {
+	return [
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					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',
+						},
+					],
+				},
+			],
+		},
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					label: 'Payment Gateway',
+					icon: 'DollarSign',
+					description:
+						'Configure the payment gateway and other payment related settings',
+					fields: [
+						{
+							label: 'Payment Gateway',
+							name: 'payment_gateway',
+							type: 'Link',
+							doctype: 'Payment Gateway',
+						},
+						{
+							label: 'Default Currency',
+							name: 'default_currency',
+							type: 'Link',
+							doctype: 'Currency',
+						},
+						{
+							label: 'Apply GST for India',
+							name: 'apply_gst',
+							type: 'checkbox',
+						},
+						{
+							label: 'Show USD equivalent amount',
+							name: 'show_usd_equivalent',
+							type: 'checkbox',
+						},
+						{
+							label: 'Apply rounding on equivalent',
+							name: 'apply_rounding',
+							type: 'checkbox',
+						},
+					],
+				},
+			],
+		},
+		{
+			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',
+					icon: 'Network',
+				},
+			],
+		},
+		{
+			label: 'Customise',
+			hideLabel: false,
+			items: [
+				{
+					label: 'Branding',
+					icon: 'Blocks',
+					fields: [
+						{
+							label: 'Brand Name',
+							name: 'app_name',
+							type: 'text',
+						},
+						{
+							label: 'Logo',
+							name: 'banner_image',
+							type: 'Upload',
+						},
+						{
+							label: 'Favicon',
+							name: 'favicon',
+							type: 'Upload',
+						},
+						{
+							label: 'Footer Logo',
+							name: 'footer_logo',
+							type: 'Upload',
+						},
+						{
+							label: 'Address',
+							name: 'address',
+							type: 'textarea',
+							rows: 2,
+						},
+						{
+							label: 'Footer "Powered By"',
+							name: 'footer_powered',
+							type: 'textarea',
+							rows: 4,
+						},
+						{
+							label: 'Copyright',
+							name: 'copyright',
+							type: 'text',
+						},
+					],
+				},
+				{
+					label: 'Sidebar',
+					icon: 'PanelLeftIcon',
+					description: 'Choose the items you want to show in the sidebar',
+					fields: [
+						{
+							label: 'Courses',
+							name: 'courses',
+							type: 'checkbox',
+						},
+						{
+							label: 'Batches',
+							name: 'batches',
+							type: 'checkbox',
+						},
+						{
+							label: 'Certified Participants',
+							name: 'certified_participants',
+							type: 'checkbox',
+						},
+						{
+							type: 'Column Break',
+						},
+						{
+							label: 'Jobs',
+							name: 'jobs',
+							type: 'checkbox',
+						},
+						{
+							label: 'Statistics',
+							name: 'statistics',
+							type: 'checkbox',
+						},
+						{
+							label: 'Notifications',
+							name: 'notifications',
+							type: 'checkbox',
+						},
+					],
+				},
+				{
+					label: 'Email Templates',
+					icon: 'MailPlus',
+					fields: [
+						{
+							label: 'Batch Confirmation Template',
+							name: 'batch_confirmation_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Certification Template',
+							name: 'certification_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Assignment Submission Template',
+							name: 'assignment_submission_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+					],
+				},
+				{
+					label: 'Signup',
+					icon: 'LogIn',
+					fields: [
+						{
+							label: 'Custom Content',
+							name: 'custom_signup_content',
+							type: 'Code',
+							mode: 'htmlmixed',
+							rows: 10,
+						},
+						{
+							label: 'Ask for Occupation',
+							name: 'user_category',
+							type: 'checkbox',
+							description:
+								'Enable this option to ask users to select their occupation during the signup process.',
+						},
+					],
+				},
+			],
+		},
+	]
+})
+
+const tabs = computed(() => {
+	return tabsStructure.value.map((tab) => {
+		return {
+			...tab,
+			items: tab.items.filter((item) => {
+				return !item.condition || item.condition()
+			}),
+		}
+	})
+})
+
+watch(show, async () => {
+	if (show.value) {
+		const currentTab = await tabs.value
+			.flatMap((tab) => tab.items)
+			.find((item) => item.label === settingsStore.activeTab)
+		activeTab.value = currentTab || tabs.value[0].items[0]
+	} else {
+		activeTab.value = null
+		settingsStore.isSettingsOpen = false
+	}
+})
+</script>

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/Modals/YouTubeExplanation.vue

@@ -1,31 +0,0 @@
-<template>
-	<Popover transition="default">
-		<template #target="{ isOpen, togglePopover }" class="flex w-full">
-			<slot v-bind="{ isOpen, togglePopover }"></slot>
-		</template>
-		<template #body>
-			<div
-				class="absolute left-0 mt-3 w-[35rem] max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
-			>
-				<div
-					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
-				>
-					<video
-						controls
-						autoplay
-						muted
-						width="100%"
-						controlsList="nodownload"
-						oncontextmenu="return false;"
-						class="rounded-sm"
-					>
-						<source src="/Youtube.mov" type="video/mp4" />
-					</video>
-				</div>
-			</div>
-		</template>
-	</Popover>
-</template>
-<script setup>
-import { Popover } from 'frappe-ui'
-</script>

frontend/src/components/NoPermission.vue

@@ -24,7 +24,7 @@
 			<div>
 				{{ __('Please login to access this page.') }}
 			</div>
-			<Button variant="solid" @click="redirectToLogin()" class="mt-2">
+			<Button @click="redirectToLogin()" class="mt-4">
 				{{ __('Login') }}
 			</Button>
 		</div>

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

@@ -0,0 +1,109 @@
+<template>
+	<div class="flex flex-col h-full">
+		<div class="flex items-center justify-between">
+			<div class="text-xl font-semibold mb-1">
+				{{ label }}
+			</div>
+			<!-- <Badge
+                v-if="isDirty"
+                :label="__('Not Saved')"
+                variant="subtle"
+                theme="orange"
+            /> -->
+		</div>
+		<div class="overflow-y-scroll">
+			<div class="flex space-x-4">
+				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+				<SettingFields
+					v-if="paymentGateway.data"
+					:fields="paymentGateway.data.fields"
+					:data="paymentGateway.data.data"
+					class="w-1/2"
+				/>
+			</div>
+		</div>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" @click="update">
+				{{ __('Update') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import SettingFields from '@/components/SettingFields.vue'
+import { createResource, Badge, Button } from 'frappe-ui'
+import { watch, ref } from 'vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	fields: {
+		type: Array,
+		required: true,
+	},
+})
+
+const paymentGateway = createResource({
+	url: 'lms.lms.api.get_payment_gateway_details',
+	makeParams(values) {
+		return {
+			payment_gateway: props.data.doc.payment_gateway,
+		}
+	},
+	auto: true,
+})
+
+const saveSettings = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		let fields = {}
+		Object.keys(paymentGateway.data.data).forEach((key) => {
+			if (
+				paymentGateway.data.data[key] &&
+				typeof paymentGateway.data.data[key] === 'object'
+			) {
+				fields[key] = paymentGateway.data.data[key].file_url
+			} else {
+				fields[key] = paymentGateway.data.data[key]
+			}
+		})
+
+		return {
+			doctype: paymentGateway.data.doctype,
+			name: paymentGateway.data.docname,
+			fieldname: fields,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		paymentGateway.reload()
+	},
+})
+
+const update = () => {
+	props.fields.forEach((f) => {
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
+	})
+	props.data.save.submit()
+	saveSettings.submit()
+}
+
+watch(
+	() => props.data.doc.payment_gateway,
+	() => {
+		paymentGateway.reload()
+	}
+)
+</script>

frontend/src/components/ProgressBar.vue

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

frontend/src/components/Quiz.vue

@@ -1,11 +1,27 @@
 <template>
 	<div v-if="quiz.data">
-		<div class="bg-blue-100 py-2 px-2 mb-4 rounded-md text-sm text-blue-800">
+		<div
-			<div class="leading-relaxed">
+			class="bg-blue-100 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-blue-800"
+		>
+			<div class="leading-5">
 				{{
 					__('This quiz consists of {0} questions.').format(questions.length)
 				}}
 			</div>
+			<div v-if="quiz.data?.duration" class="leading-5">
+				{{
+					__(
+						'Please ensure that you complete all the questions in {0} minutes.'
+					).format(quiz.data.duration)
+				}}
+			</div>
+			<div v-if="quiz.data?.duration" class="leading-5">
+				{{
+					__(
+						'If you fail to do so, the quiz will be automatically submitted when the timer ends.'
+					)
+				}}
+			</div>
 			<div v-if="quiz.data.passing_percentage" class="leading-relaxed">
 				{{
 					__(
@@ -22,14 +38,16 @@
 					)
 				}}
 			</div>
-			<div v-if="quiz.data.time" class="leading-relaxed">
-				{{
-					__(
-						'The quiz has a time limit. For each question you will be given {0} seconds.'
-					).format(quiz.data.time)
-				}}
 		</div>
+
+		<div v-if="quiz.data.duration" class="flex items-center space-x-2 my-4">
+			<span class="text-gray-600 text-xs"> {{ __('Time') }}: </span>
+			<ProgressBar :progress="timerProgress" />
+			<span class="font-semibold">
+				{{ formatTimer(timer) }}
+			</span>
 		</div>
+
 		<div v-if="activeQuestion == 0">
 			<div class="border text-center p-20 rounded-md">
 				<div class="font-semibold text-lg">
@@ -63,19 +81,12 @@
 					class="border rounded-md p-5"
 				>
 					<div class="flex justify-between">
-						<div class="text-sm">
+						<div class="text-sm text-gray-600">
 							<span class="mr-2">
 								{{ __('Question {0}').format(activeQuestion) }}:
 							</span>
-							<span v-if="questionDetails.data.type == 'User Input'">
+							<span>
-								{{ __('Type your answer') }}
+								{{ getInstructions(questionDetails.data) }}
-							</span>
-							<span v-else>
-								{{
-									questionDetails.data.multiple
-										? __('Choose all answers that apply')
-										: __('Choose one answer')
-								}}
 							</span>
 						</div>
 						<div class="text-gray-900 text-sm font-semibold item-left">
@@ -84,7 +95,7 @@
 						</div>
 					</div>
 					<div
-						class="text-gray-900 font-semibold mt-2"
+						class="text-gray-900 font-semibold mt-2 leading-5"
 						v-html="questionDetails.data.question"
 					></div>
 					<div v-if="questionDetails.data.type == 'Choices'" v-for="index in 4">
@@ -107,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
@@ -139,7 +152,7 @@
 							{{ questionDetails.data[`explanation_${index}`] }}
 						</div>
 					</div>
-					<div v-else>
+					<div v-else-if="questionDetails.data.type == 'User Input'">
 						<FormControl
 							v-model="possibleAnswer"
 							type="textarea"
@@ -159,8 +172,18 @@
 							</Badge>
 						</div>
 					</div>
-					<div class="flex items-center justify-between mt-5">
+					<div v-else>
-						<div>
+						<TextEditor
+							class="mt-4"
+							:content="possibleAnswer"
+							@change="(val) => (possibleAnswer = 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 class="flex items-center justify-between mt-4">
+						<div class="text-sm text-gray-600">
 							{{
 								__('Question {0} of {1}').format(
 									activeQuestion,
@@ -169,7 +192,11 @@
 							}}
 						</div>
 						<Button
-							v-if="quiz.data.show_answers && !showAnswers.length"
+							v-if="
+								quiz.data.show_answers &&
+								!showAnswers.length &&
+								questionDetails.data.type != 'Open Ended'
+							"
 							@click="checkAnswer()"
 						>
 							<span>
@@ -193,11 +220,18 @@
 				</div>
 			</div>
 		</div>
-		<div v-else class="border rounded-md p-20 text-center">
+		<div v-else class="border rounded-md p-20 text-center space-y-4">
 			<div class="text-lg font-semibold">
 				{{ __('Quiz Summary') }}
 			</div>
-			<div>
+			<div v-if="quizSubmission.data.is_open_ended">
+				{{
+					__(
+						"Your submission has been successfully saved. The instructor will review and grade it shortly, and you'll be notified of your final result."
+					)
+				}}
+			</div>
+			<div v-else>
 				{{
 					__(
 						'You got {0}% correct answers with a score of {1} out of {2}'
@@ -236,20 +270,32 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Button, createResource, ListView } from 'frappe-ui'
+import {
-import { ref, watch, reactive, inject } from 'vue'
+	Badge,
+	Button,
+	call,
+	createResource,
+	ListView,
+	TextEditor,
+	FormControl,
+} from 'frappe-ui'
+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 FormControl from 'frappe-ui/src/components/FormControl.vue'
+import { useRouter } from 'vue-router'
-const user = inject('$user')
+import ProgressBar from '@/components/ProgressBar.vue'
 
+const user = inject('$user')
 const activeQuestion = ref(0)
 const currentQuestion = ref('')
 const selectedOptions = reactive([0, 0, 0, 0])
 const showAnswers = reactive([])
 let questions = reactive([])
 const possibleAnswer = ref(null)
+const timer = ref(0)
+let timerInterval = null
+const router = useRouter()
 
 const props = defineProps({
 	quizName: {
@@ -270,6 +316,7 @@ const quiz = createResource({
 	auto: true,
 	onSuccess(data) {
 		populateQuestions()
+		setupTimer()
 	},
 })
 
@@ -285,6 +332,37 @@ const populateQuestions = () => {
 	}
 }
 
+const setupTimer = () => {
+	if (quiz.data.duration) {
+		timer.value = quiz.data.duration * 60
+	}
+}
+
+const startTimer = () => {
+	timerInterval = setInterval(() => {
+		timer.value--
+		if (timer.value == 0) {
+			clearInterval(timerInterval)
+			submitQuiz()
+		}
+	}, 1000)
+}
+
+const formatTimer = (seconds) => {
+	const hrs = Math.floor(seconds / 3600)
+		.toString()
+		.padStart(2, '0')
+	const mins = Math.floor((seconds % 3600) / 60)
+		.toString()
+		.padStart(2, '0')
+	const secs = (seconds % 60).toString().padStart(2, '0')
+	return hrs != '00' ? `${hrs}:${mins}:${secs}` : `${mins}:${secs}`
+}
+
+const timerProgress = computed(() => {
+	return (timer.value / (quiz.data.duration * 60)) * 100
+})
+
 const shuffleArray = (array) => {
 	for (let i = array.length - 1; i > 0; i--) {
 		const j = Math.floor(Math.random() * (i + 1))
@@ -324,6 +402,9 @@ const attempts = createResource({
 watch(
 	() => quiz.data,
 	() => {
+		if (quiz.data) {
+			populateQuestions()
+		}
 		if (quiz.data && quiz.data.max_attempts) {
 			attempts.reload()
 			resetQuiz()
@@ -369,6 +450,7 @@ watch(
 const startQuiz = () => {
 	activeQuestion.value = 1
 	localStorage.removeItem(quiz.data.title)
+	if (quiz.data.duration) startTimer()
 }
 
 const markAnswer = (index) => {
@@ -419,8 +501,8 @@ const checkAnswer = () => {
 				selectedOptions.forEach((option, index) => {
 					if (option) {
 						showAnswers[index] = option && data[index]
-					} else if (questionDetails.data[`is_correct_${index + 1}`]) {
+					} else if (data[index] == 2) {
-						showAnswers[index] = 0
+						showAnswers[index] = 2
 					} else {
 						showAnswers[index] = undefined
 					}
@@ -439,7 +521,7 @@ const checkAnswer = () => {
 const addToLocalStorage = () => {
 	let quizData = JSON.parse(localStorage.getItem(quiz.data.title))
 	let questionData = {
-		question_index: activeQuestion.value,
+		question_name: currentQuestion.value,
 		answer: getAnswers().join(),
 		is_correct: showAnswers.filter((answer) => {
 			return answer != undefined
@@ -450,9 +532,10 @@ const addToLocalStorage = () => {
 }
 
 const nextQuetion = () => {
-	if (!quiz.data.show_answers) {
+	if (!quiz.data.show_answers && questionDetails.data?.type != 'Open Ended') {
 		checkAnswer()
 	} else {
+		if (questionDetails.data?.type == 'Open Ended') addToLocalStorage()
 		resetQuestion()
 	}
 }
@@ -467,7 +550,8 @@ const resetQuestion = () => {
 
 const submitQuiz = () => {
 	if (!quiz.data.show_answers) {
-		checkAnswer()
+		if (questionDetails.data.type == 'Open Ended') addToLocalStorage()
+		else checkAnswer()
 		setTimeout(() => {
 			createSubmission()
 		}, 500)
@@ -477,9 +561,16 @@ const submitQuiz = () => {
 }
 
 const createSubmission = () => {
-	quizSubmission.reload().then(() => {
+	quizSubmission.submit(
+		{},
+		{
+			onSuccess(data) {
+				markLessonProgress()
 				if (quiz.data && quiz.data.max_attempts) attempts.reload()
-	})
+				if (quiz.data.duration) clearInterval(timerInterval)
+			},
+		}
+	)
 }
 
 const resetQuiz = () => {
@@ -488,6 +579,24 @@ const resetQuiz = () => {
 	showAnswers.length = 0
 	quizSubmission.reset()
 	populateQuestions()
+	setupTimer()
+}
+
+const getInstructions = (question) => {
+	if (question.type == 'Choices')
+		if (question.multiple) return __('Choose all answers that apply')
+		else return __('Choose one answer')
+	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 = () => {

frontend/src/components/SettingDetails.vue

@@ -0,0 +1,78 @@
+<template>
+	<div class="flex flex-col justify-between h-full">
+		<div>
+			<div class="flex itemsc-center justify-between">
+				<div class="text-xl font-semibold leading-none mb-1">
+					{{ __(label) }}
+				</div>
+				<Badge
+					v-if="data.isDirty"
+					:label="__('Not Saved')"
+					variant="subtle"
+					theme="orange"
+				/>
+			</div>
+			<div class="text-xs text-gray-600">
+				{{ __(description) }}
+			</div>
+		</div>
+
+		<SettingFields :fields="fields" :data="data.doc" />
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" :loading="data.save.loading" @click="update">
+				{{ __('Update') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { Button, Badge } from 'frappe-ui'
+import SettingFields from '@/components/SettingFields.vue'
+import { showToast } from '@/utils'
+
+const props = defineProps({
+	fields: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+	},
+})
+
+const update = () => {
+	props.fields.forEach((f) => {
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
+	})
+	props.data.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+</script>
+
+<style>
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+	font-family: revert;
+}
+
+.CodeMirror {
+	border-radius: 12px;
+}
+</style>

frontend/src/components/SettingFields.vue

@@ -0,0 +1,145 @@
+<template>
+	<div
+		class="my-5"
+		:class="{ 'flex justify-between w-full': columns.length > 1 }"
+	>
+		<div v-for="(column, index) in columns" :key="index">
+			<div
+				class="flex flex-col space-y-5"
+				:class="columns.length > 1 ? 'w-72' : 'w-full'"
+			>
+				<div v-for="field in column">
+					<Link
+						v-if="field.type == 'Link'"
+						v-model="data[field.name]"
+						:doctype="field.doctype"
+						:label="__(field.label)"
+					/>
+
+					<div v-else-if="field.type == 'Code'">
+						<CodeEditor
+							:label="__(field.label)"
+							type="HTML"
+							description="The HTML you add here will be shown on your sign up page."
+							v-model="data[field.name]"
+							height="250px"
+							class="shrink-0"
+							:showLineNumbers="true"
+						>
+						</CodeEditor>
+					</div>
+
+					<div v-else-if="field.type == 'Upload'">
+						<div class="text-sm text-gray-600 mb-1">
+							{{ __(field.label) }}
+						</div>
+						<FileUploader
+							v-if="!data[field.name]"
+							:fileTypes="['image/*']"
+							:validateFile="validateFile"
+							@success="(file) => (data[field.name] = file)"
+						>
+							<template
+								v-slot="{ file, progress, uploading, openFileSelector }"
+							>
+								<div class="">
+									<Button @click="openFileSelector" :loading="uploading">
+										{{
+											uploading ? `Uploading ${progress}%` : 'Upload an image'
+										}}
+									</Button>
+								</div>
+							</template>
+						</FileUploader>
+						<div v-else>
+							<div class="flex items-center text-sm space-x-2">
+								<div
+									class="flex items-center justify-center rounded border border-outline-gray-1 w-[15rem] py-5"
+								>
+									<img :src="data[field.name]?.file_url" class="h-6 rounded" />
+								</div>
+								<div class="flex flex-col flex-wrap">
+									<span class="break-all">
+										{{ data[field.name]?.file_name }}
+									</span>
+									<span class="text-sm text-gray-500 mt-1">
+										{{ getFileSize(data[field.name]?.file_size) }}
+									</span>
+								</div>
+								<X
+									@click="data[field.name] = null"
+									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<Switch
+						v-else-if="field.type == 'checkbox'"
+						size="sm"
+						:label="__(field.label)"
+						:description="__(field.description)"
+						v-model="data[field.name]"
+					/>
+
+					<FormControl
+						v-else
+						:key="field.name"
+						v-model="data[field.name]"
+						:label="__(field.label)"
+						:type="field.type"
+						:rows="field.rows"
+						:options="field.options"
+						:description="field.description"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { FormControl, FileUploader, Button, Switch } from 'frappe-ui'
+import { computed } from 'vue'
+import { getFileSize, validateFile } from '@/utils'
+import { X } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+import CodeEditor from '@/components/Controls/CodeEditor.vue'
+
+const props = defineProps({
+	fields: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+})
+
+const columns = computed(() => {
+	const cols = []
+	let currentColumn = []
+
+	props.fields.forEach((field) => {
+		if (field.type === 'Column Break') {
+			if (currentColumn.length > 0) {
+				cols.push(currentColumn)
+				currentColumn = []
+			}
+		} else {
+			if (field.type == 'checkbox') {
+				field.value = props.data[field.name] ? true : false
+			} else {
+				field.value = props.data[field.name]
+			}
+			currentColumn.push(field)
+		}
+	})
+
+	if (currentColumn.length > 0) {
+		cols.push(currentColumn)
+	}
+
+	return cols
+})
+</script>

frontend/src/components/SidebarLink.vue

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

frontend/src/components/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">
+	<div>
-		<Button v-if="isStudent" @click="openEvalModal" class="float-right">
+		<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 class="text-lg font-semibold mb-4">
-			{{ __('Upcoming Evaluations') }}
 		</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/components/UploadPlugin.vue

@@ -0,0 +1,53 @@
+<template>
+	<FileUploader
+		:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
+		:validateFile="validateFile"
+		@success="(data) => addFile(data)"
+		ref="fileUploader"
+		class="hide"
+	/>
+</template>
+<script setup>
+import { FileUploader } from 'frappe-ui'
+import { onMounted, ref, nextTick } from 'vue'
+
+const fileUploader = ref(null)
+const emit = defineEmits(['fileUploaded'])
+
+const props = defineProps({
+	onFileUploaded: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	const fileInput = fileUploader.value.$el.querySelector('input[type="file"]')
+	if (fileInput) {
+		fileInput.click()
+	}
+})
+
+const addFile = (file) => {
+	props.onFileUploaded({
+		file_url: file.file_url,
+		file_type: file.file_type,
+	})
+}
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3', 'pdf'].includes(extension)) {
+		return 'Only image and video files are allowed.'
+	}
+}
+
+const isVideo = (type) => {
+	return ['mov', 'mp4', 'avi', 'mkv', 'webm'].includes(type.toLowerCase())
+}
+
+const isAudio = (type) => {
+	return ['mp3', 'wav', 'ogg'].includes(type.toLowerCase())
+}
+</script>

frontend/src/components/UserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dropdown :options="userDropdownOptions">
+	<Dropdown class="p-2" :options="userDropdownOptions">
 		<template v-slot="{ open }">
 			<button
 				class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
@@ -11,11 +11,11 @@
 						: 'hover:bg-gray-200 px-2 w-52'
 				"
 			>
-				<span
+				<img
-					v-if="branding.data?.brand_html"
+					v-if="branding.data?.banner_image"
-					v-html="branding.data?.brand_html"
+					:src="branding.data?.banner_image.file_url"
 					class="w-8 h-8 rounded flex-shrink-0"
-				></span>
+				/>
 				<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
 				<div
 					class="flex flex-1 flex-col text-left duration-300 ease-in-out"
@@ -28,11 +28,10 @@
 					<div class="text-base font-medium text-gray-900 leading-none">
 						<span
 							v-if="
-								branding.data?.brand_name &&
+								branding.data?.app_name && branding.data?.app_name != 'Frappe'
-								branding.data?.brand_name != 'Frappe'
 							"
 						>
-							{{ branding.data?.brand_name }}
+							{{ branding.data?.app_name }}
 						</span>
 						<span v-else> Learning </span>
 					</div>
@@ -56,27 +55,31 @@
 			</button>
 		</template>
 	</Dropdown>
+	<SettingsModal
+		v-if="userResource.data?.is_moderator"
+		v-model="showSettingsModal"
+	/>
 </template>
 
 <script setup>
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
-import {
+import Apps from '@/components/Apps.vue'
-	ChevronDown,
+import { ChevronDown, LogIn, LogOut, User, Settings } from 'lucide-vue-next'
-	LogIn,
-	LogOut,
-	User,
-	ArrowRightLeft,
-} from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { convertToTitleCase } from '../utils'
 import { usersStore } from '@/stores/user'
+import { useSettings } from '@/stores/settings'
+import { markRaw, watch, ref } from 'vue'
+import SettingsModal from '@/components/Modals/Settings.vue'
 
 const router = useRouter()
 const { logout, branding } = sessionStore()
 let { userResource } = usersStore()
+const settingsStore = useSettings()
 let { isLoggedIn } = sessionStore()
+const showSettingsModal = ref(false)
 
 const props = defineProps({
 	isCollapsed: {
@@ -85,6 +88,13 @@ const props = defineProps({
 	},
 })
 
+watch(
+	() => settingsStore.isSettingsOpen,
+	(value) => {
+		showSettingsModal.value = value
+	}
+)
+
 const userDropdownOptions = [
 	{
 		icon: User,
@@ -97,11 +107,7 @@ const userDropdownOptions = [
 		},
 	},
 	{
-		icon: ArrowRightLeft,
+		component: markRaw(Apps),
-		label: 'Switch to Desk',
-		onClick: () => {
-			window.location.href = '/app'
-		},
 		condition: () => {
 			let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
 			let system_user = cookies.get('system_user')
@@ -109,6 +115,16 @@ const userDropdownOptions = [
 			else return false
 		},
 	},
+	{
+		icon: Settings,
+		label: 'Settings',
+		onClick: () => {
+			settingsStore.isSettingsOpen = true
+		},
+		condition: () => {
+			return userResource.data?.is_moderator
+		},
+	},
 	{
 		icon: LogOut,
 		label: 'Log out',

frontend/src/components/VideoBlock.vue

@@ -3,12 +3,15 @@
 		<video
 			@timeupdate="updateTime"
 			@ended="videoEnded"
-			class="rounded-lg border border-gray-100"
+			@click="togglePlay"
+			oncontextmenu="return false"
+			class="rounded-lg border border-gray-100 group cursor-pointer"
+			ref="videoRef"
 		>
 			<source :src="fileURL" :type="type" />
 		</video>
 		<div
-			class="flex items-center space-x-2 bg-gray-200 rounded-md p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto"
+			class="flex items-center space-x-2 bg-gray-200 rounded-md p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto invisible group-hover:visible"
 		>
 			<Button variant="ghost">
 				<template #icon>
@@ -71,7 +74,6 @@ const props = defineProps({
 
 onMounted(() => {
 	setTimeout(() => {
-		videoRef.value = document.querySelector('video')
 		videoRef.value.onloadedmetadata = () => {
 			duration.value = videoRef.value.duration
 		}
@@ -106,6 +108,14 @@ const pauseVideo = () => {
 	playing.value = false
 }
 
+const togglePlay = () => {
+	if (playing.value) {
+		pauseVideo()
+	} else {
+		playVideo()
+	}
+}
+
 const videoEnded = () => {
 	playing.value = false
 }

frontend/src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import dayjs from '@/utils/dayjs'
+import { createDialog } from '@/utils/dialogs'
 import translationPlugin from './translation'
 import { usersStore } from './stores/user'
 import { sessionStore } from './stores/session'
@@ -36,3 +37,4 @@ let { isLoggedIn } = sessionStore()
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
 app.config.globalProperties.$user = userResource
+app.config.globalProperties.$dialog = createDialog

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 class="overflow-hidden h-[calc(100vh-3.2rem)]">
-		<div
+		<Assignment :assignmentID="assignmentID" :submissionName="submissionName" />
-			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>
 </template>
 <script setup>
-import {
+import { Breadcrumbs, createResource } from 'frappe-ui'
-	Breadcrumbs,
+import { computed, inject, onMounted } from 'vue'
-	createResource,
+import Assignment from '@/components/Assignment.vue'
-	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'
 
 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({
+const title = createResource({
-	url: 'frappe.client.get',
+	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" />
+			<img
-			<div class="text-lg">
+				: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,
+						badge.data.member_name,
-						dayjs(issuedOn.data?.issued_on).format('DD MMM YYYY')
+						dayjs(badge.data.issued_on).format('DD MMM YYYY')
 					)
 				}}
 			</div>
-			<div class="text-lg mt-2">
+			<div class="mt-2">
-				{{ badge.doc.description }}
+				{{ 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({
+const badge = createResource({
-	doctype: 'LMS Badge',
+	url: 'frappe.client.get',
-	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',
 	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,6 +4,13 @@
 			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" />
+			<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') }}
@@ -12,10 +19,15 @@
 						<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 class="border-r">
-				<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-y-hidden">
+				<Tabs
+					v-model="tabIndex"
+					:tabs="tabs"
+					tablistClass="overflow-y-hidden bg-white"
+				>
 					<template #tab="{ tab, selected }" class="overflow-x-hidden">
 						<div>
 							<button
@@ -47,15 +59,15 @@
 							<div v-if="tab.label == 'Courses'">
 								<BatchCourses :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Dashboard'">
+							<div v-else-if="tab.label == 'Dashboard' && isStudent">
 								<BatchDashboard :batch="batch" :isStudent="isStudent" />
 							</div>
+							<div v-else-if="tab.label == 'Dashboard'">
+								<BatchStudents :batch="batch.data" />
+							</div>
 							<div v-else-if="tab.label == 'Live Class'">
 								<LiveClass :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Students'">
-								<BatchStudents :batch="batch.data.name" />
-							</div>
 							<div v-else-if="tab.label == 'Assessments'">
 								<Assessments :batch="batch.data.name" />
 							</div>
@@ -77,12 +89,12 @@
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-2xl font-semibold mb-2">
+				<div class="text-gray-700 font-semibold mb-4">
-					{{ batch.data.title }}
+					{{ __('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="{
@@ -165,6 +177,7 @@
 			</div>
 		</div>
 	</div>
+	<BulkCertificates v-model="openCertificateDialog" :batch="batch.data" />
 </template>
 <script setup>
 import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
@@ -182,6 +195,7 @@ import {
 	SendIcon,
 	MessageCircle,
 	Globe,
+	ShieldCheck,
 } from 'lucide-vue-next'
 import { formatTime, updateDocumentTitle } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
@@ -193,9 +207,11 @@ import Announcements from '@/components/Annoucements.vue'
 import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
 import Discussions from '@/components/Discussions.vue'
 import DateRange from '@/components/Common/DateRange.vue'
+import BulkCertificates from '@/components/Modals/BulkCertificates.vue'
 
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
+const openCertificateDialog = ref(false)
 
 const props = defineProps({
 	batchName: {
@@ -214,7 +230,7 @@ const batch = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let crumbs = [{ label: 'All Batches', route: { name: 'Batches' } }]
+	let crumbs = [{ label: 'Batches', route: { name: 'Batches' } }]
 	if (!isStudent.value) {
 		crumbs.push({
 			label: 'Details',
@@ -236,7 +252,7 @@ const breadcrumbs = computed(() => {
 const isStudent = computed(() => {
 	return (
 		user?.data &&
-		batch.data?.students.length &&
+		batch.data?.students?.length &&
 		batch.data?.students.includes(user.data.name)
 	)
 })
@@ -244,34 +260,33 @@ const isStudent = computed(() => {
 const tabIndex = ref(0)
 const tabs = computed(() => {
 	let batchTabs = []
-	if (isStudent.value) {
 	batchTabs.push({
 		label: 'Dashboard',
 		icon: LayoutDashboard,
 	})
-	}
+
-	if (user.data?.is_moderator) {
 	batchTabs.push({
-			label: 'Students',
+		label: 'Courses',
-			icon: Contact2,
+		icon: BookOpen,
 	})
+
+	batchTabs.push({
+		label: 'Live Class',
+		icon: Laptop,
+	})
+
+	if (user.data?.is_moderator) {
 		batchTabs.push({
 			label: 'Assessments',
 			icon: BookOpenCheck,
 		})
 	}
-	batchTabs.push({
+
-		label: 'Live Class',
-		icon: Laptop,
-	})
-	batchTabs.push({
-		label: 'Courses',
-		icon: BookOpen,
-	})
 	batchTabs.push({
 		label: 'Announcements',
 		icon: Mail,
 	})
+
 	batchTabs.push({
 		label: 'Discussions',
 		icon: MessageCircle,

frontend/src/pages/BatchDetail.vue

@@ -137,7 +137,7 @@ const courses = createResource({
 })
 
 const breadcrumbs = computed(() => {
-	let items = [{ label: 'All Batches', route: { name: 'Batches' } }]
+	let items = [{ label: 'Batches', route: { name: 'Batches' } }]
 	items.push({
 		label: batch?.data?.title,
 		route: { name: 'BatchDetail', params: { batchName: batch?.data?.name } },

frontend/src/pages/BatchForm.vue

@@ -13,12 +13,12 @@
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10 mb-4">
+				<div class="grid grid-cols-2 gap-10 mb-4 space-y-2">
 					<div>
 						<FormControl
 							v-model="batch.title"
 							:label="__('Title')"
-							class="mb-4"
+							:required="true"
 						/>
 					</div>
 					<div class="flex flex-col space-y-2">
@@ -36,42 +36,50 @@
 				</div>
 			</div>
 			<div class="mb-4">
-				<div>
+				<div class="text-xs text-gray-600 mb-2">
+					{{ __('Meta Image') }}
+				</div>
 				<FileUploader
 					v-if="!batch.image"
-						class="mt-4"
 					:fileTypes="['image/*']"
 					:validateFile="validateFile"
 					@success="(file) => saveImage(file)"
 				>
 					<template v-slot="{ file, progress, uploading, openFileSelector }">
-							<div class="mb-4">
+						<div class="flex items-center">
-								<Button @click="openFileSelector" :loading="uploading">
+							<div class="border rounded-md w-fit py-5 px-20">
-									{{ uploading ? `Uploading ${progress}%` : 'Upload an image' }}
+								<Image class="size-5 stroke-1 text-gray-700" />
+							</div>
+							<div class="ml-4">
+								<Button @click="openFileSelector">
+									{{ __('Upload') }}
 								</Button>
+								<div class="mt-2 text-gray-600 text-sm">
+									{{
+										__(
+											'Appears when the batch URL is shared on any online platform'
+										)
+									}}
+								</div>
+							</div>
 						</div>
 					</template>
 				</FileUploader>
 				<div v-else class="mb-4">
-						<div class="text-xs text-gray-600 mb-1">
-							{{ __('Meta Image') }}
-						</div>
 					<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
+						<img :src="batch.image.file_url" class="border rounded-md w-40" />
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+						<div class="ml-4">
+							<Button @click="removeImage()">
+								{{ __('Remove') }}
+							</Button>
+							<div class="mt-2 text-gray-600 text-sm">
+								{{
+									__(
+										'Appears when the batch URL is shared on any online platform'
+									)
+								}}
 							</div>
-							<div class="flex flex-col">
-								<span>
-									{{ batch.image.file_name }}
-								</span>
-								<span class="text-sm text-gray-500 mt-1">
-									{{ getFileSize(batch.image.file_size) }}
-								</span>
 						</div>
-							<X
-								@click="removeImage()"
-								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-							/>
 					</div>
 				</div>
 			</div>
@@ -79,18 +87,22 @@
 				v-model="instructors"
 				doctype="User"
 				:label="__('Instructors')"
+				:required="true"
+				:filters="{ ignore_user_type: 1 }"
 			/>
-			</div>
 			<div class="mb-4">
 				<FormControl
 					v-model="batch.description"
 					:label="__('Description')"
 					type="textarea"
 					class="my-4"
+					:placeholder="__('Short description of the batch')"
+					:required="true"
 				/>
 				<div>
 					<label class="block text-sm text-gray-600 mb-1">
 						{{ __('Batch Details') }}
+						<span class="text-red-500">*</span>
 					</label>
 					<TextEditor
 						:content="batch.batch_details"
@@ -112,12 +124,14 @@
 							:label="__('Start Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_date"
 							:label="__('End Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -126,18 +140,22 @@
 							:label="__('Start Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_time"
 							:label="__('End Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.timezone"
 							:label="__('Timezone')"
 							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
 							class="mb-4"
+							:required="true"
 						/>
 					</div>
 				</div>
@@ -153,6 +171,7 @@
 							:label="__('Seat Count')"
 							type="number"
 							class="mb-4"
+							:placeholder="__('Number of seats available')"
 						/>
 						<FormControl
 							v-model="batch.evaluation_end_date"
@@ -232,10 +251,11 @@ import {
 	createResource,
 } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
-import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import { useRouter } from 'vue-router'
-import { getFileSize, showToast } from '../utils'
+import { showToast } from '@/utils'
-import { X, FileText } from 'lucide-vue-next'
+import { Image } from 'lucide-vue-next'
+import { capture } from '@/telemetry'
+import MultiSelect from '@/components/Controls/MultiSelect.vue'
 
 const router = useRouter()
 const user = inject('$user')
@@ -274,6 +294,8 @@ onMounted(() => {
 	if (!user.data) window.location.href = '/login'
 	if (props.batchName != 'new') {
 		batchDetail.reload()
+	} else {
+		capture('batch_form_opened')
 	}
 	window.addEventListener('keydown', keyboardShortcut)
 })
@@ -323,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']
@@ -377,6 +403,7 @@ const createNewBatch = () => {
 		{},
 		{
 			onSuccess(data) {
+				capture('batch_created')
 				router.push({
 					name: 'BatchDetail',
 					params: {
@@ -447,7 +474,7 @@ const breadcrumbs = computed(() => {
 	}
 	crumbs.push({
 		label: props.batchName == 'new' ? 'New Batch' : 'Edit Batch',
-		route: { name: 'BatchCreation', params: { batchName: props.batchName } },
+		route: { name: 'BatchForm', params: { batchName: props.batchName } },
 	})
 	return crumbs
 })

frontend/src/pages/Batches.vue

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

frontend/src/pages/Billing.vue

@@ -1,44 +1,50 @@
 <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"
+		>
+			<Breadcrumbs
+				class="h-7"
+				:items="[{ label: __('Billing Details'), route: { name: 'Billing' } }]"
+			/>
+		</header>
 		<div
 			v-if="access.data?.access && orderSummary.data"
-			class="mt-10 w-1/2 mx-auto"
+			class="pt-5 pb-10 mx-5"
 		>
-			<div class="text-3xl font-bold">
+			<!-- <div class="mb-5">
-				{{ __('Billing Details') }}
+				<div class="text-lg font-semibold">
+					{{ __('Address') }}
 				</div>
-			<div class="text-gray-600 mt-1">
+			</div> -->
-				{{ __('Enter the billing information to complete the payment.') }}
+			<div class="flex flex-col lg:flex-row justify-between">
+				<div
+					class="h-fit bg-gray-100 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
+				>
+					<div class="flex items-center justify-between space-x-2">
+						<div class="text-gray-600">
+							{{ __('Ordered Item') }}
 						</div>
-			<div class="border rounded-md p-5 mt-5">
+						<div class="">
-				<div class="text-xl font-semibold">
-					{{ __('Summary') }}
-				</div>
-				<div class="text-gray-600 mt-1">
-					{{ __('Review the details of your purchase.') }}
-				</div>
-				<div class="mt-5">
-					<div class="flex items-center justify-between">
-						<div>
 							{{ orderSummary.data.title }}
 						</div>
+					</div>
 					<div
-							:class="{
+						v-if="orderSummary.data.gst_applied"
-								'font-semibold text-xl': !orderSummary.data.gst_applied,
+						class="flex items-center justify-between"
-							}"
 					>
-							{{
+						<div class="text-gray-600">
-								orderSummary.data.gst_applied
+							{{ __('Original Amount') }}
-									? orderSummary.data.original_amount_formatted
+						</div>
-									: orderSummary.data.total_amount_formatted
+						<div class="">
-							}}
+							{{ orderSummary.data.original_amount_formatted }}
 						</div>
 					</div>
 					<div
 						v-if="orderSummary.data.gst_applied"
 						class="flex items-center justify-between mt-2"
 					>
-						<div>
+						<div class="text-gray-600">
 							{{ __('GST Amount') }}
 						</div>
 						<div>
@@ -46,109 +52,91 @@
 						</div>
 					</div>
 					<div
-						v-if="orderSummary.data.gst_applied"
+						class="flex items-center justify-between border-t border-gray-400 pt-4 mt-2"
-						class="flex items-center justify-between mt-2"
 					>
-						<div>
+						<div class="text-lg font-semibold">
-							{{ __('Total Amount') }}
+							{{ __('Total') }}
 						</div>
-						<div class="font-semibold text-2xl">
+						<div class="text-lg font-semibold">
 							{{ orderSummary.data.total_amount_formatted }}
 						</div>
 					</div>
 				</div>
 
-				<div class="text-xl font-semibold mt-10">
+				<div class="flex-1 lg:mr-10">
+					<div class="mb-5">
+						<div class="text-lg font-semibold">
 							{{ __('Address') }}
 						</div>
-				<div class="text-gray-600 mt-1">
-					{{ __('Specify your billing address correctly.') }}
 					</div>
-				<div class="grid grid-cols-2 gap-5 mt-4">
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-					<div>
+						<div class="space-y-4">
-						<div class="mt-4">
+							<FormControl
-							<div class="mb-1.5 text-sm text-gray-700">
+								:label="__('Billing Name')"
-								{{ __('Billing Name') }}
+								v-model="billingDetails.billing_name"
-							</div>
+							/>
-							<Input type="text" v-model="billingDetails.billing_name" />
+							<FormControl
-						</div>
+								:label="__('Address Line 1')"
-						<div class="mt-4">
+								v-model="billingDetails.address_line1"
-							<div class="mb-1.5 text-sm text-gray-700">
+							/>
-								{{ __('Address Line 1') }}
+							<FormControl
-							</div>
+								:label="__('Address Line 2')"
-							<Input type="text" v-model="billingDetails.address_line1" />
+								v-model="billingDetails.address_line2"
-						</div>
+							/>
-						<div class="mt-4">
+							<FormControl :label="__('City')" v-model="billingDetails.city" />
-							<div class="mb-1.5 text-sm text-gray-700">
+							<FormControl
-								{{ __('Address Line 2') }}
+								:label="__('State')"
-							</div>
+								v-model="billingDetails.state"
-							<Input type="text" v-model="billingDetails.address_line2" />
+							/>
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('City') }}
-							</div>
-							<Input type="text" v-model="billingDetails.city" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('State') }}
-							</div>
-							<Input type="text" v-model="billingDetails.state" />
-						</div>
-					</div>
-					<div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Country') }}
 						</div>
+						<div class="space-y-4">
 							<Link
 								doctype="Country"
 								:value="billingDetails.country"
 								@change="(option) => changeCurrency(option)"
+								:label="__('Country')"
+							/>
+							<FormControl
+								:label="__('Postal Code')"
+								v-model="billingDetails.pincode"
+							/>
+							<FormControl
+								:label="__('Phone Number')"
+								v-model="billingDetails.phone"
 							/>
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Postal Code') }}
-							</div>
-							<Input type="text" v-model="billingDetails.pincode" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Phone Number') }}
-							</div>
-							<Input type="text" v-model="billingDetails.phone" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Source') }}
-							</div>
 							<Link
 								doctype="LMS Source"
 								:value="billingDetails.source"
 								@change="(option) => (billingDetails.source = option)"
+								:label="__('Where did you hear about us?')"
+							/>
+							<FormControl
+								v-if="billingDetails.country == 'India'"
+								:label="__('GST Number')"
+								v-model="billingDetails.gstin"
+							/>
+							<FormControl
+								v-if="billingDetails.country == 'India'"
+								:label="__('Pan Number')"
+								v-model="billingDetails.pan"
 							/>
 						</div>
-						<div v-if="billingDetails.country == 'India'" class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('GST Number') }}
 					</div>
-							<Input type="text" v-model="billingDetails.gstin" />
+					<div class="flex items-center justify-between border-t pt-4 mt-8">
-						</div>
+						<p class="text-gray-600">
-						<div v-if="billingDetails.country == 'India'" class="mt-4">
+							{{
-							<div class="mb-1.5 text-sm text-gray-700">
+								__(
-								{{ __('Pan Number') }}
+									'Make sure to enter the right billing name as the same will be used in your invoice.'
-							</div>
+								)
-							<Input type="text" v-model="billingDetails.pan" />
+							}}
-						</div>
+						</p>
-					</div>
+						<Button variant="solid" size="md" @click="generatePaymentLink()">
-				</div>
-				<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
 							{{ __('Proceed to Payment') }}
 						</Button>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div v-else-if="access.data?.message">
 			<NotPermitted
 				:text="access.data.message"
@@ -167,11 +155,18 @@
 	</div>
 </template>
 <script setup>
-import { Input, Button, createResource } from 'frappe-ui'
+import {
+	Input,
+	Button,
+	createResource,
+	FormControl,
+	Breadcrumbs,
+	Tooltip,
+} from 'frappe-ui'
 import { reactive, inject, onMounted, ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
-import { createToast } from '@/utils/'
+import { showToast } from '@/utils/'
 
 const user = inject('$user')
 
@@ -202,8 +197,8 @@ const access = createResource({
 		name: props.name,
 	},
 	onSuccess(data) {
-		orderSummary.submit()
 		setBillingDetails(data.address)
+		orderSummary.submit()
 	},
 })
 
@@ -224,84 +219,49 @@ const orderSummary = createResource({
 const billingDetails = reactive({})
 
 const setBillingDetails = (data) => {
-	billingDetails.billing_name = data.billing_name || ''
+	billingDetails.billing_name = data?.billing_name || ''
-	billingDetails.address_line1 = data.address_line1 || ''
+	billingDetails.address_line1 = data?.address_line1 || ''
-	billingDetails.address_line2 = data.address_line2 || ''
+	billingDetails.address_line2 = data?.address_line2 || ''
-	billingDetails.city = data.city || ''
+	billingDetails.city = data?.city || ''
-	billingDetails.state = data.state || ''
+	billingDetails.state = data?.state || ''
-	billingDetails.country = data.country || ''
+	billingDetails.country = data?.country || ''
-	billingDetails.pincode = data.pincode || ''
+	billingDetails.pincode = data?.pincode || ''
-	billingDetails.phone = data.phone || ''
+	billingDetails.phone = data?.phone || ''
-	billingDetails.source = data.source || ''
+	billingDetails.source = data?.source || ''
-	billingDetails.gstin = data.gstin || ''
+	billingDetails.gstin = data?.gstin || ''
-	billingDetails.pan = data.pan || ''
+	billingDetails.pan = data?.pan || ''
 }
 
-const paymentOptions = createResource({
+const paymentLink = createResource({
-	url: 'lms.lms.utils.get_payment_options',
+	url: 'lms.lms.payments.get_payment_link',
 	makeParams(values) {
 		return {
 			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
 			docname: props.name,
-			phone: billingDetails.phone,
+			title: orderSummary.data.title,
-			country: billingDetails.country,
+			amount: orderSummary.data.original_amount,
+			total_amount: orderSummary.data.amount,
+			currency: orderSummary.data.currency,
+			address: billingDetails,
 		}
 	},
 })
 
 const generatePaymentLink = () => {
-	paymentOptions.submit(
+	paymentLink.submit(
 		{},
 		{
-			validate(params) {
+			validate() {
+				if (!billingDetails.source) {
+					return __('Please let us know where you heard about us from.')
+				}
 				return validateAddress()
 			},
 			onSuccess(data) {
-				data.handler = (response) => {
+				window.location.href = data
-					let doctype = props.type == 'course' ? 'LMS Course' : 'LMS Batch'
-					let docname = props.name
-					handleSuccess(response, doctype, docname, data.order_id)
-				}
-				let rzp1 = new Razorpay(data)
-				rzp1.open()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
-			},
-		}
-	)
-}
-
-const paymentResource = createResource({
-	url: 'lms.lms.utils.verify_payment',
-	makeParams(values) {
-		return {
-			response: values.response,
-			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
-			docname: props.name,
-			address: billingDetails,
-			order_id: values.orderId,
-		}
-	},
-})
-
-const handleSuccess = (response, doctype, docname, orderId) => {
-	paymentResource.submit(
-		{
-			response: response,
-			orderId: orderId,
-		},
-		{
-			onSuccess(data) {
-				createToast({
-					title: 'Success',
-					text: 'Payment Successful',
-					icon: 'check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
-				})
-				setTimeout(() => {
-					window.location.href = data
-				}, 3000)
 			},
 		}
 	)

frontend/src/pages/CertifiedParticipants.vue

@@ -6,9 +6,10 @@
 		<div>
 			<FormControl
 				type="text"
-				placeholder="Search Participants"
+				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" />

frontend/src/pages/CourseDetail.vue

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

frontend/src/pages/CourseForm.vue

@@ -7,6 +7,14 @@
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
+						<Button v-if="courseResource.data?.name" @click="trashCourse()">
+							<template #prefix>
+								<Trash2 class="w-4 h-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</Button>
 						<Button variant="solid" @click="submitCourse()" class="ml-2">
 							<span>
 								{{ __('Save') }}
@@ -23,15 +31,23 @@
 							v-model="course.title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="course.short_introduction"
 							:label="__('Short Introduction')"
+							:placeholder="
+								__(
+									'A one line introduction to the course that appears on the course card'
+								)
+							"
 							class="mb-4"
+							:required="true"
 						/>
 						<div class="mb-4">
-							<div class="mb-1.5 text-sm text-gray-700">
+							<div class="mb-1.5 text-sm text-gray-600">
 								{{ __('Course Description') }}
+								<span class="text-red-500">*</span>
 							</div>
 							<TextEditor
 								:content="course.description"
@@ -41,6 +57,11 @@
 								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 class="mb-4">
+							<div class="text-xs text-gray-600 mb-2">
+								{{ __('Course Image') }}
+								<span class="text-red-500">*</span>
+							</div>
 							<FileUploader
 								v-if="!course.course_image"
 								:fileTypes="['image/*']"
@@ -50,40 +71,48 @@
 								<template
 									v-slot="{ file, progress, uploading, openFileSelector }"
 								>
-								<div class="mb-4">
+									<div class="flex items-center">
-									<Button @click="openFileSelector" :loading="uploading">
+										<div class="border rounded-md w-fit py-5 px-20">
-										{{
+											<Image class="size-5 stroke-1 text-gray-700" />
-											uploading ? `Uploading ${progress}%` : 'Upload an image'
+										</div>
-										}}
+										<div class="ml-4">
+											<Button @click="openFileSelector">
+												{{ __('Upload') }}
 											</Button>
+											<div class="mt-2 text-gray-600 text-sm">
+												{{
+													__('Appears on the course card in the course list')
+												}}
+											</div>
+										</div>
 									</div>
 								</template>
 							</FileUploader>
 							<div v-else class="mb-4">
-							<div class="text-xs text-gray-600 mb-1">
-								{{ __('Course Image') }}
-							</div>
 								<div class="flex items-center">
-								<div class="border rounded-md p-2 mr-2">
+									<img
-									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+										:src="course.course_image.file_url"
-								</div>
+										class="border rounded-md w-40"
-								<div class="flex flex-col">
-									<span>
-										{{ course.course_image.file_name }}
-									</span>
-									<span class="text-sm text-gray-500 mt-1">
-										{{ getFileSize(course.course_image.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 									/>
+									<div class="ml-4">
+										<Button @click="removeImage()">
+											{{ __('Remove') }}
+										</Button>
+										<div class="mt-2 text-gray-600 text-sm">
+											{{ __('Appears on the course card in the course list') }}
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 						<FormControl
 							v-model="course.video_link"
 							:label="__('Preview Video')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
 							class="mb-4"
 						/>
 						<div class="mb-4">
@@ -104,15 +133,27 @@
 								</div>
 								<FormControl
 									v-model="newTag"
+									:placeholder="__('Add a keyword and then press enter')"
+									class="w-72"
 									@keyup.enter="updateTags()"
 									id="tags"
 								/>
 							</div>
 						</div>
+						<div class="w-1/2 mb-4">
+							<Link
+								doctype="LMS Category"
+								v-model="course.category"
+								:label="__('Category')"
+								:onCreate="(value, close) => openSettings(close)"
+							/>
+						</div>
 						<MultiSelect
 							v-model="instructors"
 							doctype="User"
 							:label="__('Instructors')"
+							:filters="{ ignore_user_type: 1 }"
+							:required="true"
 						/>
 					</div>
 					<div class="container border-t">
@@ -122,7 +163,7 @@
 						<div class="grid grid-cols-3 gap-10 mb-4">
 							<div
 								v-if="user.data?.is_moderator"
-								class="flex flex-col space-y-3"
+								class="flex flex-col space-y-4"
 							>
 								<FormControl
 									type="checkbox"
@@ -215,23 +256,24 @@ import {
 	ref,
 	reactive,
 	watch,
+	getCurrentInstance,
 } from 'vue'
-import {
+import { showToast, updateDocumentTitle } from '@/utils'
-	convertToTitleCase,
-	showToast,
-	getFileSize,
-	updateDocumentTitle,
-} from '../utils'
 import Link from '@/components/Controls/Link.vue'
-import { FileText, X } from 'lucide-vue-next'
+import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
+import { capture } from '@/telemetry'
+import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
 const newTag = ref('')
 const router = useRouter()
 const instructors = ref([])
+const settingsStore = useSettings()
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -246,6 +288,7 @@ const course = reactive({
 	video_link: '',
 	course_image: null,
 	tags: '',
+	category: '',
 	published: false,
 	published_on: '',
 	featured: false,
@@ -268,6 +311,8 @@ onMounted(() => {
 
 	if (props.courseName !== 'new') {
 		courseResource.reload()
+	} else {
+		capture('course_form_opened')
 	}
 	window.addEventListener('keydown', keyboardShortcut)
 })
@@ -388,9 +433,13 @@ const submitCourse = () => {
 	} else {
 		courseCreationResource.submit(course, {
 			onSuccess(data) {
+				capture('course_created')
 				showToast('Success', 'Course created successfully', 'check')
+				if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+					settingsStore.onboardingDetails.reload()
+				}
 				router.push({
-					name: 'CreateCourse',
+					name: 'CourseForm',
 					params: { courseName: data.name },
 				})
 			},
@@ -401,23 +450,37 @@ const submitCourse = () => {
 	}
 }
 
-const validateMandatoryFields = () => {
+const deleteCourse = createResource({
-	const mandatory_fields = [
+	url: 'lms.lms.api.delete_course',
-		'title',
+	makeParams(values) {
-		'short_introduction',
+		return {
-		'description',
+			course: props.courseName,
-		'video_link',
-		'course_image',
-	]
-	for (const field of mandatory_fields) {
-		if (!course[field]) {
-			let fieldLabel = convertToTitleCase(field.split('_').join(' '))
-			return `${fieldLabel} is mandatory`
-		}
-	}
-	if (course.paid_course && (!course.course_price || !course.currency)) {
-		return 'Course price and currency are mandatory for paid courses'
 		}
+	},
+	onSuccess() {
+		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		router.push({ name: 'Courses' })
+	},
+})
+
+const trashCourse = () => {
+	$dialog({
+		title: __('Delete Course'),
+		message: __(
+			'Deleting the course will also delete all its chapters and lessons. Are you sure you want to delete this course?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteCourse.submit()
+					close()
+				},
+			},
+		],
+	})
 }
 
 watch(
@@ -432,7 +495,7 @@ watch(
 const validateFile = (file) => {
 	let extension = file.name.split('.').pop().toLowerCase()
 	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
-		return 'Only image file is allowed.'
+		return __('Only image file is allowed.')
 	}
 }
 
@@ -459,6 +522,12 @@ const removeImage = () => {
 	course.course_image = null
 }
 
+const openSettings = (close) => {
+	close()
+	settingsStore.activeTab = 'Categories'
+	settingsStore.isSettingsOpen = true
+}
+
 const check_permission = () => {
 	let user_is_instructor = false
 	if (user.data?.is_moderator) return
@@ -489,7 +558,7 @@ const breadcrumbs = computed(() => {
 	}
 	crumbs.push({
 		label: props.courseName == 'new' ? 'New Course' : 'Edit Course',
-		route: { name: 'CreateCourse', params: { courseName: props.courseName } },
+		route: { name: 'CourseForm', params: { courseName: props.courseName } },
 	})
 	return crumbs
 })

frontend/src/pages/Courses.vue

@@ -5,38 +5,51 @@
 		>
 			<Breadcrumbs
 				class="h-7"
-				:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
+				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
 			/>
-			<div class="flex space-x-2">
+			<div class="flex space-x-2 justify-end">
+				<div class="w-40 md:w-44">
+					<FormControl
+						v-if="categories.data?.length"
+						type="select"
+						v-model="currentCategory"
+						:options="categories.data"
+						:placeholder="__('Category')"
+					/>
+				</div>
+				<div class="w-28 md:w-36">
 					<FormControl
 						type="text"
-					placeholder="Search Course"
+						placeholder="Search"
 						v-model="searchQuery"
 						@input="courses.reload()"
 					>
 						<template #prefix>
-						<Search class="w-4 stroke-1.5 text-gray-600" name="search" />
+							<Search class="w-4 h-4 stroke-1.5 text-gray-600" name="search" />
 						</template>
 					</FormControl>
+				</div>
 				<router-link
+					v-if="user.data?.is_moderator || user.data?.is_instructor"
 					:to="{
-						name: 'CreateCourse',
+						name: 'CourseForm',
 						params: {
 							courseName: 'new',
 						},
 					}"
 				>
-					<Button v-if="user.data?.is_moderator" variant="solid">
+					<Button variant="solid">
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
-						{{ __('New Course') }}
+						{{ __('New') }}
 					</Button>
 				</router-link>
 			</div>
 		</header>
 		<div class="">
 			<Tabs
+				v-if="hasCourses"
 				v-model="tabIndex"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 				:tabs="makeTabs"
@@ -90,38 +103,101 @@
 							<CourseCard :course="course" />
 						</router-link>
 					</div>
-					<div
+					<div v-else class="p-5 italic text-gray-500">
-						v-else
+						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
-							</div>
-						</div>
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					!courses.loading &&
+					(user.data?.is_moderator || user.data?.is_instructor)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Course') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can add chapters and lessons to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="!courses.loading && !hasCourses"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No courses found') }}
+				</div>
+				<div class="leading-5">
+					{{
+						__(
+							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import {
-	Breadcrumbs,
-	Tabs,
 	Badge,
+	Breadcrumbs,
 	Button,
-	FormControl,
+	call,
 	createResource,
+	FormControl,
+	Tabs,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus, Search } from 'lucide-vue-next'
+import { BookOpen, Plus, Search } from 'lucide-vue-next'
-import { ref, computed, inject } from 'vue'
+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',
@@ -166,17 +242,66 @@ const addToTabs = (label) => {
 }
 
 const getCourses = (type) => {
+	let courseList = courses.data[type]
 	if (searchQuery.value) {
 		let query = searchQuery.value.toLowerCase()
-		return courses.data[type].filter(
+		courseList = courseList.filter(
 			(course) =>
 				course.title.toLowerCase().includes(query) ||
 				course.short_introduction.toLowerCase().includes(query) ||
 				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
 		)
 	}
-	return courses.data[type]
+	if (currentCategory.value && currentCategory.value != '') {
+		courseList = courseList.filter(
+			(course) => course.category == currentCategory.value
+		)
 	}
+	return courseList
+}
+
+const categories = createResource({
+	url: 'lms.lms.api.get_categories',
+	makeParams() {
+		return {
+			doctype: 'LMS Course',
+			filters: {
+				published: 1,
+			},
+		}
+	},
+	cache: ['courseCategories'],
+	auto: true,
+	transform(data) {
+		data.unshift({
+			label: '',
+			value: null,
+		})
+	},
+})
+
+watch(courses, () => {
+	if (courses.data) {
+		Object.keys(courses.data).forEach((section) => {
+			if (courses.data[section].length) {
+				hasCourses.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 pageMeta = computed(() => {
 	return {