@codihaus/odp-app-hr 0.1.0

package/app/components/hr/leave/override-modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const props = defineProps<{ open: boolean, entry: LeaveBalance | null }>()
+const emit = defineEmits<{
+    confirm: [data: { total: number, note: string }]
+    cancel: []
+}>()
+
+const { t } = useI18n()
+const total = ref(0)
+const note = ref('')
+
+watch(() => props.open, (v) => {
+    if (v && props.entry) {
+        total.value = props.entry.override_total ?? props.entry.policy_total ?? 0
+        note.value = props.entry.override_reason ?? ''
+    }
+})
+</script>
+
+<template>
+    <UModal
+        :open="open"
+        @update:open="(v) => !v && emit('cancel')"
+    >
+        <template #content>
+            <UCard v-if="entry">
+                <div class="space-y-3 text-sm">
+                    <h3 class="font-semibold">
+                        {{ $t('hr.leave.override.title') }}
+                    </h3>
+                    <div class="text-muted">
+                        {{ $t('hr.policy.from_policy') }}: <strong>{{ entry.policy_total ?? 'n/a' }} days</strong>
+                    </div>
+                    <UFormField :label="$t('hr.leave.override.total')">
+                        <UInputNumber
+                            v-model="total"
+                            :min="0"
+                        />
+                    </UFormField>
+                    <UFormField :label="$t('hr.leave.override.reason')">
+                        <UTextarea
+                            v-model="note"
+                            :rows="2"
+                        />
+                    </UFormField>
+                    <div class="flex justify-end gap-2">
+                        <UButton
+                            variant="soft"
+                            color="neutral"
+                            @click="emit('cancel')"
+                        >
+                            {{ $t('common.cancel') }}
+                        </UButton>
+                        <UButton @click="emit('confirm', { total, note })">
+                            {{ $t('common.save') }}
+                        </UButton>
+                    </div>
+                </div>
+            </UCard>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/leave/request-modal.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    personId?: string | number
+    prefillDate?: string
+}>()
+
+const modelOpen = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ created: [] }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { createLeaveRequest, listPeople } = useHrApi()
+
+const LEAVE_FIELD_NAMES = ['leave_type_id', 'start_date', 'end_date', 'reason']
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_leave_requests'])
+const leaveFields = computed(() => pickFields('hr_leave_requests', LEAVE_FIELD_NAMES))
+
+const employees = ref<any[]>([])
+
+async function loadEmployees() {
+    const res = await listPeople({ stage: 'probation,active,resigned' })
+    employees.value = Array.isArray(res?.data) ? res.data : []
+}
+
+const employeeOptions = computed(() =>
+    employees.value.map((e: any) => ({
+        label: e.display_name || e.email || `#${e.id}`,
+        value: String(e.id),
+    }))
+)
+
+const form = ref<Record<string, any>>({
+    person_id: props.personId ? String(props.personId) : '',
+    leave_type_id: null,
+    start_date: props.prefillDate || undefined,
+    end_date: props.prefillDate || undefined,
+    reason: '',
+})
+const computedDays = ref<number | null>(null)
+const submitting = ref(false)
+
+// Compute days client-side (weekdays only, no holiday API in BFF yet)
+function countWorkingDays(start: string, end: string): number {
+    if (!start || !end) return 0
+    let count = 0
+    const d = new Date(start)
+    const e = new Date(end)
+    while (d <= e) {
+        const dow = d.getDay()
+        if (dow !== 0 && dow !== 6) count++
+        d.setDate(d.getDate() + 1)
+    }
+    return count
+}
+
+watch([() => form.value.start_date, () => form.value.end_date], ([s, e]) => {
+    if (s && e && e >= s) {
+        computedDays.value = countWorkingDays(s, e)
+    }
+    else {
+        computedDays.value = null
+    }
+})
+
+function idOf(value: any): any {
+    return value && typeof value === 'object' ? value.id : value
+}
+
+const canSubmit = computed(() =>
+    idOf(form.value.leave_type_id) != null &&
+    form.value.start_date &&
+    form.value.end_date &&
+    form.value.end_date >= form.value.start_date &&
+    (props.personId || form.value.person_id)
+)
+
+async function submit() {
+    if (!canSubmit.value) return
+    submitting.value = true
+    try {
+        const personId = props.personId ?? idOf(form.value.person_id)
+        await createLeaveRequest(personId, {
+            leave_type_id: idOf(form.value.leave_type_id),
+            start_date: form.value.start_date,
+            end_date: form.value.end_date,
+            reason: form.value.reason || undefined,
+        })
+        toast.add({ title: t('hr.leave.request.submitted'), color: 'success' })
+        modelOpen.value = false
+        emit('created')
+        resetForm()
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        submitting.value = false
+    }
+}
+
+function resetForm() {
+    form.value = {
+        person_id: props.personId ? String(props.personId) : '',
+        leave_type_id: null,
+        start_date: undefined,
+        end_date: undefined,
+        reason: '',
+    }
+    computedDays.value = null
+}
+
+watch(modelOpen, (v) => {
+    if (v) {
+        fetchAll()
+        if (props.personId) form.value.person_id = String(props.personId)
+        else loadEmployees()
+    }
+})
+</script>
+
+<template>
+    <UModal v-model:open="modelOpen" :ui="{ content: 'sm:max-w-2xl' }">
+        <template #content>
+            <UCard>
+                <div class="space-y-4">
+                    <h3 class="font-semibold text-base">
+                        {{ $t('hr.leave.request.title') }}
+                    </h3>
+
+                    <UFormField
+                        v-if="!personId"
+                        :label="$t('hr.leave.request.person')"
+                    >
+                        <USelectMenu
+                            v-model="form.person_id"
+                            :items="employeeOptions"
+                            value-key="value"
+                            label-key="label"
+                            :placeholder="$t('hr.leave.request.person')"
+                            class="w-full"
+                        />
+                    </UFormField>
+
+                    <div v-if="!isReady('hr_leave_requests')" class="py-4 text-sm text-muted text-center">
+                        {{ $t('common.loading') }}
+                    </div>
+                    <FormRoot
+                        v-else-if="leaveFields.length"
+                        v-model="form"
+                        :fields="leaveFields"
+                    />
+
+                    <div
+                        v-if="computedDays !== null"
+                        class="flex items-center gap-2 text-sm text-muted bg-elevated/50 rounded-lg px-3 py-2"
+                    >
+                        <UIcon
+                            name="i-ph-info-light"
+                            class="size-4 text-primary"
+                        />
+                        <span>{{ $t('hr.leave.request.days_count', { count: computedDays }) }}</span>
+                        <span class="text-xs">— {{ $t('hr.leave.request.days_info') }}</span>
+                    </div>
+
+                    <div class="flex justify-end gap-2 pt-2">
+                        <UButton
+                            variant="soft"
+                            color="neutral"
+                            @click="modelOpen = false"
+                        >
+                            {{ $t('common.cancel') }}
+                        </UButton>
+                        <UButton
+                            :loading="submitting"
+                            :disabled="!canSubmit"
+                            @click="submit"
+                        >
+                            {{ $t('hr.leave.request.submit') }}
+                        </UButton>
+                    </div>
+                </div>
+            </UCard>
+        </template>
+    </UModal>
+</template>

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

