@codihaus/odp-app-hr 0.1.0

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

@@ -0,0 +1,259 @@
+<template>
+    <div class="flex flex-col h-full">
+        <!-- Toolbar -->
+        <div class="flex items-center gap-2 px-4 py-3 border-b border-default">
+            <UButton
+                icon="i-ph-caret-left"
+                size="sm"
+                variant="ghost"
+                @click="prevMonth"
+            />
+            <UButton
+                :label="$t('calendar.today')"
+                size="sm"
+                variant="outline"
+                @click="goToday"
+            />
+            <UButton
+                icon="i-ph-caret-right"
+                size="sm"
+                variant="ghost"
+                @click="nextMonth"
+            />
+            <span class="ml-2 text-base font-semibold">{{ rangeLabel }}</span>
+            <div class="flex-1" />
+            <UInput
+                v-model="searchQuery"
+                icon="i-ph-magnifying-glass"
+                :placeholder="$t('common.search')"
+                size="sm"
+                class="w-56"
+            />
+        </div>
+
+        <!-- Legend -->
+        <div class="flex items-center gap-4 text-xs text-muted px-4 py-2 border-b border-default">
+            <span class="flex items-center gap-1.5">
+                <span class="size-2.5 rounded-sm bg-success/60" />
+                {{ $t('hr.leave.status.approved') }}
+            </span>
+            <span class="flex items-center gap-1.5">
+                <span class="size-2.5 rounded-sm border border-dashed border-warning bg-warning/20" />
+                {{ $t('hr.leave.status.pending') }}
+            </span>
+            <span class="flex items-center gap-1.5">
+                <span class="size-2.5 rounded-sm bg-error/30" />
+                {{ $t('holidays.title') }}
+            </span>
+        </div>
+
+        <!-- Gantt grid -->
+        <div class="flex-1 overflow-auto">
+            <div
+                class="grid"
+                :style="gridStyle"
+            >
+                <!-- Header row -->
+                <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="day in days"
+                    :key="day.iso"
+                    class="sticky top-0 z-10 bg-default border-b border-r border-default text-center py-1.5 last:border-r-0 min-w-[32px]"
+                    :class="[
+                        day.isWeekend && 'bg-elevated/40',
+                        day.isToday && 'bg-primary/10',
+                        day.isHoliday && !day.isWeekend && 'bg-error/10',
+                    ]"
+                    :title="day.holidayName"
+                >
+                    <div
+                        class="text-xs font-medium leading-tight"
+                        :class="day.isToday ? 'text-primary' : day.isHoliday ? 'text-error' : ''"
+                    >{{ day.d }}</div>
+                    <div class="text-[9px] text-muted leading-tight">{{ day.dow }}</div>
+                </div>
+
+                <!-- Employee rows -->
+                <template
+                    v-for="emp in activeEmployees"
+                    :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 min-w-[220px]">
+                        <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 ${days.length}` }"
+                    >
+                        <!-- Day cells -->
+                        <div
+                            class="grid h-full absolute inset-0"
+                            :style="{ gridTemplateColumns: `repeat(${days.length}, 1fr)` }"
+                        >
+                            <div
+                                v-for="day in days"
+                                :key="day.iso"
+                                class="border-r border-default last:border-r-0 min-h-[44px]"
+                                :class="[
+                                    day.isWeekend && 'bg-elevated/40',
+                                    day.isToday && 'bg-primary/5',
+                                    day.isHoliday && !day.isWeekend && 'bg-error/5',
+                                ]"
+                            />
+                        </div>
+                        <!-- Leave pills -->
+                        <div
+                            v-for="bar in barsByPerson[String(emp.id)] || []"
+                            :key="bar.id"
+                            class="absolute inset-y-1.5 flex items-center px-2 rounded text-xs font-medium overflow-hidden whitespace-nowrap cursor-pointer"
+                            :class="[
+                                bar.status?.toLowerCase() === 'approved' ? 'bg-success/20 text-success border border-success/30' : 'bg-warning/20 text-warning border border-dashed border-warning/50 opacity-80',
+                            ]"
+                            :style="{ left: `${bar.leftPct}%`, width: `${bar.widthPct}%`, minWidth: '40px' }"
+                            :title="`${bar.leaveType} · ${bar.start} → ${bar.end} (${bar.days}d)`"
+                        >
+                            <span class="truncate">{{ bar.leaveType }}</span>
+                        </div>
+                    </div>
+                </template>
+
+                <div
+                    v-if="activeEmployees.length === 0"
+                    class="col-span-full py-16 text-center text-sm text-muted"
+                >
+                    {{ $t('common.no_data') }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n()
+const { leaveRequests } = useLeave()
+const { holidays } = useHolidays()
+const { employees } = usePeople()
+
+const cursor = useState('timeline.cursor', () => new Date())
+const searchQuery = ref('')
+
+const WEEKDAYS_SHORT = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+function toIso(d: Date): string {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+function dayDiff(a: Date, b: Date): number {
+    return Math.round((b.getTime() - a.getTime()) / 86400000)
+}
+
+const monthStart = computed(() => new Date(cursor.value.getFullYear(), cursor.value.getMonth(), 1))
+const monthEnd = computed(() => new Date(cursor.value.getFullYear(), cursor.value.getMonth() + 1, 0))
+
+const holidaySet = computed(() => {
+    const m = new Map<string, string>()
+    for (const h of holidays.value) {
+        if (h.date) m.set(toIso(new Date(h.date)), h.name)
+    }
+    return m
+})
+
+interface DayBucket { iso: string, d: number, dow: string, isWeekend: boolean, isToday: boolean, isHoliday: boolean, holidayName?: string }
+
+const days = computed<DayBucket[]>(() => {
+    const today = toIso(new Date())
+    const list: DayBucket[] = []
+    const d = new Date(monthStart.value)
+    while (d <= monthEnd.value) {
+        const iso = toIso(d)
+        const dow = d.getDay()
+        list.push({
+            iso, d: d.getDate(), dow: WEEKDAYS_SHORT[dow]!,
+            isWeekend: dow === 0 || dow === 6,
+            isToday: iso === today,
+            isHoliday: holidaySet.value.has(iso),
+            holidayName: holidaySet.value.get(iso),
+        })
+        d.setDate(d.getDate() + 1)
+    }
+    return list
+})
+
+const rangeLabel = computed(() => {
+    const opts: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' }
+    return monthStart.value.toLocaleDateString('en-US', opts)
+})
+
+const gridStyle = computed(() => ({
+    gridTemplateColumns: `minmax(220px, 220px) repeat(${days.value.length}, minmax(32px, 1fr))`,
+}))
+
+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
+})
+
+interface Bar { id: string, leaveType: string, start: string, end: string, days: number, status: string, leftPct: number, widthPct: number }
+
+const barsByPerson = computed<Record<string, Bar[]>>(() => {
+    const out: Record<string, Bar[]> = {}
+    const startIso = toIso(monthStart.value)
+    const endIso = toIso(monthEnd.value)
+    const totalDays = days.value.length
+
+    for (const lr of leaveRequests.value) {
+        const st = lr.status?.toLowerCase()
+        if (st === 'rejected' || st === 'cancelled') continue
+        const lrStart = (lr.start_date || lr.from_date) ? toIso(new Date(lr.start_date || lr.from_date)) : ''
+        const lrEnd = (lr.end_date || lr.to_date) ? toIso(new Date(lr.end_date || lr.to_date)) : ''
+        if (lrEnd < startIso || lrStart > endIso) continue
+
+        const clampedStart = lrStart < startIso ? startIso : lrStart
+        const clampedEnd = lrEnd > endIso ? endIso : lrEnd
+
+        const startD = new Date(monthStart.value)
+        const offsetDays = dayDiff(startD, new Date(clampedStart))
+        const spanDays = dayDiff(new Date(clampedStart), new Date(clampedEnd)) + 1
+
+        const leftPct = (offsetDays / totalDays) * 100
+        const widthPct = (spanDays / totalDays) * 100
+
+        let typeName = lr.leave_type ?? ''
+        if (!typeName && lr.leave_type_id && typeof lr.leave_type_id === 'object') {
+            typeName = (lr.leave_type_id as any).name ?? (lr.leave_type_id as any).label ?? ''
+        }
+
+        const bar: Bar = {
+            id: String(lr.id),
+            leaveType: typeName || 'Leave',
+            start: lrStart,
+            end: lrEnd,
+            days: lr.days_count ?? lr.days ?? spanDays,
+            status: lr.status,
+            leftPct,
+            widthPct,
+        }
+
+        const pid = String((lr.person_id as any)?.id ?? lr.person_id)
+        if (!out[pid]) out[pid] = []
+        out[pid]!.push(bar)
+    }
+    return out
+})
+
+function prevMonth() { cursor.value = new Date(cursor.value.getFullYear(), cursor.value.getMonth() - 1, 1) }
+function nextMonth() { cursor.value = new Date(cursor.value.getFullYear(), cursor.value.getMonth() + 1, 1) }
+function goToday() { cursor.value = new Date() }
+</script>

package/app/components/hr/offboarding/tab.vue

@@ -0,0 +1,303 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+
+const props = defineProps<{ person: Person }>()
+
+const { t, te } = useI18n()
+const toast = useToast()
+const api = useHrApi()
+const { onUpdated } = useEmployeeDetail()
+const {
+    refreshKey, fetchForPerson, listForPerson, get, updateCase, updateTask,
+    returnAssets, deprovision, getSettlement, finalize, cancel,
+} = useOffboarding()
+
+const offcase = ref<Offboarding | null>(null)
+const allCases = ref<Offboarding[]>([])
+const settlement = ref<OffboardingSettlement | null>(null)
+const loading = ref(false)
+const busy = ref(false)
+const showFinalize = ref(false)
+const payoutAmount = ref<number | null>(null)
+const detailCase = ref<Offboarding | null>(null)
+const detailLoading = ref(false)
+
+const history = computed(() => allCases.value.filter(c => c.id !== offcase.value?.id))
+
+const TASK_ICON: Record<string, string> = {
+    knowledge_transfer: "i-ph-handshake-light",
+    asset_return: "i-ph-package-light",
+    access_revoke: "i-ph-lock-key-light",
+    leave_settlement: "i-ph-umbrella-light",
+    exit_interview: "i-ph-microphone-light",
+    finance_clearance: "i-ph-money-light",
+    manager_signoff: "i-ph-seal-check-light",
+    exit_documents: "i-ph-file-doc-light",
+}
+const STATUS_COLOR: Record<string, string> = { initiated: "info", in_progress: "warning", completed: "success", cancelled: "error" }
+
+const readonly = computed(() => ["completed", "cancelled"].includes(offcase.value?.status ?? ""))
+const sortedTasks = computed(() => [...(offcase.value?.tasks ?? [])].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)))
+
+function taskLabel(tk: OffboardingTask) {
+    const key = `hr.offboarding.tasks.${tk.key}`
+    return te(key) ? t(key) : tk.label
+}
+
+async function load() {
+    loading.value = true
+    try {
+        const [current, cases] = await Promise.all([
+            fetchForPerson(props.person.id),
+            listForPerson(props.person.id),
+        ])
+        offcase.value = current
+        allCases.value = cases
+        payoutAmount.value = offcase.value?.leave_payout_amount ?? null
+    }
+    finally { loading.value = false }
+}
+
+async function openDetail(id: number) {
+    detailLoading.value = true
+    try { detailCase.value = await get(id) }
+    finally { detailLoading.value = false }
+}
+async function reloadCase() {
+    if (offcase.value) offcase.value = await fetchForPerson(props.person.id)
+}
+
+async function setTaskStatus(tk: OffboardingTask, status: string) {
+    if (readonly.value) return
+    await updateTask(offcase.value!.id, tk.id, { status: status as any })
+    await reloadCase()
+}
+
+async function onReturnAssets() {
+    busy.value = true
+    try {
+        const r = await returnAssets(offcase.value!.id)
+        toast.add({ title: t("hr.offboarding.toast.assets_returned", { count: r?.returned ?? 0 }), color: "success" })
+        await reloadCase()
+    }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+async function onDeprovision() {
+    busy.value = true
+    try {
+        await deprovision(offcase.value!.id)
+        toast.add({ title: t("hr.offboarding.toast.deprovisioned"), color: "success" })
+        await reloadCase()
+    }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+async function onLoadSettlement() {
+    busy.value = true
+    try { settlement.value = await getSettlement(offcase.value!.id) }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+async function onSavePayout() {
+    busy.value = true
+    try {
+        await updateCase(offcase.value!.id, {
+            leave_payout_days: settlement.value?.totalRemainingDays ?? null,
+            leave_payout_amount: payoutAmount.value ?? null,
+        })
+        toast.add({ title: t("hr.toast.saved"), color: "success" })
+        await reloadCase()
+    }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+async function onFinalize() {
+    busy.value = true
+    try {
+        await finalize(offcase.value!.id)
+        showFinalize.value = false
+        toast.add({ title: t("hr.offboarding.toast.finalized"), color: "success" })
+        await reloadCase()
+        const updated = await api.getPerson(String(props.person.id))
+        if (updated) onUpdated(updated as Person)
+    }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+async function onCancel() {
+    busy.value = true
+    try {
+        await cancel(offcase.value!.id)
+        toast.add({ title: t("hr.offboarding.toast.cancelled"), color: "success" })
+        await reloadCase()
+    }
+    catch (e: any) { toast.add({ title: e?.message ?? t("hr.toast.error"), color: "error" }) }
+    finally { busy.value = false }
+}
+
+onMounted(load)
+watch(refreshKey, load)
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <div v-if="loading" class="px-4 py-8 text-sm text-muted">{{ t('common.loading') }}</div>
+
+        <!-- No case -->
+        <div v-else-if="!offcase" class="px-4 py-16 text-center text-muted">
+            <UIcon name="i-ph-sign-out-light" class="size-10 mb-3 opacity-40" />
+            <p class="text-sm">{{ t('hr.offboarding.no_case') }}</p>
+        </div>
+
+        <template v-else>
+            <!-- Summary -->
+            <HrInfoSection :title="t('hr.offboarding.title')" icon="i-ph-sign-out-light">
+                <template #actions>
+                    <UBadge :color="(STATUS_COLOR[offcase.status] ?? 'neutral') as any" variant="subtle" size="md">
+                        {{ t(`hr.offboarding.status.${offcase.status}`) }}
+                    </UBadge>
+                </template>
+                <div class="p-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.exit_type') }}</div>{{ t(`hr.offboarding.exit_type.${offcase.exit_type}`) }}</div>
+                    <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.notice_date') }}</div>{{ offcase.notice_date?.slice(0,10) ?? '—' }}</div>
+                    <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.last_working_day') }}</div>{{ offcase.last_working_day?.slice(0,10) ?? '—' }}</div>
+                    <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.rehire_eligible') }}</div>{{ offcase.rehire_eligible ? '✓' : '—' }}</div>
+                    <div v-if="offcase.reason" class="col-span-2 md:col-span-4"><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.reason') }}</div>{{ offcase.reason }}</div>
+                </div>
+            </HrInfoSection>
+
+            <!-- Checklist -->
+            <HrInfoSection :title="t('hr.offboarding.sections.checklist')" icon="i-ph-list-checks-light">
+                <ul class="divide-y divide-default">
+                    <li v-for="tk in sortedTasks" :key="tk.id" class="flex items-center gap-3 px-4 py-3">
+                        <UIcon :name="TASK_ICON[tk.key] ?? 'i-ph-circle-light'" class="size-5 shrink-0" :class="tk.status === 'done' ? 'text-success' : 'text-muted'" />
+                        <div class="flex-1 min-w-0">
+                            <div class="text-sm font-medium text-default">{{ taskLabel(tk) }}</div>
+                        </div>
+                        <UButton
+                            v-if="tk.key === 'asset_return' && !readonly"
+                            size="xs" variant="soft" icon="i-ph-package-light"
+                            :label="t('hr.offboarding.actions.return_all')" :loading="busy" @click="onReturnAssets"
+                        />
+                        <UButton
+                            v-if="tk.key === 'access_revoke' && !readonly"
+                            size="xs" variant="soft" icon="i-ph-lock-key-light"
+                            :label="t('hr.offboarding.actions.deprovision')" :loading="busy" @click="onDeprovision"
+                        />
+                        <UBadge v-if="tk.status === 'done'" color="success" variant="subtle" size="sm">{{ t('hr.offboarding.task_status.done') }}</UBadge>
+                        <UBadge v-else-if="tk.status === 'na'" color="neutral" variant="subtle" size="sm">{{ t('hr.offboarding.task_status.na') }}</UBadge>
+                        <div v-if="!readonly" class="flex items-center gap-1">
+                            <UButton v-if="tk.status !== 'done'" size="xs" color="success" variant="ghost" icon="i-ph-check-light" @click="setTaskStatus(tk, 'done')" />
+                            <UButton v-if="tk.status === 'done'" size="xs" color="neutral" variant="ghost" icon="i-ph-arrow-counter-clockwise-light" @click="setTaskStatus(tk, 'pending')" />
+                            <UButton v-if="tk.status !== 'na'" size="xs" color="neutral" variant="ghost" icon="i-ph-minus-circle-light" @click="setTaskStatus(tk, 'na')" />
+                        </div>
+                    </li>
+                </ul>
+            </HrInfoSection>
+
+            <!-- Settlement -->
+            <HrInfoSection :title="t('hr.offboarding.sections.settlement')" icon="i-ph-umbrella-light">
+                <div class="p-4 space-y-3">
+                    <UButton v-if="!settlement" size="sm" variant="soft" icon="i-ph-calculator-light" :label="t('hr.offboarding.actions.compute_settlement')" :loading="busy" @click="onLoadSettlement" />
+                    <template v-else>
+                        <div class="text-sm">
+                            <span class="text-muted">{{ t('hr.offboarding.settlement.remaining_days') }}: </span>
+                            <span class="font-semibold text-default">{{ settlement.totalRemainingDays }}</span>
+                        </div>
+                        <ul class="text-xs text-muted space-y-1">
+                            <li v-for="(l, i) in settlement.lines" :key="i">{{ l.leave_type }}: {{ l.remaining }} ({{ l.allocated }} − {{ l.used }})</li>
+                        </ul>
+                        <div v-if="!readonly" class="flex items-end gap-3 pt-2">
+                            <UFormField :label="t('hr.offboarding.settlement.payout_amount')">
+                                <UInput v-model.number="payoutAmount" type="number" class="w-48" />
+                            </UFormField>
+                            <UButton size="sm" :label="t('common.save')" :loading="busy" @click="onSavePayout" />
+                        </div>
+                    </template>
+                </div>
+            </HrInfoSection>
+
+            <!-- Actions -->
+            <div v-if="!readonly" class="flex items-center justify-end gap-2">
+                <UButton color="neutral" variant="outline" icon="i-ph-x-light" :label="t('hr.offboarding.actions.cancel')" :loading="busy" @click="onCancel" />
+                <UButton color="primary" icon="i-ph-flag-checkered-light" :label="t('hr.offboarding.actions.finalize')" :disabled="busy" @click="showFinalize = true" />
+            </div>
+        </template>
+
+        <!-- History -->
+        <HrInfoSection v-if="history.length" :title="t('hr.offboarding.sections.history')" icon="i-ph-clock-counter-clockwise-light">
+            <ul class="divide-y divide-default">
+                <li
+                    v-for="c in history" :key="c.id"
+                    class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-elevated/50 transition-colors"
+                    @click="openDetail(c.id)"
+                >
+                    <UIcon name="i-ph-sign-out-light" class="size-5 shrink-0 text-muted" />
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium text-default">{{ t(`hr.offboarding.exit_type.${c.exit_type}`) }}</div>
+                        <div class="text-xs text-muted">{{ t('hr.offboarding.fields.last_working_day') }}: {{ c.last_working_day?.slice(0,10) ?? '—' }}</div>
+                    </div>
+                    <UBadge :color="(STATUS_COLOR[c.status] ?? 'neutral') as any" variant="subtle" size="sm">
+                        {{ t(`hr.offboarding.status.${c.status}`) }}
+                    </UBadge>
+                    <UIcon name="i-ph-caret-right-light" class="size-4 shrink-0 text-muted" />
+                </li>
+            </ul>
+        </HrInfoSection>
+
+        <!-- History detail (read-only) -->
+        <UModal
+            :open="!!detailCase"
+            :title="detailCase ? t(`hr.offboarding.exit_type.${detailCase.exit_type}`) : ''"
+            :ui="{ content: 'sm:max-w-2xl' }"
+            @update:open="(v: boolean) => { if (!v) detailCase = null }"
+        >
+            <template #body>
+                <div v-if="detailCase" class="space-y-5">
+                    <div class="flex items-center gap-2">
+                        <UBadge :color="(STATUS_COLOR[detailCase.status] ?? 'neutral') as any" variant="subtle" size="md">
+                            {{ t(`hr.offboarding.status.${detailCase.status}`) }}
+                        </UBadge>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4 text-sm">
+                        <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.notice_date') }}</div>{{ detailCase.notice_date?.slice(0,10) ?? '—' }}</div>
+                        <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.last_working_day') }}</div>{{ detailCase.last_working_day?.slice(0,10) ?? '—' }}</div>
+                        <div><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.rehire_eligible') }}</div>{{ detailCase.rehire_eligible ? '✓' : '—' }}</div>
+                        <div v-if="detailCase.leave_payout_days != null"><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.settlement.remaining_days') }}</div>{{ detailCase.leave_payout_days }}</div>
+                        <div v-if="detailCase.reason" class="col-span-2"><div class="text-xs uppercase tracking-wider text-muted mb-1">{{ t('hr.offboarding.fields.reason') }}</div>{{ detailCase.reason }}</div>
+                    </div>
+                    <div>
+                        <div class="text-xs uppercase tracking-wider text-muted mb-2">{{ t('hr.offboarding.sections.checklist') }}</div>
+                        <ul class="divide-y divide-default border border-default rounded-lg">
+                            <li v-for="tk in [...(detailCase.tasks ?? [])].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))" :key="tk.id" class="flex items-center gap-3 px-3 py-2">
+                                <UIcon :name="TASK_ICON[tk.key] ?? 'i-ph-circle-light'" class="size-4 shrink-0" :class="tk.status === 'done' ? 'text-success' : 'text-muted'" />
+                                <span class="flex-1 text-sm">{{ taskLabel(tk) }}</span>
+                                <UBadge v-if="tk.status === 'done'" color="success" variant="subtle" size="sm">{{ t('hr.offboarding.task_status.done') }}</UBadge>
+                                <UBadge v-else-if="tk.status === 'na'" color="neutral" variant="subtle" size="sm">{{ t('hr.offboarding.task_status.na') }}</UBadge>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </template>
+        </UModal>
+
+        <!-- Finalize confirm -->
+        <UModal :open="showFinalize" :title="t('hr.offboarding.actions.finalize')" @update:open="showFinalize = $event">
+            <template #body>
+                <p class="text-sm text-muted">{{ t('hr.offboarding.finalize_confirm', { name: person.display_name }) }}</p>
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <UButton color="neutral" variant="outline" :label="t('common.cancel')" @click="showFinalize = false" />
+                    <UButton color="primary" :label="t('hr.offboarding.actions.finalize')" :loading="busy" @click="onFinalize" />
+                </div>
+            </template>
+        </UModal>
+    </div>
+</template>

package/app/components/hr/person/activity/tab.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import HrInfoSection from "../../shared/section.vue"
+import HrTabTimeline from "./timeline.vue"
+
+const props = defineProps<{ personId: string, readonly?: boolean }>()
+
+const api = useHrApi()
+
+const notes = ref<HrNote[]>([])
+const loading = ref(true)
+const draft = ref("")
+const adding = ref(false)
+
+onMounted(async () => {
+    try {
+        notes.value = await api.listNotes(props.personId)
+    }
+    finally {
+        loading.value = false
+    }
+})
+
+async function addNote() {
+    const body = draft.value.trim()
+    if (!body) return
+    adding.value = true
+    try {
+        const note = await api.createNote(props.personId, body)
+        notes.value.unshift(note)
+        draft.value = ""
+    }
+    finally {
+        adding.value = false
+    }
+}
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <HrInfoSection
+            v-if="!readonly"
+            title="Add Note"
+            icon="i-ph-note-pencil-light"
+        >
+            <div class="p-4 space-y-2">
+                <UTextarea
+                    v-model="draft"
+                    placeholder="Write a note about this person…"
+                    :rows="3"
+                />
+                <div class="flex justify-end">
+                    <UButton
+                        :disabled="!draft.trim()"
+                        :loading="adding"
+                        icon="i-ph-paper-plane-tilt-light"
+                        @click="addNote"
+                    >
+                        Post note
+                    </UButton>
+                </div>
+            </div>
+        </HrInfoSection>
+        <HrTabTimeline :person-id="personId" :notes="notes" :loading="loading" />
+    </div>
+</template>