@codihaus/odp-app-hr 0.1.0

package/app/pages/hr/talents/[id].vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+const route = useRoute()
+const api = useHrApi()
+
+const { data: person, status } = await useAsyncData(
+    `hr-person-${route.params.id}`,
+    () => api.getPerson(String(route.params.id)),
+)
+
+const enabledTabs = ['profile', 'recruitment', 'activity']
+</script>
+
+<template>
+    <HrPersonDetail
+        v-if="person"
+        :person="person"
+        back-to="/hr/talents"
+        :enabled-tabs="enabledTabs"
+    />
+    <UDashboardPanel v-else-if="status === 'pending'">
+        <template #body>
+            <div class="flex items-center justify-center h-64">
+                <UIcon name="i-ph-spinner" class="animate-spin size-6 text-muted" />
+            </div>
+        </template>
+    </UDashboardPanel>
+    <UDashboardPanel v-else>
+        <template #header>
+            <UDashboardNavbar
+                title="Talent"
+                :ui="{ title: 'text-lg font-semibold' }"
+            >
+                <template #leading>
+                    <UButton
+                        icon="i-ph-arrow-left-light"
+                        variant="ghost"
+                        size="sm"
+                        @click="navigateTo('/hr/talents')"
+                    />
+                </template>
+            </UDashboardNavbar>
+        </template>
+        <template #body>
+            <div class="flex items-center justify-center h-64">
+                <div class="text-center text-muted">
+                    <UIcon name="i-ph-warning-circle" class="size-10 mb-2 opacity-40" />
+                    <p>{{ $t('hr.talents.not_found') }}</p>
+                </div>
+            </div>
+        </template>
+    </UDashboardPanel>
+</template>

package/app/pages/hr/talents/index.vue

