chore(release): Bumped to Version 2.1.0

chore: product analytics

.github/helper/install.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+set -e
+cd ~ || exit
+
+echo "Setting Up Bench..."
+
+pip install frappe-bench
+bench -v init frappe-bench --skip-assets --python "$(which python)"
+cd ./frappe-bench || exit
+
+bench -v setup requirements
+
+echo "Setting Up LMS App..."
+bench get-app lms "${GITHUB_WORKSPACE}"
+
+echo "Setting Up Sites & Database..."
+
+mkdir ~/frappe-bench/sites/lms.test
+cp "${GITHUB_WORKSPACE}/.github/helper/site_config.json" ~/frappe-bench/sites/lms.test/site_config.json
+
+
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "SET GLOBAL character_set_server = 'utf8mb4'";
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'";
+
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "CREATE DATABASE test_lms";
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "CREATE USER 'test_lms'@'localhost' IDENTIFIED BY 'test_lms'";
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "GRANT ALL PRIVILEGES ON \`test_lms\`.* TO 'test_lms'@'localhost'";
+
+mariadb --host 127.0.0.1 --port 3306 -u root -p123 -e "FLUSH PRIVILEGES";
+
+echo "Setting Up Procfile..."
+
+sed -i 's/^watch:/# watch:/g' Procfile
+sed -i 's/^schedule:/# schedule:/g' Procfile
+
+echo "Starting Bench..."
+
+bench start &> bench_start.log &
+
+CI=Yes bench build &
+build_pid=$!
+
+bench --site lms.test reinstall --yes
+bench --site lms.test install-app lms
+
+wait $build_pid

.github/helper/install_dependencies.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -e
+
+echo "Setting Up System Dependencies..."
+
+sudo apt update
+sudo apt remove mysql-server mysql-client
+sudo apt install libcups2-dev redis-server mariadb-client-10.6
+
+install_wkhtmltopdf() {
+  wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb
+  sudo apt install ./wkhtmltox_0.12.6-1.focal_amd64.deb
+}
+install_wkhtmltopdf &

.github/helper/site_config.json

@@ -0,0 +1,20 @@
+{
+    "db_host": "127.0.0.1",
+    "db_port": 3306,
+    "db_name": "test_lms",
+    "db_password": "test_lms",
+    "allow_tests": true,
+    "enable_ui_tests": true,
+    "db_type": "mariadb",
+    "auto_email_id": "test@example.com",
+    "mail_server": "smtp.example.com",
+    "mail_login": "test@example.com",
+    "mail_password": "test",
+    "admin_password": "admin",
+    "root_login": "root",
+    "root_password": "123",
+    "host_name": "http://lms.test:8000",
+    "monitor": 1,
+    "server_script_enabled": true,
+    "mute_emails": true
+}

.github/helper/update_pot_file.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+set -e
+cd ~ || exit
+
+echo "Setting Up Bench..."
+
+pip install frappe-bench
+bench -v init frappe-bench --skip-assets --skip-redis-config-generation --python "$(which python)" --frappe-branch "${BASE_BRANCH}"
+cd ./frappe-bench || exit
+
+echo "Get LMS..."
+bench get-app --skip-assets lms "${GITHUB_WORKSPACE}"
+
+echo "Generating POT file..."
+bench generate-pot-file --app lms
+
+cd ./apps/lms || exit
+
+echo "Configuring git user..."
+git config user.email "developers@erpnext.com"
+git config user.name "frappe-pr-bot"
+
+echo "Setting the correct git remote..."
+# Here, the git remote is a local file path by default. Let's change it to the upstream repo.
+git remote set-url upstream https://github.com/frappe/lms.git
+
+echo "Creating a new branch..."
+isodate=$(date -u +"%Y-%m-%d")
+branch_name="pot_${BASE_BRANCH}_${isodate}"
+git checkout -b "${branch_name}"
+
+echo "Commiting changes..."
+git add lms/locale/main.pot
+git commit -m "chore: update POT file"
+
+gh auth setup-git
+git push -u upstream "${branch_name}"
+
+echo "Creating a PR..."
+gh pr create --fill --base "${BASE_BRANCH}" --head "${branch_name}" -R frappe/lms

.github/try-on-f-cloud.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 2 193 52">
+<g filter="url(#filter0_dd)">
+<rect x="4" y="2" width="193" height="52" rx="6" fill="#2490EF"/>
+<path d="M28 22.2891H32.8786V35.5H36.2088V22.2891H41.0874V19.5H28V22.2891Z" fill="white"/>
+<path d="M41.6982 35.5H45.0129V28.7109C45.0129 27.2344 46.0866 26.2188 47.5494 26.2188C48.0085 26.2188 48.6388 26.2969 48.95 26.3984V23.4453C48.6543 23.375 48.2419 23.3281 47.9074 23.3281C46.5691 23.3281 45.472 24.1094 45.0362 25.5938H44.9117V23.5H41.6982V35.5Z" fill="white"/>
+<path d="M52.8331 40C55.2996 40 56.6068 38.7344 57.2837 36.7969L61.9289 23.5156L58.4197 23.5L55.9221 32.3125H55.7976L53.3233 23.5H49.8374L54.1247 35.8437L53.9302 36.3516C53.4944 37.4766 52.6619 37.5312 51.4947 37.1719L50.7478 39.6562C51.2224 39.8594 51.9927 40 52.8331 40Z" fill="white"/>
+<path d="M73.6142 35.7344C77.2401 35.7344 79.4966 33.2422 79.4966 29.5469C79.4966 25.8281 77.2401 23.3438 73.6142 23.3438C69.9883 23.3438 67.7319 25.8281 67.7319 29.5469C67.7319 33.2422 69.9883 35.7344 73.6142 35.7344ZM73.6298 33.1562C71.9569 33.1562 71.101 31.6171 71.101 29.5233C71.101 27.4296 71.9569 25.8827 73.6298 25.8827C75.2715 25.8827 76.1274 27.4296 76.1274 29.5233C76.1274 31.6171 75.2715 33.1562 73.6298 33.1562Z" fill="white"/>
+<path d="M84.7253 28.5625C84.7331 27.0156 85.6512 26.1094 86.9895 26.1094C88.3201 26.1094 89.1215 26.9844 89.1137 28.4531V35.5H92.4284V27.8594C92.4284 25.0625 90.7945 23.3438 88.3046 23.3438C86.5306 23.3438 85.2466 24.2187 84.7097 25.6172H84.5697V23.5H81.4106V35.5H84.7253V28.5625Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M102.429 19.5H113.429V22.3141H102.429V19.5ZM102.429 35.5V26.6794H112.699V29.4982H105.94V35.5H102.429Z" fill="white"/>
+<path d="M131.584 24.9625C131.09 21.5057 128.345 19.5 124.785 19.5C120.589 19.5 117.429 22.463 117.429 27.4924C117.429 32.5142 120.55 35.4848 124.785 35.4848C128.604 35.4848 131.137 33.0916 131.584 30.1211L128.651 30.1059C128.282 31.9293 126.745 32.9549 124.824 32.9549C122.22 32.9549 120.354 31.0632 120.354 27.4924C120.354 23.9824 122.204 22.0299 124.832 22.0299C126.784 22.0299 128.314 23.1011 128.651 24.9625H131.584Z" fill="white"/>
+<path d="M136.409 19.7124H133.571V35.2718H136.409V19.7124Z" fill="white"/>
+<path d="M144.031 35.5001C147.56 35.5001 149.803 33.0917 149.803 29.483C149.803 25.8667 147.56 23.4507 144.031 23.4507C140.502 23.4507 138.259 25.8667 138.259 29.483C138.259 33.0917 140.502 35.5001 144.031 35.5001ZM144.047 33.2969C142.094 33.2969 141.137 31.6103 141.137 29.4754C141.137 27.3406 142.094 25.6312 144.047 25.6312C145.968 25.6312 146.925 27.3406 146.925 29.4754C146.925 31.6103 145.968 33.2969 144.047 33.2969Z" fill="white"/>
+<path d="M159.338 30.3641C159.338 32.1419 158.028 33.0232 156.773 33.0232C155.409 33.0232 154.499 32.0887 154.499 30.6072V23.6025H151.66V31.0327C151.66 33.8361 153.307 35.4239 155.675 35.4239C157.479 35.4239 158.749 34.5046 159.298 33.1979H159.424V35.272H162.176V23.6025H159.338V30.3641Z" fill="white"/>
+<path d="M169.014 35.4769C171.084 35.4769 172.017 34.2841 172.464 33.4332H172.637V35.2718H175.429V19.7124H172.582V25.532H172.464C172.033 24.6887 171.147 23.4503 169.022 23.4503C166.238 23.4503 164.05 25.5624 164.05 29.4522C164.05 33.2965 166.175 35.4769 169.014 35.4769ZM169.806 33.2205C167.931 33.2205 166.943 31.6251 166.943 29.437C166.943 27.2642 167.916 25.7067 169.806 25.7067C171.633 25.7067 172.637 27.173 172.637 29.437C172.637 31.701 171.617 33.2205 169.806 33.2205Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_dd" x="0" y="0" width="201" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Run tests
+name: Server Tests
 on:
   push:
     branches:
@@ -36,7 +36,7 @@ jobs:
     - name: setup node
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '18'
         check-latest: true
     - name: setup cache for bench
       uses: actions/cache@v2
@@ -77,5 +77,4 @@ jobs:
       run: bench --site frappe.local build
     - name: run tests
       working-directory: /home/runner/frappe-bench
-      run: bench --site frappe.local run-tests --app lms
+      run: bench --site frappe.local run-tests --app lms
-

.github/workflows/generate-pot-file.yml

@@ -0,0 +1,34 @@
+name: Regenerate POT file (translatable strings)
+on:
+  schedule:
+    - cron: "00 16 * * 5"
+  workflow_dispatch:
+
+jobs:
+  regenerate-pot-file:
+    name: Release
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        branch: ["develop"]
+    permissions:
+      contents: write
+
+    steps:
+        - name: Checkout
+          uses: actions/checkout@v4
+          with:
+            ref: ${{ matrix.branch }}
+
+        - name: Setup Python
+          uses: actions/setup-python@v5
+          with:
+            python-version: "3.12"
+
+        - name: Run script to update POT file
+          run: |
+            bash ${GITHUB_WORKSPACE}/.github/helper/update_pot_file.sh
+          env:
+            GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+            BASE_BRANCH: ${{ matrix.branch }}

.github/workflows/linters.yml

@@ -30,4 +30,4 @@ jobs:
         run: pip install semgrep
 
       - name: Run Semgrep rules
-        run: semgrep ci --config ./frappe-semgrep-rules/rules
+        run: semgrep ci --config ./frappe-semgrep-rules/rules

.github/workflows/on_release.yml

@@ -0,0 +1,32 @@
+name: Generate Semantic Release
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup dependencies
+        run: |
+          npm install @semantic-release/git @semantic-release/exec --no-save
+      - name: Create Release
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GIT_AUTHOR_NAME: "Frappe PR Bot"
+          GIT_AUTHOR_EMAIL: "developers@frappe.io"
+          GIT_COMMITTER_NAME: "Frappe PR Bot"
+          GIT_COMMITTER_EMAIL: "developers@frappe.io"
+        run: npx semantic-release

.github/workflows/release_notes.yml

