Revert "chore: merge 'develop' into 'main'"

.github/helper/install_dependencies.sh

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

.github/workflows/build.yml

@@ -1,64 +0,0 @@
-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/ci.yml

@@ -39,7 +39,7 @@ jobs:
         node-version: '18'
         check-latest: true
     - name: setup cache for bench
-      uses: actions/cache@v4
+      uses: actions/cache@v2
       with:
         path: ~/bench-cache
         key: ${{ runner.os }}

.github/workflows/linters.yml

@@ -7,27 +7,8 @@ on:
     branches: [ main ]
 
 jobs:
-  commit-lint:
-    name: 'Semantic Commits'
-    runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 200
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          check-latest: true
-
-      - name: Check commit titles
-        run: |
-          npm install @commitlint/cli @commitlint/config-conventional
-          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
-
   linters:
-    name: Semgrep Rules
+    name: Semantic Commits
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
 
@@ -39,17 +20,8 @@ jobs:
         with:
           python-version: '3.10'
 
-      - name: Cache pip
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-            ${{ runner.os }}-
-
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v3.0.1
+        uses: pre-commit/action@v2.0.3
 
       - name: Download Semgrep rules
         run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules

.github/workflows/make_release_pr.yml

@@ -1,7 +1,8 @@
 name: Create weekly release
 on:
   schedule:
-    - cron: '30 3 * * 3'
+    # 13:00 UTC -> 7pm IST on every Wednesday
+    - cron: '30 4 * * 3'
   workflow_dispatch:
 
 jobs:

.github/workflows/ui-tests.yml

@@ -24,7 +24,7 @@ jobs:
 
     services:
       mariadb:
-        image: mariadb:10.8
+        image: mariadb:10.6
         env:
           MARIADB_ROOT_PASSWORD: 123
         ports:
@@ -58,7 +58,7 @@ jobs:
           echo "127.0.0.1 lms.test" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
@@ -70,7 +70,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v4
+      - uses: actions/cache@v3
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
             ${{ runner.os }}-yarn-ui-
 
       - name: Cache cypress binary
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: ~/.cache/Cypress
           key: ${{ runner.os }}-cypress
@@ -100,12 +100,11 @@ jobs:
           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
-          bench --site lms.test execute lms.lms.utils.persona_captured
 
       - name: cypress pre-requisites
         run: |
           cd ~/frappe-bench/apps/lms
-          yarn add cypress@^10 --no-lockfile -W
+          yarn add cypress@^10 --no-lockfile
 
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless

.gitmodules

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

README.md

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

commitlint.config.js

@@ -1,26 +0,0 @@
-export default {
-	parserPreset: "conventional-changelog-conventionalcommits",
-	rules: {
-		"subject-empty": [2, "never"],
-		"type-case": [2, "always", "lower-case"],
-		"type-empty": [2, "never"],
-		"type-enum": [
-			2,
-			"always",
-			[
-				"build",
-				"chore",
-				"ci",
-				"docs",
-				"feat",
-				"fix",
-				"perf",
-				"refactor",
-				"revert",
-				"style",
-				"test",
-				"deprecate", // deprecation decision
-			],
-		],
-	},
-};

cypress.config.js

@@ -1,6 +1,6 @@
-import { defineConfig } from "cypress";
+const { defineConfig } = require("cypress");
 