@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import HrPersonStageBadge from "../../../components/hr/shared/stage-badge.vue"
+
+const { t } = useI18n()
+const { talents, loading, fetchPeople } = usePeople()
+const { can } = usePermissionRegistry()
+const toast = useToast()
+
+const canCreate = computed(() => can('hr', 'recruitment.write'))
+
+const showAddModal = ref(false)
+
+function onTalentCreated(person: any) {
+    fetchPeople()
+    navigateTo(`/hr/talents/${person.id}`)
+}
+
+await fetchPeople()
+
+const TALENT_STAGES = ['talent', 'interviewing', 'offer'] as const
+
+const stageFilter = ref<string>("all")
+const search = ref("")
+
+const filtered = computed(() => {
+    let list = talents.value
+    if (stageFilter.value !== "all") list = list.filter(p => p.stage === stageFilter.value)
+    if (search.value.trim()) {
+        const q = search.value.trim().toLowerCase()
+        list = list.filter(p =>
+            p.display_name.toLowerCase().includes(q)
+            || (p.email ?? "").toLowerCase().includes(q)
+            || (p.desired_position ?? "").toLowerCase().includes(q),
+        )
+    }
+    return list
+})
+
+const stageTabs = computed(() => [
+    { value: "all", label: t('common.all'), count: talents.value.length },
+    ...TALENT_STAGES.map(s => ({
+        value: s,
+        label: t(`hr.stages.${s}`),
+        count: talents.value.filter(p => p.stage === s).length,
+    })),
+])
+
+const hasActiveFilter = computed(() => stageFilter.value !== "all" || !!search.value.trim())
+
+function clearFilters() {
+    stageFilter.value = "all"
+    search.value = ""
+}
+</script>
+
+<template>
+    <ModulePage
+        :title="$t('hr.talents.title')"
+        icon="i-ph-user-circle-plus-light"
+        padding="none"
+        max-width="full"
+    >
+        <template #actions>
+            <UButton
+                v-if="canCreate"
+                icon="i-ph-plus"
+                :label="$t('hr.talents.actions.add')"
+                color="primary"
+                size="sm"
+                @click="showAddModal = true"
+            />
+        </template>
+
+        <div class="flex flex-col h-full">
+            <!-- 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 stageTabs"
+                        :key="tab.value"
+                        class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
+                        :class="stageFilter === tab.value
+                            ? 'bg-default text-default shadow-sm'
+                            : 'text-muted hover:text-default'"
+                        @click="stageFilter = tab.value"
+                    >
+                        {{ tab.label }}
+                        <UBadge
+                            :label="String(tab.count)"
+                            variant="subtle"
+                            size="md"
+                            class="ml-1.5"
+                        />
+                    </button>
+                </div>
+
+                <div class="flex-1" />
+
+                <UInput
+                    v-model="search"
+                    icon="i-ph-magnifying-glass"
+                    :placeholder="$t('hr.talents.search_placeholder')"
+                    size="sm"
+                    class="w-64"
+                    :ui="{ base: 'bg-elevated' }"
+                />
+            </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 w-[280px]">
+                                Candidate
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                Source
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                Desired Position
+                            </th>
+                            <th class="px-4 py-2.5 font-medium w-[120px]">
+                                Stage
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-default">
+                        <tr
+                            v-if="loading"
+                        >
+                            <td
+                                colspan="4"
+                                class="px-4 py-16 text-center text-muted"
+                            >
+                                <UIcon
+                                    name="i-ph-spinner"
+                                    class="animate-spin size-6 mx-auto"
+                                />
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="p in filtered"
+                            v-else
+                            :key="p.id"
+                            class="hover:bg-elevated/50 cursor-pointer transition-colors"
+                            @click="navigateTo(`/hr/talents/${p.id}`)"
+                        >
+                            <td class="px-4 py-3">
+                                <div class="flex items-center gap-3">
+                                    <UAvatar
+                                        icon="i-ph-user-light"
+                                        size="sm"
+                                        class="bg-primary/10 text-primary shrink-0"
+                                    />
+                                    <div class="min-w-0">
+                                        <div class="font-medium text-default truncate">
+                                            {{ p.display_name }}
+                                        </div>
+                                        <div class="text-xs text-muted truncate">
+                                            {{ p.email }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.source ?? '—' }}
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.desired_position ?? '—' }}
+                            </td>
+                            <td class="px-4 py-3">
+                                <HrSharedStageBadge :stage="p.stage" />
+                            </td>
+                        </tr>
+
+                        <tr v-if="!loading && filtered.length === 0">
+                            <td
+                                colspan="4"
+                                class="px-4 py-16 text-center text-muted"
+                            >
+                                <UIcon
+                                    :name="hasActiveFilter ? 'i-ph-funnel-x-light' : 'i-ph-user-circle-plus-light'"
+                                    class="size-10 mx-auto mb-3 opacity-40"
+                                />
+                                <p class="text-sm font-medium text-default mb-1">
+                                    {{ hasActiveFilter ? $t('hr.talents.no_match') : $t('hr.talents.empty') }}
+                                </p>
+                                <p class="text-xs mb-4">
+                                    {{ hasActiveFilter ? $t('hr.talents.clear_hint') : $t('hr.talents.empty_hint') }}
+                                </p>
+                                <div class="flex items-center justify-center gap-2">
+                                    <UButton
+                                        v-if="hasActiveFilter"
+                                        :label="$t('hr.talents.clear_filters')"
+                                        icon="i-ph-arrow-counter-clockwise-light"
+                                        variant="outline"
+                                        size="sm"
+                                        @click="clearFilters"
+                                    />
+                                    <UButton
+                                        v-if="canCreate"
+                                        :label="$t('hr.talents.actions.add')"
+                                        icon="i-ph-plus"
+                                        color="primary"
+                                        size="sm"
+                                        @click="showAddModal = true"
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Footer -->
+            <div class="flex items-center justify-between px-4 py-2.5 border-t border-default text-xs text-muted">
+                <span>{{ filtered.length }} {{ filtered.length === 1 ? 'candidate' : 'candidates' }}</span>
+            </div>
+        </div>
+    </ModulePage>
+
+    <HrPersonFormModal v-model:open="showAddModal" @saved="onTalentCreated" />
+</template>

