refactor: new data import flow

frontend/src/pages/Batches.vue

@@ -3,7 +3,49 @@
 		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" />
-		<router-link
+		<Dropdown
+			v-if="canCreateBatch()"
+			:options="[
+				{
+					label: __('New Batch'),
+					icon: 'users',
+					onClick() {
+						router.push({
+							name: 'BatchForm',
+							params: { batchName: 'new' },
+						})
+					},
+				},
+				{
+					label: __('Import Batch'),
+					icon: 'upload',
+					onClick() {
+						router.push({
+							name: 'NewDataImport',
+							params: { doctype: 'LMS Batch' },
+						})
+					},
+				},
+			]"
+		>
+			<template v-slot="{ open }">
+				<Button variant="solid">
+					<template #prefix>
+						<Plus class="h-4 w-4 stroke-1.5" />
+					</template>
+					{{ __('Create') }}
+					<template #suffix>
+						<ChevronDown
+							:class="[
+								'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
+								open ? 'rotate-180' : '',
+							]"
+						/>
+					</template>
+				</Button>
+			</template>
+		</Dropdown>
+		<!-- <router-link
 			v-if="canCreateBatch()"
 			:to="{
 				name: 'BatchForm',
@@ -16,7 +58,7 @@
 				</template>
 				{{ __('Create') }}
 			</Button>
-		</router-link>
+		</router-link> -->
 	</header>
 	<div class="p-5 pb-10">
 		<div
@@ -90,13 +132,15 @@ import {
 	Button,
 	call,
 	createListResource,
+	Dropdown,
 	FormControl,
 	Select,
 	TabButtons,
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { ChevronDown, Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import BatchCard from '@/components/BatchCard.vue'
 import EmptyState from '@/components/EmptyState.vue'
@@ -115,6 +159,7 @@ const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
 const readOnlyMode = window.read_only_mode
+const router = useRouter()
 
 onMounted(() => {
 	setFiltersFromQuery()

frontend/src/pages/Courses.vue

@@ -3,20 +3,51 @@
 		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" />
-		<router-link
+		
+		<Dropdown
+			placement="start"
+			side="bottom"
 			v-if="canCreateCourse()"
-			:to="{
-				name: 'CourseForm',
-				params: { courseName: 'new' },
-			}"
+			:options="[
+				{
+					label: __('New Course'),
+					icon: 'book-open',
+					onClick() {
+						router.push({
+							name: 'CourseForm',
+							params: { courseName: 'new' },
+						})
+					},
+				},
+				{
+					label: __('Import Course'),
+					icon: 'upload',
+					onClick() {
+						router.push({
+							name: 'NewDataImport',
+							params: { doctype: 'LMS Course' },
+						})
+					},
+				},
+			]"
 		>
-			<Button variant="solid">
-				<template #prefix>
-					<Plus class="h-4 w-4 stroke-1.5" />
-				</template>
-				{{ __('Create') }}
-			</Button>
-		</router-link>
+			<template v-slot="{ open }">
+				<Button variant="solid">
+					<template #prefix>
+						<Plus class="h-4 w-4 stroke-1.5" />
+					</template>
+					{{ __('Create') }}
+					<template #suffix>
+						<ChevronDown
+							:class="[
+								'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
+								open ? 'rotate-180' : '',
+							]"
+						/>
+					</template>
+				</Button>
+			</template>
+		</Dropdown>
 	</header>
 	<div class="p-5 pb-10">
 		<div
@@ -85,13 +116,14 @@ import {
 	Button,
 	call,
 	createListResource,
+	Dropdown,
 	FormControl,
 	Select,
 	TabButtons,
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { ChevronDown, Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { canCreateCourse } from '@/utils'
 import CourseCard from '@/components/CourseCard.vue'

frontend/src/pages/DataImport.vue

@@ -0,0 +1,39 @@
+<template>
+    <DataImport 
+        :doctype="route.params.doctype"
+        :importName="route.params.importName"
+        :doctypeMap="doctypeMap"
+    />
+</template>
+<script setup lang="ts">
+import { usePageMeta } from "frappe-ui"
+import { DataImport } from "frappe-ui/frappe"
+import { sessionStore } from '../stores/session'
+import { useRoute } from 'vue-router'
+
+const { brand } = sessionStore()
+const route = useRoute()
+
+const doctypeMap = {
+    "LMS Course": {
+        title: "Courses",
+        listRoute: "/courses",
+        pageRoute: `/courses/docname`
+    },
+    "LMS Batch": {
+        title: "Batches",
+        listRoute: "/batches"
+    },
+    "LMS Category": {
+        title: "Categories",
+        listRoute: "/lms"
+    }
+}
+
+usePageMeta(() => {
+	return {
+		title: __('Data Import'),
+		icon: brand.favicon,
+	}
+})
+</script>

frontend/src/pages/Home/AdminHome.vue

@@ -30,7 +30,7 @@
 
 		<div v-if="createdBatches.data?.length" class="mt-10">
 			<div class="flex items-center justify-between mb-3">
-				<span class="font-semibold text-lg">
+				<span class="font-semibold text-lg text-ink-gray-9">
 					{{ __('Upcoming Batches') }}
 				</span>
 				<router-link
@@ -88,7 +88,7 @@
 
 		<div class="grid grid-cols-2 gap-5 mt-10">
 			<div v-if="evals?.data?.length">
-				<div class="font-semibold text-lg mb-3">
+				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
 					{{ __('Upcoming Evaluations') }}
 				</div>
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
@@ -124,7 +124,7 @@
 				</div>
 			</div>
 			<div v-if="liveClasses?.data?.length">
-				<div class="font-semibold text-lg mb-3">
+				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
 					{{ __('Upcoming Live Classes') }}
 				</div>
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">