@codihaus/odp-app-hr 0.1.0

package/app/components/hr/settings/holidays.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+
+const { t } = useI18n()
+const { holidays, loading, fetchHolidays, createHoliday, deleteHoliday, copyFromPreviousYear } = useHolidays()
+const toast = useToast()
+
+const currentYear = new Date().getFullYear()
+const year = ref(currentYear)
+
+const HOLIDAY_FIELD_NAMES = ['name', 'date', 'recurring']
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_company_holidays'])
+const holidayFields = computed(() => pickFields('hr_company_holidays', HOLIDAY_FIELD_NAMES))
+
+const form = ref<Record<string, any>>({ recurring: false })
+
+const saving = ref(false)
+const copying = ref(false)
+
+const canAdd = computed(() =>
+    !!(form.value.name?.trim() && form.value.date),
+)
+
+const sortedHolidays = computed(() =>
+    [...holidays.value].sort((a, b) => (a.date || '').localeCompare(b.date || '')),
+)
+
+function fmt(iso?: string): string {
+    if (!iso) return '—'
+    const d = new Date(iso)
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+async function load() {
+    await fetchHolidays(year.value)
+}
+
+function changeYear(delta: number) {
+    year.value += delta
+    load()
+}
+
+async function addHoliday() {
+    if (!canAdd.value) return
+    saving.value = true
+    try {
+        await createHoliday({
+            name: form.value.name.trim(),
+            date: form.value.date,
+            year: new Date(form.value.date).getFullYear(),
+            recurring: !!form.value.recurring,
+        })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        form.value = { recurring: false }
+        await load()
+    }
+    catch {
+        toast.add({ title: t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        saving.value = false
+    }
+}
+
+async function removeHoliday(id: number) {
+    try {
+        await deleteHoliday(id)
+        toast.add({ title: t('hr.toast.deleted'), color: 'success' })
+    }
+    catch {
+        toast.add({ title: t('hr.toast.error'), color: 'error' })
+    }
+}
+
+async function copyPrev() {
+    copying.value = true
+    try {
+        await copyFromPreviousYear(year.value)
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+    }
+    catch {
+        toast.add({ title: t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        copying.value = false
+    }
+}
+
+onMounted(() => Promise.all([load(), fetchAll()]))
+</script>
+
+<template>
+    <div class="space-y-6">
+        <p class="text-sm text-muted">
+            Company-wide holidays. These appear alongside employee leave in the Leave calendar &amp; timeline.
+        </p>
+
+        <!-- Year nav + copy -->
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+                <UButton icon="i-ph-caret-left-light" variant="ghost" size="sm" @click="changeYear(-1)" />
+                <span class="font-semibold text-base w-16 text-center">{{ year }}</span>
+                <UButton icon="i-ph-caret-right-light" variant="ghost" size="sm" @click="changeYear(1)" />
+            </div>
+            <UButton
+                icon="i-ph-copy-light"
+                variant="soft"
+                size="sm"
+                :loading="copying"
+                :label="`Copy from ${year - 1}`"
+                @click="copyPrev"
+            />
+        </div>
+
+        <!-- Add holiday -->
+        <HrInfoSection title="Add Holiday" icon="i-ph-calendar-plus-light">
+            <div class="p-4 space-y-4">
+                <div v-if="!isReady('hr_company_holidays')" class="py-2 text-sm text-muted">
+                    {{ t('common.loading') }}
+                </div>
+                <FormRoot
+                    v-else-if="holidayFields.length"
+                    v-model="form"
+                    :fields="holidayFields"
+                />
+                <div class="flex justify-end">
+                    <UButton
+                        icon="i-ph-plus-light"
+                        :loading="saving"
+                        :disabled="!canAdd"
+                        label="Add Holiday"
+                        @click="addHoliday"
+                    />
+                </div>
+            </div>
+        </HrInfoSection>
+
+        <!-- List -->
+        <HrInfoSection title="Holidays" icon="i-ph-calendar-light">
+            <div v-if="loading" class="px-4 py-6 text-sm text-muted">{{ t('common.loading') }}</div>
+            <div v-else-if="sortedHolidays.length === 0" class="px-4 py-10 text-center text-sm text-muted">
+                No holidays for {{ year }}.
+            </div>
+            <ul v-else class="divide-y divide-default">
+                <li
+                    v-for="h in sortedHolidays"
+                    :key="h.id"
+                    class="flex items-center gap-3 px-4 py-3"
+                >
+                    <UIcon name="i-ph-calendar-dot-light" class="size-5 text-error shrink-0" />
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2">
+                            <span class="font-medium text-sm text-default truncate">{{ h.name }}</span>
+                            <UBadge v-if="h.recurring" color="info" variant="subtle" size="sm">Annual</UBadge>
+                        </div>
+                        <div class="text-xs text-muted mt-0.5">
+                            {{ fmt(h.date) }}
+                        </div>
+                    </div>
+                    <UButton
+                        icon="i-ph-trash-light"
+                        color="error"
+                        variant="ghost"
+                        size="xs"
+                        @click="removeHoliday(h.id)"
+                    />
+                </li>
+            </ul>
+        </HrInfoSection>
+    </div>
+</template>

package/app/components/hr/settings/integrations.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="space-y-6">
+        <div class="flex items-center justify-between">
+            <p class="text-sm text-muted max-w-xl">
+                {{ $t('integrations.description') }}
+            </p>
+            <UButton
+                icon="i-ph-plus-light"
+                :label="$t('integrations.add_provider')"
+                @click="openAdd"
+            />
+        </div>
+
+        <!-- Provider list -->
+        <div
+            v-if="providers.length"
+            class="space-y-3"
+        >
+            <div
+                v-for="p in providers"
+                :key="p.id"
+                class="border border-default rounded-lg p-4"
+            >
+                <div class="flex items-start gap-4">
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2 flex-wrap">
+                            <span class="font-medium text-default">{{ p.name }}</span>
+                            <UBadge
+                                :label="$t(`integrations.types.${p.type}`)"
+                                color="neutral"
+                                variant="subtle"
+                                size="sm"
+                            />
+                            <UBadge
+                                v-if="!p.enabled"
+                                label="Disabled"
+                                color="error"
+                                variant="subtle"
+                                size="sm"
+                            />
+                        </div>
+                        <div class="text-xs text-muted mt-1">
+                            {{ $t('integrations.actions_configured') }}:
+                            <span v-if="p.actions?.on_hire">hire</span><span v-if="p.actions?.on_hire && (p.actions?.on_resign || p.actions?.on_reactivate)">, </span><span v-if="p.actions?.on_resign">resign</span><span v-if="p.actions?.on_resign && p.actions?.on_reactivate">, </span><span v-if="p.actions?.on_reactivate">reactivate</span>
+                        </div>
+                        <!-- Test result -->
+                        <div
+                            v-if="testResults[p.id]"
+                            class="mt-2 text-xs"
+                            :class="testResults[p.id]?.success ? 'text-success' : 'text-error'"
+                        >
+                            {{ testResults[p.id]?.message }}
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                        <UButton
+                            icon="i-ph-plug-light"
+                            :label="testingId === p.id ? $t('integrations.testing') : $t('integrations.test_connection')"
+                            variant="outline"
+                            size="sm"
+                            :loading="testingId === p.id"
+                            @click="testConnection(p.id)"
+                        />
+                        <UButton
+                            icon="i-ph-pencil-simple-light"
+                            variant="ghost"
+                            size="sm"
+                            @click="openEdit(p)"
+                        />
+                        <UButton
+                            icon="i-ph-trash-light"
+                            variant="ghost"
+                            color="error"
+                            size="sm"
+                            @click="confirmDelete(p)"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-else-if="!isPending"
+            class="text-sm text-muted py-8 text-center border border-dashed border-default rounded-lg"
+        >
+            {{ $t('integrations.add_provider') }}
+        </div>
+
+        <!-- Provider form modal -->
+        <HrProviderFormModal
+            :open="showModal"
+            :provider="editingProvider"
+            @saved="onSaved"
+            @cancel="closeModal"
+        />
+
+        <!-- Delete confirm modal -->
+        <UModal
+            v-model:open="showDeleteConfirm"
+            :title="$t('common.delete')"
+        >
+            <template #body>
+                <p class="text-sm text-muted">
+                    Delete provider <strong>{{ deletingProvider?.name }}</strong>?
+                </p>
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <UButton
+                        :label="$t('common.cancel')"
+                        variant="ghost"
+                        @click="showDeleteConfirm = false"
+                    />
+                    <UButton
+                        :label="$t('common.delete')"
+                        color="error"
+                        :loading="deleting"
+                        @click="doDelete"
+                    />
+                </div>
+            </template>
+        </UModal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { providers, isPending, fetchProviders, deleteProvider, testConnection: apiTest } = useProviders()
+
+const showModal = ref(false)
+const editingProvider = ref<HrProvider | null>(null)
+const showDeleteConfirm = ref(false)
+const deletingProvider = ref<HrProvider | null>(null)
+const deleting = ref(false)
+const testingId = ref<string | null>(null)
+const testResults = ref<Record<string, { success: boolean; message: string }>>({})
+
+function openAdd() {
+    editingProvider.value = null
+    showModal.value = true
+}
+
+function openEdit(p: HrProvider) {
+    editingProvider.value = p
+    showModal.value = true
+}
+
+function closeModal() {
+    showModal.value = false
+    editingProvider.value = null
+}
+
+async function onSaved() {
+    closeModal()
+    await fetchProviders()
+}
+
+function confirmDelete(p: HrProvider) {
+    deletingProvider.value = p
+    showDeleteConfirm.value = true
+}
+
+async function doDelete() {
+    if (!deletingProvider.value) return
+    deleting.value = true
+    try {
+        await deleteProvider(deletingProvider.value.id)
+        showDeleteConfirm.value = false
+        deletingProvider.value = null
+    }
+    finally {
+        deleting.value = false
+    }
+}
+
+async function testConnection(id: string) {
+    testingId.value = id
+    try {
+        const result = await apiTest(id)
+        testResults.value[id] = result
+    }
+    finally {
+        testingId.value = null
+    }
+}
+</script>

package/app/components/hr/settings/policies.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type {
+    PolicyKey,
+    AnnualLeaveBaseParams, AnnualLeaveTenureBonusParams,
+    SickLeaveBaseParams, PersonalLeaveBaseParams,
+    InsuranceEligibilityParams, ProbationPeriodParams,
+} from "../../../../shared/types"
+import HrPolicyEditorLeaveBase from "./policy/editor-leave-base.vue"
+import HrPolicyEditorTenureBonus from "./policy/editor-tenure-bonus.vue"
+import HrPolicyEditorEligibility from "./policy/editor-eligibility.vue"
+
+const { policies, togglePolicy, updatePolicyParams, isPending } = useHrPolicies()
+
+function paramsOf<T>(key: PolicyKey): T {
+    return policies.value.find(p => p.key === key)!.params as T
+}
+
+function update(key: PolicyKey, params: object) {
+    updatePolicyParams(key, params as never)
+}
+</script>
+
+<template>
+    <div class="space-y-3">
+        <p class="text-xs text-muted">
+            {{ $t('policies.recalc_notice') }}
+        </p>
+        <ul class="space-y-2">
+            <li
+                v-for="p in policies"
+                :key="p.key"
+                class="rounded-lg border border-default bg-default p-4"
+                :class="!p.enabled && 'opacity-60'"
+            >
+                <div class="flex items-start justify-between gap-3 mb-3">
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-semibold text-default">
+                            {{ $t(`policies.${p.key}.label`) }}
+                        </div>
+                        <p class="mt-0.5 text-xs text-muted">
+                            {{ $t(`policies.${p.key}.description`) }}
+                        </p>
+                    </div>
+                    <UCheckbox
+                        :model-value="p.enabled"
+                        :label="$t('policies.enabled')"
+                        :loading="isPending"
+                        @update:model-value="(v) => togglePolicy(p.key, !!v)"
+                    />
+                </div>
+
+                <template v-if="p.enabled">
+                    <HrPolicyEditorLeaveBase
+                        v-if="p.key === 'annual_leave_base' || p.key === 'sick_leave_base' || p.key === 'personal_leave_base'"
+                        :label="$t(`policies.${p.key}.label`)"
+                        :helper="$t('policies.base_days_helper')"
+                        :value-label="$t('policies.days_per_year')"
+                        :days="paramsOf<AnnualLeaveBaseParams | SickLeaveBaseParams | PersonalLeaveBaseParams>(p.key).days_by_employment_type"
+                        @update="(v) => update(p.key, { days_by_employment_type: v })"
+                    />
+                    <HrPolicyEditorTenureBonus
+                        v-else-if="p.key === 'annual_leave_tenure_bonus'"
+                        :tiers="paramsOf<AnnualLeaveTenureBonusParams>(p.key).tiers"
+                        @update="(v) => update(p.key, { tiers: v })"
+                    />
+                    <HrPolicyEditorEligibility
+                        v-else-if="p.key === 'health_insurance_eligibility' || p.key === 'social_insurance_eligibility'"
+                        :employment-type-labels="paramsOf<InsuranceEligibilityParams>(p.key).employment_types"
+                        @update="(v) => update(p.key, { employment_types: v })"
+                    />
+                    <HrPolicyEditorLeaveBase
+                        v-else-if="p.key === 'probation_period'"
+                        :label="$t(`policies.${p.key}.label`)"
+                        :helper="$t('policies.probation_months_helper')"
+                        :value-label="$t('policies.months')"
+                        :days="paramsOf<ProbationPeriodParams>(p.key).months_by_employment_type"
+                        @update="(v) => update(p.key, { months_by_employment_type: v })"
+                    />
+                </template>
+            </li>
+        </ul>
+    </div>
+</template>

package/app/components/hr/settings/policy/benefit-override-modal.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+const props = defineProps<{ open: boolean, entry: any | null, label: string }>()
+const emit = defineEmits<{
+    confirm: [data: { eligible: boolean, note: string }]
+    cancel: []
+}>()
+
+const eligible = ref(false)
+const note = ref('')
+
+watch(() => props.open, (v) => {
+    if (v && props.entry) {
+        eligible.value = props.entry.eligible
+        note.value = props.entry.override_note ?? ''
+    }
+})
+</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.insurance.override.title') }} {{ label }}
+                    </h3>
+                    <div class="text-muted">
+                        {{ $t('hr.insurance.policy_value') }}: <strong>{{ entry.policy_value ? $t('hr.insurance.eligible') : $t('hr.insurance.not_eligible') }}</strong>
+                    </div>
+                    <UCheckbox
+                        v-model="eligible"
+                        :label="`${$t('hr.insurance.eligible_for')} ${label}`"
+                    />
+                    <UFormField :label="$t('hr.insurance.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', { eligible, note })">
+                            {{ $t('hr.insurance.override.save') }}
+                        </UButton>
+                    </div>
+                </div>
+            </UCard>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/settings/policy/editor-eligibility.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+
+const props = defineProps<{ employmentTypeLabels: string[] }>()
+const emit = defineEmits<{ update: [next: string[]] }>()
+
+const { employmentTypes } = useHrSettings()
+
+function toggle(label: string, on: boolean) {
+    if (on) emit("update", [...new Set([...props.employmentTypeLabels, label])])
+    else emit("update", props.employmentTypeLabels.filter(l => l !== label))
+}
+</script>
+
+<template>
+    <div class="space-y-2 text-sm">
+        <p class="text-muted text-xs">
+            {{ $t('policies.eligible_for') }}
+        </p>
+        <UCheckbox
+            v-for="t in employmentTypes"
+            :key="t.key"
+            :label="t.label"
+            :model-value="employmentTypeLabels.includes(t.label)"
+            @update:model-value="(v) => toggle(t.label, !!v)"
+        />
+    </div>
+</template>

package/app/components/hr/settings/policy/editor-leave-base.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+
+const props = defineProps<{
+    label: string
+    helper: string
+    valueLabel: string
+    days: Record<string, number>
+}>()
+const emit = defineEmits<{ update: [next: Record<string, number>] }>()
+
+const { employmentTypes } = useHrSettings()
+
+function set(empLabel: string, val: number) {
+    emit("update", { ...props.days, [empLabel]: val })
+}
+</script>
+
+<template>
+    <div class="space-y-2 text-sm">
+        <p class="text-muted text-xs">
+            {{ helper }}
+        </p>
+        <div
+            v-for="t in employmentTypes"
+            :key="t.key"
+            class="grid grid-cols-3 gap-2 items-center"
+        >
+            <span>{{ t.label }}</span>
+            <UInputNumber
+                :model-value="days[t.label] ?? 0"
+                :min="0"
+                class="col-span-2"
+                @update:model-value="(v) => set(t.label, Number(v))"
+            />
+        </div>
+    </div>
+</template>

package/app/components/hr/settings/policy/editor-tenure-bonus.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { TenureTier } from "../../../../shared/types"
+
+const props = defineProps<{ tiers: TenureTier[] }>()
+const emit = defineEmits<{ update: [next: TenureTier[]] }>()
+
+function add() {
+    emit("update", [...props.tiers, { after_years: 0, bonus: 0 }])
+}
+function update(idx: number, p: Partial<TenureTier>) {
+    const next = [...props.tiers]
+    next[idx] = { ...next[idx]!, ...p }
+    emit("update", next)
+}
+function remove(idx: number) {
+    emit("update", props.tiers.filter((_, i) => i !== idx))
+}
+</script>
+
+<template>
+    <div class="space-y-2 text-sm">
+        <p class="text-muted text-xs">
+            {{ $t('policies.tenure_bonus_desc') }}
+        </p>
+        <div
+            v-for="(t, i) in tiers"
+            :key="i"
+            class="grid grid-cols-12 gap-2 items-center"
+        >
+            <span class="col-span-3 text-muted">{{ $t('policies.after') }}</span>
+            <UInputNumber
+                :model-value="t.after_years"
+                :min="0"
+                class="col-span-3"
+                @update:model-value="(v) => update(i, { after_years: Number(v) })"
+            />
+            <span class="col-span-2">{{ $t('policies.years_bonus') }}</span>
+            <UInputNumber
+                :model-value="t.bonus"
+                :min="0"
+                class="col-span-3"
+                @update:model-value="(v) => update(i, { bonus: Number(v) })"
+            />
+            <UButton
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                icon="i-ph-trash-light"
+                class="col-span-1"
+                @click="remove(i)"
+            />
+        </div>
+        <UButton
+            size="xs"
+            icon="i-ph-plus-light"
+            @click="add"
+        >
+            {{ $t('policies.add_tier') }}
+        </UButton>
+    </div>
+</template>