package/app/pages/hr.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+const route = useRoute()
+const { can } = usePermissionRegistry()
+const canAdmin = computed(() => can('hr', 'admin'))
+
+const isSettings = computed(() => route.path.startsWith("/hr/settings"))
+const settingsTab = computed(() => (route.query.tab as string) || "general")
+
+const peopleItems = computed(() => [
+    {
+        label: t('hr.sidebar.talents'),
+        icon: "i-ph-user-circle-plus-light",
+        to: "/hr/talents",
+        active: route.path.startsWith("/hr/talents"),
+    },
+    {
+        label: t('hr.sidebar.employees'),
+        icon: "i-ph-users-light",
+        to: "/hr/employees",
+        active: route.path.startsWith("/hr/employees"),
+    },
+])
+
+const orgItems = computed(() => [
+    {
+        label: t('hr.sidebar.departments'),
+        icon: "i-ph-tree-structure-light",
+        to: "/hr/departments",
+        active: route.path.startsWith("/hr/departments"),
+    },
+    {
+        label: t('hr.sidebar.leave'),
+        icon: "i-ph-calendar-check-light",
+        to: "/hr/leave",
+        active: route.path.startsWith("/hr/leave"),
+    },
+])
+
+const settingsItems = computed(() => [
+    { label: t('hr.settings.general'), icon: "i-ph-sliders-light", to: { path: "/hr/settings", query: { tab: "general" } }, active: isSettings.value && settingsTab.value === "general" },
+    { label: t('hr.settings.taxonomies'), icon: "i-ph-tag-light", to: { path: "/hr/settings", query: { tab: "taxonomies" } }, active: isSettings.value && settingsTab.value === "taxonomies" },
+    { label: t('hr.settings.policies'), icon: "i-ph-shield-check-light", to: { path: "/hr/settings", query: { tab: "policies" } }, active: isSettings.value && settingsTab.value === "policies" },
+    { label: t('hr.settings.holidays'), icon: "i-ph-calendar-light", to: { path: "/hr/settings", query: { tab: "holidays" } }, active: isSettings.value && settingsTab.value === "holidays" },
+    { label: t('hr.settings.recruitment.title'), icon: "i-ph-clipboard-text-light", to: { path: "/hr/settings", query: { tab: "recruitment" } }, active: isSettings.value && settingsTab.value === "recruitment" },
+    { label: t('hr.settings.documents'), icon: "i-ph-file-doc-light", to: { path: "/hr/settings", query: { tab: "documents" } }, active: isSettings.value && settingsTab.value === "documents" },
+    { label: t('hr.settings.automation'), icon: "i-ph-lightning-light", to: { path: "/hr/settings", query: { tab: "automation" } }, active: isSettings.value && settingsTab.value === "automation" },
+    { label: t('hr.settings.integrations'), icon: "i-ph-plugs-connected-light", to: { path: "/hr/settings", query: { tab: "integrations" } }, active: isSettings.value && settingsTab.value === "integrations" },
+])
+</script>
+
+<template>
+    <UDashboardSidebar
+        id="hr-sidebar"
+        :min-size="14"
+        :default-size="14"
+        :max-size="20"
+        collapsible
+        :ui="{
+            header: 'border-b border-default',
+            footer: 'border-t border-default pl-2 min-h-(--ui-footer-height)'
+        }"
+    >
+        <template #header>
+            <div class="flex items-center gap-1.5 font-semibold text-highlighted truncate w-full">
+                <UIcon
+                    name="i-ph-user-list-light"
+                    class="size-4 shrink-0"
+                />
+                {{ $t('hr.title') }}
+            </div>
+        </template>
+
+        <template #default>
+            <div
+                v-if="isSettings"
+                class="p-2"
+            >
+                <UNavigationMenu
+                    :items="settingsItems"
+                    orientation="vertical"
+                    variant="pill"
+                />
+            </div>
+
+            <div
+                v-else
+                class="space-y-4 p-2"
+            >
+                <div>
+                    <div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted">
+                        {{ $t('hr.sidebar.group_people') }}
+                    </div>
+                    <UNavigationMenu
+                        :items="peopleItems"
+                        orientation="vertical"
+                        variant="pill"
+                    />
+                </div>
+                <div>
+                    <div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted">
+                        {{ $t('hr.sidebar.group_organization') }}
+                    </div>
+                    <UNavigationMenu
+                        :items="orgItems"
+                        orientation="vertical"
+                        variant="pill"
+                    />
+                </div>
+            </div>
+        </template>
+
+        <template #footer>
+            <div class="flex items-center h-full">
+                <UButton
+                    v-if="canAdmin || isSettings"
+                    :label="isSettings ? $t('hr.sidebar.back_to_hr') : $t('hr.sidebar.settings')"
+                    :to="isSettings ? '/hr/employees' : '/hr/settings'"
+                    variant="link"
+                    color="neutral"
+                    :icon="isSettings ? 'i-ph-arrow-left-light' : 'i-ph-gear-light'"
+                    size="sm"
+                />
+            </div>
+        </template>
+    </UDashboardSidebar>
+
+    <NuxtPage />
+</template>

