fix: handle same start and end dates case for batch

* also minor refactor

frontend/src/components/BatchCard.vue

@@ -34,8 +34,7 @@
 			<div class="flex items-center mb-3">
 				<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 				<span>
-					{{ dayjs(batch.start_date).format('DD MMM YYYY') }} -
+					{{ getFormattedDateRange(batch.start_date, batch.end_date) }}
-					{{ dayjs(batch.end_date).format('DD MMM YYYY') }}
 				</span>
 			</div>
 			<div class="flex items-center">
@@ -48,12 +47,10 @@
 	</div>
 </template>
 <script setup>
-import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
-import { inject } from 'vue'
 import { Badge } from 'frappe-ui'
-import { formatTime } from '../utils'
+import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
+import { formatTime, getFormattedDateRange } from '../utils'
 
-const dayjs = inject('$dayjs')
 const props = defineProps({
 	batch: {
 		type: Object,

frontend/src/components/BatchOverlay.vue

@@ -24,8 +24,7 @@
 		<div class="flex items-center mb-3">
 			<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
-				{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
+				{{ getFormattedDateRange(batch.data.start_date, batch.data.end_date) }}
-				{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
 			</span>
 		</div>
 		<div class="flex items-center">
@@ -91,12 +90,15 @@
 	</div>
 </template>
 <script setup>
-import { formatNumberIntoCurrency, formatTime } from '@/utils'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
 import { inject, computed } from 'vue'
 import { Badge, Button } from 'frappe-ui'
+import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
+import {
+	formatNumberIntoCurrency,
+	formatTime,
+	getFormattedDateRange,
+} from '@/utils'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 
 const props = defineProps({

frontend/src/pages/Batch.vue

@@ -83,8 +83,9 @@
 				<div class="flex items-center mb-3">
 					<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 					<span>
-						{{ dayjs(batch.data.start_date).format('DD MMMM YYYY') }} -
+						{{
-						{{ dayjs(batch.data.end_date).format('DD MMMM YYYY') }}
+							getFormattedDateRange(batch.data.start_date, batch.data.end_date)
+						}}
 					</span>
 				</div>
 				<div class="flex items-center mb-6">
@@ -161,7 +162,7 @@ import {
 	SendIcon,
 	MessageCircle,
 } from 'lucide-vue-next'
-import { formatTime } from '@/utils'
+import { formatTime, getFormattedDateRange } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
 import BatchCourses from '@/components/BatchCourses.vue'
 import LiveClass from '@/components/LiveClass.vue'
@@ -171,7 +172,6 @@ import Announcements from '@/components/Annoucements.vue'
 import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
 import Discussions from '@/components/Discussions.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
 

frontend/src/pages/BatchDetail.vue

@@ -20,8 +20,12 @@
 					<div class="flex items-center">
 						<Calendar class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
-							{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
+							{{
-							{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
+								getFormattedDateRange(
+									batch.data.start_date,
+									batch.data.end_date
+								)
+							}}
 						</span>
 					</div>
 					<span v-if="batch.data.start_date">&middot;</span>
@@ -80,15 +84,14 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createResource, Button } from 'frappe-ui'
+import { computed, inject } from 'vue'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
-import { formatTime } from '../utils'
-import { computed, inject, ref } from 'vue'
-import BatchOverlay from '@/components/BatchOverlay.vue'
-import CourseCard from '@/components/CourseCard.vue'
 import { useRouter } from 'vue-router'
+import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
+import { formatTime, getFormattedDateRange } from '@/utils'
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import CourseCard from '@/components/CourseCard.vue'
+import BatchOverlay from '@/components/BatchOverlay.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const router = useRouter()
 

frontend/src/utils/index.js

@@ -8,6 +8,7 @@ import Paragraph from '@editorjs/paragraph'
 import Embed from '@editorjs/embed'
 import NestedList from '@editorjs/nested-list'
 import { watch } from 'vue'
+import dayjs from '@/utils/dayjs'
 
 export function createToast(options) {
 	toast({
@@ -322,3 +323,12 @@ export function getSidebarLinks() {
 		},
 	]
 }
+
+export function getFormattedDateRange(startDate, endDate) {
+	if (startDate === endDate) {
+		return dayjs(startDate).format('DD MMM YYYY')
+	}
+	return `${dayjs(startDate).format('DD MMM YYYY')} - ${dayjs(endDate).format(
+		'DD MMM YYYY'
+	)}`
+}