@@ -0,0 +1,39 @@
+# This action:
+#
+# 1. Generates release notes using github API.
+# 2. Strips unnecessary info like chore/style etc from notes.
+# 3. Updates release info.
+
+name: 'Release Notes'
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: 'Tag of release like v2.0.0'
+        required: true
+        type: string
+  release:
+    types: [released]
+
+permissions:
+  contents: read
+
+jobs:
+  regen-notes:
+    name: 'Regenerate release notes'
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Update notes
+      run: |
+        NEW_NOTES=$(gh api --method POST -H "Accept: application/vnd.github+json"  /repos/frappe/lms/releases/generate-notes  -f tag_name=$RELEASE_TAG \
+          | jq -r '.body' \
+          | sed -E '/^\* (chore|ci|test|docs|style)/d' \
+          | sed -E 's/by @mergify //'
+        )
+        RELEASE_ID=$(gh api -H "Accept: application/vnd.github+json" /repos/frappe/lms/releases/tags/$RELEASE_TAG | jq -r '.id')
+        gh api --method PATCH -H "Accept: application/vnd.github+json" /repos/frappe/lms/releases/$RELEASE_ID -f body="$NEW_NOTES"
+      env:
+        GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+        RELEASE_TAG: ${{ github.event.inputs.tag_name || github.event.release.tag_name }}

.github/workflows/ui-tests.yml

@@ -0,0 +1,121 @@
+name: UI
+
+on:
+  pull_request:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+
+permissions:
+  # Do not change this as GITHUB_TOKEN is being used by roulette
+  contents: read
+
+jobs:
+  
+  test:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'frappe' }}
+    timeout-minutes: 60
+
+    strategy:
+      fail-fast: false
+
+    name: UI Tests (Cypress)
+
+    services:
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MARIADB_ROOT_PASSWORD: 123
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v3
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+
+      - name: Check for valid Python & Merge Conflicts
+        run: |
+          python -m compileall -q -f "${GITHUB_WORKSPACE}"
+          if grep -lr --exclude-dir=node_modules "^<<<<<<< " "${GITHUB_WORKSPACE}"
+              then echo "Found merge conflicts"
+              exit 1
+          fi
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          check-latest: true
+
+      - name: Add to Hosts
+        run: |
+          echo "127.0.0.1 lms.test" | sudo tee -a /etc/hosts
+
+      - name: Cache pip
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-ui-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-ui-
+
+      - name: Cache cypress binary
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress
+
+      - name: Install Dependencies
+        run: |
+          bash ${GITHUB_WORKSPACE}/.github/helper/install_dependencies.sh
+          bash ${GITHUB_WORKSPACE}/.github/helper/install.sh
+        env:
+          BEFORE: ${{ env.GITHUB_EVENT_PATH.before }}
+          AFTER: ${{ env.GITHUB_EVENT_PATH.after }}
+          TYPE: ui
+          DB: mariadb
+
+      - name: Site Setup
+        run: |
+          cd ~/frappe-bench/
+          bench --site lms.test execute frappe.utils.install.complete_setup_wizard
+          bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
+
+      - name: cypress pre-requisites
+        run: |
+          cd ~/frappe-bench/apps/lms
+          yarn add cypress@^10 --no-lockfile
+
+      - name: UI Tests
+        run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless
+        env:
+          CYPRESS_BASE_URL: http://lms.test:8000
+          CYPRESS_RECORD_KEY: 095366ec-7b9f-41bd-aeec-03bb76d627fe
+
+      - name: Stop server and wait for coverage file
+        run: |
+          ps -ef | grep "[f]rappe serve" | awk '{print $2}' | xargs kill -s SIGINT
+          sleep 5
+
+      - name: Show bench output
+        if: ${{ always() }}
+        run: cat ~/frappe-bench/bench_start.log || true

.gitignore

@@ -8,3 +8,7 @@ lms/public/dist
 __pycache__/
 *.py[cod]
 *$py.class
+node_modules
+package-lock.json
+lms/public/frontend
+lms/www/lms.html

.gitmodules

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

.pre-commit-config.yaml

@@ -7,11 +7,9 @@ repos:
     rev: v4.3.0
     hooks:
       - id: trailing-whitespace
-        files: "frappe.*"
+        files: "lms.*"
         exclude: ".*json$|.*txt$|.*csv|.*md|.*svg"
       - id: check-yaml
-      - id: no-commit-to-branch
-        args: ['--branch', 'main']
       - id: check-merge-conflict
       - id: check-ast
       - id: check-json
@@ -34,7 +32,7 @@ repos:
     rev: v2.7.1
     hooks:
       - id: prettier
