@codihaus/odp-app-hr 0.1.0

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

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { RecruitmentPipeline } from '../../../composables/use-recruitment-workflow'
+
+const { t } = useI18n()
+const toast = useToast()
+const router = useRouter()
+const { getAvailablePipelines } = useRecruitmentWorkflow()
+
+const pipelines = ref<RecruitmentPipeline[]>([])
+const loading = ref(false)
+
+async function fetchPipelines() {
+    loading.value = true
+    try {
+        pipelines.value = await getAvailablePipelines()
+    }
+    catch {
+        toast.add({ title: t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        loading.value = false
+    }
+}
+
+function openWorkflowEditor(id: string) {
+    router.push(`/workflow/definitions/${id}`)
+}
+
+function createNewPipeline() {
+    router.push('/workflow/definitions/+')
+}
+
+onMounted(fetchPipelines)
+</script>
+
+<template>
+    <div class="space-y-5">
+        <div class="flex items-center justify-between">
+            <div>
+                <div class="text-sm font-semibold text-default">
+                    {{ t('hr.settings.recruitment.title') }}
+                </div>
+                <p class="mt-0.5 text-xs text-muted">
+                    {{ t('hr.settings.recruitment.description') }}
+                </p>
+            </div>
+            <UButton
+                color="primary"
+                size="sm"
+                icon="i-ph-plus-light"
+                :label="t('hr.settings.recruitment.create_pipeline')"
+                @click="createNewPipeline"
+            />
+        </div>
+
+        <!-- Loading -->
+        <div
+            v-if="loading"
+            class="p-6 text-sm text-muted text-center"
+        >
+            {{ t('common.loading') }}
+        </div>
+
+        <!-- Empty state -->
+        <div
+            v-else-if="!pipelines.length"
+            class="rounded-xl border border-dashed border-default bg-elevated/30 p-8 text-center"
+        >
+            <UIcon
+                name="i-ph-flow-arrow-light"
+                class="size-8 text-muted mx-auto mb-2"
+            />
+            <p class="text-sm font-medium text-default">
+                {{ t('hr.settings.recruitment.no_pipelines') }}
+            </p>
+            <p class="mt-1 text-xs text-muted">
+                {{ t('hr.settings.recruitment.no_pipelines_hint') }}
+            </p>
+        </div>
+
+        <!-- Pipeline list -->
+        <ul
+            v-else
+            class="space-y-2"
+        >
+            <li
+                v-for="pipeline in pipelines"
+                :key="pipeline.id"
+                class="flex items-center gap-3 rounded-lg border border-default bg-default p-4 cursor-pointer hover:bg-elevated/50 transition-colors"
+                @click="openWorkflowEditor(pipeline.id)"
+            >
+                <UIcon
+                    name="i-ph-flow-arrow-light"
+                    class="size-5 text-muted shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                        <span class="text-sm font-medium text-default truncate">{{ pipeline.name }}</span>
+                    </div>
+                    <p
+                        v-if="pipeline.description"
+                        class="text-xs text-muted mt-0.5 truncate"
+                    >
+                        {{ pipeline.description }}
+                    </p>
+                </div>
+                <div class="flex items-center gap-2 shrink-0">
+                    <UBadge
+                        :label="`${pipeline.steps.length} step${pipeline.steps.length === 1 ? '' : 's'}`"
+                        color="neutral"
+                        variant="subtle"
+                        size="sm"
+                    />
+                    <UIcon
+                        name="i-ph-arrow-square-out-light"
+                        class="size-4 text-muted"
+                    />
+                </div>
+            </li>
+        </ul>
+
+        <div class="pt-2">
+            <p class="text-xs text-muted">
+                {{ t('hr.settings.recruitment.workflow_hint') }}
+            </p>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import slugify from "slugify"
+
+const {
+    leaveTypes, addLeaveType, updateLeaveType, archiveLeaveType,
+    employmentTypes, addEmploymentType, updateEmploymentType, archiveEmploymentType,
+} = useHrSettings()
+
+const leaveDraft = ref({ label: "", default_days: 0, paid: true })
+const employmentDraft = ref({ label: "" })
+
+function addLeave() {
+    if (!leaveDraft.value.label.trim()) return
+    const key = slugify(leaveDraft.value.label, { lower: true, strict: true })
+    addLeaveType({ key, label: leaveDraft.value.label.trim(), default_days: leaveDraft.value.default_days, paid: leaveDraft.value.paid })
+    leaveDraft.value = { label: "", default_days: 0, paid: true }
+}
+
+function addEmployment() {
+    const label = employmentDraft.value.label.trim()
+    if (!label) return
+    const key = slugify(label, { lower: true, strict: true, replacement: "_" })
+    addEmploymentType({ key, label })
+    employmentDraft.value.label = ""
+}
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Leave types -->
+        <section class="space-y-3">
+            <div class="rounded-xl border border-dashed border-default bg-elevated/30 p-4">
+                <div class="text-sm font-semibold text-default">
+                    {{ $t('taxonomies.add_leave_type') }}
+                </div>
+                <p class="mt-0.5 text-xs text-muted">
+                    {{ $t('taxonomies.leave_type_desc') }}
+                </p>
+                <div class="mt-3 flex flex-wrap items-center gap-2">
+                    <UInput
+                        v-model="leaveDraft.label"
+                        size="sm"
+                        :placeholder="$t('taxonomies.leave_type_placeholder')"
+                        maxlength="40"
+                        class="flex-1 min-w-[160px]"
+                    />
+                    <UInputNumber
+                        v-model="leaveDraft.default_days"
+                        :min="0"
+                        size="sm"
+                        class="w-28"
+                    />
+                    <UCheckbox
+                        v-model="leaveDraft.paid"
+                        :label="$t('taxonomies.leave_type.paid')"
+                    />
+                    <UButton
+                        color="primary"
+                        size="sm"
+                        icon="i-ph-plus-light"
+                        :label="$t('common.add')"
+                        :disabled="!leaveDraft.label.trim()"
+                        @click="addLeave"
+                    />
+                </div>
+            </div>
+
+            <ul class="space-y-2">
+                <li
+                    v-for="t in leaveTypes"
+                    :key="t.key"
+                    class="flex flex-wrap items-center gap-3 rounded-lg border border-default bg-default p-3"
+                    :class="t.is_archived && 'opacity-50'"
+                >
+                    <UIcon
+                        name="i-ph-calendar-blank-light"
+                        class="size-4 text-muted shrink-0"
+                    />
+                    <div class="flex-1 min-w-[120px]">
+                        <UInput
+                            :model-value="t.label"
+                            size="sm"
+                            @update:model-value="(v) => updateLeaveType(t.id, { label: String(v) })"
+                        />
+                    </div>
+                    <UInputNumber
+                        :model-value="t.default_days"
+                        :min="0"
+                        size="sm"
+                        class="w-24"
+                        @update:model-value="(v) => updateLeaveType(t.id, { default_days: Number(v) })"
+                    />
+                    <UCheckbox
+                        :model-value="t.paid"
+                        :label="$t('taxonomies.leave_type.paid')"
+                        @update:model-value="(v) => updateLeaveType(t.id, { paid: !!v })"
+                    />
+                    <code class="text-xs text-muted hidden sm:inline">{{ t.key }}</code>
+                    <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        icon="i-ph-archive-light"
+                        :disabled="t.is_archived"
+                        @click="archiveLeaveType(t.id)"
+                    />
+                </li>
+            </ul>
+        </section>
+
+        <!-- Employment types -->
+        <section class="space-y-3 border-t border-default pt-6">
+            <div class="rounded-xl border border-dashed border-default bg-elevated/30 p-4">
+                <div class="text-sm font-semibold text-default">
+                    {{ $t('taxonomies.add_employment_type') }}
+                </div>
+                <p class="mt-0.5 text-xs text-muted">
+                    {{ $t('taxonomies.employment_type_desc') }}
+                </p>
+                <div class="mt-3 flex flex-wrap items-center gap-2">
+                    <UInput
+                        v-model="employmentDraft.label"
+                        size="sm"
+                        :placeholder="$t('taxonomies.employment_type_placeholder')"
+                        maxlength="40"
+                        class="flex-1 min-w-[200px]"
+                    />
+                    <UButton
+                        color="primary"
+                        size="sm"
+                        icon="i-ph-plus-light"
+                        :label="$t('common.add')"
+                        :disabled="!employmentDraft.label.trim()"
+                        @click="addEmployment"
+                    />
+                </div>
+            </div>
+
+            <ul class="space-y-2">
+                <li
+                    v-for="t in employmentTypes"
+                    :key="t.key"
+                    class="flex flex-wrap items-center gap-3 rounded-lg border border-default bg-default p-3"
+                    :class="t.is_archived && 'opacity-50'"
+                >
+                    <UIcon
+                        name="i-ph-briefcase-light"
+                        class="size-4 text-muted shrink-0"
+                    />
+                    <div class="flex-1 min-w-[200px]">
+                        <UInput
+                            :model-value="t.label"
+                            size="sm"
+                            @update:model-value="(v) => updateEmploymentType(t.id, { label: String(v) })"
+                        />
+                    </div>
+                    <code class="text-xs text-muted hidden sm:inline">{{ t.key }}</code>
+                    <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        icon="i-ph-archive-light"
+                        :disabled="t.is_archived"
+                        @click="archiveEmploymentType(t.id)"
+                    />
+                </li>
+            </ul>
+        </section>
+    </div>
+</template>

package/app/components/hr/shared/row.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineProps<{
+    label: string
+    value?: string | number | null
+    icon?: string
+}>()
+</script>
+
+<template>
+    <div class="flex items-center px-4 py-2.5">
+        <UIcon
+            v-if="icon"
+            :name="icon"
+            class="size-4 text-muted mr-3 shrink-0"
+        />
+        <span class="text-xs text-muted w-32 shrink-0">{{ label }}</span>
+        <div class="text-sm text-default truncate">
+            <slot>{{ value || '—' }}</slot>
+        </div>
+    </div>
+</template>

package/app/components/hr/shared/section.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineProps<{ title: string; icon: string }>();
+</script>
+
+<template>
+    <div class="border border-default rounded-lg">
+        <div
+            class="px-4 py-3 border-b border-default bg-elevated/30 flex items-center justify-between"
+        >
+            <h3 class="text-sm font-medium flex items-center gap-2">
+                <UIcon :name="icon" class="size-4 text-muted" />
+                {{ title }}
+            </h3>
+            <slot name="actions" />
+        </div>
+        <div class="divide-y divide-default p-4">
+            <slot />
+        </div>
+    </div>
+</template>

package/app/components/hr/shared/source-badge.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    source: "policy" | "override"
+    policyLabel?: string
+    policyValue?: string | number | boolean
+    overrideNote?: string
+}>()
+
+const { t } = useI18n()
+
+const tooltip = computed(() => {
+    if (props.source === 'policy') {
+        return props.policyLabel
+            ? `${t('policy.source.policy')}: ${props.policyLabel}`
+            : t('policy.source.policy')
+    }
+    if (props.policyValue !== undefined) {
+        return t('policy.source.override_value', {
+            override: props.overrideNote ?? '?',
+            policy: props.policyValue,
+        })
+    }
+    return t('policy.source.override')
+})
+</script>
+
+<template>
+    <UTooltip :text="tooltip">
+        <UBadge
+            :color="source === 'override' ? 'warning' : 'neutral'"
+            variant="subtle"
+            size="md"
+        >
+            {{ source === 'override' ? $t('hr.policy.override') : $t('hr.policy.from_policy') }}
+            <UIcon
+                v-if="source === 'override'"
+                name="i-ph-pencil-simple-line-light"
+                class="size-3 ml-1"
+            />
+        </UBadge>
+    </UTooltip>
+</template>

package/app/components/hr/shared/stage-badge.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const props = defineProps<{ stage: LifecycleStage }>()
+
+const COLORS: Record<LifecycleStage, "neutral" | "info" | "warning" | "success" | "error"> = {
+    talent: "neutral",
+    interviewing: "info",
+    offer: "warning",
+    probation: "warning",
+    active: "success",
+    resigned: "neutral",
+}
+
+const variant = computed(() => COLORS[props.stage] ?? "neutral")
+</script>
+
+<template>
+    <UBadge
+        :color="variant"
+        variant="subtle"
+        size="md"
+    >
+        {{ stage }}
+    </UBadge>
+</template>

package/app/components/hr/shared/workflow-timeline.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { WorkflowAction } from '@odp/workflow/shared/types'
+
+defineProps<{ actions: WorkflowAction[] }>()
+</script>
+
+<template>
+    <div v-if="actions.length" class="pt-2">
+        <p class="text-xs text-muted font-medium uppercase tracking-wide mb-2">
+            {{ $t("hr.recruitment.timeline") }}
+        </p>
+        <div class="space-y-1.5">
+            <div v-for="action in actions" :key="action.id" class="flex items-start gap-2 text-xs">
+                <UBadge
+                    :color="action.action === 'approve' ? 'success' : action.action === 'reject' ? 'error' : 'neutral'"
+                    variant="subtle" size="xs"
+                >
+                    {{ action.action }}
+                </UBadge>
+                <span v-if="action.comment" class="text-muted truncate">{{ action.comment }}</span>
+                <span class="text-muted ml-auto shrink-0">
+                    {{ action.created_at?.slice(0, 16).replace('T', ' ') }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>

package/app/components/hr/talents/app-sidebar.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+defineProps<{
+    applications: Array<{ id: number; position: string | null; status: string; workflow_instance_id: string | null; date_created: string }>
+    selectedAppId: number | null
+    loading: boolean
+}>()
+
+const emit = defineEmits<{ select: [id: number]; create: [] }>()
+
+const STATUS_COLOR: Record<string, string> = {
+    active: "info",
+    hired: "success",
+    rejected: "error",
+    withdrawn: "neutral",
+}
+</script>
+
+<template>
+    <div class="w-56 shrink-0 border-r border-default p-4 space-y-3 overflow-y-auto">
+        <div class="flex items-center justify-between">
+            <p class="text-xs text-muted font-medium uppercase tracking-wide">
+                {{ $t("hr.recruitment.applications") }}
+            </p>
+            <UButton icon="i-ph-plus" size="2xs" variant="ghost" @click="emit('create')" />
+        </div>
+
+        <div v-if="loading" class="text-xs text-muted py-4 text-center">{{ $t("common.loading") }}</div>
+
+        <button
+            v-for="app in applications"
+            :key="app.id"
+            class="w-full text-left p-2.5 rounded-lg border transition-colors"
+            :class="selectedAppId === app.id ? 'border-primary bg-primary/5' : 'border-default hover:bg-elevated'"
+            @click="emit('select', app.id)"
+        >
+            <div class="text-xs font-medium truncate">
+                {{ app.position ?? $t("hr.recruitment.no_position") }}
+            </div>
+            <div class="flex items-center gap-1 mt-1">
+                <UBadge :color="(STATUS_COLOR[app.status] ?? 'neutral') as any" variant="subtle" size="xs">
+                    {{ $t(`hr.recruitment.app_status.${app.status}`) }}
+                </UBadge>
+                <UBadge v-if="app.workflow_instance_id" color="primary" variant="subtle" size="xs">
+                    {{ $t("hr.recruitment.has_pipeline") }}
+                </UBadge>
+            </div>
+            <div class="text-xs text-muted mt-0.5">{{ app.date_created?.slice(0, 10) }}</div>
+        </button>
+
+        <div v-if="!loading && !applications.length" class="text-xs text-muted text-center py-4">
+            {{ $t("hr.recruitment.no_applications") }}
+        </div>
+    </div>
+</template>

package/app/components/hr/talents/application-form-modal.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { RecruitmentPipeline } from '../../../composables/use-recruitment-workflow'
+
+const open = defineModel<boolean>('open', { default: false })
+const props = defineProps<{
+    personId: string | number
+    pipelines: RecruitmentPipeline[]
+}>()
+const emit = defineEmits<{
+    saved: [app: any, workflowId: string | null]
+}>()
+
+const { $api } = useNuxtApp()
+const { t } = useI18n()
+const toast = useToast()
+
+const APP_FIELD_NAMES = ['position', 'notes']
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_applications'])
+
+const formFields = computed(() => pickFields('hr_applications', APP_FIELD_NAMES))
+
+const form = ref<Record<string, any>>({})
+const selectedWorkflowId = ref<string | null>(null)
+const saving = ref(false)
+
+const pipelineOptions = computed(() =>
+    props.pipelines.map(p => ({
+        label: `${p.name} (${p.steps.length} steps)`,
+        value: p.id,
+    })),
+)
+
+const canSave = computed(() => !!form.value.position?.trim())
+
+watch(open, (v) => {
+    if (v) {
+        form.value = {}
+        selectedWorkflowId.value = null
+        fetchAll()
+    }
+})
+
+async function save() {
+    if (!canSave.value) return
+    saving.value = true
+    try {
+        const res = await $api<{ data: any }>(
+            `/hr/people/${props.personId}/applications`,
+            { method: 'POST', body: { ...form.value } },
+        )
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        open.value = false
+        emit('saved', res.data, selectedWorkflowId.value)
+    }
+    catch {
+        toast.add({ title: t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        saving.value = false
+    }
+}
+</script>
+
+<template>
+    <UModal v-model:open="open">
+        <template #content>
+            <div class="p-6 space-y-4">
+                <h3 class="text-base font-semibold">
+                    {{ $t('hr.recruitment.create_application') }}
+                </h3>
+
+                <div v-if="!isReady('hr_applications')" class="py-6 text-sm text-muted text-center">
+                    {{ $t('common.loading') }}
+                </div>
+                <template v-else>
+                    <FormRoot
+                        v-if="formFields.length"
+                        v-model="form"
+                        :fields="formFields"
+                        :initial-values="{}"
+                    />
+
+                    <UFormField
+                        v-if="pipelineOptions.length"
+                        :label="$t('hr.recruitment.pipeline_label')"
+                    >
+                        <USelect
+                            v-model="selectedWorkflowId"
+                            :items="pipelineOptions"
+                            value-key="value"
+                            :placeholder="$t('hr.recruitment.select_pipeline')"
+                            size="sm"
+                            class="w-full"
+                        />
+                        <template #hint>
+                            <span class="text-xs text-muted">{{ $t('hr.recruitment.pipeline_hint') }}</span>
+                        </template>
+                    </UFormField>
+                </template>
+
+                <div class="flex justify-end gap-2 pt-2">
+                    <UButton :label="$t('common.cancel')" variant="ghost" @click="open = false" />
+                    <UButton
+                        :label="$t('common.create')"
+                        color="primary"
+                        :disabled="!canSave"
+                        :loading="saving"
+                        @click="save"
+                    />
+                </div>
+            </div>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/talents/pipeline-picker.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { RecruitmentPipeline } from "../../../composables/use-recruitment-workflow";
+
+const props = defineProps<{ pipelines: RecruitmentPipeline[] }>();
+const emit = defineEmits<{ start: [workflowId: string] }>();
+
+const selectedId = ref<string | null>(null);
+
+const options = computed(() =>
+    props.pipelines.map((p) => ({
+        label: `${p.name} (${p.steps.length} steps)`,
+        value: p.id,
+    })),
+);
+</script>
+
+<template>
+    <div
+        class="p-4 rounded-xl border border-dashed border-default bg-elevated/30 text-center"
+    >
+        <UIcon
+            name="i-ph-flow-arrow-light"
+            class="size-8 text-muted mx-auto mb-2"
+        />
+        <p class="text-sm font-medium mb-1">
+            {{ $t("hr.recruitment.no_pipeline") }}
+        </p>
+        <p class="text-xs text-muted mb-3">
+            {{ $t("hr.recruitment.no_pipeline_hint") }}
+        </p>
+        <div
+            v-if="options.length"
+            class="flex items-center justify-center gap-2"
+        >
+            <USelect
+                v-model="selectedId"
+                :items="options"
+                value-key="value"
+                :placeholder="$t('hr.recruitment.select_pipeline')"
+                size="sm"
+                class="w-64"
+            />
+            <UButton
+                size="sm"
+                color="primary"
+                icon="i-ph-play-light"
+                :label="$t('hr.recruitment.start_pipeline')"
+                :disabled="!selectedId"
+                @click="selectedId && emit('start', selectedId)"
+            />
+        </div>
+        <p v-else class="text-xs text-muted">
+            {{ $t("hr.recruitment.no_pipelines_available") }}
+        </p>
+    </div>
+</template>