@codihaus/odp-app-hr 0.1.0

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

@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+const { t } = useI18n();
+const { employees, fetchPeople } = usePeople();
+const { departments } = useDepartments();
+const { can } = usePermissionRegistry();
+const canCreate = computed(() => can('hr', 'create'));
+
+await fetchPeople();
+
+const showAddModal = ref(false);
+
+function onEmployeeCreated(person: Person) {
+    navigateTo(`/hr/employees/${person.id}`);
+}
+
+const EMPLOYEE_STAGES: LifecycleStage[] = ["probation", "active", "resigned"];
+
+const stageFilter = ref<LifecycleStage | "All">("All");
+const departmentFilter = ref<string | "All">("All");
+const search = ref("");
+
+const filtered = computed(() => {
+    let list = employees.value;
+    if (stageFilter.value !== "All")
+        list = list.filter((p) => p.stage === stageFilter.value);
+    if (departmentFilter.value !== "All")
+        list = list.filter((p) => p.department === departmentFilter.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.employee_id ?? "").toLowerCase().includes(q) ||
+                (p.job_title ?? "").toLowerCase().includes(q),
+        );
+    }
+    return list;
+});
+
+const stageTabs = computed<
+    { value: LifecycleStage | "All"; label: string; count: number }[]
+>(() => [
+    {
+        value: "All",
+        label: t("hr.employees.tabs.all"),
+        count: employees.value.length,
+    },
+    ...EMPLOYEE_STAGES.map((s) => ({
+        value: s,
+        label: t(`hr.stages.${s}`),
+        count: employees.value.filter((p) => p.stage === s).length,
+    })),
+]);
+
+const hasActiveFilter = computed(
+    () =>
+        stageFilter.value !== "All" ||
+        departmentFilter.value !== "All" ||
+        !!search.value.trim(),
+);
+
+function clearFilters() {
+    stageFilter.value = "All";
+    departmentFilter.value = "All";
+    search.value = "";
+}
+</script>
+
+<template>
+    <ModulePage
+        :title="$t('hr.employees.title')"
+        icon="i-ph-users-light"
+        padding="none"
+        max-width="full"
+    >
+        <template #actions>
+            <UButton
+                v-if="canCreate"
+                icon="i-ph-plus"
+                :label="$t('hr.employees.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>
+
+                <USelectMenu
+                    v-model="departmentFilter"
+                    :items="[
+                        $t('hr.employees.all_departments'),
+                        ...departments.map((d: any) => d.name),
+                    ]"
+                    size="sm"
+                    class="w-44"
+                />
+
+                <div class="flex-1" />
+
+                <UInput
+                    v-model="search"
+                    icon="i-ph-magnifying-glass"
+                    :placeholder="$t('hr.employees.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]">
+                                {{ $t("hr.employees.columns.name") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t("hr.employees.columns.id") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t("hr.employees.columns.department") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t("hr.employees.columns.job_title") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t("hr.employees.columns.type") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t("hr.employees.columns.start_date") }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium w-[120px]">
+                                {{ $t("hr.employees.columns.stage") }}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-default">
+                        <tr
+                            v-for="p in filtered"
+                            :key="p.id"
+                            class="hover:bg-elevated/50 cursor-pointer transition-colors"
+                            @click="navigateTo(`/hr/employees/${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 text-xs">
+                                {{ p.employee_id ?? "—" }}
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.department ?? "—" }}
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.job_title ?? "—" }}
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.employment_type ?? "—" }}
+                            </td>
+                            <td class="px-4 py-3 text-muted">
+                                {{ p.start_date ?? "—" }}
+                            </td>
+                            <td class="px-4 py-3">
+                                <HrSharedStageBadge :stage="p.stage" />
+                            </td>
+                        </tr>
+
+                        <tr v-if="filtered.length === 0">
+                            <td
+                                colspan="7"
+                                class="px-4 py-16 text-center text-muted"
+                            >
+                                <UIcon
+                                    :name="
+                                        hasActiveFilter
+                                            ? 'i-ph-funnel-x-light'
+                                            : 'i-ph-users-light'
+                                    "
+                                    class="size-10 mx-auto mb-3 opacity-40"
+                                />
+                                <p
+                                    class="text-sm font-medium text-default mb-1"
+                                >
+                                    {{
+                                        hasActiveFilter
+                                            ? $t("hr.employees.no_match")
+                                            : $t("hr.employees.empty")
+                                    }}
+                                </p>
+                                <p class="text-xs mb-4">
+                                    {{
+                                        hasActiveFilter
+                                            ? $t("hr.employees.clear_hint")
+                                            : $t("hr.employees.empty_hint")
+                                    }}
+                                </p>
+                                <div
+                                    class="flex items-center justify-center gap-2"
+                                >
+                                    <UButton
+                                        v-if="hasActiveFilter"
+                                        :label="
+                                            $t('hr.employees.clear_filters')
+                                        "
+                                        icon="i-ph-arrow-counter-clockwise-light"
+                                        variant="outline"
+                                        size="sm"
+                                        @click="clearFilters"
+                                    />
+                                    <UButton
+                                        v-if="canCreate"
+                                        :label="$t('hr.employees.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
+                            ? $t("hr.employees.count_singular")
+                            : $t("hr.employees.count_plural")
+                    }}</span
+                >
+            </div>
+        </div>
+        <HrPersonEmployeeFormModal
+            v-model:open="showAddModal"
+            @created="onEmployeeCreated"
+        />
+    </ModulePage>
+</template>