package/app/plugins/hr-contacts-sync.client.ts

@@ -0,0 +1,3 @@
+// TODO: Enable when backend POST /hr/contacts/sync endpoint is implemented
+// Currently disabled to avoid 404 on every page load.
+export default defineNuxtPlugin(() => {})

package/app/plugins/hr-extensions.ts

@@ -0,0 +1,36 @@
+export default defineNuxtPlugin(() => {
+    const extensionStore = useExtensionStore()
+    const { register: registerType } = useContactTypeRegistry()
+
+    // Register HR-owned contact types
+    registerType({
+        key: 'employee',
+        label: 'Employee',
+        icon: 'i-ph-identification-badge-light',
+        color: 'neutral',
+        owner_module: 'hr',
+        system: true,
+    })
+
+    registerType({
+        key: 'talent',
+        label: 'Talent',
+        icon: 'i-ph-sparkle-light',
+        color: 'info',
+        owner_module: 'hr',
+        system: true,
+    })
+
+    extensionStore.register('contacts.detail.tabs', {
+        id: 'hr',
+        label: 'HR',
+        icon: 'i-ph-identification-badge-light',
+        component: resolveComponent('HrHrContactTab'),
+        sort: 20,
+        visible: (ctx: any) => Boolean(ctx.contact?.hr_person_id),
+    })
+
+    // Sync of contact.types is handled by:
+    //   - backend hook hr_stage_transitions.items.create — fires syncContactTypes()
+    //   - hr-contacts-sync.client.ts — one-shot backfill on first load
+})

package/app/plugins/hr-setup.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin(() => {
+    const { registerSchema, extendSchema } = useSetupWizard("hr")
+    registerSchema(hrSchema)
+    extendSchema({ steps: [createPermissionStep(hrPermissions), createHrPolicySeedStep()] })
+})

package/app/plugins/navigations.ts

@@ -0,0 +1,22 @@
+export default defineNuxtPlugin({
+    name: 'hr-navigation',
+    dependsOn: ['core-auth'],
+    setup() {
+        defineLayerPermissions(hrPermissions)
+
+        const { hasModuleAccess } = usePermissionRegistry()
+        const { registerNavItem, unregisterNavItem } = useNavigation()
+        const { loggedIn } = useCurrentUser()
+        const { isReady, checkStatus } = useSetupWizard("hr")
+
+        if (loggedIn.value) checkStatus()
+
+        watch([isReady, () => hasModuleAccess('hr')], ([ready, hasAccess]) => {
+            if (ready || hasAccess) {
+                registerNavItem(hrPermissions.navMapping!)
+            } else {
+                unregisterNavItem("hr")
+            }
+        }, { immediate: true })
+    }
+})

package/app/utils/hr-permissions.ts

@@ -0,0 +1,27 @@
+export const hrPermissions: LayerPermissionConfig = {
+    module: 'hr',
+    displayName: 'HR',
+    icon: 'i-ph-user-list-light',
+    description: 'Human Resources — people, leave, documents, integrations',
+    routePrefix: '/hr',
+    actions: [
+        { key: 'read', displayName: 'View HR Data', riskLevel: 'low' },
+        { key: 'create', displayName: 'Create Records', riskLevel: 'low' },
+        { key: 'update', displayName: 'Edit Records', riskLevel: 'medium' },
+        { key: 'delete', displayName: 'Delete Records', riskLevel: 'medium' },
+        { key: 'admin', displayName: 'Manage Settings', description: 'Configure HR module, policies, templates', riskLevel: 'high' },
+        { key: 'leave.approve', displayName: 'Approve Leave', description: 'Approve or reject leave requests', riskLevel: 'medium' },
+        { key: 'sensitive.read', displayName: 'View Sensitive Data', description: 'View compensation, insurance and personal documents', riskLevel: 'high' },
+        { key: 'sensitive.update', displayName: 'Edit Sensitive Data', description: 'Edit compensation, insurance and personal documents', riskLevel: 'high' },
+        { key: 'recruitment.read', displayName: 'View Recruitment', description: 'View talents, applications and interviews', riskLevel: 'low' },
+        { key: 'recruitment.write', displayName: 'Manage Recruitment', description: 'Create/edit talents, applications, interviews and move recruitment stages', riskLevel: 'medium' },
+        { key: 'leave.approve.dept', displayName: 'Approve Leave (own department)', description: 'Approve leave only for members of departments the user heads', riskLevel: 'medium' },
+    ],
+    navMapping: {
+        id: 'hr',
+        label: 'HR',
+        icon: 'i-ph-user-list-light',
+        to: '/hr',
+        order: 6,
+    },
+}