@@ -0,0 +1,289 @@
+<template>
+    <div class="flex flex-col h-full">
+        <!-- Stats bar -->
+        <div class="grid grid-cols-4 gap-4 px-4 py-4 border-b border-default">
+            <div
+                v-for="stat in leaveStats"
+                :key="stat.label"
+                class="flex items-center gap-3 p-3 bg-elevated/50 rounded-lg"
+            >
+                <div
+                    class="p-2 rounded-lg"
+                    :class="stat.bgClass"
+                >
+                    <UIcon
+                        :name="stat.icon"
+                        class="size-4"
+                        :class="stat.iconClass"
+                    />
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-default">
+                        {{ stat.value }}
+                    </div>
+                    <div class="text-xs text-muted">
+                        {{ stat.label }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toolbar -->
+        <div class="flex items-center gap-3 py-3 border-b border-default">
+            <div class="flex items-center gap-1 bg-elevated rounded-lg p-0.5">
+                <button
+                    v-for="tab in statusTabs"
+                    :key="tab.value"
+                    class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer"
+                    :class="activeFilter === tab.value
+                        ? 'bg-default text-default shadow-sm'
+                        : 'text-muted hover:text-default'"
+                    @click="activeFilter = tab.value"
+                >
+                    {{ tab.label }}
+                    <UBadge
+                        :label="String(tab.count)"
+                        variant="subtle"
+                        size="md"
+                        class="ml-1"
+                    />
+                </button>
+            </div>
+            <div class="flex-1" />
+            <UButton
+                icon="i-ph-plus"
+                :label="$t('hr.leave.actions.create')"
+                color="primary"
+                size="sm"
+                @click="showRequestModal = true"
+            />
+        </div>
+
+        <!-- Table -->
+        <div class="flex-1 overflow-auto">
+            <table class="w-full text-sm">
+                <thead class="bg-elevated/50 sticky top-0 z-10">
+                    <tr class="text-left text-xs text-muted uppercase tracking-wider">
+                        <th class="px-4 py-2.5 font-medium">{{ $t('hr.leave.table.employee') }}</th>
+                        <th class="px-4 py-2.5 font-medium">{{ $t('hr.leave.table.type') }}</th>
+                        <th class="px-4 py-2.5 font-medium">{{ $t('hr.leave.table.dates') }}</th>
+                        <th class="px-4 py-2.5 font-medium">{{ $t('hr.leave.table.days') }}</th>
+                        <th class="px-4 py-2.5 font-medium">{{ $t('hr.leave.table.status') }}</th>
+                        <th class="px-4 py-2.5 font-medium text-right">{{ $t('hr.leave.table.actions') }}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-default">
+                    <tr
+                        v-for="req in filteredRequests"
+                        :key="req.id"
+                        class="hover:bg-elevated/50 transition-colors"
+                    >
+                        <td class="px-4 py-3">
+                            <div class="flex items-center gap-2">
+                                <UAvatar
+                                    icon="i-ph-user-light"
+                                    size="xs"
+                                    class="bg-primary/10 text-primary"
+                                />
+                                <span class="font-medium text-default">{{ personName(req) }}</span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3">
+                            <UBadge
+                                :label="leaveTypeName(req)"
+                                :color="leaveTypeColor(req)"
+                                variant="subtle"
+                                size="md"
+                            />
+                        </td>
+                        <td class="px-4 py-3 text-muted text-xs">
+                            {{ fmtDate(req.start_date || req.from_date) }} → {{ fmtDate(req.end_date || req.to_date) }}
+                        </td>
+                        <td class="px-4 py-3 text-default font-medium">{{ req.days_count ?? req.days }}</td>
+                        <td class="px-4 py-3">
+                            <UBadge
+                                :label="$t(`hr.leave.status.${req.status.toLowerCase()}`)"
+                                :color="statusColor(req.status)"
+                                variant="subtle"
+                                size="md"
+                            />
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <div
+                                v-if="canApprove && req.status?.toLowerCase() === 'pending'"
+                                class="flex items-center gap-1.5 justify-end"
+                            >
+                                <UButton
+                                    icon="i-ph-check-light"
+                                    color="success"
+                                    size="xs"
+                                    :label="$t('hr.leave.actions.approve')"
+                                    @click="handleApprove(req)"
+                                />
+                                <UButton
+                                    icon="i-ph-x-light"
+                                    color="error"
+                                    variant="outline"
+                                    size="xs"
+                                    :label="$t('hr.leave.actions.reject')"
+                                    @click="handleReject(req)"
+                                />
+                            </div>
+                            <UButton
+                                v-else-if="canApprove && req.status?.toLowerCase() === 'approved'"
+                                icon="i-ph-arrow-counter-clockwise-light"
+                                color="neutral"
+                                variant="ghost"
+                                size="xs"
+                                :label="$t('hr.leave.status.pending')"
+                                @click="setStatus(req.id, 'pending' as any)"
+                            />
+                        </td>
+                    </tr>
+                    <tr v-if="filteredRequests.length === 0">
+                        <td
+                            colspan="6"
+                            class="px-4 py-16 text-center text-sm text-muted"
+                        >
+                            {{ $t('common.no_data') }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="flex items-center justify-between px-4 py-2.5 border-t border-default text-xs text-muted">
+            <span>{{ filteredRequests.length }} {{ $t('hr.leave.views.list').toLowerCase() }}</span>
+        </div>
+
+        <!-- Reject reason modal -->
+        <UModal v-model:open="rejectModalOpen">
+            <template #content>
+                <UCard>
+                    <div class="space-y-3">
+                        <h3 class="font-semibold">{{ $t('hr.leave.reject_modal.title') }}</h3>
+                        <UFormField :label="$t('hr.leave.reject_modal.reason')">
+                            <UTextarea
+                                v-model="rejectReason"
+                                :rows="3"
+                                class="w-full"
+                            />
+                        </UFormField>
+                        <div class="flex justify-end gap-2">
+                            <UButton
+                                variant="soft"
+                                color="neutral"
+                                @click="rejectModalOpen = false"
+                            >
+                                {{ $t('common.cancel') }}
+                            </UButton>
+                            <UButton
+                                color="error"
+                                @click="confirmReject"
+                            >
+                                {{ $t('hr.leave.actions.reject') }}
+                            </UButton>
+                        </div>
+                    </div>
+                </UCard>
+            </template>
+        </UModal>
+
+        <!-- New request modal -->
+        <HrLeaveRequestModal
+            v-model:open="showRequestModal"
+            @created="onRequestCreated"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n()
+const toast = useToast()
+const { can } = usePermissionRegistry()
+const canApprove = computed(() => can('hr', 'leave.approve') || can('hr', 'leave.approve.dept'))
+const { leaveRequests, pendingLeave, approvedLeave, rejectedLeave, totalDaysUsed, setStatus, fetchRequests } = useLeave()
+
+const activeFilter = useState<'all' | 'pending' | 'approved' | 'rejected'>('leave.filter', () => 'pending')
+const rejectModalOpen = ref(false)
+const rejectReason = ref('')
+const pendingRejectId = ref<string | number | null>(null)
+const showRequestModal = ref(false)
+
+const leaveStats = computed(() => [
+    { label: t('hr.leave.stats.pending'), value: String(pendingLeave.value.length), icon: 'i-ph-clock-light', bgClass: 'bg-warning/10', iconClass: 'text-warning' },
+    { label: t('hr.leave.stats.approved'), value: String(approvedLeave.value.length), icon: 'i-ph-check-circle-light', bgClass: 'bg-success/10', iconClass: 'text-success' },
+    { label: t('hr.leave.stats.rejected'), value: String(rejectedLeave.value.length), icon: 'i-ph-x-circle-light', bgClass: 'bg-error/10', iconClass: 'text-error' },
+    { label: t('hr.leave.stats.total_days'), value: String(totalDaysUsed.value), icon: 'i-ph-chart-bar-light', bgClass: 'bg-primary/10', iconClass: 'text-primary' },
+])
+
+const statusTabs = computed(() => [
+    { label: t('hr.leave.status.pending'), value: 'pending' as const, count: pendingLeave.value.length },
+    { label: t('hr.leave.status.approved'), value: 'approved' as const, count: approvedLeave.value.length },
+    { label: t('hr.leave.status.rejected'), value: 'rejected' as const, count: rejectedLeave.value.length },
+    { label: t('common.all'), value: 'all' as const, count: leaveRequests.value.length },
+])
+
+const filteredRequests = computed(() => {
+    if (activeFilter.value === 'all') return leaveRequests.value
+    return leaveRequests.value.filter(r => r.status?.toLowerCase() === activeFilter.value)
+})
+
+function personName(req: LeaveRequest): string {
+    if (req.person_name) return req.person_name
+    const pid = req.person_id as any
+    if (pid && typeof pid === 'object') return pid.display_name ?? pid.full_name ?? (pid.id ? `#${pid.id}` : '—')
+    return pid ? `#${pid}` : '—'
+}
+
+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 ?? '—'
+    return '—'
+}
+
+function fmtDate(value?: string): string {
+    if (!value) return '—'
+    const d = new Date(value)
+    if (Number.isNaN(d.getTime())) return value
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+const TYPE_COLOR: Record<string, string> = { annual: 'primary', sick: 'error', personal: 'warning', remote: 'info' }
+function leaveTypeColor(req: LeaveRequest): string {
+    const name = leaveTypeName(req).toLowerCase()
+    return TYPE_COLOR[name] ?? 'neutral'
+}
+
+function statusColor(status: string): string {
+    const s = status?.toLowerCase()
+    if (s === 'approved') return 'success'
+    if (s === 'pending') return 'warning'
+    return 'error'
+}
+
+async function handleApprove(req: LeaveRequest) {
+    await setStatus(req.id, 'approved' as any)
+    toast.add({ title: t('hr.toast.approved'), color: 'success' })
+}
+
+function handleReject(req: LeaveRequest) {
+    pendingRejectId.value = req.id
+    rejectReason.value = ''
+    rejectModalOpen.value = true
+}
+
+async function confirmReject() {
+    if (!pendingRejectId.value) return
+    await setStatus(pendingRejectId.value, 'rejected' as any, rejectReason.value || undefined)
+    toast.add({ title: t('hr.toast.rejected'), color: 'warning' })
+    rejectModalOpen.value = false
+    pendingRejectId.value = null
+}
+
+async function onRequestCreated() {
+    showRequestModal.value = false
+    await fetchRequests()
+}
+</script>