From ae5a1ceae55250ad57d722d2f27a52b1245c0ee0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 2 Sep 2025 17:15:15 +0530
Subject: [PATCH] fix: use TimePicker from frappeui

---
 .../Calendar/CalendarEventPanel.vue           |   4 +-
 .../src/components/Calendar/TimePicker.vue    | 504 ------------------
 .../Modals/AddExistingUserModal.vue           |   4 +-
 .../src/components/Modals/CalendarModal.vue   | 234 --------
 frontend/src/components/Modals/EventModal.vue |  83 ++-
 frontend/src/utils/index.js                   |   2 +-
 6 files changed, 68 insertions(+), 763 deletions(-)
 delete mode 100644 frontend/src/components/Calendar/TimePicker.vue
 delete mode 100644 frontend/src/components/Modals/CalendarModal.vue

diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index 838234bb..fca827bc 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -349,7 +349,6 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DescriptionIcon from '@/components/Icons/DescriptionIcon.vue'
-import TimePicker from '@/components/Calendar/TimePicker.vue'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { validateEmail } from '@/utils'
@@ -358,6 +357,7 @@ import {
   TextInput,
   Switch,
   DatePicker,
+  TimePicker,
   TextEditor,
   ErrorMessage,
   Dropdown,
@@ -721,7 +721,7 @@ function formatDuration(mins) {
   let hours = mins / 60
 
   // keep hours decimal to 2 only if decimal is not 0
-  if (hours % 1 !== 0) {
+  if (hours % 1 !== 0 && hours % 1 !== 0.5) {
     hours = hours.toFixed(2)
   }
 
diff --git a/frontend/src/components/Calendar/TimePicker.vue b/frontend/src/components/Calendar/TimePicker.vue
deleted file mode 100644
index e2e0a57d..00000000
--- a/frontend/src/components/Calendar/TimePicker.vue
+++ /dev/null
@@ -1,504 +0,0 @@
-<template>
-  <Popover
-    v-model:show="showOptions"
-    transition="default"
-    :placement="placement"
-    @update:show="
-      (v) => {
-        if (!v) emit('close')
-      }
-    "
-  >
-    <template #target="{ togglePopover, isOpen }">
-      <TextInput
-        ref="inputRef"
-        v-model="displayValue"
-        :variant="variant"
-        type="text"
-        class="text-sm w-full cursor-text"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        @focus="onFocus(isOpen, togglePopover)"
-        @click="onClickInput(isOpen, togglePopover)"
-        @keydown.enter.prevent="onEnter"
-        @blur="commitInput"
-        @keydown.down.prevent="onArrowDown(togglePopover, isOpen)"
-        @keydown.up.prevent="onArrowUp(togglePopover, isOpen)"
-        @keydown.esc.prevent="onEscape"
-      >
-        <template #suffix>
-          <slot name="suffix" v-bind="{ togglePopover, isOpen }">
-            <FeatherIcon
-              name="chevron-down"
-              class="h-4 w-4 cursor-pointer"
-              @mousedown.prevent="togglePopover"
-            />
-          </slot>
-        </template>
-      </TextInput>
-    </template>
-    <template #body="{ isOpen }">
-      <div
-        v-show="isOpen"
-        ref="panelRef"
-        class="mt-2 max-h-48 w-44 overflow-y-auto rounded-lg bg-surface-modal p-1 text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-        role="listbox"
-        :aria-activedescendant="activeDescendantId"
-      >
-        <button
-          v-for="(opt, idx) in displayedOptions"
-          :key="opt.value"
-          :data-value="opt.value"
-          :data-index="idx"
-          type="button"
-          class="group flex h-7 w-full items-center rounded px-2 text-left"
-          :class="buttonClasses(opt, idx)"
-          @click="() => select(opt.value, autoClose)"
-          @mouseenter="highlightIndex = idx"
-          role="option"
-          :id="optionId(idx)"
-          :aria-selected="internalValue === opt.value"
-        >
-          <span class="truncate">{{ opt.label }}</span>
-        </button>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script setup>
-import { Popover, TextInput } from 'frappe-ui'
-import { ref, computed, watch, nextTick } from 'vue'
-
-const props = defineProps({
-  modelValue: { type: String, default: '' }, // Expect 24h format HH:MM (seconds in HH:MM:SS accepted & truncated), parses flexible input
-  interval: { type: Number, default: 15 },
-  options: {
-    // Optional complete override of generated options (array of { value: 'HH:MM', label?: string })
-    type: Array,
-    default: () => [],
-  },
-  placement: { type: String, default: 'bottom-start' },
-  placeholder: { type: String, default: 'Select time' },
-  variant: { type: String, default: 'outline' },
-  allowCustom: { type: Boolean, default: true },
-  autoClose: { type: Boolean, default: true },
-  use12Hour: { type: Boolean, default: true },
-  disabled: { type: Boolean, default: false },
-  scrollMode: { type: String, default: 'center' }, // center | start | nearest
-  amLabel: { type: String, default: 'am' },
-  pmLabel: { type: String, default: 'pm' },
-  minTime: { type: String, default: '' }, // inclusive HH:MM 24h
-  maxTime: { type: String, default: '' }, // inclusive HH:MM 24h
-})
-const emit = defineEmits([
-  'update:modelValue',
-  'input-invalid',
-  'invalid-change',
-  'open',
-  'close',
-])
-
-const panelRef = ref(null)
-const showOptions = ref(false)
-const highlightIndex = ref(-1)
-const hasSelectedOnFirstClick = ref(false)
-const isTyping = ref(false)
-let navUpdating = false
-let invalidState = false
-const inputRef = ref(null)
-const internalValue = ref(props.modelValue) // always normalized 24h HH:MM or ''
-const displayValue = ref(formatDisplay(internalValue.value))
-const uid = Math.random().toString(36).slice(2, 9)
-const activeDescendantId = computed(() =>
-  highlightIndex.value > -1 ? optionId(highlightIndex.value) : null,
-)
-function optionId(idx) {
-  return `tp-${uid}-${idx}`
-}
-
-function minutesFromHHMM(str) {
-  if (!str) return null
-  if (!/^\d{2}:\d{2}(:\d{2})?$/.test(str)) return null
-  const [h, m] = str.split(':').map((n) => parseInt(n))
-  if (h > 23 || m > 59) return null
-  return h * 60 + m // ignore seconds if provided
-}
-const minMinutes = computed(() => minutesFromHHMM(props.minTime))
-const maxMinutes = computed(() => minutesFromHHMM(props.maxTime))
-
-const displayedOptions = computed(() => {
-  if (props.options?.length) {
-    return props.options.map((o) => ({
-      value: normalize24(o.value),
-      label: o.label || formatDisplay(normalize24(o.value)),
-    }))
-  }
-  const out = []
-  for (let m = 0; m < 1440; m += props.interval) {
-    if (minMinutes.value != null && m < minMinutes.value) continue
-    if (maxMinutes.value != null && m > maxMinutes.value) continue
-    const hh = Math.floor(m / 60)
-      .toString()
-      .padStart(2, '0')
-    const mm = (m % 60).toString().padStart(2, '0')
-    const val = `${hh}:${mm}`
-    out.push({
-      value: val,
-      label: formatDisplay(val),
-    })
-  }
-  return out
-})
-
-watch(
-  () => props.modelValue,
-  (nv) => {
-    if (nv && nv !== internalValue.value) {
-      internalValue.value = normalize24(nv)
-      displayValue.value = formatDisplay(internalValue.value)
-    } else if (!nv) {
-      internalValue.value = ''
-      displayValue.value = ''
-    }
-  },
-)
-
-function normalize24(raw) {
-  if (!raw) return ''
-  // already HH:MM 24h
-  if (/^\d{2}:\d{2}$/.test(raw)) return raw
-  // HH:MM:SS -> truncate seconds
-  if (/^\d{2}:\d{2}:\d{2}$/.test(raw)) return raw.slice(0, 5)
-  const parsed = parseFlexibleTime(raw)
-  return parsed.valid ? parsed.hh24 + ':' + parsed.mm : ''
-}
-
-function formatDisplay(val24) {
-  if (!val24) return ''
-  const [h, m] = val24.split(':').map((n) => parseInt(n))
-  if (!props.use12Hour)
-    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`
-  const am = h < 12
-  const hour12 = h % 12 === 0 ? 12 : h % 12
-  return `${hour12}:${m.toString().padStart(2, '0')} ${am ? props.amLabel : props.pmLabel}`
-}
-
-function parseFlexibleTime(input) {
-  if (!input) return { valid: false }
-  let s = input.trim().toLowerCase()
-  s = s.replace(/\./g, '') // remove periods like a.m.
-  // Insert space before am/pm if missing
-  s = s.replace(/(\d)(am|pm)$/, '$1 $2')
-  // supports: H, HH, HMM, HHMM, H:MM, HH:MM, HH:MM:SS, H:MM:SS + optional am/pm
-  // Simplify by using explicit colon format: H{1,2}(:MM)?(:SS)? with constraint that if SS present, MM must be present
-  const re = /^(\d{1,2})(?::(\d{1,2}))?(?::(\d{1,2}))?\s*([ap]m)?$/
-  const m = s.match(re)
-  if (!m) return { valid: false }
-  let [, hhStr, mmStr, ssStr, ap] = m
-  let hh = parseInt(hhStr)
-  if (isNaN(hh) || hh < 0 || hh > 23) return { valid: false }
-  // If seconds provided but minutes missing -> invalid
-  if (ssStr && !mmStr) return { valid: false }
-  let mm = mmStr != null && mmStr !== '' ? parseInt(mmStr) : 0
-  if (isNaN(mm) || mm < 0 || mm > 59) return { valid: false }
-  if (ssStr) {
-    const ss = parseInt(ssStr)
-    if (isNaN(ss) || ss < 0 || ss > 59) return { valid: false }
-    // seconds currently ignored for internal value & total
-  }
-  if (ap) {
-    if (hh === 12 && ap === 'am') hh = 0
-    else if (hh < 12 && ap === 'pm') hh += 12
-  }
-  return {
-    valid: true,
-    hh24: hh.toString().padStart(2, '0'),
-    mm: mm.toString().padStart(2, '0'),
-    total: hh * 60 + mm,
-  }
-}
-
-// Returns index of nearest value (by minutes) using binary search on sorted list
-function findNearestIndex(targetMinutes, list) {
-  if (!list.length) return -1
-  const minutesArr = list.map((o) => {
-    const [hh, mm] = o.value.split(':').map(Number)
-    return hh * 60 + mm
-  })
-  let lo = 0,
-    hi = minutesArr.length - 1
-  while (lo <= hi) {
-    const mid = (lo + hi) >> 1
-    const val = minutesArr[mid]
-    if (val === targetMinutes) return mid
-    if (val < targetMinutes) lo = mid + 1
-    else hi = mid - 1
-  }
-  const candidates = []
-  if (lo < minutesArr.length) candidates.push(lo)
-  if (lo - 1 >= 0) candidates.push(lo - 1)
-  if (!candidates.length) return -1
-  return candidates.sort(
-    (a, b) =>
-      Math.abs(minutesArr[a] - targetMinutes) -
-      Math.abs(minutesArr[b] - targetMinutes),
-  )[0]
-}
-
-function isOutOfRange(totalMinutes) {
-  if (minMinutes.value != null && totalMinutes < minMinutes.value) return true
-  if (maxMinutes.value != null && totalMinutes > maxMinutes.value) return true
-  return false
-}
-
-function applyValue(val24) {
-  internalValue.value = val24
-  displayValue.value = formatDisplay(val24)
-  emit('update:modelValue', val24)
-  setInvalid(false)
-}
-
-function commitInput() {
-  const raw = displayValue.value
-  const parsed = parseFlexibleTime(raw)
-  if (!raw) {
-    internalValue.value = ''
-    emit('update:modelValue', '')
-    setInvalid(false)
-    return
-  }
-  if (!parsed.valid) {
-    emit('input-invalid', raw)
-    setInvalid(true)
-    return
-  }
-  if (isOutOfRange(parsed.total)) {
-    emit('input-invalid', raw)
-    setInvalid(true)
-    return
-  }
-  const normalized = `${parsed.hh24}:${parsed.mm}`
-  // Snap if custom disallowed
-  if (
-    !props.allowCustom &&
-    !displayedOptions.value.some((o) => o.value === normalized)
-  ) {
-    const nearestIdx = findNearestIndex(parsed.total, displayedOptions.value)
-    if (nearestIdx > -1)
-      return applyValue(displayedOptions.value[nearestIdx].value)
-  }
-  applyValue(normalized)
-}
-
-function select(val, close = props.autoClose) {
-  internalValue.value = val
-  displayValue.value = formatDisplay(val)
-  emit('update:modelValue', val)
-  if (close) {
-    showOptions.value = false
-  }
-}
-
-const selectedAndNearest = computed(() => {
-  const list = displayedOptions.value
-  if (!list.length) return { selected: null, nearest: null }
-  const parsedTyped = parseFlexibleTime(displayValue.value)
-  const candidate =
-    isTyping.value && parsedTyped.valid
-      ? `${parsedTyped.hh24}:${parsedTyped.mm}`
-      : internalValue.value || null
-  if (!candidate) return { selected: null, nearest: null }
-  const selected = list.find((o) => o.value === candidate) || null
-  if (selected) return { selected, nearest: null }
-  const parsed = parseFlexibleTime(candidate)
-  if (!parsed.valid) return { selected: null, nearest: null }
-  const idx = findNearestIndex(parsed.total, list)
-  return { selected: null, nearest: idx > -1 ? list[idx] : null }
-})
-
-function buttonClasses(opt, idx) {
-  if (idx === highlightIndex.value) return 'bg-surface-gray-3 text-ink-gray-8'
-  const { selected, nearest } = selectedAndNearest.value
-  if (isTyping.value && !selected) {
-    if (nearest && nearest.value === opt.value)
-      return 'text-ink-gray-7 italic bg-surface-gray-2'
-    return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
-  }
-  if (selected && selected.value === opt.value)
-    return 'bg-surface-gray-3 text-ink-gray-8'
-  if (nearest && nearest.value === opt.value)
-    return 'text-ink-gray-7 italic bg-surface-gray-2'
-  return 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
-}
-
-watch(
-  () => displayedOptions.value,
-  () => scheduleScroll(),
-)
-
-function scheduleScroll() {
-  nextTick(() => {
-    if (!panelRef.value) return
-    let targetEl = null
-    if (highlightIndex.value > -1) {
-      targetEl = panelRef.value.querySelector(
-        `[data-index="${highlightIndex.value}"]`,
-      )
-    } else {
-      const { selected, nearest } = selectedAndNearest.value
-      const target = selected || nearest
-      if (target)
-        targetEl = panelRef.value.querySelector(
-          `[data-value="${target.value}"]`,
-        )
-    }
-    if (!targetEl) return
-    const el = targetEl
-    if (el)
-      el.scrollIntoView({
-        block:
-          props.scrollMode === 'center'
-            ? 'center'
-            : props.scrollMode === 'start'
-              ? 'start'
-              : 'nearest',
-      })
-  })
-}
-
-watch(showOptions, (open) => {
-  if (open) {
-    emit('open')
-    initHighlight()
-    scheduleScroll()
-  }
-})
-
-watch(
-  () => displayValue.value,
-  () => {
-    if (navUpdating) return
-    if (showOptions.value) scheduleScroll()
-    isTyping.value = true
-    highlightIndex.value = -1
-  },
-)
-
-function initHighlight() {
-  // set highlight to selected or nearest
-  const { selected, nearest } = selectedAndNearest.value
-  const target = selected || nearest
-  if (!target) {
-    highlightIndex.value = -1
-    return
-  }
-  const idx = displayedOptions.value.findIndex((o) => o.value === target.value)
-  highlightIndex.value = idx
-}
-
-function moveHighlight(delta) {
-  const list = displayedOptions.value
-  if (!list.length) return
-  if (highlightIndex.value === -1) initHighlight()
-  else
-    highlightIndex.value =
-      (highlightIndex.value + delta + list.length) % list.length
-  const opt = list[highlightIndex.value]
-  if (opt) {
-    navUpdating = true
-    internalValue.value = opt.value
-    displayValue.value = formatDisplay(opt.value)
-    emit('update:modelValue', opt.value)
-    nextTick(() => {
-      navUpdating = false
-    })
-  }
-  isTyping.value = false
-  scheduleScroll()
-}
-
-function onArrowDown(togglePopover, isOpen) {
-  if (!isOpen) togglePopover()
-  else moveHighlight(1)
-}
-function onArrowUp(togglePopover, isOpen) {
-  if (!isOpen) togglePopover()
-  else moveHighlight(-1)
-}
-
-function onEnter() {
-  if (!showOptions.value) {
-    commitInput()
-    blurInput()
-    return
-  }
-  const parsed = parseFlexibleTime(displayValue.value)
-  const normalized = parsed.valid ? `${parsed.hh24}:${parsed.mm}` : null
-  const exists = normalized
-    ? displayedOptions.value.some((o) => o.value === normalized)
-    : false
-  if (parsed.valid && (!exists || isTyping.value)) {
-    commitInput()
-    if (props.autoClose) showOptions.value = false
-    blurInput()
-    return
-  }
-  if (highlightIndex.value > -1) {
-    const opt = displayedOptions.value[highlightIndex.value]
-    if (opt) select(opt.value, true)
-  } else {
-    commitInput()
-    if (props.autoClose) showOptions.value = false
-  }
-  blurInput()
-}
-
-function onClickInput(isOpen, togglePopover) {
-  if (!isOpen) {
-    togglePopover()
-  }
-  selectAll()
-}
-
-function onFocus() {
-  if (!hasSelectedOnFirstClick.value) selectAll()
-}
-
-function selectAll() {
-  nextTick(() => {
-    const el = inputRef.value?.el || inputRef.value
-    if (el && el.querySelector) {
-      const input = el.querySelector('input') || el
-      if (input?.select) input.select()
-    } else if (el?.select) {
-      el.select()
-    }
-    hasSelectedOnFirstClick.value = true
-  })
-}
-
-function blurInput() {
-  nextTick(() => {
-    const el = inputRef.value?.el || inputRef.value
-    if (el && el.querySelector) {
-      const input = el.querySelector('input') || el
-      input?.blur?.()
-    } else if (el?.blur) {
-      el.blur()
-    }
-  })
-}
-
-function onEscape() {
-  showOptions.value = false
-  blurInput()
-}
-
-function setInvalid(val) {
-  if (invalidState !== val) {
-    invalidState = val
-    emit('invalid-change', val)
-  }
-}
-</script>
diff --git a/frontend/src/components/Modals/AddExistingUserModal.vue b/frontend/src/components/Modals/AddExistingUserModal.vue
index d11c2f61..3159f58d 100644
--- a/frontend/src/components/Modals/AddExistingUserModal.vue
+++ b/frontend/src/components/Modals/AddExistingUserModal.vue
@@ -6,8 +6,8 @@
   >
     <template #body-content>
       <div class="flex gap-1 border rounded mb-4 p-2 text-ink-gray-5">
-        <FeatherIcon name="info" class="size-3.5" />
-        <p class="text-sm">
+        <FeatherIcon name="info" class="size-3.5 mt-0.5" />
+        <p class="text-p-sm">
           {{
             __(
               'Add existing system users to this CRM. Assign them a role to grant access with their current credentials.',
diff --git a/frontend/src/components/Modals/CalendarModal.vue b/frontend/src/components/Modals/CalendarModal.vue
deleted file mode 100644
index 1026e456..00000000
--- a/frontend/src/components/Modals/CalendarModal.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-  <Dialog v-model="show" :options="{ size: '2xl' }">
-    <template #body>
-      <div class="flex flex-col gap-5 m-6 mt-5">
-        <div class="flex justify-between items-center">
-          <div class="text-2xl font-semibold text-ink-gray-7">
-            {{ __('Schedule an event') }}
-          </div>
-          <Button variant="ghost" class="w-7" @click="show = false">
-            <FeatherIcon name="x" class="h-4 w-4" />
-          </Button>
-        </div>
-        <div class="">
-          <div class="flex flex-col w-full -ml-2">
-            <TextInput
-              ref="title"
-              variant="ghost"
-              v-model="_event.title"
-              :placeholder="__('Add title')"
-            />
-            <TextEditor
-              editor-class="!prose-sm overflow-auto min-h-[20px] max-h-80 px-2 rounded placeholder-ink-gray-4 focus:bg-surface-white focus:ring-0 text-ink-gray-8 transition-colors"
-              :bubbleMenu="true"
-              :content="_event.description"
-              @change="(val) => (_event.description = val)"
-              :placeholder="__('Add description')"
-            />
-          </div>
-          <div class="border-t my-4" />
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-x-2">
-              <DurationIcon class="h-4 w-4 text-ink-gray-5" />
-              <DatePicker
-                class="max-w-28"
-                :value="_event.fromDate"
-                :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
-                :placeholder="__('Start Date')"
-                @update:modelValue="(date) => updateDate(date, true)"
-              />
-              <!-- <TimePicker
-                v-if="!_event.isFullDay"
-                class="max-w-20"
-                :value="_event.fromTime"
-                :placeholder="__('Start Time')"
-                @update:modelValue="(time) => updateTime(time, true)"
-              /> -->
-              <div class="text-base text-ink-gray-6">-</div>
-              <!-- <TimePicker
-                v-if="!_event.isFullDay"
-                class="max-w-20"
-                :value="_event.toTime"
-                :placeholder="__('End Time')"
-                @update:modelValue="(time) => updateTime(time)"
-              /> -->
-              <DatePicker
-                class="max-w-28"
-                :value="_event.toDate"
-                :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
-                :placeholder="__('End Date')"
-                @update:modelValue="(date) => updateDate(date)"
-              />
-            </div>
-            <Switch
-              v-model="_event.isFullDay"
-              class="text-ink-gray-6"
-              :label="__('All Day')"
-            />
-          </div>
-          <div class="border-t mt-4" />
-        </div>
-        <div class="flex justify-between items-center">
-          <div class="flex">
-            <div class="flex items-center gap-x-2">
-              <!-- <ColorPicker v-model="_event.color">
-                <template #target="{ togglePopover }">
-                  <Button variant="ghost" @click="togglePopover">
-                    <div
-                      class="w-4 h-4 rounded-sm border"
-                      :style="{
-                        background: _event.color ? _event.color : '#e4faeb',
-                      }"
-                    />
-                  </Button>
-                </template>
-              </ColorPicker> -->
-              <Button variant="ghost" @click="updateEventType">
-                <FeatherIcon
-                  :name="_event.eventType == 'Private' ? 'lock' : 'unlock'"
-                  class="h-4 w-4"
-                />
-              </Button>
-              <Button
-                v-if="_event.id"
-                variant="ghost"
-                theme="red"
-                @click="deleteEvent"
-              >
-                <FeatherIcon name="trash-2" class="h-4 w-4" />
-              </Button>
-            </div>
-            <div v-if="error" class="flex items-center gap-x-2">
-              <div class="h-full border-l mx-2" />
-              <ErrorMessage :message="error" class="text-sm text-ink-red-3" />
-            </div>
-          </div>
-          <Button :label="__('Save')" variant="solid" @click="saveEvent" />
-        </div>
-      </div>
-    </template>
-  </Dialog>
-</template>
-
-<script setup>
-import DurationIcon from '@/components/Icons/DurationIcon.vue'
-import {
-  Switch,
-  ErrorMessage,
-  TextInput,
-  TextEditor,
-  DatePicker,
-  // ColorPicker,
-  // TimePicker,
-  dayjs,
-} from 'frappe-ui'
-import { getFormat } from '@/utils'
-import { ref, nextTick, watch } from 'vue'
-
-const emit = defineEmits(['save', 'delete'])
-
-const show = defineModel()
-const event = defineModel('event')
-
-const error = ref(null)
-const title = ref(null)
-
-let _event = ref({})
-
-function updateDate(d, fromDate = false) {
-  error.value = null
-  let oldTo = _event.value.toDate || _event.value.fromDate
-
-  if (fromDate) {
-    _event.value.fromDate = d
-    if (!_event.value.toDate) {
-      _event.value.toDate = d
-    }
-  } else {
-    _event.value.toDate = d
-  }
-
-  if (_event.value.toDate && _event.value.fromDate) {
-    const diff = dayjs(_event.value.toDate).diff(
-      dayjs(_event.value.fromDate),
-      'day',
-    )
-
-    if (diff < 0) {
-      _event.value.toDate = oldTo
-      error.value = __('End date should be after start date')
-      return
-    }
-  }
-}
-
-function updateTime(t, fromTime = false) {
-  error.value = null
-  let oldTo = _event.value.toTime || _event.value.fromTime
-
-  if (fromTime) {
-    _event.value.fromTime = t
-    if (!_event.value.toTime) {
-      const hour = parseInt(t.split(':')[0])
-      const minute = parseInt(t.split(':')[1])
-      _event.value.toTime = `${hour + 1}:${minute}`
-    }
-  } else {
-    _event.value.toTime = t
-  }
-
-  if (_event.value.toTime && _event.value.fromTime) {
-    const diff = dayjs(_event.value.toDate + ' ' + _event.value.toTime).diff(
-      dayjs(_event.value.fromDate + ' ' + _event.value.fromTime),
-      'minute',
-    )
-
-    if (diff < 0) {
-      _event.value.toTime = oldTo
-      error.value = __('End time should be after start time')
-      return
-    }
-  }
-}
-
-function updateEventType() {
-  if (_event.value.eventType == 'Private') {
-    _event.value.eventType = 'Public'
-  } else {
-    _event.value.eventType = 'Private'
-  }
-}
-
-function saveEvent() {
-  error.value = null
-  if (!_event.value.title) {
-    error.value = __('Title is required')
-    title.value.focus()
-    return
-  }
-
-  _event.value.fromDateTime =
-    _event.value.fromDate + ' ' + _event.value.fromTime
-  _event.value.toDateTime = _event.value.toDate + ' ' + _event.value.toTime
-
-  emit('save', _event.value)
-}
-
-function deleteEvent() {
-  emit('delete', _event.value.id)
-}
-
-watch(
-  () => show.value,
-  (value) => {
-    if (!value) return
-    nextTick(() => {
-      title.value.el.focus()
-      _event.value = { ...event.value }
-      if (!_event.value.color) {
-        _event.value.color = '#e4faeb'
-      }
-    })
-  },
-)
-</script>
diff --git a/frontend/src/components/Modals/EventModal.vue b/frontend/src/components/Modals/EventModal.vue
index aa84b41a..ec4bfe4f 100644
--- a/frontend/src/components/Modals/EventModal.vue
+++ b/frontend/src/components/Modals/EventModal.vue
@@ -83,34 +83,22 @@
             </DatePicker>
             <TimePicker
               v-if="!_event.isFullDay"
+              class="max-w-[105px]"
               variant="outline"
-              :value="_event.fromTime"
+              :modelValue="_event.fromTime"
               :placeholder="__('Start Time')"
               @update:modelValue="(time) => updateTime(time, true)"
-            >
-              <template #suffix="{ togglePopover }">
-                <FeatherIcon
-                  name="chevron-down"
-                  class="h-4 w-4 cursor-pointer"
-                  @click="togglePopover"
-                />
-              </template>
-            </TimePicker>
+            />
             <TimePicker
               v-if="!_event.isFullDay"
+              class="max-w-[105px]"
               variant="outline"
-              :value="_event.toTime"
+              :modelValue="_event.toTime"
+              :options="toOptions"
               :placeholder="__('End Time')"
+              placement="bottom-end"
               @update:modelValue="(time) => updateTime(time)"
-            >
-              <template #suffix="{ togglePopover }">
-                <FeatherIcon
-                  name="chevron-down"
-                  class="h-4 w-4 cursor-pointer"
-                  @click="togglePopover"
-                />
-              </template>
-            </TimePicker>
+            />
           </div>
         </div>
         <div class="flex">
@@ -158,6 +146,7 @@ import {
   ErrorMessage,
   Dialog,
   DatePicker,
+  TimePicker,
   dayjs,
 } from 'frappe-ui'
 import { globalStore } from '@/stores/global'
@@ -359,4 +348,58 @@ function deleteEvent() {
     ],
   })
 }
+
+function formatDuration(mins) {
+  // For < 1 hour show minutes, else show hours (with decimal for 15/30/45 mins)
+  if (mins < 60) return __('{0} mins', [mins])
+  let hours = mins / 60
+
+  // keep hours decimal to 2 only if decimal is not 0
+  if (hours % 1 !== 0 && hours % 1 !== 0.5) {
+    hours = hours.toFixed(2)
+  }
+
+  if (Number.isInteger(hours)) {
+    return hours === 1 ? __('1 hr') : __('{0} hrs', [hours])
+  }
+  // Keep decimal representation for > 1 hour fractional durations
+  return `${hours} hrs`
+}
+
+const toOptions = computed(() => {
+  const fromTime = _event.value.fromTime
+  const timeSlots = allTimeSlots()
+  if (!fromTime) return timeSlots
+  const [fh, fm] = fromTime.split(':').map((n) => parseInt(n))
+  const fromTotal = fh * 60 + fm
+  // find first slot strictly after fromTime (even if fromTime not exactly a slot)
+  const startIndex = timeSlots.findIndex((o) => o.value > fromTime)
+  if (startIndex === -1) return []
+  return timeSlots.slice(startIndex).map((o) => {
+    const [th, tm] = o.value.split(':').map((n) => parseInt(n))
+    const toTotal = th * 60 + tm
+    const duration = toTotal - fromTotal
+    return {
+      ...o,
+      label: `${o.label} (${formatDuration(duration)})`,
+    }
+  })
+})
+
+function allTimeSlots() {
+  const out = []
+  for (let h = 0; h < 24; h++) {
+    for (const m of [0, 15, 30, 45]) {
+      const hh = String(h).padStart(2, '0')
+      const mm = String(m).padStart(2, '0')
+      const ampm = h >= 12 ? 'pm' : 'am'
+      const hour12 = h % 12 === 0 ? 12 : h % 12
+      out.push({
+        value: `${hh}:${mm}`,
+        label: `${hour12}:${mm} ${ampm}`,
+      })
+    }
+  }
+  return out
+}
 </script>
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index d96cdae5..c6af2af9 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -45,7 +45,7 @@ export function getFormat(
   onlyTime = false,
   withDate = true,
 ) {
-  if (!date) return ''
+  if (!date && withDate) return ''
   let dateFormat =
     window.sysdefaults.date_format
       .replace('mm', 'MM')