-export default defineConfig({
+module.exports = defineConfig({
 	projectId: "vandxn",
 	adminPassword: "admin",
 	testUser: "frappe@example.com",
@@ -13,6 +13,6 @@ export default defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://pertest:8000",
+		baseUrl: "http://test_site_ui:8000",
 	},
 });

cypress/e2e/batch_creation.cy.js

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

cypress/e2e/course_creation.cy.js

@@ -1,15 +1,12 @@
 describe("Course Creation", () => {
 	it("creates a new course", () => {
 		cy.login();
-		cy.wait(500);
+		cy.wait(1000);
 		cy.visit("/lms/courses");
 
-		// Close onboarding modal
-		cy.closeOnboardingModal();
-
 		// Create a course
-		cy.get("button").contains("Create").click();
+		cy.get("a").contains("New Course").click();
-		cy.wait(500);
+		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
 
 		cy.get("label").contains("Title").type("Test Course");
@@ -22,51 +19,24 @@ describe("Course Creation", () => {
 		);
 
 		cy.fixture("profile.png", "base64").then((fileContent) => {
-			cy.get("div")
+			cy.get('input[type="file"]').attachFile({
-				.contains("Course Image")
+				fileContent,
-				.siblings("div")
+				fileName: "profile.png",
-				.children('input[type="file"]')
+				mimeType: "image/png",
-				.attachFile({
+				encoding: "base64",
-					fileContent,
+			});
-					fileName: "profile.png",
-					mimeType: "image/png",
-					encoding: "base64",
-				});
 		});
 
 		cy.get("label")
 			.contains("Preview Video")
 			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
 		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
-		cy.get("label")
+		cy.get(".search-input").click().type("frappe");
-			.contains("Category")
+		cy.wait(1000);
-			.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();
@@ -80,7 +50,7 @@ describe("Course Creation", () => {
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Create").click();
+				cy.button("Add Chapter").click();
 			});
 
 		// Add Lesson
@@ -91,23 +61,37 @@ 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(
-			"{enter}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."
+			"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."
 		);
 		cy.button("Save").click();
 
 		// View Course
 		cy.wait(1000);
 		cy.visit("/lms");
-		cy.closeOnboardingModal();
+		cy.wait(500);
-
 		cy.url().should("include", "/lms/courses");
 		cy.get(".grid a:first").within(() => {
 			cy.get("div").contains("Test Course");
 			cy.get("div").contains(
 				"Test Course Short Introduction to test the UI"
 			);
-			cy.get(".bg-cover")
+			cy.get(".course-image")
 				.invoke("css", "background-image")
 				.should("include", "/files/profile");
 		});
@@ -135,6 +119,12 @@ 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."
 		);

cypress/support/commands.js

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

docker/docker-compose.yml

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

docker/init.sh

@@ -16,9 +16,9 @@ cd frappe-bench
 
 # Use containers instead of localhost
 bench set-mariadb-host mariadb
-bench set-redis-cache-host redis://redis:6379
+bench set-redis-cache-host redis:6379
-bench set-redis-queue-host redis://redis:6379
+bench set-redis-queue-host redis:6379
-bench set-redis-socketio-host redis://redis:6379
+bench set-redis-socketio-host redis:6379
 
 # Remove redis, watch from Procfile
 sed -i '/redis/d' ./Procfile

frontend/components.d.ts

@@ -1,116 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    Annoucements: typeof import('./src/components/Annoucements.vue')['default']
-    AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
-    Apps: typeof import('./src/components/Apps.vue')['default']
-    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
-    AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default']
-    AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
-    Assessments: typeof import('./src/components/Assessments.vue')['default']
-    Assignment: typeof import('./src/components/Assignment.vue')['default']
-    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
-    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
-    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
-    BadgeAssignmentForm: typeof import('./src/components/Settings/BadgeAssignmentForm.vue')['default']
-    BadgeAssignments: typeof import('./src/components/Settings/BadgeAssignments.vue')['default']
-    BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default']
-    Badges: typeof import('./src/components/Settings/Badges.vue')['default']
-    BatchCard: typeof import('./src/components/BatchCard.vue')['default']
-    BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
-    BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
-    BatchDashboard: typeof import('./src/components/BatchDashboard.vue')['default']
-    BatchFeedback: typeof import('./src/components/BatchFeedback.vue')['default']
-    BatchOverlay: typeof import('./src/components/BatchOverlay.vue')['default']
-    BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
-    BatchStudents: typeof import('./src/components/BatchStudents.vue')['default']
-    BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
-    BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
-    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
-    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
-    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
-    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
-    Code: typeof import('./src/components/Controls/Code.vue')['default']
-    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
-    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
-    ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
-    CourseCard: typeof import('./src/components/CourseCard.vue')['default']
-    CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
-    CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']
-    CourseOutline: typeof import('./src/components/CourseOutline.vue')['default']
-    CourseProgressSummary: typeof import('./src/components/Modals/CourseProgressSummary.vue')['default']
-    CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
-    CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
-    DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
-    DesktopLayout: typeof import('./src/components/DesktopLayout.vue')['default']
-    DiscussionModal: typeof import('./src/components/Modals/DiscussionModal.vue')['default']
-    DiscussionReplies: typeof import('./src/components/DiscussionReplies.vue')['default']
-    Discussions: typeof import('./src/components/Discussions.vue')['default']
-    EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
-    EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
-    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
-    EmailTemplates: typeof import('./src/components/Settings/EmailTemplates.vue')['default']
-    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
-    EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
-    Evaluators: typeof import('./src/components/Settings/Evaluators.vue')['default']
-    Event: typeof import('./src/components/Modals/Event.vue')['default']
-    ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
-    FeedbackModal: typeof import('./src/components/Modals/FeedbackModal.vue')['default']
-    FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
-    IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
-    IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
-    InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
-    JobApplicationModal: typeof import('./src/components/Modals/JobApplicationModal.vue')['default']
-    JobCard: typeof import('./src/components/JobCard.vue')['default']
-    LessonContent: typeof import('./src/components/LessonContent.vue')['default']
-    LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
-    Link: typeof import('./src/components/Controls/Link.vue')['default']
-    LiveClass: typeof import('./src/components/LiveClass.vue')['default']
-    LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.vue')['default']
-    LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
-    LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
-    Members: typeof import('./src/components/Settings/Members.vue')['default']
-    MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
-    MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
-    NoPermission: typeof import('./src/components/NoPermission.vue')['default']
-    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
-    NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
-    PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
-    PaymentSettings: typeof import('./src/components/Settings/PaymentSettings.vue')['default']
-    Play: typeof import('./src/components/Icons/Play.vue')['default']
-    ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
-    Question: typeof import('./src/components/Modals/Question.vue')['default']
-    Quiz: typeof import('./src/components/Quiz.vue')['default']
-    QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
-    QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
-    Rating: typeof import('./src/components/Controls/Rating.vue')['default']
-    RelatedCourses: typeof import('./src/components/RelatedCourses.vue')['default']
-    ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SettingDetails: typeof import('./src/components/Settings/SettingDetails.vue')['default']
-    SettingFields: typeof import('./src/components/Settings/SettingFields.vue')['default']
-    Settings: typeof import('./src/components/Settings/Settings.vue')['default']
-    SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
-    StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
-    StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
-    Tags: typeof import('./src/components/Tags.vue')['default']
-    UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
-    UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
-    Uploader: typeof import('./src/components/Controls/Uploader.vue')['default']
-    UploadPlugin: typeof import('./src/components/UploadPlugin.vue')['default']
-    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
-    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
-    VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
-    VideoStatistics: typeof import('./src/components/Modals/VideoStatistics.vue')['default']
-    ZoomAccountModal: typeof import('./src/components/Modals/ZoomAccountModal.vue')['default']
-    ZoomSettings: typeof import('./src/components/Settings/ZoomSettings.vue')['default']
-  }
-}

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="{{ favicon }}" />
+		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>{{ title }}</title>
+		<title>Frappe Learning</title>
 		<meta name="title" content="{{ meta.title }}" />
 		<meta name="image" content="{{ meta.image }}" />
 		<meta name="description" content="{{ meta.description }}" />
@@ -23,10 +23,25 @@
 				<p>
 					{{ meta.description }}
 				</p>
+				<p>
+					The content here is just for seo purposes. The actual content will be loaded in a few seconds.
+				</p>
+				<p>
+					Seo checks if a page has more than 300 words. So, here are some more words to make it more than 300 words.
+					Page descriptions are the HTML meta tags that provide a brief summary of a web page.
+					Search engines use meta descriptions to help identify the page's topic - they don't use them to rank the page, but they do use them to determine whether or not to display the page in search results.
+					Meta descriptions are important because they're often the first thing people see when they're deciding which search result to click on.
+					They're also important because they can help improve your click-through rate (CTR) from search results.
+					A good meta description can entice people to click on your page instead of someone else's.
+				</p>
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
+		<div id="modals"></div>
+		<div id="popovers"></div>
+
 		<script>
+			window.csrf_token = '{{ csrf_token }}'
 			document.getElementById('seo-content').style.display = 'none';
 		</script>
 		<script type="module" src="/src/main.js"></script>

frontend/package.json

@@ -2,7 +2,6 @@
   "name": "frappe-ui-frontend",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -10,10 +9,6 @@
     "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
   },
   "dependencies": {
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-python": "^6.2.1",
     "@editorjs/checklist": "^1.6.0",
     "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.29.0",
@@ -23,30 +18,19 @@
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
-    "@editorjs/table": "^2.4.2",
-    "@vueuse/router": "^12.7.0",
-    "ace-builds": "^1.36.2",
-    "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
-    "codemirror": "^6.0.1",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.172",
+    "frappe-ui": "^0.1.56",
-    "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
-    "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "3.4.15",
+    "tailwindcss": "^3.3.3",
-    "thememirror": "^2.0.1",
-    "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
-    "vue-codemirror": "^6.1.1",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
-    "vue3-apexcharts": "^1.8.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {

frontend/postcss.config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},

frontend/public/learning.svg

@@ -1,4 +0,0 @@
-<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z" fill="#0E7159"/>
-<path d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z" fill="white"/>
-</svg>

frontend/src/App.vue

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

frontend/src/components/Annoucements.vue

@@ -5,7 +5,7 @@
 				<div class="flex items-center justify-between mb-2">
 					<div class="flex items-center">
 						<Avatar :label="comm.sender_full_name" size="lg" />
-						<div class="ml-2 text-ink-gray-7">
+						<div class="ml-2">
 							{{ comm.sender_full_name }}
 						</div>
 					</div>
@@ -14,18 +14,18 @@
 					</div>
 				</div>
 				<div
-					class="prose prose-sm bg-surface-menu-bar !min-w-full px-4 py-2 rounded-md"
+					class="prose prose-sm bg-gray-50 !min-w-full px-4 py-2 rounded-md"
 					v-html="comm.content"
 				></div>
 			</div>
 		</div>
 	</div>
-	<div v-else class="text-sm italic text-ink-gray-5">
+	<div v-else class="text-sm italic text-gray-600">
 		{{ __('No announcements') }}
 	</div>
 </template>
 <script setup>
-import { createResource, Avatar } from 'frappe-ui'
+import { createListResource, Avatar } from 'frappe-ui'
 import { timeAgo } from '@/utils'
 
 const props = defineProps({
@@ -35,15 +35,24 @@ const props = defineProps({
 	},
 })
 
-const communications = createResource({
+const communications = createListResource({
-	url: 'lms.lms.api.get_announcements',
+	doctype: 'Communication',
-	makeParams(value) {
+	fields: [
-		return {
+		'subject',
-			batch: props.batch,
+		'content',
-		}
+		'recipients',
+		'cc',
+		'communication_date',
+		'sender',
+		'sender_full_name',
+	],
+	filters: {
+		reference_doctype: 'LMS Batch',
+		reference_name: props.batch,
 	},
+	orderBy: 'communication_date desc',
 	auto: true,
-	cache: ['announcement', props.batch],
+	cache: ['batch', 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 border-r bg-surface-menu-bar"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
+		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
 			class="flex flex-col overflow-hidden"
-			:class="sidebarStore.isSidebarCollapsed ? 'items-center' : ''"
+			:class="isSidebarCollapsed ? 'items-center' : ''"
 		>
-			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
+			<UserDropdown :isCollapsed="isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
 					v-for="link in sidebarLinks"
 					:link="link"
-					:isCollapsed="sidebarStore.isSidebarCollapsed"
+					:isCollapsed="isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
 			</div>
@@ -22,42 +22,38 @@
 			>
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
-					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					:class="isSidebarCollapsed ? 'pl-3' : 'pl-4'"
-					@click="toggleWebPages"
+					@click="showWebPages = !showWebPages"
 				>
 					<div
-						v-if="!sidebarStore.isSidebarCollapsed"
+						v-if="!isSidebarCollapsed"
-						class="flex items-center text-sm text-ink-gray-5 my-1"
+						class="flex items-center text-sm text-gray-600 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
-								class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
+								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
+								:class="{ 'rotate-90': showWebPages }"
 							/>
 						</span>
 						<span class="ml-2">
 							{{ __('More') }}
 						</span>
 					</div>
-					<Button
+					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
-						v-if="isModerator && !readOnlyMode"
-						variant="ghost"
-						@click="openPageModal()"
-					>
 						<template #icon>
-							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
+							<Plus class="h-4 w-4 text-gray-700 stroke-1.5" />
 						</template>
 					</Button>
 				</div>
 				<div
 					v-if="sidebarSettings.data?.web_pages?.length"
 					class="flex flex-col transition-all duration-300 ease-in-out"
-					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
+					:class="showWebPages ? 'block' : 'hidden'"
 				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
 						:link="link"
-						:isCollapsed="sidebarStore.isSidebarCollapsed"
+						:isCollapsed="isSidebarCollapsed"
 						class="mx-2 my-0.5"
 						:showControls="isModerator ? true : false"
 						@openModal="openPageModal"
@@ -66,109 +62,23 @@
 				</div>
 			</div>
 		</div>
-		<div class="m-2 flex flex-col gap-1">
+		<SidebarLink
-			<div
+			:link="{
-				v-if="readOnlyMode && !sidebarStore.isSidebarCollapsed"
+				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
-				class="z-10 m-2 bg-surface-modal py-2.5 px-3 text-xs text-ink-gray-7 leading-5 rounded-md"
+			}"
-			>
+			:isCollapsed="isSidebarCollapsed"
-				{{
+			@click="isSidebarCollapsed = !isSidebarCollapsed"
-					__(
+			class="m-2"
-						'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
+		>
-					)
+			<template #icon>
-				}}
+				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-			</div>
-			<TrialBanner
-				v-if="
-					userResource.data?.is_system_manager && userResource.data?.is_fc_site
-				"
-				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
-			/>
-			<GettingStartedBanner
-				v-if="showOnboarding && !isOnboardingStepsCompleted"
-				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
-				appName="learning"
-			/>
-
-			<div
-				class="flex items-center mt-4"
-				:class="
-					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
-				"
-			>
-				<div
-					class="flex items-center flex-1"
-					:class="
-						sidebarStore.isSidebarCollapsed
-							? 'flex-col space-y-3'
-							: 'flex-row space-x-3'
-					"
-				>
-					<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
-						<CircleAlert
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
-						/>
-						<template #body>
-							<div
-								class="max-w-[30ch] rounded bg-surface-gray-7 px-2 py-1 text-center text-p-xs text-ink-white shadow-xl"
-							>
-								{{
-									__(
-										'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
-									)
-								}}
-							</div>
-						</template>
-					</Tooltip>
-					<Tooltip :text="__('Powered by Learning')">
-						<Zap
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
-							@click="redirectToWebsite()"
-						/>
-					</Tooltip>
-					<Tooltip v-if="showOnboarding" :text="__('Help')">
-						<CircleHelp
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
-							@click="
-								() => {
-									showHelpModal = minimize ? true : !showHelpModal
-									minimize = !showHelpModal
-								}
-							"
-						/>
-					</Tooltip>
-				</div>
-				<Tooltip
-					:text="
-						sidebarStore.isSidebarCollapsed ? __('Expand') : __('Collapse')
-					"
-				>
 					<CollapseSidebar
-						class="size-4 text-ink-gray-7 duration-300 stroke-1.5 ease-in-out cursor-pointer"
+						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-						:class="{
+						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
-							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
-						}"
-						@click="toggleSidebar()"
 					/>
-				</Tooltip>
+				</span>
-			</div>
+			</template>
-		</div>
+		</SidebarLink>
-		<HelpModal
-			v-if="showOnboarding && showHelpModal"
-			v-model="showHelpModal"
-			v-model:articles="articles"
-			appName="learning"
-			title="Frappe Learning"
-			:logo="LMSLogo"
-			:afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
-			:afterSkipAll="() => capture('onboarding_steps_skipped')"
-			:afterReset="(step) => capture('onboarding_step_reset_' + step)"
-			:afterResetAll="() => capture('onboarding_steps_reset')"
-			docsLink="https://docs.frappe.io/learning"
-		/>
-		<IntermediateStepModal
-			v-model="showIntermediateModal"
-			:currentStep="currentStep"
-		/>
 	</div>
 	<PageModal
 		v-model="showPageModal"
@@ -181,85 +91,30 @@
 import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import {
+import { useStorage } from '@vueuse/core'
-	ref,
+import { ref, onMounted, inject, watch } from 'vue'
-	onMounted,
+import { getSidebarLinks } from '../utils'
-	inject,
-	watch,
-	reactive,
-	markRaw,
-	h,
-	onUnmounted,
-} from 'vue'
-import { getSidebarLinks } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
-import { useSidebar } from '@/stores/sidebar'
+import { ChevronRight, Plus } from 'lucide-vue-next'
-import { useSettings } from '@/stores/settings'
+import { createResource, Button } from 'frappe-ui'
-import { Button, createResource, Tooltip } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
-import { capture } from '@/telemetry'
-import LMSLogo from '@/components/Icons/LMSLogo.vue'
-import { useRouter } from 'vue-router'
-import InviteIcon from './Icons/InviteIcon.vue'
-import {
-	BookOpen,
-	CircleAlert,
-	ChevronRight,
-	Plus,
-	CircleHelp,
-	FolderTree,
-	FileText,
-	UserPlus,
-	Users,
-	BookText,
-	Zap,
-} from 'lucide-vue-next'
-import {
-	TrialBanner,
-	HelpModal,
-	GettingStartedBanner,
-	useOnboarding,
-	showHelpModal,
-	minimize,
-	IntermediateStepModal,
-} from 'frappe-ui/frappe'
 
-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 settingsStore = useSettings()
+const showWebPages = ref(false)
-const { sidebarSettings } = settingsStore
-const showOnboarding = ref(false)
-const showIntermediateModal = ref(false)
-const currentStep = ref({})
-const router = useRouter()
-let onboardingDetails
-let isOnboardingStepsCompleted = false
-const readOnlyMode = window.read_only_mode
-const iconProps = {
-	strokeWidth: 1.5,
-	width: 16,
-	height: 16,
-}
 
 onMounted(() => {
-	addNotifications()
-	setSidebarLinks()
-	setUpOnboarding()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
-})
+	addNotifications()
-
-const setSidebarLinks = () => {
 	sidebarSettings.reload(
 		{},
 		{
@@ -274,7 +129,7 @@ const setSidebarLinks = () => {
 			},
 		}
 	)
-}
+})
 
 const unreadNotifications = createResource({
 	cache: 'Unread Notifications Count',
@@ -312,85 +167,6 @@ const addNotifications = () => {
 	}
 }
 
-const addQuizzes = () => {
-	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.splice(4, 0, {
-			label: 'Quizzes',
-			icon: 'CircleHelp',
-			to: 'Quizzes',
-			activeFor: [
-				'Quizzes',
-				'QuizForm',
-				'QuizSubmissionList',
-				'QuizSubmission',
-			],
-		})
-	}
-}
-
-const addAssignments = () => {
-	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.splice(5, 0, {
-			label: 'Assignments',
-			icon: 'Pencil',
-			to: 'Assignments',
-			activeFor: [
-				'Assignments',
-				'AssignmentForm',
-				'AssignmentSubmissionList',
-				'AssignmentSubmission',
-			],
-		})
-	}
-}
-
-const addProgrammingExercises = () => {
-	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.splice(3, 0, {
-			label: 'Programming Exercises',
-			icon: 'Code',
-			to: 'ProgrammingExercises',
-			activeFor: [
-				'ProgrammingExercises',
-				'ProgrammingExerciseForm',
-				'ProgrammingExerciseSubmissions',
-				'ProgrammingExerciseSubmission',
-			],
-		})
-	}
-}
-
-const addPrograms = () => {
-	let activeFor = ['Programs', 'ProgramForm']
-	let index = 1
-	let canAddProgram = false
-
-	if (
-		!isInstructor.value &&
-		!isModerator.value &&
-		settingsStore.learningPaths.data
-	) {
-		sidebarLinks.value = sidebarLinks.value.filter(
-			(link) => link.label !== 'Courses'
-		)
-		activeFor.push('CourseDetail')
-		activeFor.push('Lesson')
-		index = 0
-		canAddProgram = true
-	} else if (isInstructor.value || isModerator.value) {
-		canAddProgram = true
-	}
-
-	if (canAddProgram) {
-		sidebarLinks.value.splice(index, 0, {
-			label: 'Programs',
-			icon: 'Route',
-			to: 'Programs',
-			activeFor: activeFor,
-		})
-	}
-}
-
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link
@@ -414,247 +190,15 @@ const deletePage = (link) => {
 	)
 }
 
-const toggleSidebar = () => {
+const getSidebarFromStorage = () => {
-	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+	return useStorage('sidebar_is_collapsed', false)
-	localStorage.setItem(
-		'isSidebarCollapsed',
-		JSON.stringify(sidebarStore.isSidebarCollapsed)
-	)
-}
-
-const toggleWebPages = () => {
-	sidebarStore.isWebpagesCollapsed = !sidebarStore.isWebpagesCollapsed
-	localStorage.setItem(
-		'isWebpagesCollapsed',
-		JSON.stringify(sidebarStore.isWebpagesCollapsed)
-	)
-}
-
-const getFirstCourse = async () => {
-	let firstCourse = localStorage.getItem('firstCourse')
-	if (firstCourse) return firstCourse
-	return await call('lms.lms.onboarding.get_first_course')
-}
-
-const getFirstBatch = async () => {
-	let firstBatch = localStorage.getItem('firstBatch')
-	if (firstBatch) return firstBatch
-	return await call('lms.lms.onboarding.get_first_batch')
-}
-
-const steps = reactive([
-	{
-		name: 'create_first_course',
-		title: __('Create your first course'),
-		icon: markRaw(h(BookOpen, iconProps)),
-		completed: false,
-		onClick: () => {
-			minimize.value = true
-			router.push({
-				name: 'Courses',
-			})
-		},
-	},
-	{
-		name: 'create_first_chapter',
-		title: __('Add your first chapter'),
-		icon: markRaw(h(FolderTree, iconProps)),
-		completed: false,
-		dependsOn: 'create_first_course',
-		onClick: async () => {
-			minimize.value = true
-			let course = await getFirstCourse()
-			if (course) {
-				router.push({ name: 'CourseForm', params: { courseName: course } })
-			} else {
-				router.push({ name: 'CourseForm' })
-			}
-		},
-	},
-	{
-		name: 'create_first_lesson',
-		title: __('Add your first lesson'),
-		icon: markRaw(h(FileText, iconProps)),
-		completed: false,
-		dependsOn: 'create_first_chapter',
-		onClick: async () => {
-			minimize.value = true
-			let course = await getFirstCourse()
-			if (course) {
-				router.push({
-					name: 'CourseForm',
-					params: { courseName: course },
-				})
-			} else {
-				router.push({ name: 'Courses' })
-			}
-		},
-	},
-	{
-		name: 'create_first_quiz',
-		title: __('Create your first quiz'),
-		icon: markRaw(h(CircleHelp, iconProps)),
-		completed: false,
-		dependsOn: 'create_first_course',
-		onClick: () => {
-			minimize.value = true
-			router.push({ name: 'Quizzes' })
-		},
-	},
-	{
-		name: 'invite_students',
-		title: __('Invite your team and students'),
-		icon: markRaw(h(InviteIcon, iconProps)),
-		completed: false,
-		onClick: () => {
-			minimize.value = true
-			settingsStore.activeTab = 'Members'
-			settingsStore.isSettingsOpen = true
-		},
-	},
-	{
-		name: 'create_first_batch',
-		title: __('Create your first batch'),
-		icon: markRaw(h(Users, iconProps)),
-		completed: false,
-		onClick: () => {
-			minimize.value = true
-			router.push({ name: 'Batches' })
-		},
-	},
-	{
-		name: 'add_batch_student',
-		title: __('Add students to your batch'),
-		icon: markRaw(h(UserPlus, iconProps)),
-		completed: false,
-		dependsOn: 'create_first_batch',
-		onClick: async () => {
-			minimize.value = true
-			let batch = await getFirstBatch()
-			if (batch) {
-				router.push({
-					name: 'Batch',
-					params: {
-						batchName: batch,
-					},
-				})
-			} else {
-				router.push({ name: 'Batch' })
-			}
-		},
-	},
-	{
-		name: 'add_batch_course',
-		title: __('Add courses to your batch'),
-		icon: markRaw(h(BookText, iconProps)),
-		completed: false,
-		dependsOn: 'create_first_batch',
-		onClick: async () => {
-			minimize.value = true
-			let batch = await getFirstBatch()
-			if (batch) {
-				router.push({
-					name: 'Batch',
-					params: {
-						batchName: batch,
-					},
-					hash: '#courses',
-				})
-			} else {
-				router.push({ name: 'Batch' })
-			}
-		},
-	},
-])
-
-const articles = ref([
-	{
-		title: __('Introduction'),
-		opened: false,
-		subArticles: [
-			{ name: 'introduction', title: __('Introduction') },
-			{ name: 'setting-up', title: __('Setting up') },
-		],
-	},
-	{
-		title: __('Creating a course'),
-		opened: false,
-		subArticles: [
-			{ name: 'create-a-course', title: __('Create a course') },
-			{ name: 'add-a-chapter', title: __('Add a chapter') },
-			{ name: 'add-a-lesson', title: __('Add a lesson') },
-		],
-	},
-	{
-		title: __('Creating a batch'),
-		opened: false,
-		subArticles: [
-			{ name: 'create-a-batch', title: __('Create a batch') },
-			{ name: 'create-a-live-class', title: __('Create a live class') },
-		],
-	},
-	{
-		title: __('Assessments'),
-		opened: false,
-		subArticles: [
-			{ name: 'quizzes', title: __('Quizzes') },
-			{ name: 'assignments', title: __('Assignments') },
-		],
-	},
-	{
-		title: __('Certification'),
-		opened: false,
-		subArticles: [
-			{ name: 'issue-a-certificate', title: __('Issue a Certificate') },
-			{
-				name: 'custom-certificate-templates',
-				title: __('Custom Certificate Templates'),
-			},
-		],
-	},
-	{
-		title: __('Monetization'),
-		opened: false,
-		subArticles: [
-			{
-				name: 'setting-up-payment-gateway',
-				title: __('Setting up payment gateway'),
-			},
-		],
-	},
-	{
-		title: __('Settings'),
-		opened: false,
-		subArticles: [{ name: 'roles', title: __('Roles') }],
-	},
-])
-
-const setUpOnboarding = () => {
-	if (userResource.data?.is_system_manager) {
-		onboardingDetails = useOnboarding('learning')
-		onboardingDetails.setUp(steps)
-		isOnboardingStepsCompleted = onboardingDetails.isOnboardingStepsCompleted
-		showOnboarding.value = true
-	}
 }
 
 watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
-		isInstructor.value = userResource.data.is_instructor
-		addPrograms()
-		addProgrammingExercises()
-		addQuizzes()
-		addAssignments()
-		setUpOnboarding()
 	}
 })
 
