feat: exercise form and submission list

2025-06-20 19:59:10 +05:30
parent 9bb4c45a23
commit 88a2b69980
26 changed files with 938 additions and 51 deletions
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -32,6 +32,7 @@ declare module 'vue' {
    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
    Code: typeof import('./src/components/Controls/Code.vue')['default']
    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -343,6 +343,22 @@ const addAssignments = () => {
 	}
 }

+const addProgrammingExercises = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.push({
+			label: 'Programming Exercises',
+			icon: 'Code',
+			to: 'ProgrammingExercises',
+			activeFor: [
+				'ProgrammingExercises',
+				'ProgrammingExerciseForm',
+				'ProgrammingExerciseSubmissionList',
+				'ProgrammingExerciseSubmission',
+			],
+		})
+	}
+}
+
 const addPrograms = () => {
 	let activeFor = ['Programs', 'ProgramForm']
 	let index = 1
@@ -628,6 +644,7 @@ watch(userResource, () => {
 		addPrograms()
 		addQuizzes()
 		addAssignments()
+		addProgrammingExercises()
 		setUpOnboarding()
 	}
 })
--- a/frontend/src/components/AssessmentPlugin.vue
+++ b/frontend/src/components/AssessmentPlugin.vue
@@ -2,17 +2,24 @@
 	<Dialog
 		v-model="show"
 		:options="{
+			title:
+				type == 'quiz'
+					? __('Add a quiz to your lesson')
+					: __('Add an assignment to your lesson'),
 			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: () => {
+						addAssessment()
+					},
+				},
+			],
 		}"
 	>
-		<template #body>
-			<div class="p-5 space-y-4">
-				<div v-if="type == 'quiz'" class="text-lg font-semibold">
-					{{ __('Add a quiz to your lesson') }}
-				</div>
-				<div v-else class="text-lg font-semibold">
-					{{ __('Add an assignment to your lesson') }}
-				</div>
+		<template #body-content>
+			<div class="">
 				<div>
 					<Link
 						v-if="type == 'quiz'"
@@ -29,17 +36,12 @@
 						:onCreate="(value, close) => redirectToForm()"
 					/>
 				</div>
-				<div class="flex justify-end space-x-2">
-					<Button variant="solid" @click="addAssessment()">
-						{{ __('Save') }}
-					</Button>
-				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Button } from 'frappe-ui'
+import { Dialog } from 'frappe-ui'
 import { onMounted, ref, nextTick } from 'vue'
 import Link from '@/components/Controls/Link.vue'