package/app/pages/hr/index.vue

@@ -0,0 +1,3 @@
+<script lang="ts" setup>
+navigateTo('/hr/employees', { replace: true })
+</script>

package/app/pages/hr/leave.vue

@@ -0,0 +1,79 @@
+<template>
+    <ModulePage
+        :title="$t('hr.leave.title')"
+        icon="i-ph-calendar-check-light"
+        padding="none"
+        max-width="full"
+    >
+        <div class="flex flex-col h-full">
+            <!-- View switcher -->
+            <div class="flex items-center gap-3 px-4 py-3 border-b border-default">
+                <div class="flex items-center gap-1 bg-elevated rounded-lg p-0.5">
+                    <button
+                        v-for="view in views"
+                        :key="view.id"
+                        class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer flex items-center gap-1.5"
+                        :class="activeView === view.id
+                            ? 'bg-default text-default shadow-sm'
+                            : 'text-muted hover:text-default'"
+                        @click="activeView = view.id"
+                    >
+                        <UIcon
+                            :name="view.icon"
+                            class="size-3.5"
+                        />
+                        {{ view.label }}
+                        <UBadge
+                            v-if="view.id === 'list' && pendingCount > 0"
+                            :label="String(pendingCount)"
+                            color="warning"
+                            variant="subtle"
+                            size="xs"
+                            class="ml-0.5"
+                        />
+                    </button>
+                </div>
+                <div class="flex-1" />
+            </div>
+
+            <!-- Views -->
+            <div class="flex-1 overflow-hidden">
+                <HrLeaveRequestsTab
+                    v-if="activeView === 'list'"
+                    class="h-full"
+                />
+                <HrLeaveCalendarTab
+                    v-else-if="activeView === 'calendar'"
+                    class="h-full"
+                />
+                <HrLeaveTimelineTab
+                    v-else-if="activeView === 'timeline'"
+                    class="h-full"
+                />
+            </div>
+        </div>
+    </ModulePage>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n()
+const { pendingCount, fetchRequests } = useLeave()
+const { fetchHolidays } = useHolidays()
+const { fetchPeople } = usePeople()
+
+const activeView = useState<'list' | 'calendar' | 'timeline'>('leave.activeView', () => 'list')
+
+const views = computed(() => [
+    { id: 'list' as const, label: t('hr.leave.views.list'), icon: 'i-ph-list-light' },
+    { id: 'calendar' as const, label: t('hr.leave.views.calendar'), icon: 'i-ph-calendar-light' },
+    { id: 'timeline' as const, label: t('hr.leave.views.timeline'), icon: 'i-ph-chart-bar-horizontal-light' },
+])
+
+onMounted(async () => {
+    await Promise.all([
+        fetchRequests(),
+        fetchHolidays(new Date().getFullYear()),
+        fetchPeople(),
+    ])
+})
+</script>

package/app/pages/hr/settings.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { t } = useI18n()
+const { can } = usePermissionRegistry()
+
+if (!can('hr', 'admin')) {
+    navigateTo('/hr')
+}
+
+const activeTab = computed(() => (route.query.tab as string) || 'general')
+
+const tabLabels: Record<string, { label: string, description: string }> = {
+    general: { label: t('hr.settings.general'), description: 'Company defaults and lifecycle stage labels' },
+    taxonomies: { label: t('hr.settings.taxonomies'), description: 'Leave types and employment types used across HR' },
+    policies: { label: t('hr.settings.policies'), description: 'Configure leave, insurance and probation policies' },
+    holidays: { label: t('hr.settings.holidays'), description: 'Company holidays shown across the Leave calendar and timeline' },
+    recruitment: { label: t('hr.settings.recruitment.title'), description: t('hr.settings.recruitment.description') },
+    documents: { label: t('hr.settings.documents'), description: 'Document templates with placeholders and live preview' },
+    automation: { label: t('hr.settings.automation'), description: 'Wire lifecycle events to document templates' },
+    integrations: { label: t('hr.settings.integrations'), description: t('integrations.description') },
+}
+
+const current = computed(() => tabLabels[activeTab.value] ?? tabLabels.general)
+</script>
+
+<template>
+    <ModulePage
+        :title="`Settings · ${current.label}`"
+        :subtitle="current.description"
+        icon="i-ph-gear-light"
+        padding="default"
+        max-width="xl"
+    >
+        <HrSettingsGeneral v-if="activeTab === 'general'" />
+        <HrSettingsTaxonomies v-else-if="activeTab === 'taxonomies'" />
+        <HrSettingsPolicies v-else-if="activeTab === 'policies'" />
+        <HrSettingsHolidays v-else-if="activeTab === 'holidays'" />
+        <HrSettingsRecruitment v-else-if="activeTab === 'recruitment'" />
+        <HrSettingsDocuments v-else-if="activeTab === 'documents'" />
+        <HrSettingsAutomation v-else-if="activeTab === 'automation'" />
+        <HrSettingsIntegrations v-else-if="activeTab === 'integrations'" />
+    </ModulePage>
+</template>