-const redirectToWebsite = () => {
+let isSidebarCollapsed = ref(getSidebarFromStorage())
-	window.open('https://frappe.io/learning', '_blank')
-}
-
-onUnmounted(() => {
-	socket.off('publish_lms_notifications')
-})
 </script>

frontend/src/components/Apps.vue

@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<button
 				:class="[
-					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
+					'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()"
 			>
@@ -18,15 +18,15 @@
 		</template>
 		<template #body>
 			<div
-				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
+				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-surface-gray-2"
+						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 text-ink-gray-7" @click="app.onClick">
+						<div class="text-sm" @click="app.onClick">
 							{{ app.title }}
 						</div>
 					</a>

frontend/src/components/AssessmentPlugin.vue

@@ -1,77 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			title:
-				type == 'quiz'
-					? __('Add a quiz to your lesson')
-					: __('Add an assignment to your lesson'),
-			size: 'xl',
-			actions: [
-				{
-					label: __('Save'),
-					variant: 'solid',
-					onClick: () => {
-						addAssessment()
-					},
-				},
-			],
-		}"
-	>
-		<template #body-content>
-			<div class="">
-				<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>
-		</template>
-	</Dialog>
-</template>
-<script setup>
-import { Dialog } 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,106 +1,49 @@
 <template>
 	<div>
-		<div class="flex items-center justify-between mb-4">
+		<div class="text-lg font-semibold mb-4">
-			<div class="text-lg font-semibold text-ink-gray-9">
+			{{ __('Assessments') }}
-				{{ __('Assessments') }}
-			</div>
-			<Button v-if="canAddAssessments()" @click="showModal = true">
-				<template #prefix>
-					<Plus class="h-4 w-4" />
-				</template>
-				{{ __('Add') }}
-			</Button>
 		</div>
-		<div v-if="assessments.data?.length" class="text-sm">
+		<div v-if="assessments.data?.length">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
 				row-key="name"
 				:options="{
+					selectable: false,
 					showTooltip: false,
-					getRowRoute: (row) => getRowRoute(row),
+					getRowRoute: (row) => {
-					selectable: user.data?.is_student ? false : true,
+						if (row.submission) {
+							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-surface-gray-2 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'">
-									{{ getAssessmentTypeLabel(row[column.key]) }}
-								</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-ink-gray-5">
+		<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 {
+import { ListView, createResource } from 'frappe-ui'
-	ListView,
+import { inject } from 'vue'
-	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 readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -131,122 +74,25 @@ 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 if (row.assessment_type == 'LMS Programming Exercise') {
-		if (row.submission) {
-			return {
-				name: 'ProgrammingExerciseSubmission',
-				params: {
-					exerciseID: row.assessment_name,
-					submissionID: row.submission.name,
-				},
-			}
-		} else {
-			return {
-				name: 'ProgrammingExerciseSubmission',
-				params: {
-					exerciseID: row.assessment_name,
-					submissionID: 'new',
-				},
-			}
-		}
-	} else {
-		return {
-			name: 'QuizPage',
-			params: {
-				quizID: row.assessment_name,
-			},
-		}
-	}
-}
-
-const canAddAssessments = () => {
-	if (readOnlyMode) return false
-	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/Percentage',
+			label: 'Status/Score',
 			key: 'status',
-			align: 'left',
+			align: 'center',
-			width: '10rem',
 		})
 	}
 	return columns
 }
-
-const getStatusTheme = (status) => {
-	if (status === 'Pass' || status === 'Passed') {
-		return 'green'
-	} else if (status === 'Not Graded') {
-		return 'orange'
-	} else {
-		return 'red'
-	}
-}
-
-const getAssessmentTypeLabel = (type) => {
-	if (type == 'LMS Assignment') {
-		return __('Assignment')
-	} else if (type == 'LMS Quiz') {
-		return __('Quiz')
-	} else if (type == 'LMS Programming Exercise') {
-		return __('Programming Exercise')
-	}
-}
 </script>

frontend/src/components/Assignment.vue