-        types_or: [javascript]
+        types_or: [javascript, vue]
         # Ignore any files that might contain jinja / bundles
         exclude: |
             (?x)^(

.releaserc

@@ -0,0 +1,21 @@
+{
+	"branches": ["develop"],
+	"plugins": [
+		"@semantic-release/commit-analyzer", {
+			"preset": "angular"
+		},
+		"@semantic-release/release-notes-generator",
+		[
+			"@semantic-release/exec", {
+				"prepareCmd": 'sed -ir "s/[0-9]*\.[0-9]*\.[0-9]*/${nextRelease.version}/" lms/__init__.py'
+			}
+		],
+		[
+			"@semantic-release/git", {
+				"assets": ["lms/__init__.py"],
+				"message": "chore(release): Bumped to Version ${nextRelease.version}"
+			}
+		],
+		"@semantic-release/github"
+	]
+}

README.md

@@ -1,46 +1,64 @@
 <p align="center">
   <a href="https://www.frappelms.com/">
-    <img src="https://www.frappelms.com/files/flms.svg" alt="Frappe LMS" width="100" height="100">
+    <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 align="center">Easy to use, open source, learning management system.</p>
 </p>
 
+
+&nbsp;
+
 <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;
+
+<p align="center">
+	<a href="https://dashboard.cypress.io/projects/vandxn/runs">
+    <img alt="cypress" src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress">
+  </a>
   <a href="https://github.com/frappe/lms/blob/main/LICENSE">
     <img alt="license" src="https://img.shields.io/badge/license-AGPLv3-blue">
   </a>
 </p>
 
-<img width="1402" alt="Lesson" src="https://frappelms.com/files/fs-banner71f330.png">
+<img width="1402" alt="Lesson" src="https://frappelms.com/files/banner.png">
+
 <details>
 	<summary>Show more screenshots</summary>
-
+	<img width="1520" alt="ss1" src="https://user-images.githubusercontent.com/31363128/210056046-584bc8aa-d28c-4514-b031-73817012837d.png">
-	![Screenshot 1](/lms/public/images/ss1.png)
+	<img width="830" alt="ss2" src="https://user-images.githubusercontent.com/31363128/210056097-36849182-6db0-43a2-8c62-5333cd2aedf4.png">
-	![Screenshot 2](/lms/public/images/ss2.png)
+	<img width="941" alt="ss3" src="https://user-images.githubusercontent.com/31363128/210056134-01a7c429-1ef4-434e-9d43-128dda35d7e5.png">
-	![Screenshot 3](/lms/public/images/ss3.png)
-
 </details>
 
 Frappe LMS is an easy-to-use, open-source learning management system. You can use it to create and share online courses. The app has a clear UI that helps students focus only on what's important and assists in distraction-free learning.
 
-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.
+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.
 
 ## Features
 - Create online courses. 📚
-- Add detailed descriptions and preview video to the course. 🎬
+- Add detailed descriptions and preview videos to the course. 🎬
-- Add videos, quizzes and assignments to your lessons and make them interesting and interactive 📝
+- 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 classes to group your students based on courses and track their progress 🏛
+- 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. 🦹🏼‍♀️
+- Set cover image, profile photo, short bio, and other professional information. 🦹🏼‍♀️
 - Simple layout that optimizes readability 🤓
-- Delightful user-experience in overall usage ✨
+- Delightful user experience in overall usage ✨
 
 ## Tech Stack
 
-Frappe LMS is built on [Frappe Framework](https://frappeframework.com) which is a batteries-included python web-framework.
+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/)
@@ -48,24 +66,29 @@ These are some of the tools it's built on:
 - [Socket.io](https://socket.io/)
 
 ## Local Setup
+
 ### Docker
-You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, run the following commands:
+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 lms/docker
+cd apps/lms/docker
 docker-compose up
 ```
 
-Wait for sometime until the setup script creates a site. After that you can
+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.
-access `http://localhost:8000` in your browser and the app's login screen
+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.
-should show up.
+
+```
+Username: Administrator
+password: admin
+```
 
 ### Frappe Bench
 
 Currently, this app depends on the `develop` branch of [frappe](https://github.com/frappe/frappe).
 
 1. Setup frappe-bench by following [this guide](https://frappeframework.com/docs/v14/user/en/installation)
-1. In the frappe-bench directory, run `bench start` and keep it running. Open a new terminal session and cd into `frappe-bench` directory.
+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
@@ -73,16 +96,16 @@ Currently, this app depends on the `develop` branch of [frappe](https://github.c
     bench --site lms.test install-app lms
     bench --site lms.test add-to-hosts
 
- 1. Now, you can access the site at `http://gameplan.test:8080`
+ 1. Now, you can access the site at `http://lms.test:8000`
 
 
 ## Deployment
-Frappe LMS is an app built on top of Frappe Framework. So, you can follow any deployment guide for hosting a Frappe Framework based site.
+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.
 
 ### Managed Hosting
 Frappe LMS can be deployed in a few clicks on [Frappe Cloud](https://frappecloud.com/marketplace/apps/lms).
 
-### Self hosting
+### Self-hosting
 If you want to self-host, you can follow official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
 
 ## Bugs and Feature Requests

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+The Frappe team and community take security issues seriously. To report a security issue, please go through the information mentioned [here](https://frappe.io/security).
+
+We appreciate your efforts to responsibly disclose your findings. We'll endeavor to respond quickly and will keep you updated throughout the process.

crowdin.yml

@@ -0,0 +1,8 @@
+files:
+  - source: /lms/locale/main.pot
+    translation: /lms/locale/%two_letters_code%.po
+pull_request_title: "chore: sync translations from crowdin"
+pull_request_labels:
+  - translation
+commit_message: "chore: %language% translations"
+append_commit_message: false

cypress.config.js

@@ -0,0 +1,18 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+	projectId: "vandxn",
+	adminPassword: "admin",
+	testUser: "frappe@example.com",
+	defaultCommandTimeout: 20000,
+	pageLoadTimeout: 15000,
+	video: true,
+	videoUploadOnPasses: false,
+	retries: {
+		runMode: 2,
+		openMode: 0,
+	},
+	e2e: {
+		baseUrl: "http://test_site_ui:8000",
+	},
+});

cypress/e2e/course_creation.cy.js

@@ -0,0 +1,156 @@
+describe("Course Creation", () => {
+	it("creates a new course", () => {
+		cy.login();
+		cy.wait(1000);
+		cy.visit("/lms/courses");
+
+		// Create a course
+		cy.get("a").contains("New Course").click();
+		cy.wait(1000);
+		cy.url().should("include", "/courses/new/edit");
+
+		cy.get("label").contains("Title").type("Test Course");
+		cy.get("label")
+			.contains("Short Introduction")
+			.type("Test Course Short Introduction to test the UI");
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"Test Course 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."
+		);
+
+		cy.fixture("profile.png", "base64").then((fileContent) => {
+			cy.get('input[type="file"]').attachFile({
+				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(".search-input").click().type("frappe");
+		cy.wait(1000);
+		cy.get("[id^=headlessui-combobox-option-")
+			.should("be.visible")
+			.first()
+			.click();
+		cy.get("label").contains("Published").click();
+		cy.get("label").contains("Published On").type("2021-01-01");
+		cy.button("Save").click();
+
+		// Add Chapter
+		cy.wait(1000);
+		cy.button("Add Chapter").click();
+
+		cy.wait(1000);
+		cy.get("[id^=headlessui-dialog-panel-")
+			.should("be.visible")
+			.within(() => {
+				cy.get("label").contains("Title").type("Test Chapter");
+				cy.button("Add Chapter").click();
+			});
+
+		// Add Lesson
+		cy.wait(1000);
+		cy.button("Add Lesson").click();
+		cy.wait(1000);
+		cy.url().should("include", "/learn/1-1/edit");
+		cy.wait(1000);
+
+		cy.get("label").contains("Title").type("Test Lesson");
+		/* cy.get("#content .ce-block")
+			.click()
+			.invoke("text", "https://www.youtube.com/watch?v=GoDtyItReto"); */
+		/* cy.get("#content .ce-block")
+			.click()
+			.paste("https://www.youtube.com/watch?v=GoDtyItReto"); */
+
+		cy.fixture("Youtube.mov", "base64").then((fileContent) => {
+			cy.get('input[type="file"]').attachFile({
+				fileContent,
+				fileName: "Youtube.mov",
+				mimeType: "image/png",
+				encoding: "base64",
+			});
+		});
+		cy.get("#content .ce-block").type(
+			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+		);
+		cy.button("Save").click();
+
+		// View Course
+		cy.wait(1000);
+		cy.visit("/lms");
+		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(".course-image")
+				.invoke("css", "background-image")
+				.should("include", "/files/profile");
+		});
+		cy.get(".grid a:first").click();
+		cy.url().should("include", "/lms/courses/test-course");
+		cy.get("div").contains("Test Course");
+		cy.get("div").contains("Test Course Short Introduction to test the UI");
+		cy.get("div").contains("Learning");
+		cy.get("div").contains("Frappe");
+		cy.get("div").contains("ERPNext");
+		cy.get("iframe").should(
+			"have.attr",
+			"src",
+			"https://www.youtube.com/embed/-LPmw2Znl2c"
+		);
+
+		// View Chapter
+		cy.get("div").contains("Test Chapter");
+		cy.get("[id^=headlessui-disclosure-panel-").within(() => {
+			cy.get("div").contains("Test Lesson").click();
+		});
+		cy.wait(3000);
+
+		// View Lesson
+		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."
+		);
+
+		// Add Discussion
+		cy.button("New Question").click();
+		cy.wait(500);
+		cy.get("[id^=headlessui-dialog-panel-").within(() => {
+			cy.get("label").contains("Title").type("Test Discussion");
+			cy.get("div[contenteditable=true]").invoke(
+				"text",
+				"This is a test discussion. This will check if the UI is working properly."
+			);
+			cy.button("Post").click();
+		});
+
+		// View Discussion
+		cy.wait(500);
+		cy.get("div").contains("Test Discussion").click();
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"This is a test comment. This will check if the UI is working properly."
+		);
+
+		cy.get("div").contains(
+			"This is a test comment. This will check if the UI is working properly."
+		);
+	});
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,67 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import "cypress-file-upload";
+
+Cypress.Commands.add("login", (email, password) => {
+	if (!email) {
+		email = Cypress.config("testUser") || "Administrator";
+	}
+	if (!password) {
+		password = Cypress.config("adminPassword");
+	}
+	cy.request({
+		url: "/api/method/login",
+		method: "POST",
+		body: { usr: email, pwd: password },
+	});
+});
+
+Cypress.Commands.add("button", (text) => {
+	return cy.get(`button:contains("${text}")`);
+});
+
+Cypress.Commands.add("link", (text) => {
+	return cy.get(`a:contains("${text}")`);
+});
+
+Cypress.Commands.add("iconButton", (text) => {
+	return cy.get(`button[aria-label="${text}"]`);
+});
+
+Cypress.Commands.add("dialog", (selector) => {
+	return cy.get(`[role=dialog] ${selector}`);
+});
+
+Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
+	cy.wrap(subject).then(($element) => {
+		const element = $element[0];
+		element.focus();
+		element.textContent = text;
+		const event = new Event("paste", { bubbles: true });
+		element.dispatchEvent(event);
+	});
+});

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docker-installation.md

@@ -4,6 +4,8 @@
 $ git clone https://github.com/frappe/lms.git
 
 $ cd lms
+
+$ cd docker
 ```
 
 **Step 2:** Run docker-compose

docker/init.sh

@@ -8,6 +8,8 @@ else
     echo "Creating new bench..."
 fi
 
+export PATH="${NVM_DIR}/versions/node/v${NODE_VERSION_DEVELOP}/bin/:${PATH}"
+
 bench init --skip-redis-config-generation frappe-bench
 
 cd frappe-bench
@@ -36,4 +38,4 @@ bench --site lms.localhost clear-cache
 bench --site lms.localhost set-config mute_emails 1
 bench use lms.localhost
 
-bench start
+bench start

frontend/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

frontend/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

frontend/README.md

@@ -0,0 +1,42 @@
+# Frappe UI Starter
+
+This template should help get you started developing custom frontend for Frappe
+apps with Vue 3 and the Frappe UI package.
+
+This boilerplate sets up Vue 3, Vue Router, TailwindCSS, and Frappe UI out of
+the box.
+
+## Usage
+
+This template is meant to be cloned inside an existing Frappe App. Assuming your
+apps name is `todo`. Clone this template in the root folder of your app using `degit`.
+
+```
+cd apps/todo
+npx degit netchampfaris/frappe-ui-starter frontend
+cd frontend
+yarn
+yarn dev
+```
+
+In a development environment, you need to put the below key-value pair in your `site_config.json` file:
+
+```
+"ignore_csrf": 1
+```
+
+This will prevent `CSRFToken` errors while using the vite dev server. In production environment, the `csrf_token` is attached to the `window` object in `index.html` for you.
+
+The Vite dev server will start on the port `8080`. This can be changed from `vite.config.js`.
+The development server is configured to proxy your frappe app (usually running on port `8000`). If you have a site named `todo.test`, open `http://todo.test:8080` in your browser. If you see a button named "Click to send 'ping' request", congratulations!
+
+If you notice the browser URL is `/frontend`, this is the base URL where your frontend app will run in production.
+To change this, open `src/router.js` and change the base URL passed to `createWebHistory`.
+
+## Resources
+
+- [Vue 3](https://v3.vuejs.org/guide/introduction.html)
+- [Vue Router](https://next.router.vuejs.org/guide/)
+- [Frappe UI](https://github.com/frappe/frappe-ui)
+- [TailwindCSS](https://tailwindcss.com/docs/utility-first)
+- [Vite](https://vitejs.dev/guide/)

frontend/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Frappe Learning</title>
+		<meta name="title" content="{{ meta.title }}" />
+		<meta name="image" content="{{ meta.image }}" />
+		<meta name="description" content="{{ meta.description }}" />
+		<meta name="keywords" content="{{ meta.keywords }}" />
+		<meta property="og:title" content="{{ meta.title }}" />
+		<meta property="og:image" content="{{ meta.image }}" />
+		<meta property="og:description" content="{{ meta.description }}" />
+		<meta name="twitter:title" content="{{ meta.title }}" />
+		<meta name="twitter:image" content="{{ meta.image }}" />
+		<meta name="twitter:description" content="{{ meta.description }}" />
+	</head>
+	<body>
+		<div id="app">
+			<div id="seo-content">
+				<h1>{{ meta.title }}</h1>
+				<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>
+	</body>
+</html>

frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "frappe-ui-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "serve": "vite preview",
+    "build": "vite build --base=/assets/lms/frontend/ && yarn copy-html-entry",
+    "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
+  },
+  "dependencies": {
+    "@editorjs/checklist": "^1.6.0",
+    "@editorjs/code": "^2.9.0",
+    "@editorjs/editorjs": "^2.29.0",
+    "@editorjs/embed": "^2.7.0",
+    "@editorjs/header": "^2.8.1",
+    "@editorjs/inline-code": "^1.5.0",
+    "@editorjs/nested-list": "^1.4.2",
+    "@editorjs/paragraph": "^2.11.3",
+    "@editorjs/simple-image": "^1.6.0",
+    "chart.js": "^4.4.1",
+    "dayjs": "^1.11.6",
+    "feather-icons": "^4.28.0",
+    "frappe-ui": "^0.1.56",
+    "lucide-vue-next": "^0.383.0",
+    "markdown-it": "^14.0.0",
+    "pinia": "^2.0.33",
+    "socket.io-client": "^4.7.2",
+    "tailwindcss": "^3.3.3",
+    "vue": "^3.4.23",
+    "vue-chartjs": "^5.3.0",
+    "vue-draggable-next": "^2.2.1",
+    "vue-router": "^4.0.12",
+    "vuedraggable": "4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.3",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.5",
+    "vite": "^5.0.11"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

frontend/src/App.vue

@@ -0,0 +1,35 @@
+<template>
+	<Layout>
+		<router-view />
+	</Layout>
+	<Dialogs />
+	<Toasts />
+</template>
+<script setup>
+import { Toasts } from 'frappe-ui'
+import { Dialogs } from '@/utils/dialogs'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { useScreenSize } from './utils/composables'
+import DesktopLayout from './components/DesktopLayout.vue'
+import MobileLayout from './components/MobileLayout.vue'
+import { stopSession } from '@/telemetry'
+import { init as initTelemetry } from '@/telemetry'
+
+const screenSize = useScreenSize()
+
+const Layout = computed(() => {
+	if (screenSize.width < 640) {
+		return MobileLayout
+	} else {
+		return DesktopLayout
+	}
+})
+
+onMounted(async () => {
+	await initTelemetry()
+})
+
+onUnmounted(() => {
+	stopSession()
+})
+</script>

frontend/src/assets/Inter/inter.css

@@ -0,0 +1,152 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
+       url("Inter-Thin.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.12") format("woff2"),
+       url("Inter-Light.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
+       url("Inter-Regular.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
+       url("Inter-Italic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
+       url("Inter-Medium.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
+       url("Inter-Bold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.12") format("woff2"),
+       url("Inter-Black.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.12") format("woff");
+}

frontend/src/components/Annoucements.vue

@@ -0,0 +1,62 @@
+<template>
+	<div v-if="communications.data?.length">
+		<div v-for="comm in communications.data">
+			<div class="mb-8">
+				<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">
+							{{ comm.sender_full_name }}
+						</div>
+					</div>
+					<div class="text-sm">
+						{{ timeAgo(comm.communication_date) }}
+					</div>
+				</div>
+				<div
+					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-gray-600">
+		{{ __('No announcements') }}
+	</div>
+</template>
+<script setup>
+import { createListResource, Avatar } from 'frappe-ui'
+import { timeAgo } from '@/utils'
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+const communications = createListResource({
+	doctype: 'Communication',
+	fields: [
+		'subject',
+		'content',
+		'recipients',
+		'cc',
+		'communication_date',
+		'sender',
+		'sender_full_name',
+	],
+	filters: {
+		reference_doctype: 'LMS Batch',
+		reference_name: props.batch,
+	},
+	orderBy: 'communication_date desc',
+	auto: true,
+	cache: ['batch', props.batch],
+})
+</script>
+<style>
+.prose-sm p {
+	margin: 0 0 0.5rem;
+}
+</style>

frontend/src/components/AppSidebar.vue

@@ -0,0 +1,204 @@
+<template>
+	<div
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
+		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
+	>
+		<div
+			class="flex flex-col overflow-hidden"
+			:class="isSidebarCollapsed ? 'items-center' : ''"
+		>
+			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+			<div class="flex flex-col" v-if="sidebarSettings.data">
+				<SidebarLink
+					v-for="link in sidebarLinks"
+					:link="link"
+					:isCollapsed="isSidebarCollapsed"
+					class="mx-2 my-0.5"
+				/>
+			</div>
+			<div
+				v-if="sidebarSettings.data?.web_pages?.length || isModerator"
+				class="mt-4"
+			>
+				<div
+					class="flex items-center justify-between pr-2 cursor-pointer"
+					:class="isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					@click="showWebPages = !showWebPages"
+				>
+					<div
+						v-if="!isSidebarCollapsed"
+						class="flex items-center text-sm text-gray-600 my-1"
+					>
+						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+							<ChevronRight
+								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
+								:class="{ 'rotate-90': showWebPages }"
+							/>
+						</span>
+						<span class="ml-2">
+							{{ __('More') }}
+						</span>
+					</div>
+					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
+						<template #icon>
+							<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="showWebPages ? 'block' : 'hidden'"
+				>
+					<SidebarLink
+						v-for="link in sidebarSettings.data.web_pages"
+						:link="link"
+						:isCollapsed="isSidebarCollapsed"
+						class="mx-2 my-0.5"
+						:showControls="isModerator ? true : false"
+						@openModal="openPageModal"
+						@deletePage="deletePage"
+					/>
+				</div>
+			</div>
+		</div>
+		<SidebarLink
+			:link="{
+				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
+			}"
+			:isCollapsed="isSidebarCollapsed"
+			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			class="m-2"
+		>
+			<template #icon>
+				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+					<CollapseSidebar
+						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+					/>
+				</span>
+			</template>
+		</SidebarLink>
+	</div>
+	<PageModal
+		v-model="showPageModal"
+		v-model:reloadSidebar="sidebarSettings"
+		:page="pageToEdit"
+	/>
+</template>
+
+<script setup>
+import UserDropdown from '@/components/UserDropdown.vue'
+import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { useStorage } from '@vueuse/core'
+import { ref, onMounted, inject, watch } from 'vue'
+import { getSidebarLinks } from '../utils'
+import { usersStore } from '@/stores/user'
+import { sessionStore } from '@/stores/session'
+import { ChevronRight, Plus } from 'lucide-vue-next'
+import { createResource, Button } from 'frappe-ui'
+import PageModal from '@/components/Modals/PageModal.vue'
+
+const { user, sidebarSettings } = sessionStore()
+const { userResource } = usersStore()
+const socket = inject('$socket')
+const unreadCount = ref(0)
+const sidebarLinks = ref(getSidebarLinks())
+const showPageModal = ref(false)
+const isModerator = ref(false)
+const pageToEdit = ref(null)
+const showWebPages = ref(false)
+
+onMounted(() => {
+	socket.on('publish_lms_notifications', (data) => {
+		unreadNotifications.reload()
+	})
+	addNotifications()
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+			},
+		}
+	)
+})
+
+const unreadNotifications = createResource({
+	cache: 'Unread Notifications Count',
+	url: 'frappe.client.get_count',
+	makeParams(values) {
+		return {
+			doctype: 'Notification Log',
+			filters: {
+				for_user: user,
+				read: 0,
+			},
+		}
+	},
+	onSuccess(data) {
+		unreadCount.value = data
+		sidebarLinks.value = sidebarLinks.value.map((link) => {
+			if (link.label === 'Notifications') {
+				link.count = data
+			}
+			return link
+		})
+	},
+	auto: user ? true : false,
+})
+
+const addNotifications = () => {
+	if (user) {
+		sidebarLinks.value.push({
+			label: 'Notifications',
+			icon: 'Bell',
+			to: 'Notifications',
+			activeFor: ['Notifications'],
+			count: unreadCount.value,
+		})
+	}
+}
+
+const openPageModal = (link) => {
+	showPageModal.value = true
+	pageToEdit.value = link
+}
+
+const deletePage = (link) => {
+	createResource({
+		url: 'lms.lms.api.delete_sidebar_item',
+		makeParams(values) {
+			return {
+				webpage: link.web_page,
+			}
+		},
+	}).submit(
+		{},
+		{
+			onSuccess() {
+				sidebarSettings.reload()
+			},
+		}
+	)
+}
+
+const getSidebarFromStorage = () => {
+	return useStorage('sidebar_is_collapsed', false)
+}
+
+watch(userResource, () => {
+	if (userResource.data) {
+		isModerator.value = userResource.data.is_moderator
+	}
+})
+
+let isSidebarCollapsed = ref(getSidebarFromStorage())
+</script>

frontend/src/components/Assessments.vue

@@ -0,0 +1,98 @@
+<template>
+	<div>
+		<div class="text-lg font-semibold mb-4">
+			{{ __('Assessments') }}
+		</div>
+		<div v-if="assessments.data?.length">
+			<ListView
+				:columns="getAssessmentColumns()"
+				:rows="assessments.data"
+				row-key="name"
+				:options="{
+					selectable: false,
+					showTooltip: false,
+					getRowRoute: (row) => {
+						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',
+								},
+							}
+						}
+					},
+				}"
+			>
+			</ListView>
+		</div>
+		<div v-else class="text-sm italic text-gray-600">
+			{{ __('No Assessments') }}
+		</div>
+	</div>
+</template>
+<script setup>
+import { ListView, createResource } from 'frappe-ui'
+import { inject } from 'vue'
+
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+	rows: {
+		type: Array,
+	},
+	columns: {
+		type: Array,
+	},
+	options: {
+		type: Object,
+		default: () => ({
+			selectable: true,
+			totalCount: 0,
+			rowCount: 0,
+		}),
+	},
+})
+
+const assessments = createResource({
+	url: 'lms.lms.utils.get_assessments',
+	params: {
+		batch: props.batch,
+	},
+	auto: true,
+})
+
+const getAssessmentColumns = () => {
+	let columns = [
+		{
+			label: 'Assessment',
+			key: 'title',
+		},
+		{
+			label: 'Type',
+			key: 'assessment_type',
+		},
+	]
+
+	if (!user.data?.is_moderator) {
+		columns.push({
+			label: 'Status/Score',
+			key: 'status',
+			align: 'center',
+		})
+	}
+	return columns
+}
+</script>

frontend/src/components/AudioBlock.vue

@@ -0,0 +1,135 @@
+<template>
+	<div>
+		<!-- <audio width="100%" controls controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio> -->
+		<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio>
+		<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-gray-900" />
+					<Pause v-else class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+			<input
+				type="range"
+				min="0"
+				:max="duration"
+				step="0.1"
+				v-model="currentTime"
+				@input="changeCurrentTime"
+				class="duration-slider w-full h-1"
+			/>
+			<span class="text-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-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { Play, Pause, Volume2, VolumeX } from 'lucide-vue-next'
+import { Button } from 'frappe-ui'
+
+const isPlaying = ref(false)
+const audio = ref(null)
+let isMuted = ref(false)
+let currentTime = ref(0)
+let duration = ref(0)
+
+const props = defineProps({
+	file: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	setTimeout(() => {
+		audio.value = document.querySelector('audio')
+		console.log(audio.value)
+		audio.value.onloadedmetadata = () => {
+			duration.value = audio.value.duration
+		}
+		audio.value.ontimeupdate = () => {
+			currentTime.value = audio.value.currentTime
+		}
+	}, 0)
+})
+
+const togglePlay = () => {
+	if (audio.value.paused) {
+		audio.value.play()
+		isPlaying.value = true
+	} else {
+		audio.value.pause()
+		isPlaying.value = false
+	}
+}
+
+const toggleMute = () => {
+	audio.value.muted = !audio.value.muted
+	isMuted.value = audio.value.muted
+}
+
+const changeCurrentTime = () => {
+	audio.value.currentTime = currentTime.value
+}
+
+const handleAudioEnd = () => {
+	isPlaying.value = false
+}
+
+const formatTime = (time) => {
+	const minutes = Math.floor(time / 60)
+	const seconds = Math.floor(time % 60)
+	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+}
+
+watch(isPlaying, (newVal) => {
+	if (newVal) {
+		audio.value.play()
+	} else {
+		audio.value.pause()
+	}
+})
+</script>
+<style>
+.duration-slider {
+	flex: 1;
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: theme('colors.gray.400');
+	cursor: pointer;
+}
+
+.duration-slider::-webkit-slider-thumb {
+	height: 10px;
+	width: 10px;
+	-webkit-appearance: none;
+	background-color: theme('colors.gray.900');
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	input[type='range'] {
+		overflow: hidden;
+		width: 150px;
+		-webkit-appearance: none;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		cursor: pointer;
+		box-shadow: -150px 0 0 150px theme('colors.gray.900');
+	}
+}
+</style>

frontend/src/components/BatchCard.vue

@@ -0,0 +1,109 @@
+<template>
+	<div
+		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">
+			{{ batch.title }}
+		</div>
+		<Badge
+			v-if="batch.seat_count && batch.seats_left > 0"
+			theme="green"
+			class="self-start mb-2"
+		>
+			{{ batch.seats_left }}
+			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
+			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
+		</Badge>
+		<Badge
+			v-else-if="batch.seat_count && batch.seats_left <= 0"
+			theme="red"
+			class="self-start mb-2"
+		>
+			{{ __('Sold Out') }}
+		</Badge>
+		<div class="short-introduction text-sm text-gray-700">
+			{{ batch.description }}
+		</div>
+		<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-gray-700"
+			/>
+			<div class="flex items-center text-sm text-gray-700">
+				<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-gray-700"
+			>
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
+				<span>
+					{{ batch.timezone }}
+				</span>
+			</div>
+		</div>
+		<div
+			v-if="batch.instructors?.length"
+			class="flex avatar-group overlap mt-4"
+		>
+			<div
+				class="h-6 mr-1"
+				:class="{ 'avatar-group overlap': batch.instructors.length > 1 }"
+			>
+				<UserAvatar
+					v-for="instructor in batch.instructors"
+					:user="instructor"
+				/>
+			</div>
+			<CourseInstructors :instructors="batch.instructors" />
+		</div>
+	</div>
+</template>
+<script setup>
+import { Badge } from 'frappe-ui'
+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'
+
+const props = defineProps({
+	batch: {
+		type: Object,
+		default: null,
+	},
+})
+</script>
+<style>
+.short-introduction {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin: 0.25rem 0 1rem;
+	line-height: 1.5;
+}
+
+.avatar-group {
+	display: inline-flex;
+	align-items: center;
+}
+
+.avatar-group .avatar {
+	transition: margin 0.1s ease-in-out;
+}
+
+.avatar-group.overlap .avatar + .avatar {
+	margin-left: calc(-8px);
+}
+</style>

frontend/src/components/BatchCourses.vue

@@ -0,0 +1,154 @@
+<template>
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-xl font-semibold">
+				{{ __('Courses') }}
+			</div>
+			<Button
+				v-if="user.data?.is_moderator"
+				variant="solid"
+				@click="openCourseModal()"
+			>
+				<template #prefix>
+					<Plus class="h-4 w-4" />
+				</template>
+				{{ __('Add Course') }}
+			</Button>
+		</div>
+		<div v-if="courses.data?.length">
+			<ListView
+				:columns="getCoursesColumns()"
+				:rows="courses.data"
+				row-key="batch_course"
+				:options="{
+					showTooltip: false,
+					getRowRoute: (row) => ({
+						name: 'CourseDetail',
+						params: { courseName: row.name },
+					}),
+				}"
+			>
+				<ListHeader
+					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 }">
+							<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 courses.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeCourses(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+		<BatchCourseModal
+			v-model="showCourseModal"
+			:batch="batch"
+			v-model:courses="courses"
+		/>
+	</div>
+</template>
+<script setup>
+import { ref, inject } from 'vue'
+import BatchCourseModal from '@/components/Modals/BatchCourseModal.vue'
+import {
+	createResource,
+	Button,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	ListRow,
+	ListRows,
+	ListView,
+	ListRowItem,
+} from 'frappe-ui'
+import { Plus, Trash2 } from 'lucide-vue-next'
+
+const showCourseModal = ref(false)
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+const courses = createResource({
+	url: 'lms.lms.utils.get_batch_courses',
+	params: {
+		batch: props.batch,
+	},
+	cache: ['batchCourses', props.batchName],
+	auto: true,
+})
+
+const openCourseModal = () => {
+	showCourseModal.value = true
+}
+
+const getCoursesColumns = () => {
+	return [
+		{
+			label: 'Title',
+			key: 'title',
+			width: 2,
+		},
+		{
+			label: 'Lessons',
+			key: 'lesson_count',
+			align: 'right',
+		},
+		{
+			label: 'Enrollments',
+			align: 'right',
+			key: 'enrollment_count',
+		},
+	]
+}
+
+const removeCourse = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'Batch Course',
+			name: values.course,
+		}
+	},
+})
+
+const removeCourses = (selections, unselectAll) => {
+	selections.forEach(async (course) => {
+		removeCourse.submit({ course })
+	})
+	setTimeout(() => {
+		courses.reload()
+		unselectAll()
+	}, 1000)
+}
+</script>