package/app/pages/hr/setup.vue

@@ -0,0 +1,3 @@
+<template>
+    <SetupWizardRoot module-key="hr" />
+</template>

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

@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { WorkflowAction } from "@odp/workflow/shared/types"
+
+const route = useRoute()
+const { t } = useI18n()
+const toast = useToast()
+const { $api } = useNuxtApp()
+const { loadInstance, approveStep, rejectStep } = useRecruitmentWorkflow()
+const { user: currentUser } = useCurrentUser()
+
+const personId = computed(() => String(route.params.id))
+const stepId = computed(() => String(route.params.stepId))
+
+interface PersonSummary {
+    id: number | string
+    display_name: string
+    email: string | null
+    phone: string | null
+    desired_position: string | null
+    source: string | null
+    stage: string
+}
+interface Application {
+    id: number
+    status: string
+    position: string | null
+    notes: string | null
+    workflow_instance_id: string | null
+    date_created: string
+}
+interface Interview {
+    id: number
+    application_id: number
+    type: string
+    status: string
+    score: number | null
+    interviewer: string | null
+    scheduled_at: string | null
+    notes: string | null
+    label: string | null
+    workflow_step_id: string | null
+}
+
+const person = ref<PersonSummary | null>(null)
+const application = ref<Application | null>(null)
+const interview = ref<Interview | null>(null)
+const stepDef = ref<any>(null)
+const instanceStep = ref<any>(null)
+const actions = ref<WorkflowAction[]>([])
+const loading = ref(true)
+const rejectComment = ref("")
+const showRejectModal = ref(false)
+
+const stepStatus = computed(() => instanceStep.value?.status ?? "pending")
+const canApprove = computed(() => stepStatus.value === "active" && application.value?.status === "active")
+const isActive = computed(() => application.value?.status === "active")
+
+async function loadData() {
+    loading.value = true
+    try {
+        const api = useHrApi()
+        person.value = await api.getPerson(personId.value)
+
+        const appsRes = await $api<{ data: Application[] }>(`/hr/people/${personId.value}/applications`)
+        const apps = appsRes.data ?? []
+        const app = apps.find(a => a.workflow_instance_id)
+        if (!app?.workflow_instance_id) { loading.value = false; return }
+        application.value = app
+
+        const progress = await loadInstance(app.workflow_instance_id)
+        if (!progress) { loading.value = false; return }
+
+        stepDef.value = progress.steps.find(s => s.id === stepId.value) ?? null
+        instanceStep.value = progress.instanceSteps.find(is => is.step_id === stepId.value) ?? null
+        actions.value = progress.actions
+
+        const ivsRes = await $api<{ data: Interview[] }>(`/hr/people/${personId.value}/applications/${app.id}/interviews`)
+        const ivs = ivsRes.data ?? []
+        interview.value = ivs.find(iv => iv.workflow_step_id === stepId.value) ?? null
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" })
+    } finally {
+        loading.value = false
+    }
+}
+
+async function updateInterview(patch: Record<string, unknown>) {
+    if (!interview.value || !application.value) return
+    try {
+        const res = await $api<{ data: Interview }>(
+            `/hr/people/${personId.value}/applications/${application.value.id}/interviews/${interview.value.id}`,
+            { method: "PATCH", body: patch },
+        )
+        interview.value = res.data
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" })
+    }
+}
+
+async function handleApprove() {
+    if (!application.value?.workflow_instance_id || !instanceStep.value) return
+    try {
+        await approveStep(application.value.workflow_instance_id, instanceStep.value.step_id)
+        if (interview.value?.status === "Scheduled") await updateInterview({ status: "Done" })
+        toast.add({ title: t("hr.recruitment.step_approved"), color: "success" })
+        await loadData()
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" })
+    }
+}
+
+async function handleReject() {
+    if (!application.value?.workflow_instance_id || !instanceStep.value || !rejectComment.value.trim()) return
+    try {
+        await rejectStep(application.value.workflow_instance_id, instanceStep.value.step_id, rejectComment.value.trim())
+        showRejectModal.value = false
+        toast.add({ title: t("hr.recruitment.step_rejected"), color: "success" })
+        await loadData()
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" })
+    }
+}
+
+onMounted(loadData)
+</script>
+
+<template>
+    <UDashboardPanel>
+        <template #header>
+            <UDashboardNavbar
+                :title="stepDef?.name ?? t('hr.recruitment.interview')"
+                :ui="{ title: 'text-lg font-semibold' }"
+            >
+                <template #leading>
+                    <UButton
+                        icon="i-ph-arrow-left-light"
+                        variant="ghost"
+                        size="sm"
+                        @click="navigateTo(`/hr/talents/${personId}`)"
+                    />
+                </template>
+                <template #right>
+                    <UBadge
+                        v-if="stepStatus !== 'pending'"
+                        :color="({ approved: 'success', active: 'info', rejected: 'error' }[stepStatus] ?? 'neutral') as any"
+                        variant="subtle"
+                        size="md"
+                    >
+                        {{ stepStatus }}
+                    </UBadge>
+                </template>
+            </UDashboardNavbar>
+        </template>
+
+        <template #body>
+            <div v-if="loading" class="flex items-center justify-center h-64">
+                <UIcon name="i-ph-spinner" class="animate-spin size-6 text-muted" />
+            </div>
+
+            <div v-else-if="!person || !stepDef" 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.recruitment.interview_not_found") }}</p>
+                </div>
+            </div>
+
+            <div v-else class="max-w-3xl mx-auto py-6 space-y-6">
+                <!-- Candidate info card -->
+                <div class="border border-default rounded-xl p-4">
+                    <div class="flex items-center gap-3 mb-3">
+                        <UAvatar icon="i-ph-user-light" size="lg" class="bg-primary/10 text-primary" />
+                        <div class="min-w-0 flex-1">
+                            <h2 class="text-base font-semibold">{{ person.display_name }}</h2>
+                            <div class="flex items-center gap-2 text-xs text-muted mt-0.5">
+                                <span v-if="person.email">{{ person.email }}</span>
+                                <span v-if="person.phone">{{ person.phone }}</span>
+                            </div>
+                        </div>
+                        <HrSharedStageBadge :stage="person.stage" />
+                    </div>
+                    <div class="grid grid-cols-2 gap-3 text-sm">
+                        <div>
+                            <span class="text-muted text-xs">{{ $t("hr.fields.desired_position") }}</span>
+                            <p class="font-medium">{{ person.desired_position ?? "—" }}</p>
+                        </div>
+                        <div>
+                            <span class="text-muted text-xs">{{ $t("hr.fields.source") }}</span>
+                            <p class="font-medium">{{ person.source ?? "—" }}</p>
+                        </div>
+                        <div v-if="application">
+                            <span class="text-muted text-xs">{{ $t("hr.recruitment.position") }}</span>
+                            <p class="font-medium">{{ application.position ?? "—" }}</p>
+                        </div>
+                        <div v-if="application">
+                            <span class="text-muted text-xs">{{ $t("hr.recruitment.applied") }}</span>
+                            <p class="font-medium">{{ application.date_created?.slice(0, 10) ?? "—" }}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Interview form -->
+                <HrTalentsStepDetail
+                    v-if="interview && stepDef"
+                    :step="stepDef"
+                    :interview="interview"
+                    :step-status="stepStatus"
+                    :can-approve="canApprove"
+                    :disabled="!isActive"
+                    @update="(_iid, patch) => updateInterview(patch)"
+                    @approve="handleApprove"
+                    @reject="showRejectModal = true; rejectComment = ''"
+                />
+
+                <!-- Timeline -->
+                <HrSharedWorkflowTimeline :actions="actions" />
+            </div>
+        </template>
+    </UDashboardPanel>
+
+    <UModal :open="showRejectModal" :title="$t('hr.recruitment.reject_step')" @close="showRejectModal = false">
+        <template #body>
+            <UTextarea v-model="rejectComment" :placeholder="$t('hr.recruitment.reject_reason_placeholder')" size="sm" :rows="3" autofocus />
+        </template>
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <UButton color="neutral" variant="outline" :label="$t('common.cancel')" @click="showRejectModal = false" />
+                <UButton color="error" :label="$t('hr.recruitment.reject_step')" :disabled="!rejectComment.trim()" @click="handleReject" />
+            </div>
+        </template>
+    </UModal>
+</template>