package/app/utils/hr-policy-seed-step.ts

@@ -0,0 +1,110 @@
+import { hrPermissions } from './hr-permissions'
+
+interface HandlerStepDefinition {
+    key: string
+    title: string
+    icon?: string
+    after?: string
+    handler: (ctx: any) => Promise<any[]>
+}
+
+interface RolePolicy {
+    name: string
+    icon: string
+    description: string
+    actions: string[]
+}
+
+// Phase-1 role → HR action grants (all collection_scope '__global__').
+// Seeds the policies + app-permission grants only; attaching a policy to an
+// actual role/user is left to an admin via the Permissions UI (env-specific).
+const HR_ROLE_POLICIES: RolePolicy[] = [
+    {
+        name: 'HR Admin',
+        icon: 'i-ph-user-gear-light',
+        description: 'Full HR access including settings, policies, providers and templates',
+        actions: ['read', 'create', 'update', 'delete', 'admin', 'leave.approve', 'sensitive.read', 'sensitive.update', 'recruitment.read', 'recruitment.write'],
+    },
+    {
+        name: 'HR Manager',
+        icon: 'i-ph-users-three-light',
+        description: 'People lifecycle, recruitment, leave approval and sensitive data — no module settings',
+        actions: ['read', 'create', 'update', 'delete', 'leave.approve', 'sensitive.read', 'sensitive.update', 'recruitment.read', 'recruitment.write'],
+    },
+    {
+        name: 'HR Recruiter',
+        icon: 'i-ph-user-plus-light',
+        description: 'Recruitment pipeline only (talents, applications, interviews) — cannot touch employee records or sensitive data',
+        actions: ['read', 'recruitment.read', 'recruitment.write'],
+    },
+    {
+        name: 'HR Department Manager',
+        icon: 'i-ph-users-light',
+        description: 'View members and approve leave only for departments the user heads',
+        actions: ['read', 'leave.approve.dept'],
+    },
+    {
+        name: 'HR Viewer',
+        icon: 'i-ph-eye-light',
+        description: 'Read-only HR access — excludes compensation, insurance and documents',
+        actions: ['read'],
+    },
+]
+
+export function createHrPolicySeedStep(options?: { after?: string }): HandlerStepDefinition {
+    return {
+        key: 'hr-policy-seed',
+        title: 'Seed HR Role Policies',
+        icon: 'i-ph-shield-check-light',
+        after: options?.after ?? 'permissions',
+        handler: async (ctx: any): Promise<any[]> => {
+            const results: any[] = []
+            const module = hrPermissions.module
+
+            // Load once for idempotency.
+            const existingPolicies: any[] = (await ctx.api('/policies').catch(() => [])) ?? []
+            const existingGrants: any[] = (await ctx.api('/app-permissions').catch(() => [])) ?? []
+
+            for (const rp of HR_ROLE_POLICIES) {
+                try {
+                    let policy = existingPolicies.find((p: any) => p.name === rp.name)
+                    if (!policy) {
+                        policy = await ctx.api('/policies', {
+                            method: 'POST',
+                            body: {
+                                name: rp.name,
+                                icon: rp.icon,
+                                description: rp.description,
+                                app_access: true,
+                                admin_access: false,
+                            },
+                        })
+                        results.push({ type: 'seed', name: `policy:${rp.name}`, status: 'created' })
+                    }
+                    else {
+                        results.push({ type: 'seed', name: `policy:${rp.name}`, status: 'skipped' })
+                    }
+
+                    const policyId = policy?.id ?? policy?.data?.id
+                    if (!policyId) continue
+
+                    for (const action of rp.actions) {
+                        const exists = existingGrants.some(
+                            (g: any) => g.policy === policyId && g.module === module && g.action === action,
+                        )
+                        if (exists) continue
+                        await ctx.api('/app-permissions', {
+                            method: 'POST',
+                            body: { policy: policyId, module, action, collection_scope: '__global__' },
+                        })
+                    }
+                }
+                catch (err: any) {
+                    results.push({ type: 'seed', name: `policy:${rp.name}`, status: 'error', error: err?.message ?? 'Unexpected error' })
+                }
+            }
+
+            return results
+        },
+    }
+}