frontend/src/components/BatchDashboard.vue

@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<UpcomingEvaluations
+			:batch="batch.data.name"
+			:endDate="batch.data.evaluation_end_date"
+			:courses="batch.data.courses"
+			:isStudent="isStudent"
+		/>
+		<Assessments :batch="batch.data.name" />
+	</div>
+</template>
+<script setup>
+import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
+import Assessments from '@/components/Assessments.vue'
+
+const props = defineProps({
+	batch: {
+		type: Object,
+		default: null,
+	},
+	isStudent: {
+		type: Boolean,
+		default: false,
+	},
+})
+</script>

frontend/src/components/BatchOverlay.vue

@@ -0,0 +1,128 @@
+<template>
+	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
+		<Badge
+			v-if="batch.data.seat_count && seats_left > 0"
+			theme="green"
+			class="self-start mb-2 float-right"
+		>
+			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
+			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
+		</Badge>
+		<Badge
+			v-else-if="batch.data.seat_count && seats_left <= 0"
+			theme="red"
+			class="self-start mb-2 float-right"
+		>
+			{{ __('Sold Out') }}
+		</Badge>
+		<div v-if="batch.data.amount" class="text-lg font-semibold mb-3">
+			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
+		</div>
+		<div class="flex items-center mb-3">
+			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
+		</div>
+		<DateRange
+			:startDate="batch.data.start_date"
+			:endDate="batch.data.end_date"
+			class="mb-3"
+		/>
+		<div class="flex items-center mb-3">
+			<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">
+			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span>
+				{{ batch.data.timezone }}
+			</span>
+		</div>
+		<router-link
+			v-if="isModerator || isStudent"
+			:to="{
+				name: 'Batch',
+				params: {
+					batchName: batch.data.name,
+				},
+			}"
+		>
+			<Button variant="solid" class="w-full mt-4">
+				<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"
+		>
+			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
+				<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"
+		>
+			{{ __('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 { Badge, Button } from 'frappe-ui'
+import { BookOpen, Clock, Globe } from 'lucide-vue-next'
+import { formatNumberIntoCurrency, formatTime } from '@/utils'
+import DateRange from '@/components/Common/DateRange.vue'
+
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: Object,
+		default: null,
+	},
+})
+
+const seats_left = computed(() => {
+	if (props.batch.data?.seat_count) {
+		return props.batch.data?.seat_count - props.batch.data?.students?.length
+	}
+	return null
+})
+
+const isStudent = computed(() => {
+	return props.batch.data?.students?.includes(user.data?.name)
+})
+
+const isModerator = computed(() => {
+	return user.data?.is_moderator
+})
+</script>