@@ -1,477 +0,0 @@
-<template>
-	<div
-		v-if="assignment.data"
-		class="grid grid-cols-2 h-full"
-		:class="{ 'border rounded-lg overflow-auto': !showTitle }"
-	>
-		<div
-			class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
-			:class="{ 'h-full': !showTitle }"
-		>
-			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
-				<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-ink-gray-7 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-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 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 text-ink-gray-9">
-						{{ __('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-surface-blue-2 text-ink-blue-2 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-ink-gray-5 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 text-ink-gray-7">
-							<div class="border self-start rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5" />
-							</div>
-							<a
-								:href="submissionFile.file_url"
-								target="_blank"
-								class="flex flex-col cursor-pointer !no-underline"
-							>
-								<span class="text-sm leading-5">
-									{{ submissionFile.file_name }}
-								</span>
-								<span class="text-sm text-ink-gray-5 mt-1">
-									{{ getFileSize(submissionFile.file_size) }}
-								</span>
-							</a>
-							<X
-								v-if="canModifyAssignment"
-								@click="removeSubmission()"
-								class="bg-surface-gray-3 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-ink-gray-5 mb-1">
-						{{ __('Enter a URL') }}
-					</div>
-					<FormControl
-						v-model="answer"
-						type="text"
-						:readonly="!canModifyAssignment"
-					/>
-				</div>
-				<div v-else>
-					<div class="text-sm mb-2 text-ink-gray-7">
-						{{ __('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-surface-gray-2 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-surface-blue-2 rounded-md"
-				>
-					<div class="text-sm text-ink-gray-5 font-medium mb-2">
-						{{ __('Comments by Evaluator') }}:
-					</div>
-					<div
-						class="leading-5 text-ink-gray-9"
-						v-html="submissionResource.doc.comments"
-					></div>
-				</div>
-
-				<!-- Grading -->
-				<div v-if="canGradeSubmission" class="mt-8 space-y-4">
-					<div class="font-semibold mb-2 text-ink-gray-9">
-						{{ __('Grading') }}
-					</div>
-					<FormControl
-						v-if="submissionResource.doc"
-						v-model="submissionResource.doc.status"
-						:label="__('Grade')"
-						type="select"
-						:options="submissionStatusOptions"
-					/>
-					<div>
-						<div class="text-sm text-ink-gray-5 mb-1">
-							{{ __('Comments') }}
-						</div>
-						<TextEditor
-							:content="comments"
-							@change="
-								(val) => {
-									comments = val
-									isDirty = true
-								}
-							"
-							:editable="true"
-							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import {
-	Badge,
-	Button,
-	call,
-	createResource,
-	createDocumentResource,
-	FileUploader,
-	FormControl,
-	TextEditor,
-	toast,
-} from 'frappe-ui'
-import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
-import { FileText, X } from 'lucide-vue-next'
-import { getFileSize } from '@/utils'
-import { useRouter } from 'vue-router'
-
-const submissionFile = ref(null)
-const answer = ref(null)
-const comments = ref(null)
-const router = useRouter()
-const user = inject('$user')
-const isDirty = ref(false)
-
-const props = defineProps({
-	assignmentID: {
-		type: String,
-		required: true,
-	},
-	submissionName: {
-		type: String,
-		default: 'new',
-	},
-	showTitle: {
-		type: Boolean,
-		default: true,
-	},
-})
-
-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) {
-		toast.error(err.messages?.[0] || err)
-	},
-	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.doc.comments) {
-			comments.value = submissionResource.doc.comments
-		}
-		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,
-				assignment_attachment: submissionFile.value?.file_url,
-				evaluator: evaluator,
-				comments: comments.value,
-				answer: answer.value,
-			},
-			{
-				onSuccess(data) {
-					toast.success(__('Changes saved successfully'))
-				},
-			}
-		)
-	} else {
-		addNewSubmission()
-	}
-}
-
-const addNewSubmission = () => {
-	newSubmission.submit(
-		{},
-		{
-			onSuccess(data) {
-				toast.success(__('Assignment submitted successfully'))
-				if (router.currentRoute.value.name == 'AssignmentSubmission') {
-					router.push({
-						name: 'AssignmentSubmission',
-						params: {
-							assignmentID: props.assignmentID,
-							submissionName: data.name,
-						},
-						query: { fromLesson: router.currentRoute.value.query.fromLesson },
-					})
-				} else {
-					markLessonProgress()
-					router.go()
-				}
-				submissionResource.name = data.name
-				submissionResource.reload()
-			},
-			onError(err) {
-				toast.error(err.messages?.[0] || err)
-			},
-		}
-	)
-}
-
-const saveSubmission = (file) => {
-	isDirty.value = true
-	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 = () => {
-	isDirty.value = true
-	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/AudioBlock.vue

@@ -9,8 +9,8 @@
 		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
-					<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />
+					<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
-					<Pause v-else class="w-4 h-4 text-ink-gray-9" />
+					<Pause v-else class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
 			<input
@@ -22,13 +22,13 @@
 				@input="changeCurrentTime"
 				class="duration-slider w-full h-1"
 			/>
-			<span class="text-xs text-ink-gray-9 font-medium">
+			<span class="text-xs text-gray-900 font-medium">
 				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
 			</span>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!isMuted" class="w-4 h-4 text-ink-gray-9" />
+					<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
-					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
 		</div>
@@ -56,6 +56,7 @@ 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/BatchCard.vue

@@ -1,52 +1,50 @@
 <template>
 	<div
-		class="flex flex-col border hover:border-outline-gray-3 rounded-md p-4 h-full"
+		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
-		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
+		<div class="text-lg leading-5 font-semibold mb-2">
 			{{ batch.title }}
 		</div>
-		<div
+		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
-			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
+			theme="green"
+			class="self-start mb-2"
 		>
 			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">
+			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
-				{{ __('Seats Left') }}
+			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
-			</span>
+		</Badge>
-			<span v-else-if="batch.seats_left == 1">
+		<Badge
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
+			theme="red"
+			class="self-start mb-2"
 		>
 			{{ __('Sold Out') }}
-		</div>
+		</Badge>
-		<div class="short-introduction text-sm text-ink-gray-7">
+		<div class="short-introduction text-sm text-gray-700">
 			{{ batch.description }}
 		</div>
-		<div v-if="batch.amount" class="font-semibold text-ink-gray-9 mb-4">
+		<div v-if="batch.amount" class="font-semibold mb-4">
 			{{ batch.price }}
 		</div>
 		<div class="flex flex-col space-y-2 mt-auto">
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="text-sm text-ink-gray-7"
+				class="text-sm text-gray-700"
 			/>
-			<div class="flex items-center text-sm text-ink-gray-7">
+			<div class="flex items-center text-sm text-gray-700">
-				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-7" />
+				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
 			<div
 				v-if="batch.timezone"
-				class="flex items-center text-sm text-ink-gray-7"
+				class="flex items-center text-sm text-gray-700"
 			>
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-5" />
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
 				<span>
 					{{ batch.timezone }}
 				</span>
@@ -70,8 +68,9 @@
 	</div>
 </template>
 <script setup>
-import { formatTime } from '@/utils'
+import { Badge } from 'frappe-ui'
-import { Clock, Globe } from 'lucide-vue-next'
+import { formatTime } from '../utils'
+import { Clock, BookOpen, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'

frontend/src/components/BatchCourses.vue

@@ -1,14 +1,18 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold text-ink-gray-9">
+			<div class="text-xl font-semibold">
 				{{ __('Courses') }}
 			</div>
-			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
+			<Button
+				v-if="user.data?.is_moderator"
+				variant="solid"
+				@click="openCourseModal()"
+			>
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
-				{{ __('Add') }}
+				{{ __('Add Course') }}
 			</Button>
 		</div>
 		<div v-if="courses.data?.length">
@@ -18,7 +22,6 @@
 				row-key="batch_course"
 				:options="{
 					showTooltip: false,
-					selectable: user.data?.is_student ? false : true,
 					getRowRoute: (row) => ({
 						name: 'CourseDetail',
 						params: { courseName: row.name },
@@ -26,7 +29,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getCoursesColumns()">
 						<template #prefix="{ item }">
@@ -63,9 +66,6 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-		<div v-else class="text-sm italic text-ink-gray-5">
-			{{ __('No courses added') }}
-		</div>
 		<BatchCourseModal
 			v-model="showCourseModal"
 			:batch="batch"
@@ -86,10 +86,8 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	toast,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
-const readOnlyMode = window.read_only_mode
 
 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -106,6 +104,7 @@ const courses = createResource({
 	params: {
 		batch: props.batch,
 	},
+	cache: ['batchCourses', props.batchName],
 	auto: true,
 })
 
@@ -122,46 +121,34 @@ const getCoursesColumns = () => {
 		},
 		{
 			label: 'Lessons',
-			key: 'lessons',
+			key: 'lesson_count',
 			align: 'right',
 		},
 		{
 			label: 'Enrollments',
 			align: 'right',
-			key: 'enrollments',
+			key: 'enrollment_count',
 		},
 	]
 }
 
-const deleteCourses = createResource({
+const removeCourse = createResource({
-	url: 'lms.lms.api.delete_documents',
+	url: 'frappe.client.delete',
 	makeParams(values) {
 		return {
 			doctype: 'Batch Course',
-			documents: values.courses,
+			name: values.course,
 		}
 	},
 })
 
 const removeCourses = (selections, unselectAll) => {
-	deleteCourses.submit(
+	selections.forEach(async (course) => {
-		{
+		removeCourse.submit({ course })
-			courses: Array.from(selections),
+	})
-		},
+	setTimeout(() => {
-		{
+		courses.reload()
-			onSuccess(data) {
+		unselectAll()
-				courses.reload()
+	}, 1000)
-				toast.success(__('Courses deleted successfully'))
-				unselectAll()
-			},
-		}
-	)
-}
-
-const canSeeAddButton = () => {
-	if (readOnlyMode) {
-		return false
-	}
-	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>

frontend/src/components/BatchDashboard.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="space-y-10">
+	<div>
 		<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>

frontend/src/components/BatchFeedback.vue

@@ -1,172 +0,0 @@
-<template>
-	<div v-if="user.data?.is_student">
-		<div>
-			<div class="leading-5 mb-4">
-				<div v-if="readOnly">
-					{{ __('Thank you for providing your feedback.') }}
-					<span
-						@click="showFeedbackForm = !showFeedbackForm"
-						class="underline cursor-pointer"
-						>{{ __('Click here') }}</span
-					>
-					{{ __('to view your feedback.') }}
-				</div>
-				<div v-else>
-					{{ __('Help us improve by providing your feedback.') }}
-				</div>
-			</div>
-			<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
-				<div class="space-y-4">
-					<Rating
-						v-for="key in ratingKeys"
-						v-model="feedback[key]"
-						:label="__(convertToTitleCase(key))"
-						:readonly="readOnly"
-					/>
-				</div>
-				<FormControl
-					v-model="feedback.feedback"
-					type="textarea"
-					:label="__('Feedback')"
-					:rows="9"
-					:readonly="readOnly"
-				/>
-				<Button v-if="!readOnly" @click="submitFeedback">
-					{{ __('Submit Feedback') }}
-				</Button>
-			</div>
-		</div>
-	</div>
-
-	<div v-else-if="feedbackList.data?.length">
-		<div class="leading-5 text-sm mb-2 mt-5">
-			{{ __('Average Feedback Received') }}
-		</div>
-
-		<div class="space-y-4">
-			<Rating
-				v-for="key in ratingKeys"
-				v-model="average[key]"
-				:label="__(convertToTitleCase(key))"
-				:readonly="true"
-			/>
-		</div>
-
-		<Button variant="outline" class="mt-5" @click="showAllFeedback = true">
-			{{ __('View all feedback') }}
-		</Button>
-	</div>
-	<div v-else class="text-ink-gray-7 mt-5 leading-5">
-		{{ __('No feedback received yet.') }}
-	</div>
-	<FeedbackModal
-		v-if="feedbackList.data?.length"
-		v-model="showAllFeedback"
-		:feedbackList="feedbackList.data"
-	/>
-</template>
-<script setup>
-import { inject, onMounted, reactive, ref, watch } from 'vue'
-import { convertToTitleCase } from '@/utils'
-import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
-import FeedbackModal from '@/components/Modals/FeedbackModal.vue'
-
-const user = inject('$user')
-const ratingKeys = ['content', 'instructors', 'value']
-const readOnly = ref(false)
-const average = reactive({})
-const feedback = reactive({})
-const showFeedbackForm = ref(true)
-const showAllFeedback = ref(false)
-
-const props = defineProps({
-	batch: {
-		type: String,
-		required: true,
-	},
-})
-
-onMounted(() => {
-	let filters = {
-		batch: props.batch,
-	}
-	if (user.data?.is_student) {
-		filters['member'] = user.data?.name
-	}
-	feedbackList.update({
-		filters: filters,
-	})
-	feedbackList.reload()
-})
-
-const feedbackList = createListResource({
-	doctype: 'LMS Batch Feedback',
-	filters: {
-		batch: props.batch,
-	},
-	fields: [
-		'content',
-		'instructors',
-		'value',
-		'feedback',
-		'name',
-		'member',
-		'member_name',
-		'member_image',
-	],
-	cache: ['feedbackList', props.batch, user.data?.name],
-})
-
-watch(
-	() => feedbackList.data,
-	() => {
-		if (feedbackList.data.length) {
-			let data = feedbackList.data
-			readOnly.value = true
-			showFeedbackForm.value = false
-
-			ratingKeys.forEach((key) => {
-				average[key] = 0
-			})
-
-			data.forEach((row) => {
-				Object.keys(row).forEach((key) => {
-					if (ratingKeys.includes(key)) row[key] = row[key] * 5
-					feedback[key] = row[key]
-				})
-				ratingKeys.forEach((key) => {
-					average[key] += row[key]
-				})
-			})
-			Object.keys(average).forEach((key) => {
-				average[key] = average[key] / data.length
-			})
-		}
-	}
-)
-
-const submitFeedback = () => {
-	ratingKeys.forEach((key) => {
-		feedback[key] = feedback[key] / 5
-	})
-	feedbackList.insert.submit(
-		{
-			member: user.data?.name,
-			batch: props.batch,
-			...feedback,
-		},
-		{
-			onSuccess: () => {
-				feedbackList.reload()
-				showFeedbackForm.value = false
-			},
-		}
-	)
-}
-</script>
-<style>
-.feedback-list > button > div {
-	align-items: start;
-	padding: 0.15rem 0;
-}
-</style>

frontend/src/components/BatchOverlay.vue

@@ -1,39 +1,25 @@
 <template>
-	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
+	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
-		<div
+		<Badge
 			v-if="batch.data.seat_count && seats_left > 0"
-			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
+			theme="green"
-			:class="
+			class="self-start mb-2 float-right"
-				batch.data.amount || batch.data.courses.length
-					? 'float-right'
-					: 'w-fit mb-4'
-			"
 		>
-			{{ seats_left }}
+			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
-			<span v-if="seats_left > 1">
+			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
-				{{ __('Seats Left') }}
+		</Badge>
-			</span>
+		<Badge
-			<span v-else-if="seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
 			v-else-if="batch.data.seat_count && seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
+			theme="red"
+			class="self-start mb-2 float-right"
 		>
 			{{ __('Sold Out') }}
-		</div>
+		</Badge>
-		<div
+		<div v-if="batch.data.amount" class="text-lg font-semibold mb-3">
-			v-if="batch.data.amount"
-			class="text-lg font-semibold mb-3 text-ink-gray-9"
-		>
 			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
 		</div>
-		<div
+		<div class="flex items-center mb-3">
-			v-if="batch.data.courses.length"
+			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
-			class="flex items-center mb-3 text-ink-gray-7"
-		>
-			<BookOpen class="h-4 w-4 stroke-1.5 mr-2" />
 			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 		</div>
 		<DateRange
@@ -41,118 +27,82 @@
 			:endDate="batch.data.end_date"
 			class="mb-3"
 		/>
-		<div class="flex items-center mb-3 text-ink-gray-7">
+		<div class="flex items-center mb-3">
-			<Clock class="h-4 w-4 stroke-1.5 mr-2" />
+			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
 				{{ formatTime(batch.data.start_time) }} -
 				{{ formatTime(batch.data.end_time) }}
 			</span>
 		</div>
-		<div v-if="batch.data.timezone" class="flex items-center text-ink-gray-7">
+		<div v-if="batch.data.timezone" class="flex items-center">
-			<Globe class="h-4 w-4 stroke-1.5 mr-2" />
+			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
 				{{ batch.data.timezone }}
 			</span>
 		</div>
-		<div v-if="!readOnlyMode">
+		<router-link
-			<router-link
+			v-if="isModerator || isStudent"
-				v-if="isModerator || isStudent"
+			:to="{
-				:to="{
+				name: 'Batch',
-					name: 'Batch',
+				params: {
-					params: {
+					batchName: batch.data.name,
-						batchName: batch.data.name,
+				},
-					},
+			}"
-				}"
+		>
-			>
+			<Button variant="solid" class="w-full mt-4">
-				<Button variant="solid" class="w-full mt-4">
+				<span>
-					<template #prefix>
+					{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
-						<Settings v-if="isModerator" class="size-4 stroke-1.5" />
+				</span>
-						<LogIn v-else class="size-4 stroke-1.5" />
-					</template>
-					<span>
-						{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
-					</span>
-				</Button>
-			</router-link>
-			<router-link
-				:to="{
-					name: 'Billing',
-					params: {
-						type: 'batch',
-						name: batch.data.name,
-					},
-				}"
-				v-else-if="
-					batch.data.paid_batch &&
-					batch.data.seats_left > 0 &&
-					batch.data.accept_enrollments
-				"
-			>
-				<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
-					<template #prefix>
-						<CreditCard class="size-4 stroke-1.5" />
-					</template>
-					<span>
-						{{ __('Register Now') }}
-					</span>
-				</Button>
-			</router-link>
-			<Button
-				variant="solid"
-				class="w-full mt-2"
-				v-else-if="
-					batch.data.allow_self_enrollment &&
-					batch.data.seats_left &&
-					batch.data.accept_enrollments
-				"
-				@click="enrollInBatch()"
-			>
-				<template #prefix>
-					<GraduationCap class="size-4 stroke-1.5" />
-				</template>
-				{{ __('Enroll Now') }}
 			</Button>
-			<router-link
+		</router-link>
-				v-if="isModerator"
+		<router-link
-				:to="{
+			:to="{
-					name: 'BatchForm',
+				name: 'Billing',
-					params: {
+				params: {
-						batchName: batch.data.name,
+					type: 'batch',
-					},
+					name: batch.data.name,
-				}"
+				},
-			>
+			}"
-				<Button class="w-full mt-2">
+			v-else-if="batch.data.paid_batch && batch.data.seats_left"
-					<template #prefix>
+		>
-						<Pencil class="size-4 stroke-1.5" />
+			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
-					</template>
+				<span>
-					<span>
+					{{ __('Register Now') }}
-						{{ __('Edit') }}
+				</span>
-					</span>
+			</Button>
-				</Button>
+		</router-link>
-			</router-link>
+		<Button
-		</div>
+			variant="solid"
+			class="w-full mt-2"
+			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+		>
+			{{ __('Enroll Now') }}
+		</Button>
+		<router-link
+			v-if="isModerator"
+			:to="{
+				name: 'BatchForm',
+				params: {
+					batchName: batch.data.name,
+				},
+			}"
+		>
+			<Button class="w-full mt-2">
+				<span>
+					{{ __('Edit') }}
+				</span>
+			</Button>
+		</router-link>
 	</div>
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Button, createResource, toast } from 'frappe-ui'
+import { Badge, Button } from 'frappe-ui'
-import {
+import { BookOpen, Clock, Globe } from 'lucide-vue-next'
-	BookOpen,
-	Clock,
-	CreditCard,
-	Globe,
-	GraduationCap,
-	LogIn,
-	Pencil,
-	Settings,
-} from 'lucide-vue-next'
 import { formatNumberIntoCurrency, formatTime } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
-import { useRouter } from 'vue-router'
 
-const router = useRouter()
 const user = inject('$user')
-const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -161,35 +111,6 @@ 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) {
-				toast.success(__('You have been enrolled in this batch'))
-				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,179 +1,80 @@
 <template>
-	<div v-if="batch.data" class="">
+	<Button class="float-right mb-3" variant="solid" @click="openStudentModal()">
-		<div class="w-full flex items-center justify-between pb-4">
+		<template #prefix>
-			<div class="font-medium text-ink-gray-7">
+			<Plus class="h-4 w-4" />
-				{{ __('Statistics') }}
+		</template>
-			</div>
+		{{ __('Add Student') }}
-		</div>
+	</Button>
-		<div class="grid grid-cols-4 gap-5 mb-8">
+	<div class="text-lg font-semibold mb-4">
-			<NumberChart
+		{{ __('Students') }}
-				class="border rounded-md"
-				:config="{ title: __('Students'), value: students.data?.length || 0 }"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{
-					title: __('Certified'),
-					value: certificationCount.data || 0,
-				}"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{
-					title: __('Courses'),
-					value: batch.data.courses?.length || 0,
-				}"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
-			/>
-		</div>
-
-		<AxisChart
-			v-if="showProgressChart"
-			:config="{
-				data: chartData,
-				title: __('Batch Summary'),
-				subtitle: __('Progress of students in courses and assessments'),
-				xAxis: {
-					key: 'task',
-					title: 'Tasks',
-					type: 'category',
-				},
-				yAxis: {
-					title: __('Number of Students'),
-					echartOptions: {
-						minInterval: 1,
-					},
-				},
-				swapXY: true,
-				series: [
-					{
-						name: 'value',
-						type: 'bar',
-					},
-				],
-			}"
-		/>
 	</div>
