@codihaus/odp-app-hr 0.1.0

package/app/components/hr/leave/calendar-tab.vue

@@ -0,0 +1,649 @@
+<template>
+    <div class="flex flex-col h-full">
+        <!-- Toolbar -->
+        <div class="flex items-center gap-2 py-3 border-b border-default flex-wrap">
+            <UButton
+                icon="i-ph-caret-left"
+                size="sm"
+                variant="ghost"
+                :disabled="rangePreset === 'custom'"
+                @click="shift(-1)"
+            />
+            <UButton
+                :label="$t('calendar.today')"
+                size="sm"
+                variant="outline"
+                :disabled="rangePreset === 'custom'"
+                @click="todayClick"
+            />
+            <UButton
+                icon="i-ph-caret-right"
+                size="sm"
+                variant="ghost"
+                :disabled="rangePreset === 'custom'"
+                @click="shift(1)"
+            />
+            <span class="ml-2 text-base font-semibold">{{ rangeLabel }}</span>
+            <div class="flex-1" />
+            <div class="flex items-center gap-1 bg-elevated rounded-lg p-0.5">
+                <button
+                    v-for="opt in granularityOptions"
+                    :key="opt.value"
+                    class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
+                    :class="granularity === opt.value
+                        ? 'bg-default text-default shadow-sm'
+                        : 'text-muted hover:text-default'"
+                    @click="granularity = opt.value"
+                >{{ opt.label }}</button>
+            </div>
+            <UPopover :ui="{ content: 'w-72' }">
+                <UButton
+                    size="sm"
+                    variant="outline"
+                    color="neutral"
+                    icon="i-ph-calendar-light"
+                    trailing-icon="i-ph-caret-down-light"
+                >
+                    {{ rangePresetLabel }}
+                </UButton>
+                <template #content>
+                    <div class="p-3 space-y-3">
+                        <div>
+                            <div class="text-[10px] font-semibold uppercase tracking-wider text-muted mb-1.5">
+                                {{ $t('calendar.custom_range') }}
+                            </div>
+                            <div class="grid grid-cols-2 gap-1">
+                                <button
+                                    v-for="opt in rangePresetOptions"
+                                    :key="opt.value"
+                                    type="button"
+                                    class="px-2.5 py-1.5 text-xs font-medium rounded-md text-left transition-colors cursor-pointer"
+                                    :class="rangePreset === opt.value
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'text-default hover:bg-elevated'"
+                                    @click="rangePreset = opt.value"
+                                >{{ opt.label }}</button>
+                            </div>
+                        </div>
+                        <div
+                            v-if="rangePreset === 'custom'"
+                            class="space-y-2 pt-1 border-t border-default"
+                        >
+                            <div>
+                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-muted mb-1">From</label>
+                                <UInput
+                                    v-model="customFrom"
+                                    type="date"
+                                    size="sm"
+                                    class="w-full"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-muted mb-1">To</label>
+                                <UInput
+                                    v-model="customTo"
+                                    type="date"
+                                    size="sm"
+                                    class="w-full"
+                                />
+                            </div>
+                            <div
+                                v-if="rangeWarning"
+                                class="flex items-start gap-1.5 text-xs text-warning"
+                            >
+                                <UIcon
+                                    name="i-ph-warning-light"
+                                    class="size-4 shrink-0 mt-0.5"
+                                />
+                                <span>{{ rangeWarning }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </UPopover>
+            <UInput
+                v-model="searchQuery"
+                icon="i-ph-magnifying-glass"
+                :placeholder="$t('common.search')"
+                size="sm"
+                class="w-56"
+            />
+            <USelect
+                v-model="groupBy"
+                :items="groupOptions"
+                value-key="value"
+                size="sm"
+                class="w-44"
+            />
+        </div>
+
+        <!-- Legend -->
+        <div class="flex items-center gap-3 text-xs text-muted px-4 py-2 border-b border-default">
+            <span
+                v-for="(meta, key) in TYPE_META"
+                :key="key"
+                class="flex items-center gap-1.5"
+            >
+                <span
+                    class="size-2.5 rounded-sm"
+                    :class="meta.dot"
+                />
+                {{ meta.label }}
+            </span>
+        </div>
+
+        <!-- Calendar grid -->
+        <div class="flex-1 overflow-auto">
+            <div
+                class="grid"
+                :style="{ gridTemplateColumns: gridCols }"
+            >
+                <div class="sticky left-0 top-0 z-20 bg-default border-b border-r border-default px-4 py-2.5 flex items-center">
+                    <span class="text-xs uppercase tracking-wider text-muted font-medium">
+                        {{ activeEmployees.length }} members
+                    </span>
+                </div>
+                <div
+                    v-for="b in buckets"
+                    :key="b.startIso"
+                    class="sticky top-0 z-10 bg-default border-b border-r border-default text-center py-1.5 last:border-r-0"
+                    :class="[b.isWeekend && 'bg-elevated/40', b.containsToday && 'bg-primary/10', b.isHoliday && 'bg-error/10']"
+                >
+                    <div
+                        class="text-sm font-medium"
+                        :class="b.containsToday && 'text-primary'"
+                    >{{ b.primary }}</div>
+                    <div class="text-[10px] uppercase text-muted">{{ b.secondary }}</div>
+                    <div
+                        v-if="b.holidayName"
+                        class="text-[9px] text-error truncate px-0.5"
+                    >{{ b.holidayName }}</div>
+                </div>
+
+                <template
+                    v-for="grp in groups"
+                    :key="grp.key"
+                >
+                    <template v-if="groupBy !== 'none'">
+                        <div class="sticky left-0 z-10 bg-elevated/40 border-b border-r border-default px-4 py-2">
+                            <span class="text-xs font-semibold uppercase tracking-wider text-muted">
+                                {{ grp.label }} ({{ grp.members.length }})
+                            </span>
+                        </div>
+                        <div
+                            class="bg-elevated/40 border-b border-default"
+                            :style="{ gridColumn: `2 / span ${buckets.length}` }"
+                        />
+                    </template>
+
+                    <template
+                        v-for="emp in grp.members"
+                        :key="emp.id"
+                    >
+                        <div class="sticky left-0 z-10 bg-default border-b border-r border-default px-4 py-3 flex items-center gap-3 min-w-0">
+                            <UAvatar
+                                icon="i-ph-user-light"
+                                size="sm"
+                                class="bg-primary/10 text-primary shrink-0"
+                            />
+                            <div class="min-w-0">
+                                <div class="text-sm font-medium truncate">
+                                    {{ emp.display_name }}
+                                </div>
+                                <div class="text-xs text-muted truncate">
+                                    {{ emp.job_title }}
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            class="relative border-b border-default"
+                            :style="{ gridColumn: `2 / span ${buckets.length}` }"
+                        >
+                            <div
+                                class="grid h-full"
+                                :style="{ gridTemplateColumns: `repeat(${buckets.length}, 1fr)` }"
+                            >
+                                <div
+                                    v-for="b in buckets"
+                                    :key="b.startIso"
+                                    class="border-r border-default last:border-r-0 min-h-[44px]"
+                                    :class="[b.isWeekend && 'bg-elevated/40', b.containsToday && 'bg-primary/5', b.isHoliday && 'bg-error/5']"
+                                />
+                            </div>
+                            <button
+                                v-for="seg in pillsByPerson[String(emp.id)] || []"
+                                :key="seg.id"
+                                type="button"
+                                class="absolute inset-y-1 flex items-center gap-1 px-2 rounded-md text-xs font-medium cursor-pointer transition-all hover:ring-1 hover:ring-current focus:outline-none focus-visible:ring-2 focus-visible:ring-current overflow-hidden whitespace-nowrap"
+                                :class="[
+                                    TYPE_META[seg.type]?.pill ?? 'bg-primary/15 text-primary',
+                                    seg.pending && 'ring-1 ring-dashed ring-current opacity-80'
+                                ]"
+                                :style="{
+                                    left: `calc(${seg.leftPct}% + 2px)`,
+                                    width: `calc(${seg.widthPct}% - 4px)`,
+                                    minWidth: '76px'
+                                }"
+                                :title="`${seg.label}${seg.pending ? ' (pending)' : ''} · ${seg.from} → ${seg.to}`"
+                                @click="openLeave(seg.id)"
+                            >
+                                <UIcon
+                                    :name="TYPE_META[seg.type]?.icon ?? 'i-ph-calendar-light'"
+                                    class="size-3.5 shrink-0"
+                                />
+                                <span class="truncate">{{ seg.label }}</span>
+                                <span
+                                    v-if="granularity !== 'day'"
+                                    class="ml-auto opacity-70 shrink-0"
+                                >{{ seg.durationLabel }}</span>
+                            </button>
+                        </div>
+                    </template>
+                </template>
+
+                <div
+                    v-if="activeEmployees.length === 0 || buckets.length === 0"
+                    class="col-span-full py-16 text-center text-sm text-muted"
+                >
+                    {{ buckets.length === 0 ? $t('calendar.custom_range') : $t('common.no_data') }}
+                </div>
+            </div>
+        </div>
+
+        <UModal v-model:open="modalOpen">
+            <template #content>
+                <div
+                    v-if="selectedLeave"
+                    class="p-6 space-y-5"
+                >
+                    <div class="flex items-start justify-between gap-3">
+                        <div class="flex items-center gap-3">
+                            <div
+                                class="size-10 rounded-lg flex items-center justify-center"
+                                :class="TYPE_META[selectedType]?.pill ?? 'bg-primary/15 text-primary'"
+                            >
+                                <UIcon
+                                    :name="TYPE_META[selectedType]?.icon ?? 'i-ph-calendar-light'"
+                                    class="size-5"
+                                />
+                            </div>
+                            <div>
+                                <div class="text-base font-semibold">
+                                    {{ TYPE_META[selectedType]?.label ?? selectedType }} leave
+                                </div>
+                                <div class="text-sm text-muted">
+                                    {{ selectedLeave.person_name ?? (selectedLeave.person_id as any)?.display_name ?? '—' }}
+                                </div>
+                            </div>
+                        </div>
+                        <UBadge
+                            :label="$t(`hr.leave.status.${selectedLeave.status.toLowerCase()}`)"
+                            :color="selectedLeave.status?.toLowerCase() === 'approved' ? 'success' : selectedLeave.status?.toLowerCase() === 'pending' ? 'warning' : 'error'"
+                            variant="subtle"
+                            size="md"
+                        />
+                    </div>
+                    <div class="grid grid-cols-2 gap-4 text-sm">
+                        <div>
+                            <div class="text-xs uppercase tracking-wider text-muted mb-1">From</div>
+                            <div class="font-medium">{{ selectedLeave.start_date || selectedLeave.from_date }}</div>
+                        </div>
+                        <div>
+                            <div class="text-xs uppercase tracking-wider text-muted mb-1">To</div>
+                            <div class="font-medium">{{ selectedLeave.end_date || selectedLeave.to_date }}</div>
+                        </div>
+                        <div>
+                            <div class="text-xs uppercase tracking-wider text-muted mb-1">Days</div>
+                            <div class="font-medium">{{ selectedLeave.days_count ?? selectedLeave.days }}</div>
+                        </div>
+                        <div>
+                            <div class="text-xs uppercase tracking-wider text-muted mb-1">Type</div>
+                            <div class="font-medium capitalize">{{ leaveTypeName(selectedLeave) }}</div>
+                        </div>
+                    </div>
+                    <div v-if="selectedLeave.reason">
+                        <div class="text-xs uppercase tracking-wider text-muted mb-1">Reason</div>
+                        <div class="text-sm">{{ selectedLeave.reason }}</div>
+                    </div>
+                    <div
+                        v-if="canApprove && selectedLeave.status?.toLowerCase() === 'pending'"
+                        class="flex items-center gap-2 pt-2 border-t border-default"
+                    >
+                        <UButton
+                            :label="$t('hr.leave.actions.approve')"
+                            icon="i-ph-check-light"
+                            color="success"
+                            size="sm"
+                            @click="updateSelected('Approved')"
+                        />
+                        <UButton
+                            :label="$t('hr.leave.actions.reject')"
+                            icon="i-ph-x-light"
+                            color="error"
+                            variant="outline"
+                            size="sm"
+                            @click="updateSelected('Rejected')"
+                        />
+                    </div>
+                </div>
+            </template>
+        </UModal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+type Granularity = 'day' | 'week' | 'month'
+type RangePreset = '1w' | '1m' | '3m' | '6m' | '1y' | 'custom'
+
+const { t } = useI18n()
+const { leaveRequests, setStatus } = useLeave()
+const { can } = usePermissionRegistry()
+const canApprove = computed(() => can('hr', 'leave.approve') || can('hr', 'leave.approve.dept'))
+const { holidays } = useHolidays()
+const { employees } = usePeople()
+
+const granularity = useState<Granularity>('cal.granularity', () => 'day')
+const rangePreset = useState<RangePreset>('cal.rangePreset', () => '1m')
+const cursor = useState('cal.cursor', () => new Date())
+const groupBy = useState<'none' | 'department'>('cal.groupBy', () => 'department')
+const searchQuery = ref('')
+const customFrom = ref('')
+const customTo = ref('')
+const selectedLeaveId = ref<string | null>(null)
+const modalOpen = ref(false)
+
+const PRESET_GRANULARITY: Record<RangePreset, Granularity> = {
+    '1w': 'day', '1m': 'day', '3m': 'week', '6m': 'week', '1y': 'month', custom: 'day',
+}
+
+function presetRange(preset: Exclude<RangePreset, 'custom'>, anchor: Date): { start: Date, end: Date } {
+    if (preset === '1w') {
+        const dow = (anchor.getDay() + 6) % 7
+        const s = new Date(anchor.getFullYear(), anchor.getMonth(), anchor.getDate() - dow)
+        const e = new Date(s); e.setDate(s.getDate() + 6)
+        return { start: s, end: e }
+    }
+    const s = new Date(anchor.getFullYear(), anchor.getMonth(), 1)
+    const monthsMap = { '1m': 1, '3m': 3, '6m': 6, '1y': 12 } as const
+    const months = monthsMap[preset as keyof typeof monthsMap]
+    const e = new Date(s.getFullYear(), s.getMonth() + months, 0)
+    return { start: s, end: e }
+}
+
+function toIso(d: Date): string {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+function isSameDay(a: Date, b: Date): boolean {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+function dayDiff(a: Date, b: Date): number {
+    return Math.round((b.getTime() - a.getTime()) / 86400000)
+}
+
+watch(rangePreset, (p, prev) => {
+    granularity.value = PRESET_GRANULARITY[p]
+    if (p === 'custom' && prev && prev !== 'custom') {
+        const r = presetRange(prev, cursor.value)
+        customFrom.value = toIso(r.start)
+        customTo.value = toIso(r.end)
+    }
+})
+
+const granularityOptions = computed(() => [
+    { value: 'day' as Granularity, label: t('calendar.modes.day') },
+    { value: 'week' as Granularity, label: t('calendar.modes.week') },
+    { value: 'month' as Granularity, label: t('calendar.modes.month') },
+])
+
+const rangePresetOptions: { value: RangePreset, label: string }[] = [
+    { value: '1w', label: 'This week' },
+    { value: '1m', label: 'This month' },
+    { value: '3m', label: '3 months' },
+    { value: '6m', label: '6 months' },
+    { value: '1y', label: 'This year' },
+    { value: 'custom', label: 'Custom range' },
+]
+
+const groupOptions = computed(() => [
+    { value: 'none', label: 'No grouping' },
+    { value: 'department', label: 'Group by Department' },
+])
+
+const TYPE_META: Record<string, { label: string, icon: string, dot: string, pill: string }> = {
+    annual: { label: 'Annual', icon: 'i-ph-island-light', dot: 'bg-warning', pill: 'bg-warning/15 text-warning' },
+    sick: { label: 'Sick', icon: 'i-ph-thermometer-light', dot: 'bg-error', pill: 'bg-error/15 text-error' },
+    remote: { label: 'Remote', icon: 'i-ph-laptop-light', dot: 'bg-info', pill: 'bg-info/15 text-info' },
+    personal: { label: 'Personal', icon: 'i-ph-user-light', dot: 'bg-primary', pill: 'bg-primary/15 text-primary' },
+}
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+// Build a set of holiday ISO dates for quick lookup
+const holidaySet = computed(() => {
+    const set = new Map<string, string>() // iso -> name
+    for (const h of holidays.value) {
+        if (h.date) set.set(toIso(new Date(h.date)), h.name)
+    }
+    return set
+})
+
+const activeEmployees = computed(() => {
+    const list = employees.value.filter((e: Person) => e.stage === 'active' || e.stage === 'probation')
+    const q = searchQuery.value.trim().toLowerCase()
+    return q ? list.filter((e: Person) => (e.display_name ?? '').toLowerCase().includes(q)) : list
+})
+
+const groups = computed(() => {
+    if (groupBy.value === 'none') {
+        return [{ key: 'all', label: 'All', members: activeEmployees.value }]
+    }
+    const byDept = new Map<string, Person[]>()
+    for (const emp of activeEmployees.value) {
+        const dept = (emp as any).department_id?.name ?? (emp as any).department ?? 'Unassigned'
+        if (!byDept.has(dept)) byDept.set(dept, [])
+        byDept.get(dept)!.push(emp)
+    }
+    return [...byDept.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([dept, members]) => ({ key: dept, label: dept, members }))
+})
+
+const range = computed<{ start: Date, end: Date } | null>(() => {
+    if (rangePreset.value === 'custom') {
+        if (!customFrom.value || !customTo.value) return null
+        const s = new Date(customFrom.value), e = new Date(customTo.value)
+        return e < s ? null : { start: s, end: e }
+    }
+    return presetRange(rangePreset.value, cursor.value)
+})
+
+const rangeWarning = computed<string | null>(() => {
+    if (rangePreset.value !== 'custom' || !range.value) return null
+    const days = dayDiff(range.value.start, range.value.end) + 1
+    if (granularity.value === 'week' && days < 7) {
+        return t('calendar.range_warning.week', days)
+    }
+    if (granularity.value === 'month' && days < 28) {
+        return t('calendar.range_warning.month', days)
+    }
+    return null
+})
+
+interface Bucket {
+    startIso: string
+    endIso: string
+    days: number
+    primary: string
+    secondary: string
+    isWeekend: boolean
+    containsToday: boolean
+    isHoliday: boolean
+    holidayName?: string
+}
+
+const buckets = computed<Bucket[]>(() => {
+    const r = range.value
+    if (!r) return []
+    const today = new Date()
+    const list: Bucket[] = []
+    if (granularity.value === 'day') {
+        const d = new Date(r.start)
+        while (d <= r.end) {
+            const dow = d.getDay()
+            const iso = toIso(d)
+            const hName = holidaySet.value.get(iso)
+            list.push({
+                startIso: iso, endIso: iso, days: 1,
+                primary: String(d.getDate()), secondary: WEEKDAYS[dow]!,
+                isWeekend: dow === 0 || dow === 6,
+                containsToday: isSameDay(d, today),
+                isHoliday: !!hName,
+                holidayName: hName,
+            })
+            d.setDate(d.getDate() + 1)
+        }
+    }
+    else if (granularity.value === 'week') {
+        const d = new Date(r.start); const dow = (d.getDay() + 6) % 7; d.setDate(d.getDate() - dow)
+        while (d <= r.end) {
+            const wkEnd = new Date(d); wkEnd.setDate(d.getDate() + 6)
+            const s = d < r.start ? new Date(r.start) : new Date(d)
+            const e = wkEnd > r.end ? new Date(r.end) : new Date(wkEnd)
+            list.push({
+                startIso: toIso(s), endIso: toIso(e), days: dayDiff(s, e) + 1,
+                primary: `${MONTHS[s.getMonth()]} ${s.getDate()}`, secondary: `– ${e.getDate()}`,
+                isWeekend: false, containsToday: today >= s && today <= e, isHoliday: false,
+            })
+            d.setDate(d.getDate() + 7)
+        }
+    }
+    else {
+        const d = new Date(r.start.getFullYear(), r.start.getMonth(), 1)
+        while (d <= r.end) {
+            const mEnd = new Date(d.getFullYear(), d.getMonth() + 1, 0)
+            const s = d < r.start ? new Date(r.start) : new Date(d)
+            const e = mEnd > r.end ? new Date(r.end) : new Date(mEnd)
+            list.push({
+                startIso: toIso(s), endIso: toIso(e), days: dayDiff(s, e) + 1,
+                primary: MONTHS[d.getMonth()]!, secondary: String(d.getFullYear()),
+                isWeekend: false, containsToday: today >= s && today <= e, isHoliday: false,
+            })
+            d.setMonth(d.getMonth() + 1)
+        }
+    }
+    return list
+})
+
+const rangeLabel = computed(() => {
+    const r = range.value
+    if (!r) return 'Pick a date range'
+    const opts: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }
+    return `${r.start.toLocaleDateString('en-US', opts)} – ${r.end.toLocaleDateString('en-US', opts)}`
+})
+
+const rangePresetLabel = computed(() =>
+    rangePresetOptions.find(o => o.value === rangePreset.value)?.label ?? 'Range'
+)
+
+const gridCols = computed(() => {
+    const n = buckets.value.length
+    if (n === 0) return '220px'
+    let min: number
+    if (granularity.value === 'day') min = n > 60 ? 24 : 36
+    else if (granularity.value === 'week') min = 60
+    else min = 80
+    return `220px repeat(${n}, minmax(${min}px, 1fr))`
+})
+
+interface Pill {
+    id: string
+    type: string
+    label: string
+    durationLabel: string
+    from: string
+    to: string
+    pending: boolean
+    leftPct: number
+    widthPct: number
+}
+
+function bucketIndexForDate(iso: string, bs: Bucket[]): number {
+    for (let i = 0; i < bs.length; i++) {
+        const b = bs[i]!
+        if (iso >= b.startIso && iso <= b.endIso) return i
+    }
+    return -1
+}
+
+function leaveTypeName(req: LeaveRequest): string {
+    if (req.leave_type) return req.leave_type
+    const lt = req.leave_type_id as any
+    if (lt && typeof lt === 'object') return lt.name ?? lt.label ?? 'personal'
+    return 'personal'
+}
+
+const pillsByPerson = computed<Record<string, Pill[]>>(() => {
+    const out: Record<string, Pill[]> = {}
+    const bs = buckets.value
+    if (bs.length === 0) return out
+    const rangeStartIso = bs[0]!.startIso
+    const rangeEndIso = bs[bs.length - 1]!.endIso
+    for (const lr of leaveRequests.value) {
+        if (lr.status?.toLowerCase() === 'rejected') continue
+        const rawStart = lr.start_date || lr.from_date || ''
+        const rawEnd = lr.end_date || lr.to_date || ''
+        const startDate = rawStart ? toIso(new Date(rawStart)) : ''
+        const endDate = rawEnd ? toIso(new Date(rawEnd)) : ''
+        if (endDate < rangeStartIso || startDate > rangeEndIso) continue
+        const fromIso = startDate < rangeStartIso ? rangeStartIso : startDate
+        const toIso2 = endDate > rangeEndIso ? rangeEndIso : endDate
+        const startBi = bucketIndexForDate(fromIso, bs)
+        const endBi = bucketIndexForDate(toIso2, bs)
+        if (startBi < 0 || endBi < 0) continue
+        const startBucket = bs[startBi]!
+        const endBucket = bs[endBi]!
+        const startCol = startBi + dayDiff(new Date(startBucket.startIso), new Date(fromIso)) / startBucket.days
+        const endCol = endBi + (dayDiff(new Date(endBucket.startIso), new Date(toIso2)) + 1) / endBucket.days
+        const typeName = leaveTypeName(lr).toLowerCase()
+        const type = typeName in TYPE_META ? typeName : 'personal'
+        const days = lr.days_count ?? lr.days ?? 0
+        const pill: Pill = {
+            id: String(lr.id), type,
+            label: TYPE_META[type]?.label ?? type,
+            durationLabel: days === 1 ? '1d' : `${days}d`,
+            from: startDate, to: endDate,
+            pending: lr.status?.toLowerCase() === 'pending',
+            leftPct: startCol / bs.length * 100,
+            widthPct: (endCol - startCol) / bs.length * 100,
+        }
+        const pid = String((lr.person_id as any)?.id ?? lr.person_id)
+        if (!out[pid]) out[pid] = []
+        out[pid]!.push(pill)
+    }
+    return out
+})
+
+const selectedLeave = computed(() =>
+    selectedLeaveId.value ? leaveRequests.value.find(l => String(l.id) === selectedLeaveId.value) ?? null : null
+)
+const selectedType = computed<string>(() => {
+    const lt = selectedLeave.value ? leaveTypeName(selectedLeave.value).toLowerCase() : 'personal'
+    return lt in TYPE_META ? lt : 'personal'
+})
+
+function openLeave(id: string) { selectedLeaveId.value = id; modalOpen.value = true }
+function updateSelected(status: LeaveRequest['status']) {
+    if (!selectedLeaveId.value) return
+    setStatus(selectedLeaveId.value, status)
+    modalOpen.value = false
+}
+function shift(delta: number) {
+    if (rangePreset.value === 'custom') return
+    const c = new Date(cursor.value)
+    if (rangePreset.value === '1w') c.setDate(c.getDate() + delta * 7)
+    else if (rangePreset.value === '1m') c.setMonth(c.getMonth() + delta)
+    else if (rangePreset.value === '3m') c.setMonth(c.getMonth() + delta * 3)
+    else if (rangePreset.value === '6m') c.setMonth(c.getMonth() + delta * 6)
+    else if (rangePreset.value === '1y') c.setFullYear(c.getFullYear() + delta)
+    cursor.value = c
+}
+function todayClick() { cursor.value = new Date() }
+</script>