frontend/src/components/BatchStudents.vue

@@ -0,0 +1,157 @@
+<template>
+	<Button class="float-right mb-3" variant="solid" @click="openStudentModal()">
+		<template #prefix>
+			<Plus class="h-4 w-4" />
+		</template>
+		{{ __('Add Student') }}
+	</Button>
+	<div class="text-lg font-semibold mb-4">
+		{{ __('Students') }}
+	</div>
+	<div v-if="students.data?.length">
+		<ListView
+			:columns="getStudentColumns()"
+			:rows="students.data"
+			row-key="name"
+			:options="{ showTooltip: false }"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+			>
+				<ListHeaderItem :item="item" v-for="item in getStudentColumns()">
+					<template #prefix="{ item }">
+						<component
+							v-if="item.icon"
+							:is="item.icon"
+							class="h-4 w-4 stroke-1.5 ml-4"
+						/>
+					</template>
+				</ListHeaderItem>
+			</ListHeader>
+			<ListRows>
+				<ListRow :row="row" v-for="row in students.data">
+					<template #default="{ column, item }">
+						<ListRowItem :item="row[column.key]" :align="column.align">
+							<template #prefix>
+								<div v-if="column.key == 'full_name'">
+									<Avatar
+										class="flex items-center"
+										:image="row['user_image']"
+										:label="item"
+										size="sm"
+									/>
+								</div>
+							</template>
+							<div>
+								{{ row[column.key] }}
+							</div>
+						</ListRowItem>
+					</template>
+				</ListRow>
+			</ListRows>
+			<ListSelectBanner>
+				<template #actions="{ unselectAll, selections }">
+					<div class="flex gap-2">
+						<Button
+							variant="ghost"
+							@click="removeStudents(selections, unselectAll)"
+						>
+							<Trash2 class="h-4 w-4 stroke-1.5" />
+						</Button>
+					</div>
+				</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"
+		v-model="showStudentModal"
+		v-model:reloadStudents="students"
+	/>
+</template>
+<script setup>
+import {
+	createResource,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	ListRow,
+	ListRows,
+	ListView,
+	ListRowItem,
+	Avatar,
+	Button,
+} from 'frappe-ui'
+import { Trash2, Plus } from 'lucide-vue-next'
+import { ref } from 'vue'
+import StudentModal from '@/components/Modals/StudentModal.vue'
+
+const showStudentModal = ref(false)
+
+const props = defineProps({
+	batch: {
+		type: String,
+		default: null,
+	},
+})
+
+const students = createResource({
+	url: 'lms.lms.utils.get_batch_students',
+	cache: ['students', props.batch],
+	params: {
+		batch: props.batch,
+	},
+	auto: true,
+})
+
+const getStudentColumns = () => {
+	return [
+		{
+			label: 'Full Name',
+			key: 'full_name',
+			width: 2,
+		},
+		{
+			label: 'Courses Done',
+			key: 'courses_completed',
+			align: 'center',
+		},
+		{
+			label: 'Assessments Done',
+			key: 'assessments_completed',
+			align: 'center',
+		},
+		{
+			label: 'Last Active',
+			key: 'last_active',
+		},
+	]
+}
+
+const openStudentModal = () => {
+	showStudentModal.value = true
+}
+
+const removeStudent = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'Batch Student',
+			name: values.student,
+		}
+	},
+})
+
+const removeStudents = (selections, unselectAll) => {
+	selections.forEach(async (student) => {
+		removeStudent.submit({ student })
+	})
+	setTimeout(() => {
+		students.reload()
+		unselectAll()
+	}, 500)
+}
+</script>

frontend/src/components/Common/DateRange.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="flex items-center">
+		<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<span>
+			{{ getFormattedDateRange(props.startDate, props.endDate) }}
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { Calendar } from 'lucide-vue-next'
+import { getFormattedDateRange } from '@/utils'
+
+const props = defineProps({
+	startDate: {
+		type: String,
+	},
+	endDate: {
+		type: String,
+	},
+})
+</script>

frontend/src/components/Controls/Autocomplete.vue

@@ -0,0 +1,286 @@
+<template>
+	<Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
+		<Popover class="w-full" v-model:show="showOptions">
+			<template #target="{ open: openPopover, togglePopover }">
+				<slot name="target" v-bind="{ open: openPopover, togglePopover }">
+					<div class="w-full">
+						<button
+							class="flex w-full items-center justify-between focus:outline-none"
+							:class="inputClasses"
+							@click="() => togglePopover()"
+						>
+							<div class="flex items-center">
+								<slot name="prefix" />
+								<span
+									class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+									v-if="selectedValue"
+								>
+									{{ displayValue(selectedValue) }}
+								</span>
+								<span class="text-base leading-5 text-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="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" />
+							</button>
+						</div>
+						<ComboboxOptions
+							class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+							static
+						>
+							<div
+								class="mt-1.5"
+								v-for="group in groups"
+								:key="group.key"
+								v-show="group.items.length > 0"
+							>
+								<div
+									v-if="group.group && !group.hideLabel"
+									class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+								>
+									{{ 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-gray-100': 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">
+												<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>
+				</div>
+			</template>
+		</Popover>
+	</Combobox>
+</template>
+
+<script setup>
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOptions,
+	ComboboxOption,
+} from '@headlessui/vue'
+import { Popover, Button } from 'frappe-ui'
+import { ChevronDown, X } from 'lucide-vue-next'
+import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	options: {
+		type: Array,
+		default: () => [],
+	},
+	size: {
+		type: String,
+		default: 'md',
+	},
+	variant: {
+		type: String,
+		default: 'subtle',
+	},
+	placeholder: {
+		type: String,
+		default: '',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	filterable: {
+		type: Boolean,
+		default: true,
+	},
+})
+const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
+
+const query = ref('')
+const showOptions = ref(false)
+const search = ref(null)
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const valuePropPassed = computed(() => 'value' in attrs)
+
+const selectedValue = computed({
+	get() {
+		return valuePropPassed.value ? attrs.value : props.modelValue
+	},
+	set(val) {
+		query.value = ''
+		if (val) {
+			showOptions.value = false
+		}
+		emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
+	},
+})
+
+function close() {
+	showOptions.value = false
+}
+
+const groups = computed(() => {
+	if (!props.options || props.options.length == 0) return []
+
+	let groups = props.options[0]?.group
+		? props.options
+		: [{ group: '', items: props.options }]
+
+	return groups
+		.map((group, i) => {
+			return {
+				key: i,
+				group: group.group,
+				hideLabel: group.hideLabel || false,
+				items: props.filterable ? filterOptions(group.items) : group.items,
+			}
+		})
+		.filter((group) => group.items.length > 0)
+})
+
+function filterOptions(options) {
+	if (!query.value) {
+		return options
+	}
+	return options.filter((option) => {
+		let searchTexts = [option.label, option.value]
+		return searchTexts.some((text) =>
+			(text || '').toString().toLowerCase().includes(query.value.toLowerCase())
+		)
+	})
+}
+
+function displayValue(option) {
+	if (typeof option === 'string') {
+		let allOptions = groups.value.flatMap((group) => group.items)
+		let selectedOption = allOptions.find((o) => o.value === option)
+		return selectedOption?.label || option
+	}
+	return option?.label
+}
+
+watch(query, (q) => {
+	emit('update:query', q)
+})
+
+watch(showOptions, (val) => {
+	if (val) {
+		nextTick(() => {
+			search.value.el.focus()
+		})
+	}
+})
+
+const textColor = computed(() => {
+	return props.disabled ? 'text-gray-600' : 'text-gray-800'
+})
+
+const inputClasses = computed(() => {
+	let sizeClasses = {
+		sm: 'text-base rounded h-7',
+		md: 'text-base rounded h-8',
+		lg: 'text-lg rounded-md h-10',
+		xl: 'text-xl rounded-md h-10',
+	}[props.size]
+
+	let paddingClasses = {
+		sm: 'py-1.5 px-2',
+		md: 'py-1.5 px-2.5',
+		lg: 'py-1.5 px-3',
+		xl: 'py-1.5 px-3',
+	}[props.size]
+
+	let variant = props.disabled ? 'disabled' : props.variant
+	let variantClasses = {
+		subtle:
+			'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-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-gray-50 placeholder-gray-400',
+			props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+		],
+	}[variant]
+
+	return [
+		sizeClasses,
+		paddingClasses,
+		variantClasses,
+		textColor.value,
+		'transition-colors w-full',
+	]
+})
+
+defineExpose({ query })
+</script>

frontend/src/components/Controls/IconPicker.vue