-
+	<div v-if="students.data?.length">
-	<div>
+		<ListView
-		<div class="flex items-center justify-between mb-4">
+			:columns="getStudentColumns()"
-			<div class="text-ink-gray-7 font-medium">
+			:rows="students.data"
-				{{ __('Students') }}
+			row-key="name"
-			</div>
+			:options="{ showTooltip: false }"
-			<Button v-if="!readOnlyMode" @click="openStudentModal()">
+		>
-				<template #prefix>
+			<ListHeader
-					<Plus class="h-4 w-4" />
+				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
-				</template>
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div v-if="students.data?.length">
-			<ListView
-				:columns="getStudentColumns()"
-				:rows="students.data"
-				row-key="name"
-				:options="{
-					showTooltip: false,
-				}"
 			>
-				<ListHeader
+				<ListHeaderItem :item="item" v-for="item in getStudentColumns()">
-					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					<template #prefix="{ item }">
-				>
+						<component
-					<ListHeaderItem
+							v-if="item.icon"
-						:item="item"
+							:is="item.icon"
-						v-for="item in getStudentColumns()"
+							class="h-4 w-4 stroke-1.5 ml-4"
-						:title="item.label"
+						/>
-					>
-						<template #prefix="{ item }">
-							<FeatherIcon
-								v-if="item.icon"
-								:name="item.icon"
-								class="h-4 w-4 stroke-1.5"
-							/>
-						</template>
-					</ListHeaderItem>
-				</ListHeader>
-				<ListRows>
-					<ListRow
-						:row="row"
-						v-for="row in students.data"
-						class="group cursor-pointer"
-						@click="openStudentProgressModal(row)"
-					>
-						<template #default="{ column, item }">
-							<ListRowItem
-								:item="row[column.key]"
-								:align="column.align"
-								class="text-sm"
-							>
-								<template #prefix>
-									<div v-if="column.key == 'full_name'">
-										<Avatar
-											class="flex items-center"
-											:image="row['user_image']"
-											:label="item"
-											size="sm"
-										/>
-									</div>
-								</template>
-								<div
-									v-if="column.key == 'progress'"
-									class="flex items-center space-x-4 w-full"
-								>
-									<ProgressBar :progress="row[column.key]" size="sm" />
-									<div class="text-xs">{{ row[column.key] }}%</div>
-								</div>
-								<div v-else>
-									{{ row[column.key] }}
-								</div>
-							</ListRowItem>
-						</template>
-					</ListRow>
-				</ListRows>
-				<ListSelectBanner>
-					<template #actions="{ unselectAll, selections }">
-						<div class="flex gap-2">
-							<Button
-								variant="ghost"
-								@click="removeStudents(selections, unselectAll)"
-							>
-								<Trash2 class="h-4 w-4 stroke-1.5" />
-							</Button>
-						</div>
 					</template>
-				</ListSelectBanner>
+				</ListHeaderItem>
-			</ListView>
+			</ListHeader>
-		</div>
+			<ListRows>
-		<div v-else class="text-sm italic text-ink-gray-5">
+				<ListRow :row="row" v-for="row in students.data">
-			{{ __('There are no students in this batch.') }}
+					<template #default="{ column, item }">
-		</div>
+						<ListRowItem :item="row[column.key]" :align="column.align">
+							<template #prefix>
+								<div v-if="column.key == 'full_name'">
+									<Avatar
+										class="flex items-center"
+										:image="row['user_image']"
+										:label="item"
+										size="sm"
+									/>
+								</div>
+							</template>
+							<div>
+								{{ row[column.key] }}
+							</div>
+						</ListRowItem>
+					</template>
+				</ListRow>
+			</ListRows>
+			<ListSelectBanner>
+				<template #actions="{ unselectAll, selections }">
+					<div class="flex gap-2">
+						<Button
+							variant="ghost"
+							@click="removeStudents(selections, unselectAll)"
+						>
+							<Trash2 class="h-4 w-4 stroke-1.5" />
+						</Button>
+					</div>
+				</template>
+			</ListSelectBanner>
+		</ListView>
+	</div>
+	<div v-else class="text-sm italic text-gray-600">
+		{{ __('There are no students in this batch.') }}
 	</div>
-
 	<StudentModal
-		:batch="props.batch.data.name"
+		:batch="props.batch"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
-		v-model:batchModal="props.batch"
-	/>
-	<BatchStudentProgress
-		:student="selectedStudent"
-		v-model="showStudentProgressModal"
 	/>
 </template>
 <script setup>
 import {
-	Avatar,
-	AxisChart,
-	Button,
 	createResource,
-	FeatherIcon,
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
@@ -181,174 +82,76 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	NumberChart,
+	Avatar,
-	toast,
+	Button,
 } from 'frappe-ui'
-import {
+import { Trash2, Plus } from 'lucide-vue-next'
-	BookOpen,
+import { ref } from 'vue'
-	GraduationCap,
-	Plus,
-	ShieldCheck,
-	Trash2,
-	User,
-} from 'lucide-vue-next'
-import { ref, watch } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
-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 showProgressChart = ref(false)
-const assessmentCount = ref(0)
-const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
-		type: Object,
+		type: String,
 		default: null,
 	},
 })
 
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
+	cache: ['students', props.batch],
 	params: {
-		batch: props.batch?.data?.name,
+		batch: props.batch,
 	},
 	auto: true,
