@codihaus/odp-app-hr 0.1.0

package/app/components/hr/employees/insurance.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+import HrPolicySourceBadge from "../shared/source-badge.vue"
+import HrBenefitOverrideModal from "../settings/policy/benefit-override-modal.vue"
+
+const props = defineProps<{ person: Person, readonly?: boolean }>()
+
+const api = useHrApi()
+const toast = useToast()
+const { t } = useI18n()
+
+const data = ref<Record<string, any>>({})
+const edits = ref<Record<string, any>>({})
+const editing = ref(false)
+const formModel = computed({
+    get: () => editing.value ? edits.value : data.value,
+    set: (val) => { edits.value = val },
+})
+const loading = ref(false)
+const saving = ref(false)
+
+async function load() {
+    loading.value = true
+    try { data.value = (await api.getInsurance(props.person.id)) ?? {} }
+    finally { loading.value = false }
+}
+
+onMounted(() => Promise.all([load(), fetchFields()]))
+
+function startEdit() {
+    edits.value = { ...data.value }
+    editing.value = true
+}
+
+function cancelEdit() {
+    edits.value = {}
+    editing.value = false
+}
+
+async function save() {
+    saving.value = true
+    try {
+        await api.updateInsurance(props.person.id, edits.value)
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        editing.value = false
+        await load()
+    }
+    catch { toast.add({ title: t('hr.toast.error'), color: 'error' }) }
+    finally { saving.value = false }
+}
+
+const healthEligible = computed(() => props.person.benefits_eligibility?.find((b: any) => b.key === 'health_insurance'))
+const socialEligible = computed(() => props.person.benefits_eligibility?.find((b: any) => b.key === 'social_insurance'))
+
+type BenefitKind = 'health' | 'social'
+const overrideKind = ref<BenefitKind | null>(null)
+const overrideEntry = computed(() =>
+    overrideKind.value === 'health' ? healthEligible.value
+        : overrideKind.value === 'social' ? socialEligible.value : null)
+const overrideLabel = computed(() =>
+    overrideKind.value === 'health' ? t('hr.insurance.health')
+        : overrideKind.value === 'social' ? t('hr.insurance.social') : '')
+
+function openOverride(kind: BenefitKind) { overrideKind.value = kind }
+
+async function confirmOverride(overrideData: { eligible: boolean, note: string }) {
+    if (!overrideKind.value) return
+    const overrideField = overrideKind.value === 'health' ? 'override_health_insurance' : 'override_social_insurance'
+    const reasonField = overrideKind.value === 'health' ? 'override_health_reason' : 'override_social_reason'
+    try {
+        await api.updateInsurance(props.person.id, { [overrideField]: overrideData.eligible, [reasonField]: overrideData.note })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+    }
+    catch { toast.add({ title: t('hr.toast.error'), color: 'error' }) }
+    overrideKind.value = null
+}
+
+async function reset(kind: BenefitKind) {
+    const overrideField = kind === 'health' ? 'override_health_insurance' : 'override_social_insurance'
+    try {
+        await api.updateInsurance(props.person.id, { [overrideField]: null })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+    }
+    catch { toast.add({ title: t('hr.toast.error'), color: 'error' }) }
+}
+
+const INSURANCE_FIELD_NAMES = [
+    'social_insurance_number', 'health_insurance_number', 'insurance_base_salary',
+    'tax_code', 'employee_contribution', 'employer_contribution', 'tax_dependents',
+]
+const { pickFields, fetchAll: fetchFields, isReady } = useHrFieldRegistry(['hr_insurances'])
+
+const insuranceFields = computed(() => pickFields('hr_insurances', INSURANCE_FIELD_NAMES))
+</script>
+
+<template>
+    <div class="space-y-4">
+        <!-- Eligibility badges -->
+        <HrInfoSection :title="$t('hr.insurance.eligibility')" icon="i-ph-shield-check-light">
+            <div class="p-4 flex items-center gap-3 flex-wrap text-sm">
+                <div class="flex items-center gap-1">
+                    <UBadge :color="healthEligible?.eligible ? 'success' : 'neutral'" variant="subtle" size="md">
+                        {{ $t('hr.insurance.health') }}: {{ healthEligible?.eligible ? $t('hr.insurance.eligible') : $t('hr.insurance.not_eligible') }}
+                    </UBadge>
+                    <HrPolicySourceBadge v-if="healthEligible" :source="healthEligible.source"
+                        :policy-label="$t('hr.insurance.health_eligibility')"
+                        :policy-value="healthEligible.policy_value ? $t('hr.insurance.eligible') : $t('hr.insurance.not_eligible')"
+                        :override-note="healthEligible.override_note" />
+                    <UDropdownMenu v-if="!readonly" :items="[
+                        [{ label: $t('hr.insurance.override.title'), icon: 'i-ph-pencil-simple-line-light', onSelect: () => openOverride('health') }],
+                        healthEligible?.source === 'override' ? [{ label: $t('hr.insurance.override.reset'), icon: 'i-ph-arrow-counter-clockwise-light', onSelect: () => reset('health') }] : []
+                    ]">
+                        <UButton variant="ghost" size="xs" icon="i-ph-dots-three-vertical-light" />
+                    </UDropdownMenu>
+                </div>
+                <div class="flex items-center gap-1">
+                    <UBadge :color="socialEligible?.eligible ? 'success' : 'neutral'" variant="subtle" size="md">
+                        {{ $t('hr.insurance.social') }}: {{ socialEligible?.eligible ? $t('hr.insurance.eligible') : $t('hr.insurance.not_eligible') }}
+                    </UBadge>
+                    <HrPolicySourceBadge v-if="socialEligible" :source="socialEligible.source"
+                        :policy-label="$t('hr.insurance.social_eligibility')"
+                        :policy-value="socialEligible.policy_value ? $t('hr.insurance.eligible') : $t('hr.insurance.not_eligible')"
+                        :override-note="socialEligible.override_note" />
+                    <UDropdownMenu v-if="!readonly" :items="[
+                        [{ label: $t('hr.insurance.override.title'), icon: 'i-ph-pencil-simple-line-light', onSelect: () => openOverride('social') }],
+                        socialEligible?.source === 'override' ? [{ label: $t('hr.insurance.override.reset'), icon: 'i-ph-arrow-counter-clockwise-light', onSelect: () => reset('social') }] : []
+                    ]">
+                        <UButton variant="ghost" size="xs" icon="i-ph-dots-three-vertical-light" />
+                    </UDropdownMenu>
+                </div>
+            </div>
+        </HrInfoSection>
+
+        <!-- Insurance details — inline FormRoot, disabled by default -->
+        <HrInfoSection :title="$t('hr.insurance.title')" icon="i-ph-shield-light">
+            <template #actions>
+                <div v-if="!readonly" class="flex items-center gap-2">
+                    <template v-if="editing">
+                        <UButton size="xs" variant="ghost" :label="$t('common.cancel')" @click="cancelEdit" />
+                        <UButton size="xs" color="primary" :label="$t('common.save')" :loading="saving" @click="save" />
+                    </template>
+                    <UButton v-else size="xs" variant="soft" icon="i-ph-pencil-simple-light" :label="$t('common.edit')" @click="startEdit" />
+                </div>
+            </template>
+
+            <div v-if="loading || !isReady('hr_insurances')" class="px-4 py-6 text-sm text-muted">{{ $t('common.loading') }}</div>
+            <FormRoot
+                v-else-if="insuranceFields.length"
+                v-model="formModel"
+                :fields="insuranceFields"
+                :initial-values="data"
+                :disabled="!editing || readonly"
+            />
+        </HrInfoSection>
+
+        <HrBenefitOverrideModal
+            :open="overrideKind !== null"
+            :entry="overrideEntry ?? null"
+            :label="overrideLabel"
+            @confirm="confirmOverride"
+            @cancel="overrideKind = null"
+        />
+    </div>
+</template>