@@ -0,0 +1,114 @@
+<template>
+	<div class="space-y-1.5">
+		<label class="block text-xs text-gray-600">
+			{{ label }}
+		</label>
+		<div class="w-full">
+			<Popover>
+				<template #target="{ togglePopover }">
+					<button
+						@click="openPopover(togglePopover)"
+						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-gray-700 stroke-1.5"
+							:is="icons[selectedIcon]"
+						/>
+						<component
+							v-else
+							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-gray-600">
+							{{ __('Choose an icon') }}
+						</span>
+					</button>
+				</template>
+				<template #body-main="{ close, isOpen }" class="w-full">
+					<div class="p-3 max-h-56 overflow-auto w-full">
+						<FormControl
+							ref="search"
+							v-model="iconQuery"
+							:placeholder="__('Search for an icon')"
+							autocomplete="off"
+						/>
+						<div class="grid grid-cols-10 gap-4 mt-4">
+							<div v-for="(iconComponent, iconName) in filteredIcons">
+								<component
+									:is="iconComponent"
+									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
+									@click="setIcon(iconName, close)"
+								/>
+							</div>
+						</div>
+					</div>
+				</template>
+			</Popover>
+		</div>
+	</div>
+</template>
+<script setup>
+import { FormControl, Popover } from 'frappe-ui'
+import * as icons from 'lucide-vue-next'
+import { ref, computed, onMounted, nextTick } from 'vue'
+
+const iconQuery = ref('')
+const selectedIcon = ref('')
+const search = ref(null)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const iconArray = ref(
+	Object.keys(icons)
+		.sort(() => 0.5 - Math.random())
+		.slice(0, 100)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+)
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Icon',
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+})
+
+onMounted(() => {
+	selectedIcon.value = props.modelValue
+})
+
+const setIcon = (icon, close) => {
+	emit('update:modelValue', icon)
+	selectedIcon.value = icon
+	iconQuery.value = ''
+	close()
+}
+
+const filteredIcons = computed(() => {
+	if (!iconQuery.value) {
+		return iconArray.value
+	}
+
+	return Object.keys(icons)
+		.filter((icon) =>
+			icon.toLowerCase().includes(iconQuery.value.toLowerCase())
+		)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+})
+
+const openPopover = (togglePopover) => {
+	togglePopover()
+}
+</script>

frontend/src/components/Controls/Link.vue

@@ -0,0 +1,147 @@
+<template>
+	<div class="space-y-1.5">
+		<label class="block" :class="labelClasses" v-if="attrs.label">
+			{{ attrs.label }}
+		</label>
+		<Autocomplete
+			ref="autocomplete"
+			:options="options.data"
+			v-model="value"
+			:size="attrs.size || 'sm'"
+			:variant="attrs.variant"
+			:placeholder="attrs.placeholder"
+			:filterable="false"
+		>
+			<template #target="{ open, togglePopover }">
+				<slot name="target" v-bind="{ open, togglePopover }" />
+			</template>
+
+			<template #prefix>
+				<slot name="prefix" />
+			</template>
+
+			<template #item-prefix="{ active, selected, option }">
+				<slot name="item-prefix" v-bind="{ active, selected, option }" />
+			</template>
+
+			<template #item-label="{ active, selected, option }">
+				<slot name="item-label" v-bind="{ active, selected, option }" />
+			</template>
+
+			<template v-if="attrs.onCreate" #footer="{ value, close }">
+				<div>
+					<Button
+						variant="ghost"
+						class="w-full !justify-start"
+						label="Create New"
+						@click="attrs.onCreate(value, close)"
+					>
+						<template #prefix>
+							<Plus class="h-4 w-4 stroke-1.5" />
+						</template>
+					</Button>
+				</div>
+			</template>
+		</Autocomplete>
+	</div>
+</template>
+
+<script setup>
+import Autocomplete from '@/components/Controls/Autocomplete.vue'
+import { watchDebounced } from '@vueuse/core'
+import { createResource, Button } from 'frappe-ui'
+import { Plus } from 'lucide-vue-next'
+import { useAttrs, computed, ref } from 'vue'
+
+const props = defineProps({
+	doctype: {
+		type: String,
+		required: true,
+	},
+	filters: {
+		type: Object,
+		default: () => ({}),
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const attrs = useAttrs()
+
+const valuePropPassed = computed(() => 'value' in attrs)
+
+const value = computed({
+	get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
+	set: (val) => {
+		return (
+			val?.value &&
+			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+		)
+	},
+})
+
+const autocomplete = ref(null)
+const text = ref('')
+
+watchDebounced(
+	() => autocomplete.value?.query,
+	(val) => {
+		val = val || ''
+		if (text.value === val) return
+		text.value = val
+		reload(val)
+	},
+	{ debounce: 300, immediate: true }
+)
+
+watchDebounced(
+	() => props.doctype,
+	() => reload(''),
+	{ debounce: 300, immediate: true }
+)
+
+const options = createResource({
+	url: 'frappe.desk.search.search_link',
+	cache: [props.doctype, text.value],
+	method: 'POST',
+	params: {
+		txt: text.value,
+		doctype: props.doctype,
+		filters: props.filters,
+	},
+	transform: (data) => {
+		return data.map((option) => {
+			return {
+				label: option.value,
+				value: option.value,
+				description: option.description,
+			}
+		})
+	},
+})
+
+function reload(val) {
+	options.update({
+		params: {
+			txt: val,
+			doctype: props.doctype,
+			filters: props.filters,
+		},
+	})
+	options.reload()
+}
+
+const labelClasses = computed(() => {
+	return [
+		{
+			sm: 'text-xs',
+			md: 'text-base',
+		}[attrs.size || 'sm'],
+		'text-gray-600',
+	]
+})
+</script>

frontend/src/components/Controls/MultiSelect.vue

@@ -0,0 +1,255 @@
+<template>
+	<div>
+		<label class="block mb-1" :class="labelClasses" v-if="label">
+			{{ label }}
+		</label>
+		<div class="grid grid-cols-3 gap-1">
+			<Button
+				ref="emails"
+				v-for="value in values"
+				:key="value"
+				:label="value"
+				theme="gray"
+				variant="subtle"
+				class="rounded-md"
+				@keydown.delete.capture.stop="removeLastValue"
+			>
+				<template #suffix>
+					<X @click="removeValue(value)" class="h-4 w-4 stroke-1.5" />
+				</template>
+			</Button>
+			<div class="">
+				<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" /> -->
+	</div>
+</template>
+
+<script setup>
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOptions,
+	ComboboxOption,
+} from '@headlessui/vue'
+import { createResource, Popover, Button } from 'frappe-ui'
+import { ref, computed, nextTick } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+
+const props = defineProps({
+	label: {
+		type: String,
+	},
+	size: {
+		type: String,
+		default: 'sm',
+	},
+	doctype: {
+		type: String,
+		required: true,
+	},
+	filters: {
+		type: Object,
+		default: () => ({}),
+	},
+	validate: {
+		type: Function,
+		default: null,
+	},
+	errorMessage: {
+		type: Function,
+		default: (value) => `${value} is an Invalid value`,
+	},
+})
+
+const values = defineModel()
+
+const emails = ref([])
+const search = ref(null)
+const error = ref(null)
+const query = ref('')
+const text = ref('')
+const showOptions = ref(false)
+
+const selectedValue = computed({
+	get: () => query.value || '',
+	set: (val) => {
+		query.value = ''
+		if (val) {
+			showOptions.value = false
+		}
+		val?.value && addValue(val.value)
+	},
+})
+
+watchDebounced(
+	query,
+	(val) => {
+		val = val || ''
+		if (text.value === val) return
+		text.value = val
+		reload(val)
+	},
+	{ debounce: 300, immediate: true }
+)
+
+const filterOptions = createResource({
+	url: 'frappe.desk.search.search_link',
+	method: 'POST',
+	cache: [text.value, props.doctype],
+	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(() => {
+	return filterOptions.data || []
+})
+
+function reload(val) {
+	filterOptions.update({
+		params: {
+			txt: val,
+			doctype: props.doctype,
+		},
+	})
+	filterOptions.reload()
+}
+
+const addValue = (value) => {
+	error.value = null
+	if (value) {
+		const splitValues = value.split(',')
+		splitValues.forEach((value) => {
+			value = value.trim()
+			if (value) {
+				// check if value is not already in the values array
+				if (!values.value?.includes(value)) {
+					// check if value is valid
+					if (value && props.validate && !props.validate(value)) {
+						error.value = props.errorMessage(value)
+						return
+					}
+					// add value to values array
+					if (!values.value) {
+						values.value = [value]
+					} else {
+						values.value.push(value)
+					}
+					value = value.replace(value, '')
+				}
+			}
+		})
+		!error.value && (value = '')
+	}
+}
+
+const removeValue = (value) => {
+	values.value = values.value.filter((v) => v !== value)
+}
+
+const removeLastValue = () => {
+	if (query.value) return
+
+	let emailRef = emails.value[emails.value.length - 1]?.$el
+	if (document.activeElement === emailRef) {
+		values.value.pop()
+		nextTick(() => {
+			if (values.value.length) {
+				emailRef = emails.value[emails.value.length - 1].$el
+				emailRef?.focus()
+			} else {
+				setFocus()
+			}
+		})
+	} else {
+		emailRef?.focus()
+	}
+}
+
+function setFocus() {
+	search.value.$el.focus()
+}
+
+defineExpose({ setFocus })
+
+const labelClasses = computed(() => {
+	return [
+		{
+			sm: 'text-xs',
+			md: 'text-base',
+		}[props.size || 'sm'],
+		'text-gray-600',
+	]
+})
+</script>

frontend/src/components/Controls/Rating.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="flex text-center">
+		<div v-for="index in 5">
+			<Star
+				:class="index <= rating ? 'fill-orange-500' : ''"
+				class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
+				@click="markRating(index)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { Star } from 'lucide-vue-next'
+import { ref } from 'vue'
+const props = defineProps({
+	id: {
+		type: String,
+		default: '',
+	},
+	modelValue: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const emit = defineEmits(['update:modelValue'])
+let rating = ref(props.modelValue)
+
+let emitChange = (value) => {
+	emit('update:modelValue', value)
+}
+
+function markRating(index) {
+	emitChange(index)
+	rating.value = index
+}
+</script>

frontend/src/components/CourseCard.vue

@@ -0,0 +1,186 @@
+<template>
+	<div
+		v-if="course.title"
+		class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
+		style="min-height: 350px"
+	>
+		<div
+			class="course-image"
+			:class="{ 'default-image': !course.image }"
+			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
+		>
+			<div
+				class="flex items-center flex-wrap space-y-1 space-x-1 relative top-4 px-2 w-fit"
+			>
+				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
+					{{ __('Featured') }}
+				</Badge>
+				<Badge
+					variant="outline"
+					theme="gray"
+					size="md"
+					v-for="tag in course.tags"
+				>
+					{{ tag }}
+				</Badge>
+			</div>
+			<div v-if="!course.image" class="image-placeholder">
+				{{ course.title[0] }}
+			</div>
+		</div>
+		<div class="flex flex-col flex-auto p-4">
+			<div class="flex items-center justify-between mb-2">
+				<div v-if="course.lesson_count">
+					<Tooltip :text="__('Lessons')">
+						<span class="flex items-center">
+							<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							{{ course.lesson_count }}
+						</span>
+					</Tooltip>
+				</div>
+
+				<div v-if="course.enrollment_count">
+					<Tooltip :text="__('Enrolled Students')">
+						<span class="flex items-center">
+							<Users class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							{{ course.enrollment_count }}
+						</span>
+					</Tooltip>
+				</div>
+
+				<div v-if="course.avg_rating">
+					<Tooltip :text="__('Average Rating')">
+						<span class="flex items-center">
+							<Star class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							{{ course.avg_rating }}
+						</span>
+					</Tooltip>
+				</div>
+
+				<div v-if="course.status != 'Approved'">
+					<Badge
+						variant="solid"
+						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
+						size="sm"
+					>
+						{{ course.status }}
+					</Badge>
+				</div>
+			</div>
+
+			<div class="text-xl font-semibold leading-6">
+				{{ course.title }}
+			</div>
+
+			<div class="short-introduction text-gray-700 text-sm">
+				{{ course.short_introduction }}
+			</div>
+
+			<ProgressBar
+				v-if="user && course.membership"
+				:progress="course.membership.progress"
+			/>
+
+			<div v-if="user && course.membership" class="text-sm mb-4">
+				{{ Math.ceil(course.membership.progress) }}% completed
+			</div>
+
+			<div class="flex items-center justify-between mt-auto">
+				<div class="flex avatar-group overlap">
+					<div
+						class="h-6 mr-1"
+						:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
+					>
+						<UserAvatar
+							v-for="instructor in course.instructors"
+							:user="instructor"
+						/>
+					</div>
+					<CourseInstructors :instructors="course.instructors" />
+				</div>
+
+				<div class="font-semibold">
+					{{ course.price }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { BookOpen, Users, Star } from 'lucide-vue-next'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { sessionStore } from '@/stores/session'
+import { Badge, Tooltip } from 'frappe-ui'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
+
+const { user } = sessionStore()
+
+const props = defineProps({
+	course: {
+		type: Object,
+		default: null,
+	},
+})
+</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;
+	margin-right: 0.5rem;
+	padding: 3.5px 8px;
+	font-size: 11px;
+	text-align: center;
+	letter-spacing: 0.011em;
+	text-transform: uppercase;
+	font-weight: 600;
+	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;
+}
+
+.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);
+}
+
+.short-introduction {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin: 0.25rem 0 1.25rem;
+	line-height: 1.5;
+}
+</style>

frontend/src/components/CourseCardOverlay.vue

@@ -0,0 +1,221 @@
+<template>
+	<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.price" class="text-2xl font-semibold mb-3">
+				{{ course.data.price }}
+			</div>
+			<router-link
+				v-if="course.data.membership"
+				:to="{
+					name: 'Lesson',
+					params: {
+						courseName: course.name,
+						chapterNumber: course.data.current_lesson
+							? course.data.current_lesson.split('-')[0]
+							: 1,
+						lessonNumber: course.data.current_lesson
+							? course.data.current_lesson.split('-')[1]
+							: 1,
+					},
+				}"
+			>
+				<Button variant="solid" size="md" class="w-full">
+					<span>
+						{{ __('Continue Learning') }}
+					</span>
+				</Button>
+			</router-link>
+			<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">
+					<span>
+						{{ __('Buy this course') }}
+					</span>
+				</Button>
+			</router-link>
+			<div
+				v-else-if="course.data.disable_self_learning"
+				class="bg-blue-100 text-blue-900 text-sm rounded-md py-1 px-3"
+			>
+				{{ __('Contact the Administrator to enroll for this course.') }}
+			</div>
+			<Button
+				v-else
+				@click="enrollStudent()"
+				variant="solid"
+				class="w-full"
+				size="md"
+			>
+				<span>
+					{{ __('Start Learning') }}
+				</span>
+			</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>
+				</Button>
+			</router-link>
+			<div class="mt-8 mb-4 font-medium">
+				{{ __('This course has:') }}
+			</div>
+			<div class="flex items-center mb-3">
+				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
+				<span class="ml-2">
+					{{ course.data.lesson_count }} {{ __('Lessons') }}
+				</span>
+			</div>
+			<div class="flex items-center mb-3">
+				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
+				<span class="ml-2">
+					{{ course.data.enrollment_count_formatted }}
+					{{ __('Enrolled Students') }}
+				</span>
+			</div>
+			<div class="flex items-center">
+				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
+				<span class="ml-2">
+					{{ course.data.avg_rating }} {{ __('Rating') }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { computed, inject } from 'vue'
+import { Button, createResource } from 'frappe-ui'
+import { createToast } from '@/utils/'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const user = inject('$user')
+
+const props = defineProps({
+	course: {
+		type: Object,
+		default: null,
+	},
+})
+
+const video_link = computed(() => {
+	if (props.course.data.video_link) {
+		return 'https://www.youtube.com/embed/' + props.course.data.video_link
+	}
+	return null
+})
+
+function enrollStudent() {
+	if (!user.data) {
+		createToast({
+			title: 'Please Login',
+			icon: 'alert-circle',
+			iconClasses: 'text-yellow-600 bg-yellow-100',
+		})
+		setTimeout(() => {
+			window.location.href = `/login?redirect-to=${window.location.pathname}`
+		}, 2000)
+	} else {
+		const enrollStudentResource = createResource({
+			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
+		})
+		enrollStudentResource
+			.submit({
+				course: props.course.data.name,
+			})
+			.then(() => {
+				createToast({
+					title: 'Enrolled Successfully',
+					icon: 'check',
+					iconClasses: 'text-green-600 bg-green-100',
+				})
+				setTimeout(() => {
+					router.push({
+						name: 'Lesson',
+						params: {
+							courseName: props.course.data.name,
+							chapterNumber: 1,
+							lessonNumber: 1,
+						},
+					})
+				}, 3000)
+			})
+	}
+}
+
+const is_instructor = () => {
+	let user_is_instructor = false
+	props.course.data.instructors.forEach((instructor) => {
+		if (!user_is_instructor && instructor.name == user.data?.name) {
+			user_is_instructor = true
+		}
+	})
+	return user_is_instructor
+}
+
+const canGetCertificate = computed(() => {
+	if (
+		props.course.data?.enable_certification &&
+		props.course.data?.membership?.progress == 100
+	) {
+		return true
+	}
+	return false
+})
+
+const certificate = createResource({
+	url: 'lms.lms.doctype.lms_certificate.lms_certificate.create_certificate',
+	makeParams(values) {
+		return {
+			course: values.course,
+		}
+	},
+	onSuccess(data) {
+		console.log(data)
+		window.open(
+			`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+				data.name
+			}&format=${encodeURIComponent(data.template)}`,
+			'_blank'
+		)
+	},
+})
+
+const fetchCertificate = () => {
+	certificate.submit({
+		course: props.course.data?.name,
+		member: user.data?.name,
+	})
+}
+</script>

frontend/src/components/CourseInstructors.vue

@@ -0,0 +1,50 @@
+<template>
+	<span v-if="instructors.length == 1">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].full_name }}
+		</router-link>
+	</span>
+	<span v-if="instructors.length == 2">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].first_name }}
+		</router-link>
+		and
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[1].username },
+			}"
+		>
+			{{ instructors[1].first_name }}
+		</router-link>
+	</span>
+	<span v-if="instructors.length > 2">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].first_name }}
+		</router-link>
+		and {{ instructors.length - 1 }} others
+	</span>
+</template>
+<script setup>
+const props = defineProps({
+	instructors: {
+		type: Array,
+		required: true,
+	},
+})
+</script>