-	onSuccess(data) {
-		chartData.value = getChartData()
-		showProgressChart.value =
-			data.length &&
-			(props.batch?.data?.courses?.length || assessmentCount.value)
-	},
 })
 
 const getStudentColumns = () => {
-	let columns = [
+	return [
 		{
 			label: 'Full Name',
 			key: 'full_name',
-			width: '20rem',
+			width: 2,
-			icon: 'user',
 		},
 		{
-			label: 'Progress',
+			label: 'Courses Done',
-			key: 'progress',
+			key: 'courses_completed',
-			width: '15rem',
+			align: 'center',
-			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 openStudentProgressModal = (row) => {
+const removeStudent = createResource({
-	showStudentProgressModal.value = true
+	url: 'frappe.client.delete',
-	selectedStudent.value = row
-}
-
-const deleteStudents = createResource({
-	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
-			doctype: 'LMS Batch Enrollment',
+			doctype: 'Batch Student',
-			documents: values.students,
+			name: values.student,
 		}
 	},
 })
 
 const removeStudents = (selections, unselectAll) => {
-	deleteStudents.submit(
+	selections.forEach(async (student) => {
-		{
+		removeStudent.submit({ student })
-			students: Array.from(selections),
-		},
-		{
-			onSuccess(data) {
-				students.reload()
-				props.batch.reload()
-				toast.success(__('Students deleted successfully'))
-				unselectAll()
-			},
-		}
-	)
-}
-
-const getChartData = () => {
-	let tasks = []
-	let data = []
-
-	students.data.forEach((row) => {
-		tasks = countAssessments(row, tasks)
-		tasks = countCourses(row, tasks)
 	})
-
+	setTimeout(() => {
-	tasks.forEach((task) => {
+		students.reload()
-		data.push({
+		unselectAll()
-			task: task.label,
+	}, 500)
-			value: task.value,
-		})
-	})
-	return data
 }
-
-const countAssessments = (row, tasks) => {
-	Object.keys(row.assessments).forEach((assessment) => {
-		if (row.assessments[assessment].result === 'Pass') {
-			tasks.filter((task) => task.label === assessment).length
-				? tasks.filter((task) => task.label === assessment)[0].value++
-				: tasks.push({
-						value: 1,
-						label: assessment,
-				  })
-		}
-	})
-	return tasks
-}
-
-const countCourses = (row, tasks) => {
-	Object.keys(row.courses).forEach((course) => {
-		if (row.courses[course] === 100) {
-			tasks.filter((task) => task.label === course).length
-				? tasks.filter((task) => task.label === course)[0].value++
-				: tasks.push({
-						value: 1,
-						label: course,
-				  })
-		}
-	})
-	return tasks
-}
-
-watch(students, () => {
-	if (students.data?.length) {
-		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
-	}
-})
-
-const certificationCount = createResource({
-	url: 'frappe.client.get_count',
-	params: {
-		doctype: 'LMS Certificate',
-		filters: {
-			batch_name: props.batch?.data?.name,
-		},
-	},
-	auto: true,
-})
 </script>

frontend/src/components/CertificationLinks.vue

@@ -1,85 +0,0 @@
-<template>
-	<Button
-		v-if="certification.data && certification.data.certificate"
-		@click="downloadCertificate"
-		class=""
-	>
-		<template #prefix>
-			<GraduationCap class="size-4 stroke-1.5" />
-		</template>
-		{{ __('View Certificate') }}
-	</Button>
-	<div
-		v-else-if="
-			certification.data &&
-			certification.data.membership &&
-			certification.data.paid_certificate &&
-			user.data?.is_student
-		"
-	>
-		<router-link
-			v-if="!certification.data.membership.purchased_certificate"
-			:to="{
-				name: 'Billing',
-				params: {
-					type: 'certificate',
-					name: courseName,
-				},
-			}"
-		>
-			<Button class="w-full">
-				<template #prefix>
-					<GraduationCap class="size-4 stroke-1.5" />
-				</template>
-				{{ __('Get Certified') }}
-			</Button>
-		</router-link>
-		<router-link
-			v-else-if="!certification.data.membership.certificate"
-			:to="{
-				name: 'CourseCertification',
-				params: {
-					courseName: courseName,
-				},
-			}"
-		>
-			<Button class="w-full">
-				<template #prefix>
-					<GraduationCap class="size-4 stroke-1.5" />
-				</template>
-				{{ __('Get Certified') }}
-			</Button>
-		</router-link>
-	</div>
-</template>
-<script setup>
-import { Button, createResource } from 'frappe-ui'
-import { inject } from 'vue'
-import { GraduationCap } from 'lucide-vue-next'
-
-const user = inject('$user')
-
-const props = defineProps({
-	courseName: {
-		type: String,
-		required: true,
-	},
-})
-
-const certification = createResource({
-	url: 'lms.lms.api.get_certification_details',
-	params: {
-		course: props.courseName,
-	},
-	auto: user.data ? true : false,
-	cache: ['certificationData', user.data?.name],
-})
-
-const downloadCertificate = () => {
-	window.open(
-		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
-			certification.data.certificate.name
-		}&format=${encodeURIComponent(certification.data.certificate.template)}`
-	)
-}
-</script>

frontend/src/components/Common/DateRange.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="flex items-center text-ink-gray-7">
+	<div class="flex items-center">
-		<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
+		<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 		<span>
 			{{ getFormattedDateRange(props.startDate, props.endDate) }}
 		</span>

frontend/src/components/Controls/Autocomplete.vue

@@ -1,140 +1,124 @@
 <template>
-	<div>
+	<Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
-		<div v-if="label" class="text-xs text-ink-gray-5 mb-1">
+		<Popover class="w-full" v-model:show="showOptions">
-			{{ __(label) }}
+			<template #target="{ open: openPopover, togglePopover }">
-			<span class="text-ink-red-3" v-if="attrs.required">*</span>
+				<slot name="target" v-bind="{ open: openPopover, togglePopover }">
-		</div>
+					<div class="w-full">
-		<Combobox
+						<button
-			v-model="selectedValue"
+							class="flex w-full items-center justify-between focus:outline-none"
-			nullable
+							:class="inputClasses"
-			v-slot="{ open: isComboboxOpen }"
+							@click="() => togglePopover()"
-		>
+						>
-			<Popover class="w-full" v-model:show="showOptions">
+							<div class="flex items-center">
-				<template #target="{ open: openPopover, togglePopover }">
+								<slot name="prefix" />
-					<slot name="target" v-bind="{ open: openPopover, togglePopover }">
+								<span
-						<div class="w-full">
+									class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+									v-if="selectedValue"
+								>
+									{{ displayValue(selectedValue) }}
+								</span>
+								<span class="text-base leading-5 text-gray-500" v-else>
+									{{ placeholder || '' }}
+								</span>
+							</div>
+							<ChevronDown class="h-4 w-4 stroke-1.5" />
+						</button>
+					</div>
+				</slot>
+			</template>
+			<template #body="{ isOpen }">
+				<div v-show="isOpen">
+					<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+						<div class="relative px-1.5 pt-0.5">
+							<ComboboxInput
+								ref="search"
+								class="form-input w-full"
+								type="text"
+								@change="
+									(e) => {
+										query = e.target.value
+									}
+								"
+								:value="query"
+								autocomplete="off"
+								placeholder="Search"
+							/>
 							<button
-								class="flex w-full items-center justify-between focus:outline-none"
+								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-								:class="inputClasses"
+								@click="selectedValue = null"
-								@click="() => togglePopover()"
-								:disabled="attrs.readonly"
 							>
-								<div class="flex items-center">
+								<X class="h-4 w-4 stroke-1.5" />
-									<slot name="prefix" />
-									<span
-										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-										v-if="selectedValue"
-									>
-										{{ displayValue(selectedValue) }}
-									</span>
-									<span class="text-base leading-5 text-ink-gray-4" v-else>
-										{{ placeholder || '' }}
-									</span>
-								</div>
-								<ChevronDown class="h-4 w-4 stroke-1.5" />
 							</button>
 						</div>
-					</slot>
+						<ComboboxOptions
-				</template>
+							class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-				<template #body="{ isOpen }">
+							static
-					<div v-show="isOpen">
-						<div
-							class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
 						>
-							<div class="relative px-1.5 pt-0.5">
+							<div
-								<ComboboxInput
+								class="mt-1.5"
-									ref="search"
+								v-for="group in groups"
-									class="form-input w-full"
+								:key="group.key"
-									type="text"
+								v-show="group.items.length > 0"
-									@change="
-										(e) => {
-											query = e.target.value
-										}
-									"
-									:value="query"
-									autocomplete="off"
-									placeholder="Search"
-								/>
-								<button
-									class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-									@click="selectedValue = null"
-								>
-									<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
-								</button>
-							</div>
-							<ComboboxOptions
-								class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-								static
 							>
 								<div
-									class="mt-1.5"
+									v-if="group.group && !group.hideLabel"
-									v-for="group in groups"
+									class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
-									:key="group.key"
-									v-show="group.items.length > 0"
 								>
-									<div
+									{{ group.group }}
-										v-if="group.group && !group.hideLabel"
-										class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
-									>
-										{{ group.group }}
-									</div>
-									<ComboboxOption
-										as="template"
-										v-for="option in group.items"
-										:key="option.value"
-										:value="option"
-										v-slot="{ active, selected }"
-									>
-										<li
-											:class="[
-												'flex items-center rounded px-2.5 py-2 text-base',
-												{ 'bg-surface-gray-2': active },
-											]"
-										>
-											<slot
-												name="item-prefix"
-												v-bind="{ active, selected, option }"
-											/>
-											<slot
-												name="item-label"
-												v-bind="{ active, selected, option }"
-											>
-												<div class="flex flex-col space-y-1 text-ink-gray-8">
-													<div>
-														{{ option.label }}
-													</div>
-													<div
-														v-if="
-															option.description &&
-															option.description != option.label
-														"
-														class="text-xs text-ink-gray-7"
-														v-html="option.description"
-													></div>
-												</div>
-											</slot>
-										</li>
-									</ComboboxOption>
 								</div>
-								<li
+								<ComboboxOption
-									v-if="groups.length == 0"
+									as="template"
-									class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+									v-for="option in group.items"
+									:key="option.value"
+									:value="option"
+									v-slot="{ active, selected }"
 								>
-									No results found
+									<li
-								</li>
+										:class="[
-							</ComboboxOptions>
+											'flex items-center rounded px-2.5 py-2 text-base',
-							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+											{ 'bg-gray-100': active },
-								<slot
+										]"
-									name="footer"
+									>
-									v-bind="{ value: search?.el._value, close }"
+										<slot
-								></slot>
+											name="item-prefix"
+											v-bind="{ active, selected, option }"
+										/>
+										<slot
+											name="item-label"
+											v-bind="{ active, selected, option }"
+										>
+											<div class="flex flex-col space-y-1">
+												<div>
+													{{ option.label }}
+												</div>
+												<div
+													v-if="option.label != option.description"
+													class="text-xs text-gray-700"
+													v-html="option.description"
+												></div>
+											</div>
+										</slot>
+									</li>
+								</ComboboxOption>
 							</div>
+							<li
+								v-if="groups.length == 0"
+								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
+							>
+								No results found
+							</li>
+						</ComboboxOptions>
+						<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+							<slot
+								name="footer"
+								v-bind="{ value: search?.el._value, close }"
+							></slot>
 						</div>
 					</div>
-				</template>
+				</div>
-			</Popover>
+			</template>
-		</Combobox>
+		</Popover>
-	</div>
+	</Combobox>
 </template>
 
 <script setup>
@@ -144,7 +128,7 @@ import {
 	ComboboxOptions,
 	ComboboxOption,
 } from '@headlessui/vue'
-import { Popover } from 'frappe-ui'
+import { Popover, Button } from 'frappe-ui'
 import { ChevronDown, X } from 'lucide-vue-next'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
@@ -161,10 +145,6 @@ const props = defineProps({
 		type: String,
 		default: 'md',
 	},
-	label: {
-		type: String,
-		default: '',
-	},
 	variant: {
 		type: String,
 		default: 'subtle',
@@ -263,7 +243,7 @@ watch(showOptions, (val) => {
 })
 
 const textColor = computed(() => {
-	return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
+	return props.disabled ? 'text-gray-600' : 'text-gray-800'
 })
 
 const inputClasses = computed(() => {
@@ -284,14 +264,12 @@ const inputClasses = computed(() => {
 	let variant = props.disabled ? 'disabled' : props.variant
 	let variantClasses = {
 		subtle:
-			'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+			'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
 		outline:
-			'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+			'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
 		disabled: [
-			'border bg-surface-menu-bar placeholder-ink-gray-3',
+			'border bg-gray-50 placeholder-gray-400',
-			props.variant === 'outline'
+			props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
-				? 'border-outline-gray-2'
-				: 'border-transparent',
 		],
 	}[variant]
 

frontend/src/components/Controls/ChildTable.vue

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

frontend/src/components/Controls/Code.vue

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

frontend/src/components/Controls/CodeEditor.vue

@@ -1,176 +0,0 @@
-<template>
-	<div
-		class="editor flex flex-col gap-1"
-		:style="{
-			height: height,
-		}"
-	>
-		<span class="text-xs text-ink-gray-7 mb-1" 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-ink-gray-5"
-			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 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 = ref(false)
-
-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(() => {
-	isDark.value = localStorage.getItem('theme') === 'dark'
-	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, () => {
-	console.log(isDark.value)
-	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>

frontend/src/components/Controls/ColorSwatches.vue

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

frontend/src/components/Controls/IconPicker.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1.5">
-		<label class="block text-xs text-ink-gray-5">
+		<label class="block text-xs text-gray-600">
 			{{ label }}
 		</label>
 		<div class="w-full">
@@ -8,22 +8,22 @@
 				<template #target="{ togglePopover }">
 					<button
 						@click="openPopover(togglePopover)"
-						class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
 					>
 						<component
 							v-if="selectedIcon"
-							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
+							class="w-4 h-4 text-gray-700 stroke-1.5"
 							:is="icons[selectedIcon]"
 						/>
 						<component
 							v-else
-							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
+							class="w-4 h-4 text-gray-700 stroke-1.5"
 							:is="icons.Folder"
 						/>
 						<span v-if="selectedIcon">
 							{{ selectedIcon }}
 						</span>
-						<span v-else class="text-ink-gray-5">
+						<span v-else class="text-gray-600">
 							{{ __('Choose an icon') }}
 						</span>
 					</button>
@@ -40,7 +40,7 @@
 							<div v-for="(iconComponent, iconName) in filteredIcons">
 								<component
 									:is="iconComponent"
-									class="h-4 w-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
 									@click="setIcon(iconName, close)"
 								/>
 							</div>

frontend/src/components/Controls/Link.vue

@@ -2,7 +2,6 @@
 	<div class="space-y-1.5">
 		<label class="block" :class="labelClasses" v-if="attrs.label">
 			{{ attrs.label }}
-			<span class="text-ink-red-3" v-if="attrs.required">*</span>
 		</label>
 		<Autocomplete
 			ref="autocomplete"
@@ -12,7 +11,6 @@
 			:variant="attrs.variant"
 			:placeholder="attrs.placeholder"
 			:filterable="false"
-			:readonly="attrs.readonly"
 		>
 			<template #target="{ open, togglePopover }">
 				<slot name="target" v-bind="{ open, togglePopover }" />
@@ -30,12 +28,12 @@
 				<slot name="item-label" v-bind="{ active, selected, option }" />
 			</template>
 
-			<template #footer="{ value, close }">
+			<template v-if="attrs.onCreate" #footer="{ value, close }">
-				<div v-if="attrs.onCreate">
+				<div>
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
-						:label="__('Create New')"
+						label="Create New"
 						@click="attrs.onCreate(value, close)"
 					>
 						<template #prefix>
@@ -43,21 +41,8 @@
 						</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-ink-gray-5">{{ description }}</p>
 	</div>
 </template>
 
@@ -65,7 +50,7 @@
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
-import { Plus, X } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
@@ -81,14 +66,12 @@ 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({
@@ -125,7 +108,6 @@ 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,
@@ -134,7 +116,7 @@ const options = createResource({
 	transform: (data) => {
 		return data.map((option) => {
 			return {
-				label: option.label || option.value,
+				label: option.value,
 				value: option.value,
 				description: option.description,
 			}
@@ -142,7 +124,7 @@ const options = createResource({
 	},
 })
 
-const reload = (val) => {
+function reload(val) {
 	options.update({
 		params: {
 			txt: val,
@@ -153,18 +135,13 @@ const reload = (val) => {
 	options.reload()
 }
 
-const clearValue = (close) => {
-	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
-	close()
-}
-
 const labelClasses = computed(() => {
 	return [
 		{
 			sm: 'text-xs',
 			md: 'text-base',
 		}[attrs.size || 'sm'],
-		'text-ink-gray-5',
+		'text-gray-600',
 	]
 })
 </script>

frontend/src/components/Controls/MultiSelect.vue

@@ -2,94 +2,77 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
-			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
-		<div class="w-full">
+		<div class="grid grid-cols-3 gap-1">
-			<Combobox v-model="selectedValue" nullable>
+			<Button
-				<Popover class="w-full" v-model:show="showOptions">
+				ref="emails"
-					<template #target="{ togglePopover }">
-						<ComboboxInput
-							ref="search"
-							class="search-input form-input w-full focus-visible:!ring-0"
-							type="text"
-							:value="query"
-							@change="
-								(e) => {
-									query = e.target.value
-									showOptions = true
-								}
-							"
-							autocomplete="off"
-							@focus="() => togglePopover()"
-							@keydown.delete.capture.stop="removeLastValue"
-						/>
-					</template>
-					<template #body="{ isOpen, close }">
-						<div v-show="isOpen">
-							<div
-								class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
-							>
-								<ComboboxOptions
-									class="my-1 min-h-[6rem] max-h-[12rem] overflow-y-auto px-1.5"
-									static
-								>
-									<ComboboxOption
-										v-for="option in options"
-										:key="option.value"
-										:value="option"
-										v-slot="{ active }"
-									>
-										<li
-											:class="[
-												'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-												{ 'bg-surface-gray-2': active },
-											]"
-										>
-											<div class="flex flex-col gap-1 p-1">
-												<div class="text-base font-medium text-ink-gray-8">
-													{{ option.description }}
-												</div>
-												<div class="text-sm text-ink-gray-5">
-													{{ option.value }}
-												</div>
-											</div>
-										</li>
-									</ComboboxOption>
-									<div class="h-10"></div>
-									<div
-										v-if="attrs.onCreate"
-										class="absolute bottom-2 left-1 w-[99%] pt-2 bg-white border-t"
-									>
-										<Button
-											variant="ghost"
-											class="w-full !justify-start"
-											:label="__('Create New')"
-											@click="attrs.onCreate(close)"
-										>
-											<template #prefix>
-												<Plus class="h-4 w-4 stroke-1.5" />
-											</template>
-										</Button>
-									</div>
-								</ComboboxOptions>
-							</div>
-						</div>
-					</template>
-				</Popover>
-			</Combobox>
-		</div>
-		<div v-if="values.length" class="grid grid-cols-2 gap-2 mt-1">
-			<div
 				v-for="value in values"
-				class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 word-wrap p-2 rounded-md mr-2"
+				:key="value"
+				:label="value"
+				theme="gray"
+				variant="subtle"
+				class="rounded-md"
+				@keydown.delete.capture.stop="removeLastValue"
 			>
-				<span class="break-all">
+				<template #suffix>
-					{{ value }}
+					<X @click="removeValue(value)" class="h-4 w-4 stroke-1.5" />
-				</span>
+				</template>
-				<X
+			</Button>
-					class="size-4 stroke-1.5 cursor-pointer"
+			<div class="">
-					@click="removeValue(value)"
+				<Combobox v-model="selectedValue" nullable>
-				/>
+					<Popover class="w-full" v-model:show="showOptions">
+						<template #target="{ togglePopover }">
+							<ComboboxInput
+								ref="search"
+								class="search-input form-input w-full focus-visible:!ring-0"
+								type="text"
+								:value="query"
+								@change="
+									(e) => {
+										query = e.target.value
+										showOptions = true
+									}
+								"
+								autocomplete="off"
+								@focus="() => togglePopover()"
+								@keydown.delete.capture.stop="removeLastValue"
+							/>
+						</template>
+						<template #body="{ isOpen }">
+							<div v-show="isOpen">
+								<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+									<ComboboxOptions
+										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+										static
+									>
+										<ComboboxOption
+											v-for="option in options"
+											:key="option.value"
+											:value="option"
+											v-slot="{ active }"
+										>
+											<li
+												:class="[
+													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+													{ 'bg-gray-100': active },
+												]"
+											>
+												<div class="flex flex-col gap-1 p-1">
+													<div class="text-base font-medium">
+														{{ option.description }}
+													</div>
+													<div class="text-sm text-gray-600">
+														{{ option.value }}
+													</div>
+												</div>
+											</li>
+										</ComboboxOption>
+									</ComboboxOptions>
+								</div>
+							</div>
+						</template>
+					</Popover>
+				</Combobox>
 			</div>
 		</div>
 		<!-- <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" /> -->
@@ -104,9 +87,9 @@ import {
 	ComboboxOption,
 } from '@headlessui/vue'
 import { createResource, Popover, Button } from 'frappe-ui'
-import { ref, computed, nextTick, useAttrs } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import { X, Plus } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
 
 const props = defineProps({
 	label: {
@@ -132,13 +115,10 @@ const props = defineProps({
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
-	required: {
-		type: Boolean,
-	},
 })
 
 const values = defineModel()
-const attrs = useAttrs()
+
 const emails = ref([])
 const search = ref(null)
 const error = ref(null)
@@ -172,11 +152,24 @@ 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(() => {
@@ -256,7 +249,7 @@ const labelClasses = computed(() => {
 			sm: 'text-xs',
 			md: 'text-base',
 		}[props.size || 'sm'],
-		'text-ink-gray-5',
+		'text-gray-600',
 	]
 })
 </script>

frontend/src/components/Controls/Rating.vue

@@ -1,27 +1,18 @@
 <template>
-	<div class="space-y-1">
+	<div class="flex text-center">
-		<label class="block text-xs text-ink-gray-5" v-if="props.label">
+		<div v-for="index in 5">
-			{{ props.label }}
+			<Star
-		</label>
+				:class="index <= rating ? 'fill-orange-500' : ''"
-		<div class="flex text-center">
+				class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
-			<div
+				@click="markRating(index)"
-				v-for="index in 5"
+			/>
-				@mouseover="hoveredRating = index"
-				@mouseleave="hoveredRating = 0"
-			>
-				<Star
-					class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
-					:class="iconClasses(index)"
-					@click="markRating(index)"
-				/>
-			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import { Star } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
 	id: {
@@ -32,36 +23,10 @@ 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'])
-const rating = ref(props.modelValue)
+let rating = ref(props.modelValue)
-const hoveredRating = ref(0)
 
 let emitChange = (value) => {
 	emit('update:modelValue', value)
@@ -71,11 +36,4 @@ function markRating(index) {
 	emitChange(index)
 	rating.value = index
 }
-
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		rating.value = newVal
-	}
-)
 </script>

frontend/src/components/Controls/Uploader.vue

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

frontend/src/components/CourseCard.vue

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

frontend/src/components/CourseCardOverlay.vue

@@ -1,202 +1,126 @@
 <template>
-	<div class="border-2 rounded-md min-w-80 max-w-sm">
+	<div class="shadow rounded-md min-w-80">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
 			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
-			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
+			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
-			<div v-if="!readOnlyMode">
+			<router-link
-				<div v-if="course.data.membership" class="space-y-2">
+				v-if="course.data.membership"
-					<router-link
+				:to="{
-						:to="{
+					name: 'Lesson',
-							name: 'Lesson',
+					params: {
-							params: {
+						courseName: course.name,
-								courseName: course.name,
+						chapterNumber: course.data.current_lesson
-								chapterNumber: course.data.current_lesson
+							? course.data.current_lesson.split('-')[0]
-									? course.data.current_lesson.split('-')[0]
+							: 1,
-									: 1,
+						lessonNumber: course.data.current_lesson
-								lessonNumber: course.data.current_lesson
+							? course.data.current_lesson.split('-')[1]
-									? course.data.current_lesson.split('-')[1]
+							: 1,
-									: 1,
+					},
-							},
+				}"
-						}"
+			>
-					>
+				<Button variant="solid" size="md" class="w-full">
-						<Button variant="solid" size="md" class="w-full">
-							<template #prefix>
-								<BookText class="size-4 stroke-1.5" />
-							</template>
-							<span>
-								{{ __('Continue Learning') }}
-							</span>
-						</Button>
-					</router-link>
-					<CertificationLinks :courseName="course.data.name" class="w-full" />
-				</div>
-				<router-link
-					v-else-if="course.data.paid_course"
-					:to="{
-						name: 'Billing',
-						params: {
-							type: 'course',
-							name: course.data.name,
-						},
-					}"
-				>
-					<Button variant="solid" size="md" class="w-full">
-						<template #prefix>
-							<CreditCard class="size-4 stroke-1.5" />
-						</template>
-						<span>
-							{{ __('Buy this course') }}
-						</span>
-					</Button>
-				</router-link>
-				<Badge
-					v-else-if="course.data.disable_self_learning"
-					theme="blue"
-					size="lg"
-				>
-					{{ __('Contact the Administrator to enroll for this course.') }}
-				</Badge>
-				<Button
-					v-else-if="!user.data?.is_moderator && !is_instructor()"
-					@click="enrollStudent()"
-					variant="solid"
-					class="w-full"
-					size="md"
-				>
-					<template #prefix>
-						<BookText class="size-4 stroke-1.5" />
-					</template>
 					<span>
-						{{ __('Start Learning') }}
+						{{ __('Continue Learning') }}
 					</span>
 				</Button>
-				<Button
+			</router-link>
-					v-if="canGetCertificate"
+			<router-link
-					@click="fetchCertificate()"
+				v-else-if="course.data.paid_course"
-					variant="subtle"
+				:to="{
-					class="w-full mt-2"
+					name: 'Billing',
-					size="md"
+					params: {
-				>
+						type: 'course',
-					<template #prefix>
+						name: course.data.name,
-						<GraduationCap class="size-4 stroke-1.5" />
+					},
-					</template>
+				}"
-					{{ __('Get Certificate') }}
+			>
+				<Button variant="solid" size="md" class="w-full">
+					<span>
+						{{ __('Buy this course') }}
+					</span>
 				</Button>
-				<Button
+			</router-link>
-					v-if="user.data?.is_moderator || is_instructor()"
+			<div
-					class="w-full mt-2"
+				v-else-if="course.data.disable_self_learning"
-					size="md"
+				class="bg-blue-100 text-blue-900 text-sm rounded-md py-1 px-3"
-					@click="showProgressSummary"
+			>
-				>
+				{{ __('Contact the Administrator to enroll for this course.') }}
-					<template #prefix>
-						<TrendingUp class="size-4 stroke-1.5" />
-						{{ __('Progress Summary') }}
-					</template>
-				</Button>
-				<router-link
-					v-if="user?.data?.is_moderator || is_instructor()"
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: course.data.name,
-						},
-					}"
-				>
-					<Button variant="subtle" class="w-full mt-2" size="md">
-						<template #prefix>
-							<Pencil class="size-4 stroke-1.5" />
-						</template>
-						<span>
-							{{ __('Edit') }}
-						</span>
-					</Button>
-				</router-link>
 			</div>
-			<div class="space-y-4">
+			<Button
-				<div
+				v-else
-					class="font-medium text-ink-gray-9"
+				@click="enrollStudent()"
-					:class="{ 'mt-8': !readOnlyMode }"
+				variant="solid"
-				>
+				class="w-full"
-					{{ __('This course has:') }}
+				size="md"
-				</div>
+			>
-				<div class="flex items-center text-ink-gray-9">
+				<span>
-					<BookOpen class="h-4 w-4 stroke-1.5" />
+					{{ __('Start Learning') }}
-					<span class="ml-2">
+				</span>
-						{{ course.data.lessons }} {{ __('Lessons') }}
+			</Button>
+			<Button
+				v-if="canGetCertificate"
+				@click="fetchCertificate()"
+				variant="subtle"
+				class="w-full mt-2"
+				size="md"
+			>
+				{{ __('Get Certificate') }}
+			</Button>
+			<router-link
+				v-if="user?.data?.is_moderator || is_instructor()"
+				:to="{
+					name: 'CourseForm',
+					params: {
+						courseName: course.data.name,
+					},
+				}"
+			>
+				<Button variant="subtle" class="w-full mt-2" size="md">
+					<span>
+						{{ __('Edit') }}
 					</span>
-				</div>
+				</Button>
-				<div class="flex items-center text-ink-gray-9">
+			</router-link>
-					<Users class="h-4 w-4 stroke-1.5" />
+			<div class="mt-8 mb-4 font-medium">
-					<span class="ml-2">
+				{{ __('This course has:') }}
-						{{ formatAmount(course.data.enrollments) }}
+			</div>
-						{{ __('Enrolled Students') }}
+			<div class="flex items-center mb-3">
-					</span>
+				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
-				</div>
+				<span class="ml-2">
-				<div
+					{{ course.data.lesson_count }} {{ __('Lessons') }}
-					v-if="parseInt(course.data.rating) > 0"
+				</span>
-					class="flex items-center text-ink-gray-9"
+			</div>
-				>
+			<div class="flex items-center mb-3">
-					<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
+				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
-					<span class="ml-2">
+				<span class="ml-2">
-						{{ course.data.rating }} {{ __('Rating') }}
+					{{ course.data.enrollment_count_formatted }}
-					</span>
+					{{ __('Enrolled Students') }}
-				</div>
+				</span>
-				<div
+			</div>
-					v-if="course.data.enable_certification"
+			<div class="flex items-center">
-					class="flex items-center font-semibold text-ink-gray-9"
+				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
-				>
+				<span class="ml-2">
-					<GraduationCap class="h-4 w-4 stroke-2" />
+					{{ course.data.avg_rating }} {{ __('Rating') }}
-					<span class="ml-2">
+				</span>
-						{{ __('Certificate of Completion') }}
-					</span>
-				</div>
-				<div
-					v-if="course.data.paid_certificate"
-					class="flex items-center font-semibold text-ink-gray-9"
-				>
-					<GraduationCap class="h-4 w-4 stroke-2" />
-					<span class="ml-2">
-						{{ __('Paid Certificate after Evaluation') }}
-					</span>
-				</div>
 			</div>
 		</div>
 	</div>
-	<CourseProgressSummary
-		v-model="showProgressModal"
-		:courseName="course.data.name"
-		:enrollments="course.data.enrollments"
-	/>
 </template>
 <script setup>
-import {
+import { BookOpen, Users, Star } from 'lucide-vue-next'
-	BookOpen,
+import { computed, inject } from 'vue'
-	BookText,
+import { Button, createResource } from 'frappe-ui'
-	CreditCard,
+import { createToast } from '@/utils/'
-	GraduationCap,
-	Pencil,
-	Star,
-	TrendingUp,
-	Users,
-} from 'lucide-vue-next'
-import { computed, inject, ref } from 'vue'
-import { Badge, Button, call, createResource, toast } from 'frappe-ui'
-import { formatAmount } from '@/utils/'
-import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
-import CertificationLinks from '@/components/CertificationLinks.vue'
-import CourseProgressSummary from '@/components/Modals/CourseProgressSummary.vue'
 
 const router = useRouter()
 const user = inject('$user')
-const showProgressModal = ref(false)
-const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	course: {
@@ -214,19 +138,28 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		toast.success(__('You need to login first to enroll for this course'))
+		createToast({
+			title: 'Please Login',
+			icon: 'alert-circle',
+			iconClasses: 'text-yellow-600 bg-yellow-100',
+		})
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 500)
+		}, 2000)
 	} else {
-		call('lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership', {
+		const enrollStudentResource = createResource({
-			course: props.course.data.name,
+			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
 		})
+		enrollStudentResource
+			.submit({
+				course: props.course.data.name,
+			})
 			.then(() => {
-				capture('enrolled_in_course', {
+				createToast({
-					course: props.course.data.name,
+					title: 'Enrolled Successfully',
+					icon: 'check',
+					iconClasses: 'text-green-600 bg-green-100',
 				})
-				toast.success(__('You have been enrolled in this course'))
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',
@@ -236,11 +169,7 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 1000)
+				}, 3000)
-			})
-			.catch((err) => {
-				toast.warning(__(err.messages?.[0] || err))
-				console.error(err)
 			})
 	}
 }
@@ -273,6 +202,7 @@ const certificate = createResource({
 		}
 	},
 	onSuccess(data) {
+		console.log(data)
 		window.open(
 			`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
 				data.name
@@ -288,8 +218,4 @@ const fetchCertificate = () => {
 		member: user.data?.name,
 	})
 }
-
-const showProgressSummary = () => {
-	showProgressModal.value = true
-}
 </script>

frontend/src/components/CourseInstructors.vue

@@ -1,46 +1,44 @@
 <template>
-	<div class="">
+	<span v-if="instructors.length == 1">
-		<span v-if="instructors?.length == 1">
+		<router-link
-			<router-link
+			:to="{
-				:to="{
+				name: 'Profile',
-					name: 'Profile',
+				params: { username: instructors[0].username },
-					params: { username: instructors[0].username },
+			}"
-				}"
+		>
-			>
+			{{ instructors[0].full_name }}
-				{{ instructors[0].full_name }}
+		</router-link>
-			</router-link>
+	</span>
-		</span>
+	<span v-if="instructors.length == 2">
-		<span v-if="instructors?.length == 2">
+		<router-link
-			<router-link
+			:to="{
-				:to="{
+				name: 'Profile',
-					name: 'Profile',
+				params: { username: instructors[0].username },
-					params: { username: instructors[0].username },
+			}"
-				}"
+		>
-			>
+			{{ instructors[0].first_name }}
-				{{ instructors[0].first_name }}
+		</router-link>
-			</router-link>
+		and
-			{{ __('and') }}
+		<router-link
-			<router-link
+			:to="{
-				:to="{
+				name: 'Profile',
-					name: 'Profile',
+				params: { username: instructors[1].username },
-					params: { username: instructors[1].username },
+			}"
-				}"
+		>
-			>
+			{{ instructors[1].first_name }}
-				{{ instructors[1].first_name }}
+		</router-link>
-			</router-link>
+	</span>
-		</span>
+	<span v-if="instructors.length > 2">
-		<span v-if="instructors?.length > 2">
+		<router-link
-			<router-link
+			:to="{
-				:to="{
+				name: 'Profile',
-					name: 'Profile',
+				params: { username: instructors[0].username },
-					params: { username: instructors[0].username },
+			}"
-				}"
+		>
-			>
+			{{ instructors[0].first_name }}
-				{{ instructors[0].first_name }}
+		</router-link>
-			</router-link>
+		and {{ instructors.length - 1 }} others
-			{{ __('and') }} {{ instructors?.length - 1 }} {{ __('others') }}
+	</span>
-		</span>
-	</div>
 </template>
 <script setup>
 const props = defineProps({

frontend/src/components/CourseOutline.vue

@@ -1,161 +1,116 @@
 <template>
-	<div class="">
+	<div class="text-base">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="flex items-center justify-between space-x-2 mb-4 px-2"
+			class="grid grid-cols-[70%,30%] mb-4 px-2"
-			:class="{
-				'sticky top-0 z-10 bg-surface-white border-b px-3 py-2.5 sm:px-5':
-					allowEdit,
-			}"
 		>
-			<div
+			<div class="font-semibold text-lg">
-				class="font-semibold text-lg leading-5 text-ink-gray-9"
-				:class="{ 'font-medium text-p-base': allowEdit }"
-			>
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
 				{{ __('Add Chapter') }}
 			</Button>
+			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
+				{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
+			</span> -->
 		</div>
 		<div
 			:class="{
-				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
+				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
-			<Draggable
+			<Disclosure
-				:list="outline.data"
+				v-slot="{ open }"
-				:disabled="!allowEdit"
+				v-for="(chapter, index) in outline.data"
-				item-key="name"
+				:key="chapter.name"
-				group="chapters"
+				:defaultOpen="openChapterDetail(chapter.idx)"
-				@end="updateChapterOrder"
 			>
-				<template #item="{ element: chapter, index }">
+				<DisclosureButton ref="" class="flex w-full p-2">
-					<div class="chapter-item">
+					<ChevronRight
-						<Disclosure
+						:class="{
-							v-slot="{ open }"
+							'rotate-90 transform duration-200': open,
-							:key="chapter.name"
+							'duration-200': !open,
-							:defaultOpen="openChapterDetail(chapter.idx)"
+							open: index == 1,
-						>
+						}"
-							<DisclosureButton
+						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
-								ref=""
+					/>
-								class="flex items-center w-full p-2 group"
+					<div class="text-base text-left font-medium leading-5">
-							>
+						{{ chapter.title }}
-								<ChevronRight
+					</div>
-									:class="{
+				</DisclosureButton>
-										'rotate-90 transform duration-200': open,
+				<DisclosurePanel>
-										'duration-200': !open,
+					<Draggable
-										hidden: chapter.is_scorm_package,
+						:list="chapter.lessons"
-										open: index == 1,
+						:disabled="!allowEdit"
+						item-key="name"
+						group="items"
+						@end="updateOutline"
+						:data-chapter="chapter.name"
+					>
+						<template #item="{ element: lesson }">
+							<div class="outline-lesson pl-8 py-2 pr-4">
+								<router-link
+									:to="{
+										name: allowEdit ? 'LessonForm' : 'Lesson',
+										params: {
+											courseName: courseName,
+											chapterNumber: lesson.number.split('.')[0],
+											lessonNumber: lesson.number.split('.')[1],
+										},
 									}"