--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -0,0 +1,140 @@
+<template>
+	<div>
+		<div class="overflow-x-auto border rounded-md">
+			<!-- Header Row -->
+			<div
+				class="grid items-center space-x-4 p-2 border-b"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<div
+					v-for="(column, index) in columns"
+					:key="index"
+					class="text-sm text-ink-gray-5"
+				>
+					{{ column }}
+				</div>
+				<div></div>
+			</div>
+			<!-- Data Rows -->
+			<div
+				v-for="(row, rowIndex) in rows"
+				:key="rowIndex"
+				class="grid items-center space-x-4 p-2"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<template v-for="key in Object.keys(row)" :key="key">
+					<input
+						v-if="showKey(key)"
+						v-model="row[key]"
+						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-sm text-sm focus:outline-none"
+					/>
+				</template>
+
+				<div class="relative" ref="menuRef">
+					<Button variant="ghost">
+						<template #icon>
+							<Ellipsis
+								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+								@click="toggleMenu(rowIndex)"
+							/>
+						</template>
+					</Button>
+
+					<div
+						v-if="menuOpenIndex === rowIndex"
+						class="absolute right-0 z-10 mt-1 w-32 bg-white border border-outline-gray-1 rounded-md shadow-sm"
+					>
+						<button
+							@click="deleteRow(rowIndex)"
+							class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
+						>
+							<Trash2 class="size-4 stroke-1.5" />
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Add Row Button -->
+		<div class="mt-2">
+			<Button @click="addRow">
+				<template #prefix>
+					<Plus class="size-4 text-ink-gray-7" />
+				</template>
+				{{ __('Add Row') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from 'frappe-ui'
+import { Ellipsis, Plus, Trash2 } from 'lucide-vue-next'
+import { onClickOutside } from '@vueuse/core'
+
+const rows = defineModel<Cell[][]>()
+const menuOpenIndex = ref<number | null>(null)
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Cell[][]): void
+}>()
+
+type Cell = {
+	value: string
+	editable?: boolean
+}
+
+// Props
+const props = withDefaults(
+	defineProps<{
+		modelValue?: Cell[][]
+		columns?: string[]
+	}>(),
+	{
+		columns: [],
+	}
+)
+
+const columns = ref(props.columns)
+
+const addRow = () => {
+	if (!rows.value) {
+		rows.value = []
+	}
+	let newRow: { [key: string]: string } = {}
+	columns.value.forEach((column: any) => {
+		newRow[column.toLowerCase().split(' ').join('_')] = ''
+	})
+	rows.value.push(newRow)
+	emit('update:modelValue', rows.value)
+}
+
+const deleteRow = (index: number) => {
+	rows.value.splice(index, 1)
+	emit('update:modelValue', rows.value)
+}
+
+const getGridTemplateColumns = () => {
+	return [...Array(columns.value.length).fill('1fr'), '0.25fr'].join(' ')
+}
+
+const toggleMenu = (index: number) => {
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
+}
+
+// Optional: Close menu when clicking outside
+const menuRef = ref(null)
+onClickOutside(menuRef, () => {
+	menuOpenIndex.value = null
+})
+
+const showKey = (key: string) => {
+	let columnsLower = columns.value.map((col) =>
+		col.toLowerCase().split(' ').join('_')
+	)
+	return columnsLower.includes(key)
+}
+</script>
--- a/frontend/src/components/Controls/Code.vue
+++ b/frontend/src/components/Controls/Code.vue
@@ -59,7 +59,6 @@ const code = ref<string>('')
 watch(
 	() => props.modelValue,
 	(newVal) => {
-		console.log('newVal', newVal)
 		code.value =
 			typeof newVal === 'string' ? newVal : JSON.stringify(newVal, null, 2)
 	},
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -138,6 +138,7 @@ watch(userResource, () => {
 	) {
 		addQuizzes()
 		addAssignments()
+		addProgrammingExercises()
 	}
 })

@@ -157,6 +158,14 @@ const addAssignments = () => {
 	})
 }

+const addProgrammingExercises = () => {
+	otherLinks.value.push({
+		label: 'Programming Exercises',
+		icon: 'Code',
+		to: 'ProgrammingExercises',
+	})
+}
+
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -0,0 +1,11 @@
+export {}
+
+declare global {
+  function __(text: string): string
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    __: (text: string) => string
+  }
+}
--- a/frontend/src/pages/Assignments.vue
+++ b/frontend/src/pages/Assignments.vue
@@ -22,14 +22,11 @@

 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
 		<div class="flex items-center justify-between mb-5">
-			<div
-				v-if="assignmentCount"
-				class="text-xl font-semibold text-ink-gray-7 mb-4"
-			>
+			<div v-if="assignmentCount" class="text-lg font-semibold text-ink-gray-9">
 				{{ __('{0} Assignments').format(assignmentCount) }}
 			</div>
 			<div
-				v-if="assignments.data?.length || assigmentCount > 0"
+				v-if="assignments.data?.length || assignmentCount > 0"
 				class="grid grid-cols-2 gap-5"
 			>
 				<FormControl
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -57,7 +57,7 @@
 		</div>
 		<div
 			v-if="courses.data?.length"
-			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-5"
 		>
 			<router-link
 				v-for="course in courses.data"
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -65,7 +65,7 @@
 				<div
 					class="border-r container pt-5 pb-10 px-5 h-full"
 					:class="{
-						'w-full md:w-3/4 mx-auto border-none !pt-10': zenModeEnabled,
+						'w-full md:w-3/5 mx-auto border-none !pt-10': zenModeEnabled,
 					}"
 				>
 					<div
@@ -296,6 +296,7 @@ import {
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, enablePlyr } from '@/utils'
 import { sessionStore } from '@/stores/session'
+import { useSidebar } from '@/stores/sidebar'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
@@ -316,6 +317,7 @@ const hasQuiz = ref(false)
 const discussionsContainer = ref(null)
 const timer = ref(0)
 const { brand } = sessionStore()