frontend/src/components/CourseOutline.vue

@@ -0,0 +1,236 @@
+<template>
+	<div class="text-base">
+		<div
+			v-if="title && (outline.data?.length || allowEdit)"
+			class="grid grid-cols-[70%,30%] mb-4 px-2"
+		>
+			<div class="font-semibold text-lg">
+				{{ __(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="{
+				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
+			}"
+		>
+			<Disclosure
+				v-slot="{ open }"
+				v-for="(chapter, index) in outline.data"
+				:key="chapter.name"
+				:defaultOpen="openChapterDetail(chapter.idx)"
+			>
+				<DisclosureButton ref="" class="flex w-full p-2">
+					<ChevronRight
+						:class="{
+							'rotate-90 transform duration-200': open,
+							'duration-200': !open,
+							open: index == 1,
+						}"
+						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+					/>
+					<div class="text-base text-left font-medium leading-5">
+						{{ chapter.title }}
+					</div>
+				</DisclosureButton>
+				<DisclosurePanel>
+					<Draggable
+						:list="chapter.lessons"
+						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],
+										},
+									}"
+								>
+									<div class="flex items-center text-sm leading-5 group">
+										<MonitorPlay
+											v-if="lesson.icon === 'icon-youtube'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										<HelpCircle
+											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="trashLesson(lesson.name, chapter.name)"
+											class="h-4 w-4 stroke-1.5 text-gray-700 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
+							:to="{
+								name: 'LessonForm',
+								params: {
+									courseName: courseName,
+									chapterNumber: chapter.idx,
+									lessonNumber: chapter.lessons.length + 1,
+								},
+							}"
+						>
+							<Button>
+								{{ __('Add Lesson') }}
+							</Button>
+						</router-link>
+						<Button class="ml-2" @click="openChapterModal(chapter)">
+							{{ __('Edit Chapter') }}
+						</Button>
+					</div>
+				</DisclosurePanel>
+			</Disclosure>
+		</div>
+	</div>
+	<ChapterModal
+		v-model="showChapterModal"
+		v-model:outline="outline"
+		:course="courseName"
+		:chapterDetail="getCurrentChapter()"
+	/>
+</template>
+<script setup>
+import { Button, createResource } from 'frappe-ui'
+import { ref } from 'vue'
+import Draggable from 'vuedraggable'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import {
+	ChevronRight,
+	MonitorPlay,
+	HelpCircle,
+	FileText,
+	Check,
+	Trash2,
+} from 'lucide-vue-next'
+import { useRoute } from 'vue-router'
+import ChapterModal from '@/components/Modals/ChapterModal.vue'
+import { showToast } from '@/utils'
+
+const route = useRoute()
+const expandAll = ref(true)
+const showChapterModal = ref(false)
+const currentChapter = ref(null)
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+	showOutline: {
+		type: Boolean,
+		default: false,
+	},
+	title: {
+		type: String,
+		default: '',
+	},
+	allowEdit: {
+		type: Boolean,
+		default: false,
+	},
+	getProgress: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const outline = createResource({
+	url: 'lms.lms.utils.get_course_outline',
+	cache: ['course_outline', props.courseName],
+	params: {
+		course: props.courseName,
+		progress: props.getProgress,
+	},
+	auto: true,
+})
+
+const deleteLesson = createResource({
+	url: 'lms.lms.api.delete_lesson',
+	makeParams(values) {
+		return {
+			lesson: values.lesson,
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Lesson deleted successfully', 'check')
+	},
+})
+
+const updateLessonIndex = createResource({
+	url: 'lms.lms.api.update_lesson_index',
+	makeParams(values) {
+		return {
+			lesson: values.lesson,
+			sourceChapter: values.sourceChapter,
+			targetChapter: values.targetChapter,
+			idx: values.idx,
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Lesson moved successfully', 'check')
+	},
+})
+
+const trashLesson = (lessonName, chapterName) => {
+	deleteLesson.submit({
+		lesson: lessonName,
+		chapter: chapterName,
+	})
+}
+
+const openChapterDetail = (index) => {
+	return index == route.params.chapterNumber || index == 1
+}
+
+const openChapterModal = (chapter = null) => {
+	currentChapter.value = chapter
+	showChapterModal.value = true
+}
+
+const getCurrentChapter = () => {
+	return currentChapter.value
+}
+
+const updateOutline = (e) => {
+	updateLessonIndex.submit({
+		lesson: e.item.__draggable_context.element.name,
+		sourceChapter: e.from.dataset.chapter,
+		targetChapter: e.to.dataset.chapter,
+		idx: e.newIndex,
+	})
+}
+</script>
+<style>
+.outline-lesson:has(.router-link-active) {
+	background-color: theme('colors.gray.100');
+}
+</style>

frontend/src/components/CourseReviews.vue

@@ -0,0 +1,115 @@
+<template>
+	<div v-if="reviews.data?.length || membership" class="mt-20 mb-10">
+		<Button
+			v-if="membership && !hasReviewed.data"
+			@click="openReviewModal()"
+			class="float-right"
+		>
+			{{ __('Write a Review') }}
+		</Button>
+		<div class="flex items-center font-semibold text-2xl">
+			{{ __('Student Reviews') }}
+		</div>
+		<div class="grid gap-8 mt-10">
+			<div v-for="(review, index) in reviews.data">
+				<div class="flex items-center">
+					<router-link
+						:to="{
+							name: 'Profile',
+							params: { username: review.owner_details.username },
+						}"
+					>
+						<UserAvatar :user="review.owner_details" :size="'2xl'" />
+					</router-link>
+					<div class="mx-4">
+						<router-link
+							:to="{
+								name: 'Profile',
+								params: { username: review.owner_details.username },
+							}"
+						>
+							<span class="text-lg font-medium mr-4">
+								{{ review.owner_details.full_name }}
+							</span>
+						</router-link>
+						<span>
+							{{ review.creation }}
+						</span>
+						<div class="flex mt-2">
+							<Star
+								v-for="index in 5"
+								class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
+								:class="
+									index <= Math.ceil(review.rating)
+										? 'fill-orange-500'
+										: 'fill-gray-600'
+								"
+							/>
+						</div>
+					</div>
+				</div>
+				<div v-if="review.review" class="mt-4 leading-5">
+					{{ review.review }}
+				</div>
+			</div>
+		</div>
+	</div>
+	<ReviewModal
+		v-model="showReviewModal"
+		v-model:reloadReviews="reviews"
+		v-model:hasReviewed="hasReviewed"
+		:courseName="courseName"
+	/>
+</template>
+<script setup>
+import { Star } from 'lucide-vue-next'
+import { createResource, Button } from 'frappe-ui'
+import { computed, ref, inject } from 'vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import ReviewModal from '@/components/Modals/ReviewModal.vue'
+
+const user = inject('$user')
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+	avg_rating: {
+		type: Number,
+		required: true,
+	},
+	membership: {
+		type: Object,
+		required: false,
+	},
+})
+
+const hasReviewed = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['eligible_to_review', props.courseName, props.membership?.member],
+	params: {
+		doctype: 'LMS Course Review',
+		filters: {
+			course: props.courseName,
+			owner: props.membership?.member,
+		},
+	},
+	auto: user.data?.name ? true : false,
+})
+
+const reviews = createResource({
+	url: 'lms.lms.utils.get_reviews',
+	cache: ['course_reviews', props.courseName],
+	params: {
+		course: props.courseName,
+	},
+	auto: true,
+})
+
+const showReviewModal = ref(false)
+
+function openReviewModal() {
+	showReviewModal.value = true
+}
+</script>