-									class="h-4 w-4 text-ink-gray-9 stroke-1"
-								/>
-								<div
-									class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
-									@click="redirectToChapter(chapter)"
 								>
-									{{ chapter.title }}
+									<div class="flex items-center text-sm leading-5 group">
-								</div>
+										<MonitorPlay
-								<div class="flex ml-auto space-x-4">
+											v-if="lesson.icon === 'icon-youtube'"
-									<Tooltip :text="__('Edit Chapter')" placement="bottom">
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
-										<FilePenLine
-											v-if="allowEdit"
-											@click.prevent="openChapterModal(chapter)"
-											class="h-4 w-4 text-ink-gray-9 invisible group-hover:visible"
 										/>
-									</Tooltip>
+										<HelpCircle
-									<Tooltip :text="__('Delete Chapter')" placement="bottom">
+											v-else-if="lesson.icon === 'icon-quiz'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										<FileText
+											v-else-if="lesson.icon === 'icon-list'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										{{ lesson.title }}
 										<Trash2
 											v-if="allowEdit"
-											@click.prevent="trashChapter(chapter.name)"
+											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
+											class="h-4 w-4 stroke-1.5 text-gray-700 ml-auto invisible group-hover:visible"
 										/>
-									</Tooltip>
+										<Check
-								</div>
+											v-if="lesson.is_complete"
-							</DisclosureButton>
+											class="h-4 w-4 text-green-700 ml-2"
-							<DisclosurePanel v-if="!chapter.is_scorm_package">
+										/>
-								<Draggable
+									</div>
-									v-if="!chapter.is_scorm_package"
+								</router-link>
-									:list="chapter.lessons"
+							</div>
-									:disabled="!allowEdit"
+						</template>
-									item-key="name"
+					</Draggable>
-									group="items"
+					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
-									@end="updateOutline"
+						<router-link
-									:data-chapter="chapter.name"
+							:to="{
-								>
+								name: 'LessonForm',
-									<template #item="{ element: lesson }">
+								params: {
-										<div
+									courseName: courseName,
-											class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
+									chapterNumber: chapter.idx,
-											:class="
+									lessonNumber: chapter.lessons.length + 1,
-												isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
+								},
-											"
+							}"
-										>
+						>
-											<router-link
+							<Button>
-												:to="{
+								{{ __('Add Lesson') }}
-													name: allowEdit ? 'LessonForm' : 'Lesson',
+							</Button>
-													params: {
+						</router-link>
-														courseName: courseName,
+						<Button class="ml-2" @click="openChapterModal(chapter)">
-														chapterNumber: lesson.number.split('.')[0],
+							{{ __('Edit Chapter') }}
-														lessonNumber: lesson.number.split('.')[1],
+						</Button>
-													},
-												}"
-											>
-												<div class="flex items-center text-sm leading-5 group">
-													<MonitorPlay
-														v-if="lesson.icon === 'icon-youtube'"
-														class="h-4 w-4 stroke-1 mr-2"
-													/>
-													<HelpCircle
-														v-else-if="lesson.icon === 'icon-quiz'"
-														class="h-4 w-4 stroke-1 mr-2"
-													/>
-													<FileText
-														v-else-if="lesson.icon === 'icon-list'"
-														class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
-													/>
-													{{ lesson.title }}
-													<Trash2
-														v-if="allowEdit"
-														@click.prevent="
-															trashLesson(lesson.name, chapter.name)
-														"
-														class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
-													/>
-													<Check
-														v-if="lesson.is_complete"
-														class="h-4 w-4 text-green-700 ml-2"
-													/>
-												</div>
-											</router-link>
-										</div>
-									</template>
-								</Draggable>
-								<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
-									<router-link
-										v-if="!chapter.is_scorm_package"
-										:to="{
-											name: 'LessonForm',
-											params: {
-												courseName: courseName,
-												chapterNumber: chapter.idx,
-												lessonNumber: chapter.lessons.length + 1,
-											},
-										}"
-									>
-										<Button>
-											{{ __('Add Lesson') }}
-										</Button>
-									</router-link>
-								</div>
-							</DisclosurePanel>
-						</Disclosure>
 					</div>