package/app/components/hr/employees/leave/tab.vue

@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+const props = defineProps<{ person: Person, readonly?: boolean }>()
+
+const { t } = useI18n()
+const { listLeaveBalances, updateLeaveBalance } = useHrApi()
+
+const balances = ref<LeaveBalance[]>([])
+const loading = ref(false)
+const overrideEntry = ref<LeaveBalance | null>(null)
+const showRequestModal = ref(false)
+
+async function loadBalances() {
+    loading.value = true
+    try {
+        const data = await listLeaveBalances(props.person.id)
+        balances.value = (Array.isArray(data) ? data : []).map(b => ({
+            ...b,
+            total: displayTotal(b),
+            remaining: displayRemaining(b),
+            source: sourceType(b),
+        }))
+    }
+    finally {
+        loading.value = false
+    }
+}
+
+function displayTotal(b: LeaveBalance): number {
+    return b.override_total != null ? b.override_total : (b.policy_total ?? 0)
+}
+
+function displayRemaining(b: LeaveBalance): number {
+    return Math.max(0, displayTotal(b) - (b.used ?? 0))
+}
+
+function sourceType(b: LeaveBalance): 'policy' | 'override' {
+    return b.override_total != null ? 'override' : 'policy'
+}
+
+function openOverride(entry: LeaveBalance) {
+    overrideEntry.value = entry
+}
+
+async function confirmOverride(data: { total: number, note: string }) {
+    if (!overrideEntry.value) return
+    await updateLeaveBalance(props.person.id, overrideEntry.value.id, {
+        override_total: data.total,
+        override_reason: data.note,
+    })
+    overrideEntry.value = null
+    await loadBalances()
+}
+
+async function reset(entry: LeaveBalance) {
+    await updateLeaveBalance(props.person.id, entry.id, { action: 'reset' })
+    await loadBalances()
+}
+
+onMounted(loadBalances)
+watch(() => props.person.id, loadBalances)
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <HrInfoSection
+            :title="$t('hr.leave.balance.type')"
+            icon="i-ph-calendar-blank-light"
+        >
+            <div
+                v-if="loading"
+                class="p-6 text-muted text-sm"
+            >
+                {{ $t('common.loading') }}
+            </div>
+            <div
+                v-else-if="!balances.length"
+                class="p-6 text-muted text-sm"
+            >
+                {{ $t('common.no_data') }}
+            </div>
+            <table
+                v-else
+                class="w-full text-sm"
+            >
+                <thead>
+                    <tr class="text-left text-xs text-muted uppercase tracking-wider">
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('hr.leave.balance.type') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium text-right">
+                            {{ $t('hr.leave.balance.total') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium text-right">
+                            {{ $t('hr.leave.balance.used') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium text-right">
+                            {{ $t('hr.leave.balance.remaining') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('hr.leave.balance.source') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium w-10" />
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-default">
+                    <tr
+                        v-for="lb in balances"
+                        :key="lb.id"
+                        class="hover:bg-elevated/30"
+                    >
+                        <td class="px-4 py-3 capitalize font-medium">
+                            {{ typeof lb.leave_type_id === 'object' ? (lb.leave_type_id as any).name : lb.type ?? lb.leave_type_id }}
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            {{ displayTotal(lb) }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-muted">
+                            {{ lb.used ?? 0 }}
+                        </td>
+                        <td
+                            class="px-4 py-3 text-right"
+                            :class="displayRemaining(lb) === 0 ? 'text-error font-medium' : ''"
+                        >
+                            {{ displayRemaining(lb) }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <HrPolicySourceBadge
+                                :source="sourceType(lb)"
+                                :policy-label="typeof lb.leave_type_id === 'object' ? (lb.leave_type_id as any).name : undefined"
+                                :policy-value="lb.policy_total"
+                                :override-note="lb.override_reason ?? undefined"
+                            />
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <UDropdownMenu
+                                v-if="!readonly"
+                                :items="[
+                                    [{ label: $t('hr.leave.override.title'), icon: 'i-ph-pencil-simple-line-light', onSelect: () => openOverride(lb) }],
+                                    sourceType(lb) === 'override' ? [{ label: $t('hr.leave.override.reset'), icon: 'i-ph-arrow-counter-clockwise-light', onSelect: () => reset(lb) }] : []
+                                ]"
+                            >
+                                <UButton
+                                    variant="ghost"
+                                    size="xs"
+                                    icon="i-ph-dots-three-vertical-light"
+                                />
+                            </UDropdownMenu>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div
+                v-if="!readonly"
+                class="px-4 py-3 border-t border-default"
+            >
+                <UButton
+                    icon="i-ph-plus"
+                    size="sm"
+                    variant="outline"
+                    :label="$t('hr.leave.actions.create')"
+                    @click="showRequestModal = true"
+                />
+            </div>
+        </HrInfoSection>
+
+        <HrLeaveOverrideModal
+            :open="overrideEntry !== null"
+            :entry="overrideEntry"
+            @confirm="confirmOverride"
+            @cancel="overrideEntry = null"
+        />
+
+        <HrLeaveRequestModal
+            v-model:open="showRequestModal"
+            :person-id="person.id"
+            @created="loadBalances"
+        />
+    </div>
+</template>

package/app/components/hr/employees/provisioning/form-modal.vue

@@ -0,0 +1,219 @@
+<template>
+    <UModal
+        :open="open"
+        :title="provider ? $t('common.edit') : $t('integrations.add_provider')"
+        @update:open="!$event && $emit('cancel')"
+    >
+        <template #body>
+            <div class="space-y-4">
+                <UFormField :label="$t('hr.form.talent.display_name')" required>
+                    <UInput
+                        v-model="form.name"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <UFormField label="Type" required>
+                    <USelect
+                        v-model="form.type"
+                        :options="typeOptions"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <!-- Config: URL (authentik / webhook) -->
+                <UFormField
+                    v-if="form.type === 'authentik' || form.type === 'webhook'"
+                    label="URL"
+                    required
+                >
+                    <UInput
+                        v-model="form.config.url"
+                        placeholder="https://"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <!-- Config: Token (authentik) -->
+                <UFormField
+                    v-if="form.type === 'authentik'"
+                    label="API Token"
+                >
+                    <UInput
+                        v-model="form.config.token"
+                        type="password"
+                        placeholder="Leave blank to keep existing"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <!-- Config: Domain (google / microsoft) -->
+                <UFormField
+                    v-if="form.type === 'google_workspace' || form.type === 'microsoft_365'"
+                    label="Domain"
+                    required
+                >
+                    <UInput
+                        v-model="form.config.domain"
+                        placeholder="company.com"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <!-- Config: Service Account JSON (google) -->
+                <UFormField
+                    v-if="form.type === 'google_workspace'"
+                    label="Service Account JSON"
+                >
+                    <UTextarea
+                        v-model="form.config.service_account"
+                        placeholder="Paste JSON credentials here"
+                        class="w-full font-mono text-xs"
+                        :rows="4"
+                    />
+                </UFormField>
+
+                <!-- Config: Webhook headers (webhook) -->
+                <UFormField
+                    v-if="form.type === 'webhook'"
+                    label="Authorization Header"
+                >
+                    <UInput
+                        v-model="form.config.headers"
+                        placeholder="Bearer token123"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <UFormField label="Default Group / OU">
+                    <UInput
+                        v-model="form.default_group"
+                        class="w-full"
+                    />
+                </UFormField>
+
+                <!-- Actions -->
+                <div class="space-y-2">
+                    <p class="text-sm font-medium text-default">
+                        {{ $t('integrations.actions_configured') }}
+                    </p>
+                    <div class="flex flex-col gap-2">
+                        <UCheckbox
+                            v-model="form.actions.on_hire"
+                            label="On hire (create account)"
+                        />
+                        <UCheckbox
+                            v-model="form.actions.on_resign"
+                            label="On resign (disable account)"
+                        />
+                        <UCheckbox
+                            v-model="form.actions.on_reactivate"
+                            label="On reactivate (re-enable account)"
+                        />
+                    </div>
+                </div>
+
+                <UFormField label="Enabled">
+                    <UToggle v-model="form.enabled" />
+                </UFormField>
+            </div>
+        </template>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <UButton
+                    :label="$t('common.cancel')"
+                    variant="ghost"
+                    @click="$emit('cancel')"
+                />
+                <UButton
+                    :label="$t('common.save')"
+                    :loading="saving"
+                    @click="submit"
+                />
+            </div>
+        </template>
+    </UModal>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    open: boolean
+    provider?: HrProvider | null
+}>()
+
+const emit = defineEmits<{
+    saved: []
+    cancel: []
+}>()
+
+const { addProvider, updateProvider } = useProviders()
+const toast = useToast()
+const { t } = useI18n()
+
+const typeOptions = [
+    { label: t('integrations.types.authentik'), value: 'authentik' },
+    // Google Workspace & Microsoft 365 provisioning are coming in a later phase — hidden until implemented.
+    { label: t('integrations.types.webhook'), value: 'webhook' },
+]
+
+const saving = ref(false)
+
+const defaultForm = () => ({
+    name: '',
+    type: 'authentik' as ProviderType,
+    config: {} as Record<string, string>,
+    enabled: true,
+    default_group: '',
+    actions: { on_hire: true, on_resign: true, on_reactivate: true },
+})
+
+const form = ref(defaultForm())
+
+watch(() => props.open, (open) => {
+    if (open) {
+        if (props.provider) {
+            form.value = {
+                name: props.provider.name,
+                type: props.provider.type,
+                config: { ...(props.provider.config as Record<string, string>) },
+                enabled: props.provider.enabled,
+                default_group: props.provider.default_group ?? '',
+                actions: { ...props.provider.actions },
+            }
+        }
+        else {
+            form.value = defaultForm()
+        }
+    }
+}, { immediate: true })
+
+async function submit() {
+    if (!form.value.name || !form.value.type) return
+    saving.value = true
+    try {
+        const payload = {
+            name: form.value.name,
+            type: form.value.type,
+            config: form.value.config,
+            enabled: form.value.enabled,
+            default_group: form.value.default_group || null,
+            actions: form.value.actions,
+        }
+        if (props.provider) {
+            await updateProvider(props.provider.id, payload)
+        }
+        else {
+            await addProvider(payload)
+        }
+        emit('saved')
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        saving.value = false
+    }
+}
+</script>