frontend/src/components/CreateOutline.vue

@@ -0,0 +1,30 @@
+<template>
+	<div v-if="course">
+		<div class="text-xl font-semibold">
+			{{ course.title }}
+		</div>
+		<div v-if="course.chapters.length">
+			{{ course.chapters }}
+		</div>
+		<div v-else class="border bg-white rounded-md p-5 text-center mt-4">
+			<div>
+				{{
+					__(
+						'There are no chapters in this course. Create and manage chapters from here.'
+					)
+				}}
+			</div>
+			<Button class="mt-4">
+				{{ __('Add Chapter') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+const props = defineProps({
+	course: {
+		type: Object,
+		default: {},
+	},
+})
+</script>

frontend/src/components/DesktopLayout.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="relative flex h-full flex-col">
+		<div class="h-full flex-1">
+			<div class="flex h-screen text-base">
+				<div
+					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
+				>
+					<AppSidebar />
+				</div>
+				<div class="w-full overflow-auto" id="scrollContainer">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import AppSidebar from './AppSidebar.vue'
+</script>

frontend/src/components/DiscussionReplies.vue

@@ -0,0 +1,244 @@
+<template>
+	<div class="mt-6">
+		<div v-if="!singleThread" class="flex items-center mb-5">
+			<Button variant="outline" @click="showTopics = true">
+				<template #icon>
+					<ChevronLeft class="w-5 h-5 stroke-1.5 text-gray-700" />
+				</template>
+			</Button>
+			<span class="text-lg font-semibold ml-2">
+				{{ topic.title }}
+			</span>
+		</div>
+
+		<div v-for="(reply, index) in replies.data">
+			<div
+				class="py-3"
+				:class="{ 'border-b': index + 1 != replies.data.length }"
+			>
+				<div class="flex items-center justify-between mb-2">
+					<div class="flex items-center">
+						<UserAvatar :user="reply.user" class="mr-2" />
+						<span>
+							{{ reply.user.full_name }}
+						</span>
+						<span class="text-sm ml-2">
+							{{ timeAgo(reply.creation) }}
+						</span>
+					</div>
+					<Dropdown
+						v-if="user.data.name == reply.owner && !reply.editable"
+						:options="[
+							{
+								label: 'Edit',
+								onClick() {
+									reply.editable = true
+								},
+							},
+							{
+								label: 'Delete',
+								onClick() {
+									deleteReply(reply)
+								},
+							},
+						]"
+					>
+						<template v-slot="{ open }">
+							<MoreHorizontal class="w-4 h-4 stroke-1.5 cursor-pointer" />
+						</template>
+					</Dropdown>
+					<div v-if="reply.editable">
+						<Button variant="ghost" @click="postEdited(reply)">
+							{{ __('Post') }}
+						</Button>
+						<Button variant="ghost" @click="reply.editable = false">
+							{{ __('Discard') }}
+						</Button>
+					</div>
+				</div>
+				<TextEditor
+					:content="reply.reply"
+					@change="(val) => (reply.reply = val)"
+					:editable="reply.editable || false"
+					:fixedMenu="reply.editable || false"
+					:editorClass="
+						reply.editable
+							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none'
+							: 'prose-sm'
+					"
+				/>
+			</div>
+		</div>
+
+		<TextEditor
+			class="mt-5"
+			:content="newReply"
+			:mentions="mentionUsers"
+			@change="(val) => (newReply = val)"
+			placeholder="Type your reply here..."
+			:fixedMenu="true"
+			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none border border-gray-300 rounded-b-md min-h-[7rem] py-1 px-2"
+		/>
+		<div class="flex justify-between mt-2">
+			<span> </span>
+			<Button @click="postReply()">
+				<span>
+					{{ __('Post') }}
+				</span>
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
+import { timeAgo } from '../utils'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
+import { ref, inject, onMounted, computed } from 'vue'
+import { createToast } from '../utils'
+
+const showTopics = defineModel('showTopics')
+const newReply = ref('')
+const socket = inject('$socket')
+const user = inject('$user')
+const allUsers = inject('$allUsers')
+
+const props = defineProps({
+	topic: {
+		type: Object,
+		required: true,
+	},
+	singleThread: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+onMounted(() => {
+	socket.on('publish_message', (data) => {
+		replies.reload()
+	})
+	socket.on('update_message', (data) => {
+		replies.reload()
+	})
+	socket.on('delete_message', (data) => {
+		replies.reload()
+	})
+})
+
+const replies = createResource({
+	url: 'lms.lms.utils.get_discussion_replies',
+	cache: ['replies', props.topic],
+	makeParams(values) {
+		return {
+			topic: props.topic.name,
+		}
+	},
+	auto: true,
+})
+
+const newReplyResource = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'Discussion Reply',
+				reply: newReply.value,
+				topic: props.topic.name,
+			},
+		}
+	},
+})
+
+const mentionUsers = computed(() => {
+	let users = Object.values(allUsers.data).map((user) => {
+		return {
+			value: user.name,
+			label: user.full_name,
+		}
+	})
+	return users
+})
+
+const postReply = () => {
+	newReplyResource.submit(
+		{},
+		{
+			validate() {
+				if (!newReply.value) {
+					return 'Reply cannot be empty'
+				}
+			},
+			onSuccess() {
+				newReply.value = ''
+				replies.reload()
+			},
+			onError(err) {
+				createToast({
+					title: 'Error',
+					text: err.messages?.[0] || err,
+					icon: 'x',
+					iconClasses: 'bg-red-600 text-white rounded-md p-px',
+					position: 'top-center',
+					timeout: 10,
+				})
+			},
+		}
+	)
+}
+
+const editReplyResource = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'Discussion Reply',
+			name: values.name,
+			fieldname: 'reply',
+			value: values.reply,
+		}
+	},
+})
+
+const postEdited = (reply) => {
+	editReplyResource.submit(
+		{
+			name: reply.name,
+			reply: reply.reply,
+		},
+		{
+			validate() {
+				if (!reply.reply) {
+					return 'Reply cannot be empty'
+				}
+			},
+			onSuccess() {
+				reply.editable = false
+				replies.reload()
+			},
+		}
+	)
+}
+
+const deleteReplyResource = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'Discussion Reply',
+			name: values.name,
+		}
+	},
+})
+
+const deleteReply = (reply) => {
+	deleteReplyResource.submit(
+		{
+			name: reply.name,
+		},
+		{
+			onSuccess() {
+				replies.reload()
+			},
+		}
+	)
+}
+</script>

frontend/src/components/Discussions.vue

@@ -0,0 +1,151 @@
+<template>
+	<div>
+		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
+			{{ __('New {0}').format(title) }}
+		</Button>
+		<div class="text-xl font-semibold">
+			{{ __(title) }}
+		</div>
+	</div>
+	<div v-if="topics.data?.length && !singleThread">
+		<div v-if="showTopics" v-for="(topic, index) in topics.data">
+			<div
+				@click="showReplies(topic)"
+				class="flex items-center cursor-pointer py-5 w-full"
+				:class="{ 'border-b': index + 1 != topics.data.length }"
+			>
+				<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
+				<div>
+					<div class="text-lg font-semibold mb-1">
+						{{ topic.title }}
+					</div>
+					<div class="flex items-center">
+						<span>
+							{{ topic.user.full_name }}
+						</span>
+						<span class="text-sm ml-3">
+							{{ timeAgo(topic.creation) }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div v-else>
+			<DiscussionReplies
+				:topic="currentTopic"
+				v-model:showTopics="showTopics"
+			/>
+		</div>
+	</div>
+	<div v-else-if="singleThread && topics.data">
+		<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
+	</div>
+	<div
+		v-else
+		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
+	>
+		<MessageSquareText class="w-7 h-7 text-gray-500 stroke-1.5 mr-2" />
+		<div class="">
+			<div v-if="emptyStateTitle" class="font-medium mb-2">
+				{{ __(emptyStateTitle) }}
+			</div>
+			<div class="text-gray-600">
+				{{ __(emptyStateText) }}
+			</div>
+		</div>
+	</div>
+	<DiscussionModal
+		v-model="showTopicModal"
+		:title="__('New {0}').format(title)"
+		:doctype="props.doctype"
+		:docname="props.docname"
+		v-model:reloadTopics="topics"
+	/>
+</template>
+<script setup>
+import { createResource, Button } from 'frappe-ui'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { timeAgo } from '../utils'
+import { ref, onMounted, inject } from 'vue'
+import DiscussionReplies from '@/components/DiscussionReplies.vue'
+import DiscussionModal from '@/components/Modals/DiscussionModal.vue'
+import { MessageSquareText } from 'lucide-vue-next'
+import { getScrollContainer } from '@/utils/scrollContainer'
+
+const showTopics = ref(true)
+const currentTopic = ref(null)
+const socket = inject('$socket')
+const user = inject('$user')
+const showTopicModal = ref(false)
+
+const props = defineProps({
+	title: {
+		type: String,
+		required: true,
+	},
+	doctype: {
+		type: String,
+		required: true,
+	},
+	docname: {
+		type: String,
+		required: true,
+	},
+	emptyStateTitle: {
+		type: String,
+		default: '',
+	},
+	emptyStateText: {
+		type: String,
+		default: 'Start a discussion',
+	},
+	singleThread: {
+		type: Boolean,
+		default: false,
+	},
+	scrollToBottom: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+onMounted(() => {
+	if (user.data) topics.reload()
+
+	socket.on('new_discussion_topic', (data) => {
+		topics.refresh()
+	})
+
+	if (props.scrollToBottom) {
+		setTimeout(() => {
+			scrollToEnd()
+		}, 100)
+	}
+})
+
+const scrollToEnd = () => {
+	let scrollContainer = getScrollContainer()
+	scrollContainer.scrollTop = scrollContainer.scrollHeight
+}
+
+const topics = createResource({
+	url: 'lms.lms.utils.get_discussion_topics',
+	cache: ['topics', props.doctype, props.docname],
+	makeParams() {
+		return {
+			doctype: props.doctype,
+			docname: props.docname,
+			single_thread: props.singleThread,
+		}
+	},
+})
+
+const showReplies = (topic) => {
+	showTopics.value = false
+	currentTopic.value = topic
+}
+
+const openTopicModal = () => {
+	showTopicModal.value = true
+}
+</script>