-				</template>
+				</DisclosurePanel>
-			</Draggable>
+			</Disclosure>
 		</div>
 	</div>
 	<ChapterModal
-		v-if="user.data"
 		v-model="showChapterModal"
 		v-model:outline="outline"
 		:course="courseName"
@@ -163,29 +118,26 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource, Tooltip, toast } from 'frappe-ui'
+import { Button, createResource } from 'frappe-ui'
-import { getCurrentInstance, inject, ref, watch } from 'vue'
+import { ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
-	Check,
 	ChevronRight,
-	FileText,
-	FilePenLine,
-	HelpCircle,
 	MonitorPlay,
+	HelpCircle,
+	FileText,
+	Check,
 	Trash2,
 } from 'lucide-vue-next'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
+import { showToast } from '@/utils'
 
 const route = useRoute()
-const router = useRouter()
+const expandAll = ref(true)
-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: {
@@ -213,22 +165,13 @@ const props = defineProps({
 const outline = createResource({
 	url: 'lms.lms.utils.get_course_outline',
 	cache: ['course_outline', props.courseName],
-	makeParams() {
+	params: {
-		return {
+		course: props.courseName,
-			course: props.courseName,
+		progress: props.getProgress,
-			progress: props.getProgress,
-		}
 	},
 	auto: true,
 })
 
-watch(
-	() => props.courseName,
-	() => {
-		outline.reload()
-	}
-)
-
 const deleteLesson = createResource({
 	url: 'lms.lms.api.delete_lesson',
 	makeParams(values) {
@@ -239,7 +182,7 @@ const deleteLesson = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		toast.success(__('Lesson deleted successfully'))
+		showToast('Success', 'Lesson deleted successfully', 'check')
 	},
 })
 
@@ -254,44 +197,14 @@ const updateLessonIndex = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Lesson moved successfully'))
+		showToast('Success', 'Lesson moved successfully', 'check')
-	},
-})
-
-const updateChapterIndex = createResource({
-	url: 'lms.lms.api.update_chapter_index',
-	makeParams(values) {
-		return {
-			chapter: values.chapter,
-			course: values.course,
-			idx: values.idx,
-		}
-	},
-	onSuccess() {
-		toast.success(__('Chapter moved successfully'))
 	},
 })
 
 const trashLesson = (lessonName, chapterName) => {
-	$dialog({
+	deleteLesson.submit({
-		title: __('Delete this lesson?'),
+		lesson: lessonName,
-		message: __(
+		chapter: chapterName,
-			'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()
-				},
-			},
-		],
 	})
 }
 
@@ -316,70 +229,9 @@ const updateOutline = (e) => {
 		idx: e.newIndex,
 	})
 }
-
-const updateChapterOrder = (e) => {
-	updateChapterIndex.submit({
-		chapter: e.item.__draggable_context.element.name,
-		course: props.courseName,
-		idx: e.newIndex,
-	})
-}
-
-const deleteChapter = createResource({
-	url: 'lms.lms.api.delete_chapter',
-	makeParams(values) {
-		return {
-			chapter: values.chapter,
-		}
-	},
-	onSuccess() {
-		outline.reload()
-		toast.success(__('Chapter deleted successfully'))
-	},
-})
-
-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) {
-		toast.success(__('Please enroll for this course to view this lesson'))
-		return
-	}
-
-	router.push({
-		name: 'SCORMChapter',
-		params: {
-			courseName: props.courseName,
-			chapterName: chapter.name,
-		},
-	})
-}
-
-const isActiveLesson = (lessonNumber) => {
-	return (
-		route.params.chapterNumber == lessonNumber.split('.')[0] &&
-		route.params.lessonNumber == lessonNumber.split('.')[1]
-	)
-}
 </script>
+<style>
+.outline-lesson:has(.router-link-active) {
+	background-color: theme('colors.gray.100');
+}
+</style>