+const sidebarStore = useSidebar()
 let timerInterval

 const props = defineProps({
@@ -335,6 +337,8 @@ const props = defineProps({

 onMounted(() => {
 	startTimer()
+	console.log(sidebarStore.isSidebarCollapsed)
+	sidebarStore.isSidebarCollapsed = true
 	document.addEventListener('fullscreenchange', attachFullscreenEvent)
 	socket.on('update_lesson_progress', (data) => {
 		if (data.course === props.courseName) {
@@ -357,6 +361,7 @@ const attachFullscreenEvent = () => {

 onBeforeUnmount(() => {
 	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
+	sidebarStore.isSidebarCollapsed = false
 })

 const lesson = createResource({
@@ -554,7 +559,7 @@ const canGoZen = () => {
 		user.data?.is_instructor ||
 		user.data?.is_evaluator
 	)
-		return false
+		return true
 	if (lesson.data?.membership) return true
 	return false
 }
--- a/frontend/src/pages/LessonForm.vue
+++ b/frontend/src/pages/LessonForm.vue
@@ -210,7 +210,7 @@ const addInstructorNotes = (data) => {
 const enableAutoSave = () => {
 	autoSaveInterval = setInterval(() => {
 		saveLesson({ showSuccessMessage: false })
-	}, 5000)
+	}, 10000)
 }

 const keyboardShortcut = (e) => {
@@ -385,8 +385,10 @@ const saveLesson = (e) => {
 		showSuccessMessage = true
 	}
 	editor.value.save().then((outputData) => {
+		outputData = removeEmptyBlocks(outputData)
 		lesson.content = JSON.stringify(outputData)
 		instructorEditor.value.save().then((outputData) => {
+			outputData = removeEmptyBlocks(outputData)
 			lesson.instructor_content = JSON.stringify(outputData)
 			if (lessonDetails.data?.lesson) {
 				editCurrentLesson()
@@ -397,6 +399,14 @@ const saveLesson = (e) => {
 	})
 }

+const removeEmptyBlocks = (outputData) => {
+	let blocks = outputData.blocks.filter((block) => {
+		return Object.keys(block.data).length > 0 || block.type == 'paragraph'
+	})
+	outputData.blocks = blocks
+	return outputData
+}
+
 const createNewLesson = () => {
 	newLessonResource.submit(
 		{},
@@ -686,7 +696,7 @@ iframe {
 }

 .ce-popover--opened > .ce-popover__container {
-	max-height: 320px;
+	max-height: unset;
 }

 .cdx-search-field__icon svg {
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
@@ -0,0 +1,206 @@
+<template>
+	<Dialog v-model="show" :options="{ size: '2xl' }">
+		<template #body-title>
+			<div class="text-xl font-semibold text-ink-gray-9">
+				{{
+					props.exerciseID === 'new'
+						? __('Create Programming Exercise')
+						: __('Edit Programming Exercise')
+				}}
+			</div>
+		</template>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					v-model="exercise.title"
+					:label="__('Title')"
+					:required="true"
+				/>
+				<FormControl
+					v-model="exercise.language"
+					:label="__('Language')"
+					type="select"
+					:options="languageOptions"
+					:required="true"
+				/>
+				<div>
+					<div class="text-xs text-ink-gray-5 mb-2">
+						{{ __('Problem Statement') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:content="exercise.problem_statement"
+						@change="(val: string) => (exercise.problem_statement = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+					/>
+				</div>
+				<ChildTable
+					v-model="exercise.test_cases"
+					:columns="testCaseColumns"
+					:required="true"
+					:addable="true"
+					:deletable="true"
+					:editable="true"
+					:placeholder="__('Add Test Case')"
+				/>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="flex justify-end space-x-2">
+				<router-link
+					:to="{
+						name: 'ProgrammingExerciseSubmission',
+						params: {
+							exerciseID: props.exerciseID,
+							submissionID: 'new',
+						},
+					}"
+				>
+					<Button>
+						{{ __('Test this Exercise') }}
+					</Button>
+				</router-link>
+				<router-link
+					:to="{
+						name: 'ProgrammingExerciseSubmissions',
+						params: { exerciseID: props.exerciseID },
+					}"
+				>
+					<Button>
+						{{ __('Check Submission') }}
+					</Button>
+				</router-link>
+				<Button variant="solid" @click="saveExercise(close)">
+					{{ __('Save') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Button,
+	createListResource,
+	Dialog,
+	FormControl,
+	TextEditor,
+	toast,
+} from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { ProgrammingExercise, TestCase } from '@/types/programming-exercise'
+import ChildTable from '@/components/Controls/ChildTable.vue'
+
+const show = defineModel()
+const exercises = defineModel<{
+	data: ProgrammingExercise[]
+	reload: () => void
+	hasNextPage: boolean
+	next: () => void
+	setValue: {
+		submit: (
+			data: ProgrammingExercise,
+			options?: { onSuccess?: () => void }
+		) => void
+	}
+}>('exercises')
+const exercise = ref<ProgrammingExercise>({
+	title: '',
+	language: 'Python',
+	problem_statement: '',
+	test_cases: [],
+})
+const languageOptions = [
+	{ label: 'Python', value: 'Python' },
+	{ label: 'JavaScript', value: 'JavaScript' },
+	{ label: 'Java', value: 'Java' },
+	{ label: 'C++', value: 'C++' },
+]
+
+const props = withDefaults(
+	defineProps<{
+		exerciseID: string
+	}>(),
+	{
+		exerciseID: 'new',
+	}
+)
+
+watch(
+	() => props.exerciseID,
+	() => {
+		if (props.exerciseID != 'new') {
+			setExerciseData()
+			fetchTestCases()
+		}
+	}
+)
+
+const setExerciseData = () => {
+	exercises.value?.data.forEach((ex) => {
+		if (ex.name === props.exerciseID) {
+			exercise.value = { ...ex }
+		}
+	})
+}
+
+const testCases = createListResource({
+	doctype: 'LMS Test Case',
+	fields: ['input', 'expected_output', 'name'],
+	cache: ['testCases', props.exerciseID],
+	parent: 'LMS Programming Exercise',
+	onSuccess(data: TestCase[]) {
+		exercise.value.test_cases = data
+	},
+})
+
+const fetchTestCases = () => {
+	testCases.update({
+		filters: {
+			parent: props.exerciseID,
+		},
+	})
+	testCases.reload()
+}
+
+const saveExercise = (close: () => void) => {
+	if (props.exerciseID == 'new') createNewExercise(close)
+	else updateExercise(close)
+}
+
+const createNewExercise = (close: () => void) => {
+	exercises.value.insert.submit(
+		{
+			...exercise.value,
+		},
+		{
+			onSuccess() {
+				close()
+				exercises.value.reload()
+				toast.success(__('Programming Exercise created successfully'))
+			},
+		}
+	)
+}
+
+const updateExercise = (close: () => void) => {
+	exercises.value.setValue.submit(
+		{
+			name: props.exerciseID,
+			...exercise.value,
+		},
+		{
+			onSuccess() {
+				close()
+				exercises.value.reload()
+				toast.success(__('Programming Exercise updated successfully'))
+			},
+		}
+	)
+}
+
+const testCaseColumns = computed(() => {
+	return ['Input', 'Expected Output']
+})
+</script>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseModal.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseModal.vue
@@ -19,8 +19,8 @@
 			<div class="text-base">
 				<Link
 					v-model="exercise"
-					doctype="LMS Exercise"
-					:label="__('Programming Exercise')"
+					doctype="LMS Programming Exercise"
+					:label="__('Select a Programming Exercise')"
 				/>
 			</div>
 		</template>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
@@ -1,5 +1,6 @@
 <template>
 	<header
+		v-if="!fromLesson"
 		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
@@ -135,6 +136,7 @@ const boilerplate = ref<string>(
 )
 const { brand } = sessionStore()
 const router = useRouter()
+const fromLesson = ref(false)

 const props = withDefaults(
 	defineProps<{
@@ -154,6 +156,9 @@ onMounted(() => {
 	if (!code.value) {
 		code.value = boilerplate.value
 	}
+	if (new URLSearchParams(window.location.search).get('fromLesson')) {
+		fromLesson.value = true
+	}
 })

 const exercise = createDocumentResource({
@@ -261,8 +266,6 @@ const execute = async (stdin = '') => {
 			code: code.value,
 			files: [{ filename: 'stdin', contents: stdin }],
 			onMessage: (msg: any) => {
-				console.log(msg)
-
 				if (msg.msgtype === 'write' && msg.file === 'stdout') {
 					outputChunks.push(msg.data)
 				}
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
@@ -0,0 +1,249 @@
+<template>
+	<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+	</header>
+	<div class="p-6">
+		<div class="flex items-center justify-between space-x-32 mb-5">
+			<div class="text-xl font-semibold text-ink-gray-7">
+				{{
+					submissions.data?.length
+						? __('{0} Submissions').format(submissions.data.length)
+						: __('No Submissions')
+				}}
+			</div>
+			<div
+				v-if="submissions.data?.length"
+				class="grid grid-cols-3 gap-5 flex-1"
+			>
+				<Link
+					doctype="LMS Programming Exercise"
+					v-model="filters.exercise"
+					:placeholder="__('Filter by Exercise')"
+				/>
+				<Link
+					doctype="User"
+					v-model="filters.member"
+					:placeholder="__('Filter by Member')"
+				/>
+				<FormControl
+					v-model="filters.status"
+					type="select"
+					:options="[
+						{ label: __(''), value: '' },
+						{ label: __('Passed'), value: 'Passed' },
+						{ label: __('Failed'), value: 'Failed' },
+					]"
+					:placeholder="__('Filter by Status')"
+				/>
+			</div>
+		</div>
+		<ListView
+			v-if="submissions.loading || submissions.data?.length"
+			:columns="submissionColumns"
+			:rows="submissions.data"
+			rowKey="name"
+			:options="{
+				selectable: false,
+			}"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+			>
+				<ListHeaderItem
+					:item="item"
+					v-for="item in submissionColumns"
+					:key="item.key"
+				>
+					<template #prefix="{ item }">
+						<FeatherIcon :name="item.icon?.toString()" class="h-4 w-4" />
+					</template>
+				</ListHeaderItem>
+			</ListHeader>
+			<ListRows>
+				<router-link
+					v-for="row in submissions.data"
+					:to="{
+						name: 'ProgrammingExerciseSubmission',
+						params: {
+							exerciseID: row.exercise,
+							submissionID: row.name,
+						},
+					}"
+				>
+					<ListRow :row="row">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<template #prefix>
+									<div v-if="column.key == 'member_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['member_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div v-if="column.key == 'status'">
+									<Badge
+										:theme="row[column.key] === 'Passed' ? 'green' : 'red'"
+									>
+										{{ row[column.key] }}
+									</Badge>
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</router-link>
+			</ListRows>
+		</ListView>
+		<EmptyState v-else type="Programming Exercise Submissions" />
+		<div
+			v-if="submissions.data && submissions.hasNextPage"
+			class="flex justify-center my-5"
+		>
+			<Button @click="submissions.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import {
+	Avatar,
+	Badge,
+	Breadcrumbs,
+	Button,
+	createListResource,
+	FeatherIcon,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	usePageMeta,
+} from 'frappe-ui'
+import { computed, inject, ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import type {
+	ProgrammingExerciseSubmission,
+	Filters,
+} from '@/pages/ProgrammingExercises/types'
+import { useRouter } from 'vue-router'
+import Link from '@/components/Controls/Link.vue'
+import EmptyState from '@/components/EmptyState.vue'
+
+const { brand } = sessionStore()
+const dayjs = inject('$dayjs') as any
+const filters = ref<Filters>({
+	exercise: '',
+	member: '',
+	status: '',
+})
+const router = useRouter()
+
+const submissions = createListResource({
+	doctype: 'LMS Programming Exercise Submission',
+	fields: [
+		'name',
+		'exercise',
+		'exercise_title',
+		'member_name',
+		'member_image',
+		'status',
+		'modified',
+	],
+	auto: true,
+	transform(data: ProgrammingExercise[]) {
+		return data.map((submission: ProgrammingExerciseSubmission) => {
+			return {
+				...submission,
+				modified: dayjs(submission.modified).fromNow(),
+			}
+		})
+	},
+})
+
+watch(filters.value, () => {
+	let filtersToApply: Record<string, any> = {}
+	const filterFields = ['exercise', 'member', 'status']
+	filterFields.forEach((field) => {
+		if (filters.value[field as keyof Filters]) {
+			filtersToApply[field] = filters.value[field as keyof Filters]
+			router.push({
+				query: {
+					...router.currentRoute.value.query,
+					[field]: filters.value[field as keyof Filters],
+				},
+			})
+		} else {
+			delete filtersToApply[field]
+			const query = { ...router.currentRoute.value.query }
+			delete query[field]
+			router.push({
+				query,
+			})
+		}
+	})
+
+	submissions.update({
+		filters: {
+			...filtersToApply,
+		},
+	})
+	submissions.reload()
+})
+
+const submissionColumns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			width: '20%',
+			icon: 'user',
+		},
+		{
+			label: __('Exercise'),
+			key: 'exercise_title',
+			width: '40%',
+			icon: 'code',
+		},
+		{
+			label: __('Status'),
+			key: 'status',
+			width: '20%',
+			icon: 'check-circle',
+		},
+		{
+			label: __('Modified'),
+			key: 'modified',
+			width: '20%',
+			icon: 'clock',
+		},
+	]
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Programming Exercise Submissions'),
+			route: {
+				name: 'ProgrammingExerciseSubmissions',
+			},
+		},
+	]
+})
+
+usePageMeta(() => {
+	return {
+		title: __('Programming Exercises'),
+		icon: brand.favicon,
+	}
+})
+</script>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
@@ -0,0 +1,140 @@
+<template>
+	<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<Button
+			v-if="!readOnlyMode"
+			variant="solid"
+			@click="
+				() => {
+					exerciseID = 'new'
+					showForm = true
+				}
+			"
+		>
+			<template #prefix>
+				<Plus class="h-4 w-4 stroke-1.5" />
+			</template>
+			{{ __('New') }}
+		</Button>
+	</header>
+	<div class="md:w-4/5 md:mx-auto p-5">
+		<div class="flex items-center justify-between mb-5">
+			<div v-if="exerciseCount" class="text-lg font-semibold text-ink-gray-9">
+				{{ __('{0} Exercises').format(exerciseCount) }}
+			</div>
+			<div
+				v-if="exercises.data?.length || exerciseCount > 0"
+				class="grid grid-cols-2 gap-5"
+			>
+				<!-- <FormControl
+                    v-model="titleFilter"
+                    :placeholder="__('Search by title')"
+                />
+                <FormControl
+                    v-model="typeFilter"
+                    type="select"
+                    :options="assignmentTypes"
+                    :placeholder="__('Type')"
+                /> -->
+			</div>
+		</div>
+
+		<div
+			v-if="exercises.data?.length"
+			class="grid grid-cols-1 md:grid-cols-3 gap-4"
+		>
+			<div
+				v-for="exercise in exercises.data"
+				:key="exercise.name"
+				@click="
+					() => {
+						exerciseID = exercise.name
+						showForm = true
+					}
+				"
+				class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3 space-y-2"
+			>
+				<div class="text-lg font-semibold text-ink-gray-9">
+					{{ exercise.title }}
+				</div>
+				<div class="text-sm text-ink-gray-7">
+					{{ exercise.language }}
+				</div>
+			</div>
+		</div>
+		<EmptyState v-else type="Programming Exercises" />
+		<div
+			v-if="exercises.data && exercises.hasNextPage"
+			class="flex justify-center my-5"
+		>
+			<Button @click="exercises.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
+	</div>
+	<ProgrammingExerciseForm
+		v-model="showForm"
+		:exerciseID="exerciseID"
+		v-model:exercises="exercises"
+	/>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import {
+	Breadcrumbs,
+	Button,
+	call,
+	createListResource,
+	usePageMeta,
+} from 'frappe-ui'
+import { Plus } from 'lucide-vue-next'
+import { sessionStore } from '@/stores/session'
+import ProgrammingExerciseForm from '@/pages/ProgrammingExercises/ProgrammingExerciseForm.vue'
+
+const exerciseCount = ref<number>(0)
+const readOnlyMode = window.read_only_mode
+const { brand } = sessionStore()
+const showForm = ref<boolean>(false)
+const exerciseID = ref<string | null>('new')
+
+onMounted(() => {
+	getExerciseCount()
+})
+
+const getExerciseCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Programming Exercise',
+	})
+		.then((count: number) => {
+			exerciseCount.value = count
+		})
+		.catch((error: any) => {
+			console.error('Error fetching exercise count:', error)
+		})
+}
+
+const exercises = createListResource({
+	doctype: 'LMS Programming Exercise',
+	cache: ['programmingExercises'],
+	fields: ['name', 'title', 'language', 'problem_statement'],
+	auto: true,
+})
+
+usePageMeta(() => {
+	return {
+		title: __('Programming Exercises'),
+		icon: brand.favicon,
+	}
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Programming Exercises'),
+			route: { name: 'ProgrammingExercises' },
+		},
+	]
+})
+</script>
--- a/frontend/src/pages/ProgrammingExercises/types.ts
+++ b/frontend/src/pages/ProgrammingExercises/types.ts
@@ -0,0 +1,22 @@
+interface ProgrammingExercise {
+    name: string;
+    title: string;
+    language: 'Python' | 'JavaScript';
+    test_cases_count: number;
+    problem_statement: string;
+    test_cases: [TestCase];
+}
+
+interface TestCase {
+    name: string;
+    input: string;
+    expected_output: string;
+    output: string;
+    status: 'Passed' | 'Failed';
+}
+
+type Filters = {
+    exercise?: string,
+    member?: string,
+    status?: string
+}
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -229,11 +229,11 @@ const routes = [
 		props: true,
 	},
 	{
-		path: '/exercises/:exerciseID/submissions',
+		path: '/exercises/submissions',
 		name: 'ProgrammingExerciseSubmissions',
 		component: () =>
 			import(
-				'@/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue'
+				'@/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue'
 			),
 		props: true,
 	},
--- a/frontend/src/utils/assignment.js
+++ b/frontend/src/utils/assignment.js
@@ -56,12 +56,18 @@ export class Assignment {
 			})
 			return
 		}
-		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>
-            <span class="font-medium">
-                Assignment: ${assignment}
-            </span>
-        </div>`
-		return
+		call('frappe.client.get_value', {
+			doctype: 'LMS Assignment',
+			name: assignment,
+			fieldname: ['title'],
+		}).then((data) => {
+			this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
+				<span class="font-medium">
+					Assignment: ${data.title}
+				</span>
+			</div>`
+			return
+		})
 	}

 	renderAssignmentModal() {
@@ -79,7 +85,8 @@ export class Assignment {
 		app.mount(this.wrapper)
 	}

-	save(blockContent) {
+	save() {
+		if (Object.keys(this.data).length === 0) return {}
 		return {
 			assignment: this.data.assignment,
 		}
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -2,6 +2,7 @@ import { watch } from 'vue'
 import { call, toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { Quiz } from '@/utils/quiz'
+import { Program } from '@/utils/program'
 import { Assignment } from '@/utils/assignment'
 import { Upload } from '@/utils/upload'
 import { Markdown } from '@/utils/markdownParser'
@@ -148,6 +149,7 @@ export function getEditorTools() {
 		},
 		quiz: Quiz,
 		assignment: Assignment,
+		program: Program,
 		upload: Upload,
 		markdown: {
 			class: Markdown,
--- a/frontend/src/utils/program.ts
+++ b/frontend/src/utils/program.ts
@@ -1,7 +1,10 @@
 import { createApp, h } from 'vue'
 import { Code } from 'lucide-vue-next'
 import translationPlugin from '@/translation'
-import ProgrammingExerciseModal from '@/components/Modals/ProgrammingExerciseModal.vue';
+import ProgrammingExerciseModal from '@/pages/ProgrammingExercises/ProgrammingExerciseModal.vue';
+import { call } from 'frappe-ui';
+import { usersStore } from '@/stores/user'
+

 export class Program {

@@ -59,15 +62,38 @@ export class Program {
    }

    renderExercise(exercise: string) {
-        this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>
-            <span class="font-medium">
-                Programming Exercise: ${exercise}
-            </span>
-        </div>`
-		return
+        if (this.readOnly) {
+            const { userResource } = usersStore()
+            call('frappe.client.get_value', {
+                doctype: 'LMS Programming Exercise Submission',
+                filters: {
+                    exercise: exercise,
+                    member: userResource.data?.name,
+                },
+                fieldname: ['name'],
+            }).then((data: { name: string }) => {
+                let submission = data.name || 'new'
+                this.wrapper.innerHTML = `<iframe src="/lms/exercises/${exercise}/submission/${submission}?fromLesson=1" class="w-full h-[900px] border rounded-md"></iframe>`
+            })
+            return
+        } 
+        call("frappe.client.get_value", {
+            doctype: 'LMS Programming Exercise',
+            name: exercise,
+            fieldname: "title"
+        }).then((data: { title: string }) => {
+            this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
+                <span class="font-medium">
+                    Programming Exercise: ${data.title}
+                </span>
+            </div>`
+            return
+        })
+        
    }

    save() {
+        if (!this.data.exercise) return {}
 		return {
 			exercise: this.data.exercise,
 		}
--- a/frontend/src/utils/quiz.js
+++ b/frontend/src/utils/quiz.js
@@ -45,7 +45,7 @@ export class Quiz {
 			this.wrapper.innerHTML = `<iframe src="/lms/quiz/${quiz}?fromLesson=1" class="w-full h-[500px]"></iframe>`
 			return
 		}
-		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
            <span class="font-medium">
                Quiz: ${quiz}
            </span>
@@ -68,7 +68,8 @@ export class Quiz {
 		app.mount(this.wrapper)
 	}

-	save(blockContent) {
+	save() {
+		if (Object.keys(this.data).length === 0) return {}
 		return {
 			quiz: this.data.quiz,
 		}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -10,11 +10,12 @@
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
+    "types": ["./globals"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/*.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.json
+++ b/lms/lms/doctype/lms_programming_exercise/lms_programming_exercise.json
@@ -63,7 +63,7 @@
   "link_fieldname": "exercise"
  }
 ],
- "modified": "2025-06-19 14:17:35.200575",
+ "modified": "2025-06-20 12:53:59.295679",
 "modified_by": "sayali@frappe.io",
 "module": "LMS",
 "name": "LMS Programming Exercise",
@@ -80,6 +80,30 @@
   "role": "System Manager",
   "share": 1,
   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Moderator",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Course Creator",
+   "share": 1,
+   "write": 1
  }
 ],
 "row_format": "Dynamic",
--- a/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.json
+++ b/lms/lms/doctype/lms_programming_exercise_submission/lms_programming_exercise_submission.json
@@ -6,10 +6,12 @@
 "engine": "InnoDB",
 "field_order": [
  "exercise",
+  "exercise_title",
  "status",
  "column_break_jkjs",
  "member",
  "member_name",
+  "member_image",
  "section_break_onmz",
  "code",
  "section_break_idyi",
@@ -68,12 +70,25 @@
   "fieldtype": "Code",
   "label": "Code",
   "reqd": 1
+  },
+  {
+   "fetch_from": "exercise.title",
+   "fieldname": "exercise_title",
+   "fieldtype": "Data",
+   "label": "Exercise Title",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "member.user_image",
+   "fieldname": "member_image",
+   "fieldtype": "Attach",
+   "label": "Member Image"
  }
 ],
 "grid_page_length": 50,
 "index_web_pages_for_search": 1,
 "links": [],
- "modified": "2025-06-19 12:14:36.604958",
+ "modified": "2025-06-20 19:17:23.940979",
 "modified_by": "sayali@frappe.io",
 "module": "LMS",
 "name": "LMS Programming Exercise Submission",
--- a/lms/lms/doctype/lms_test_case/lms_test_case.json
+++ b/lms/lms/doctype/lms_test_case/lms_test_case.json
@@ -32,7 +32,7 @@
 "index_web_pages_for_search": 1,
 "istable": 1,
 "links": [],
- "modified": "2025-06-18 16:37:03.538244",
+ "modified": "2025-06-20 12:57:19.186644",
 "modified_by": "sayali@frappe.io",
 "module": "LMS",
 "name": "LMS Test Case",