@codihaus/odp-app-hr 0.1.0

package/app/components/hr/talents/step-detail.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { WorkflowStep } from "@odp/workflow/shared/types";
+
+const props = defineProps<{
+    step: WorkflowStep;
+    interview: {
+        id: number;
+        score: number | null;
+        interviewer: string | null;
+        scheduled_at: string | null;
+        notes: string | null;
+    };
+    stepStatus: string;
+    canApprove: boolean;
+    disabled: boolean;
+}>();
+
+const emit = defineEmits<{
+    update: [iid: number, patch: Record<string, unknown>];
+    approve: [];
+    reject: [];
+}>();
+
+const { user: currentUser } = useCurrentUser();
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(["hr_interviews"]);
+
+const DETAIL_FIELDS = ["interviewer", "scheduled_at", "score", "notes"];
+const formFields = computed(() => {
+    const fields = pickFields("hr_interviews", DETAIL_FIELDS);
+    return fields;
+});
+
+const formModel = ref<Record<string, any>>({});
+
+watch(
+    () => props.interview,
+    (iv) => {
+        formModel.value = {
+            interviewer: iv.interviewer,
+            score: iv.score,
+            scheduled_at: iv.scheduled_at,
+            notes: iv.notes,
+        };
+    },
+    { immediate: true },
+);
+
+function onFormUpdate(newValues: Record<string, any>) {
+    const patch: Record<string, unknown> = {};
+    for (const key of DETAIL_FIELDS) {
+        const newVal = newValues[key] ?? null;
+        const oldVal = formModel.value[key] ?? null;
+        if (newVal !== oldVal) patch[key] = newVal;
+    }
+    if (Object.keys(patch).length) {
+        formModel.value = { ...formModel.value, ...patch };
+        emit("update", props.interview.id, patch);
+    }
+}
+
+const STATUS_BADGE_COLOR: Record<string, string> = {
+    approved: "success",
+    active: "info",
+    rejected: "error",
+};
+
+watch(
+    () => props.interview.id,
+    (newId, oldId) => {
+        if (
+            newId !== oldId &&
+            !props.interview.interviewer &&
+            currentUser.value
+        ) {
+            emit("update", props.interview.id, {
+                interviewer: currentUser.value.id,
+            });
+        }
+    },
+    { immediate: true },
+);
+
+onMounted(fetchAll);
+</script>
+
+<template>
+    <div class="border border-default rounded-xl p-4 space-y-3">
+        <div class="flex items-center gap-2">
+            <h4 class="text-sm font-semibold flex-1">{{ step.name }}</h4>
+            <UBadge
+                :color="(STATUS_BADGE_COLOR[stepStatus] ?? 'neutral') as any"
+                variant="subtle"
+                size="sm"
+            >
+                {{ stepStatus }}
+            </UBadge>
+        </div>
+
+        <div
+            v-if="!isReady('hr_interviews')"
+            class="py-4 text-sm text-muted text-center"
+        >
+            {{ $t("common.loading") }}
+        </div>
+        <FormRoot
+            v-else-if="formFields.length"
+            :model-value="formModel"
+            :fields="formFields"
+            :initial-values="{}"
+            :disabled="disabled"
+            @update:model-value="onFormUpdate"
+        />
+
+        <div v-if="canApprove" class="flex justify-end gap-2 pt-1">
+            <UButton
+                size="sm"
+                color="error"
+                variant="outline"
+                icon="i-ph-x-light"
+                :label="$t('hr.recruitment.reject_step')"
+                @click="emit('reject')"
+            />
+            <UButton
+                size="sm"
+                color="success"
+                variant="soft"
+                icon="i-ph-check-light"
+                :label="$t('hr.recruitment.approve_step')"
+                @click="emit('approve')"
+            />
+        </div>
+    </div>
+</template>

package/app/components/hr/talents/step-stepper.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { WorkflowStep } from "@odp/workflow/shared/types";
+
+const props = defineProps<{
+    steps: WorkflowStep[];
+    currentStepId: string | null;
+    selectedStepId: string | null;
+    getStatus: (stepId: string) => string;
+}>();
+
+const emit = defineEmits<{ select: [stepId: string] }>();
+
+const STATUS_ICON: Record<string, string> = {
+    approved: "i-ph-check-circle-fill",
+    rejected: "i-ph-x-circle-fill",
+    active: "i-ph-circle-notch-bold",
+    skipped: "i-ph-minus-circle-light",
+    timed_out: "i-ph-clock-countdown-light",
+};
+
+const STATUS_ICON_COLOR: Record<string, string> = {
+    approved: "text-success",
+    rejected: "text-error",
+};
+
+const STATUS_STEP_CLASS: Record<string, string> = {
+    approved: "border-success/30 bg-success/5",
+    rejected: "border-error/30 bg-error/5",
+};
+
+function stepIcon(stepId: string): string {
+    return STATUS_ICON[props.getStatus(stepId)] ?? "i-ph-circle-light";
+}
+
+function stepIconColor(stepId: string): string {
+    const status = props.getStatus(stepId);
+    if (STATUS_ICON_COLOR[status]) return STATUS_ICON_COLOR[status]!;
+    if (stepId === props.currentStepId) return "text-primary animate-spin";
+    return "text-muted";
+}
+
+function stepClass(step: WorkflowStep): string[] {
+    const classes: string[] = [];
+
+    if (props.selectedStepId === step.id) classes.push("ring-2 ring-primary/40");
+
+    if (step.id === props.currentStepId) {
+        classes.push("border-primary bg-primary/10 font-medium");
+    } else {
+        classes.push(STATUS_STEP_CLASS[props.getStatus(step.id)] ?? "border-default");
+    }
+
+    classes.push(step.type === "approval" ? "cursor-pointer hover:bg-elevated/50" : "cursor-default opacity-60");
+
+    return classes;
+}
+
+function connectorClass(stepId: string): string {
+    return props.getStatus(stepId) === "pending" ? "bg-default" : "bg-primary";
+}
+</script>
+
+<template>
+    <div class="flex items-center gap-1 overflow-x-auto pb-2">
+        <template v-for="(step, idx) in steps" :key="step.id">
+            <div
+                v-if="idx > 0"
+                class="h-px w-6 shrink-0"
+                :class="connectorClass(step.id)"
+            />
+            <button
+                class="flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs shrink-0 transition-colors"
+                :class="stepClass(step)"
+                @click="step.type === 'approval' && emit('select', step.id)"
+            >
+                <UIcon
+                    :name="stepIcon(step.id)"
+                    class="size-3.5"
+                    :class="stepIconColor(step.id)"
+                />
+                <span>{{ step.name }}</span>
+            </button>
+        </template>
+    </div>
+</template>

package/app/components/hr/talents/tab.vue

@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import type { PipelineProgress, RecruitmentPipeline } from '../../../composables/use-recruitment-workflow'
+import AppSidebar from './app-sidebar.vue'
+import PipelinePicker from './pipeline-picker.vue'
+import StepStepper from './step-stepper.vue'
+import StepDetail from './step-detail.vue'
+import ApplicationFormModal from './application-form-modal.vue'
+import WorkflowTimeline from '../shared/workflow-timeline.vue'
+
+const props = defineProps<{ personId: string | number }>()
+
+const { $api } = useNuxtApp()
+const { t } = useI18n()
+const toast = useToast()
+const { getAvailablePipelines, startPipeline, loadInstance, approveStep, rejectStep } = useRecruitmentWorkflow()
+
+interface Application {
+    id: number; person_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; notes: string | null
+    scheduled_at: string | null; label: string | null; workflow_step_id: string | null
+    date_created: string
+}
+
+const applications = ref<Application[]>([])
+const interviews = ref<Interview[]>([])
+const loading = ref(false)
+const loadingInterviews = ref(false)
+const selectedAppId = ref<number | null>(null)
+const showCreateModal = ref(false)
+const pipelines = ref<RecruitmentPipeline[]>([])
+const pipelineProgress = ref<PipelineProgress | null>(null)
+const loadingPipeline = ref(false)
+const selectedStepId = ref<string | null>(null)
+const rejectComment = ref("")
+const showRejectModal = ref(false)
+const pendingRejectStepId = ref<string | null>(null)
+
+const selectedApp = computed(() => applications.value.find(a => a.id === selectedAppId.value) ?? null)
+const isActive = computed(() => selectedApp.value?.status === "active")
+const hasWorkflow = computed(() => !!selectedApp.value?.workflow_instance_id)
+
+const sortedSteps = computed(() => {
+    if (!pipelineProgress.value) return []
+    return [...pipelineProgress.value.steps].sort((a, b) => a.sort_order - b.sort_order)
+})
+const approvalSteps = computed(() => sortedSteps.value.filter(s => s.type === 'approval'))
+
+const selectedStepInterview = computed(() =>
+    selectedStepId.value ? interviews.value.find(iv => iv.workflow_step_id === selectedStepId.value) ?? null : null,
+)
+const selectedStepDef = computed(() =>
+    selectedStepId.value ? sortedSteps.value.find(s => s.id === selectedStepId.value) ?? null : null,
+)
+const selectedInstanceStep = computed(() =>
+    selectedStepId.value && pipelineProgress.value
+        ? pipelineProgress.value.instanceSteps.find(is => is.step_id === selectedStepId.value) ?? null
+        : null,
+)
+const canApproveSelected = computed(() => selectedInstanceStep.value?.status === 'active' && isActive.value)
+
+function getInstanceStepStatus(stepId: string): string {
+    return pipelineProgress.value?.instanceSteps.find(s => s.step_id === stepId)?.status ?? "pending"
+}
+
+async function loadPipelines() { try { pipelines.value = await getAvailablePipelines() } catch {} }
+async function loadApplications() {
+    loading.value = true
+    try {
+        const res = await $api<{ data: Application[] }>(`/hr/people/${props.personId}/applications`)
+        applications.value = res.data ?? []
+        if (!selectedAppId.value && applications.value.length) selectedAppId.value = applications.value[0]!.id
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+    finally { loading.value = false }
+}
+async function loadInterviews() {
+    if (!selectedAppId.value) { interviews.value = []; return }
+    loadingInterviews.value = true
+    try {
+        const res = await $api<{ data: Interview[] }>(`/hr/people/${props.personId}/applications/${selectedAppId.value}/interviews`)
+        interviews.value = res.data ?? []
+    } catch { interviews.value = [] }
+    finally { loadingInterviews.value = false }
+}
+async function loadWorkflowProgress() {
+    const app = selectedApp.value
+    if (!app?.workflow_instance_id) { pipelineProgress.value = null; selectedStepId.value = null; return }
+    loadingPipeline.value = true
+    try {
+        pipelineProgress.value = await loadInstance(app.workflow_instance_id)
+        const cur = pipelineProgress.value?.currentStepId
+        if (cur && sortedSteps.value.find(s => s.id === cur)?.type === 'approval') selectedStepId.value = cur
+        else if (approvalSteps.value.length) selectedStepId.value = approvalSteps.value[0]!.id
+    } catch { pipelineProgress.value = null }
+    finally { loadingPipeline.value = false }
+}
+
+watch(selectedAppId, () => { selectedStepId.value = null; loadInterviews(); loadWorkflowProgress() })
+
+async function onApplicationSaved(app: Application, workflowId: string | null) {
+    if (workflowId) {
+        try { const inst = await startPipeline(props.personId, app.id, workflowId); app.workflow_instance_id = inst.id }
+        catch { toast.add({ title: t("hr.recruitment.workflow_start_error"), color: "warning" }) }
+    }
+    applications.value.unshift(app); selectedAppId.value = app.id
+}
+async function handleStartPipeline(workflowId: string) {
+    const app = selectedApp.value; if (!app) return
+    try {
+        const inst = await startPipeline(props.personId, app.id, workflowId)
+        app.workflow_instance_id = inst.id
+        const idx = applications.value.findIndex(a => a.id === app.id)
+        if (idx >= 0) applications.value[idx] = { ...app }
+        await loadInterviews(); await loadWorkflowProgress()
+        toast.add({ title: t("hr.recruitment.pipeline_started"), color: "success" })
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+}
+async function updateAppStatus(appId: number, status: string) {
+    try {
+        await $api(`/hr/people/${props.personId}/applications/${appId}`, { method: "PATCH", body: { status } })
+        const idx = applications.value.findIndex(a => a.id === appId)
+        if (idx >= 0) applications.value[idx] = { ...applications.value[idx]!, status }
+        toast.add({ title: t("hr.toast.saved"), color: "success" })
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+}
+async function updateInterview(iid: number, patch: Record<string, unknown>) {
+    if (!selectedAppId.value) return
+    try {
+        const res = await $api<{ data: Interview }>(`/hr/people/${props.personId}/applications/${selectedAppId.value}/interviews/${iid}`, { method: "PATCH", body: patch })
+        const idx = interviews.value.findIndex(i => i.id === iid)
+        if (idx >= 0) interviews.value[idx] = res.data
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+}
+async function handleApproveStep() {
+    const inst = pipelineProgress.value?.instance; const is = selectedInstanceStep.value
+    if (!inst || !is) return
+    try {
+        await approveStep(inst.id, is.step_id); await loadWorkflowProgress()
+        const iv = selectedStepInterview.value
+        if (iv && iv.status === 'Scheduled') await updateInterview(iv.id, { status: 'Done' })
+        toast.add({ title: t("hr.recruitment.step_approved"), color: "success" })
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+}
+function openRejectModal() {
+    if (!selectedInstanceStep.value) return
+    pendingRejectStepId.value = selectedInstanceStep.value.step_id; rejectComment.value = ""; showRejectModal.value = true
+}
+async function handleRejectStep() {
+    const inst = pipelineProgress.value?.instance
+    if (!inst || !pendingRejectStepId.value || !rejectComment.value.trim()) return
+    try {
+        await rejectStep(inst.id, pendingRejectStepId.value, rejectComment.value.trim())
+        showRejectModal.value = false; await loadWorkflowProgress()
+        toast.add({ title: t("hr.recruitment.step_rejected"), color: "success" })
+    } catch { toast.add({ title: t("hr.toast.error"), color: "error" }) }
+}
+
+onMounted(() => { loadApplications(); loadPipelines() })
+</script>
+
+<template>
+    <div class="flex h-full min-h-[400px]">
+        <AppSidebar
+            :applications="applications"
+            :selected-app-id="selectedAppId"
+            :loading="loading"
+            @select="selectedAppId = $event"
+            @create="showCreateModal = true"
+        />
+
+        <div class="flex-1 p-4 overflow-y-auto">
+            <div v-if="!selectedApp" class="text-muted text-sm text-center py-16">
+                {{ $t("hr.recruitment.select_application") }}
+            </div>
+            <div v-else>
+                <!-- App header -->
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-2">
+                        <h3 class="text-sm font-semibold">{{ selectedApp.position }}</h3>
+                        <UBadge
+                            :color="({ active: 'info', hired: 'success', rejected: 'error', withdrawn: 'neutral' }[selectedApp.status] ?? 'neutral') as any"
+                            variant="subtle" size="md"
+                        >
+                            {{ $t(`hr.recruitment.app_status.${selectedApp.status}`) }}
+                        </UBadge>
+                    </div>
+                    <div v-if="isActive" class="flex gap-2">
+                        <UButton size="sm" color="error" variant="outline" icon="i-ph-x-circle-light" :label="$t('hr.recruitment.reject')" @click="updateAppStatus(selectedApp.id, 'rejected')" />
+                        <UButton size="sm" color="success" variant="soft" icon="i-ph-check-circle-light" :label="$t('hr.recruitment.pass')" @click="updateAppStatus(selectedApp.id, 'hired')" />
+                    </div>
+                </div>
+
+                <div v-if="loadingPipeline" class="text-xs text-muted py-4 text-center">{{ $t("common.loading") }}</div>
+
+                <PipelinePicker v-else-if="!hasWorkflow && isActive" :pipelines="pipelines" @start="handleStartPipeline" />
+
+                <div v-else-if="pipelineProgress" class="space-y-4">
+                    <div
+                        v-if="pipelineProgress.isCompleted || pipelineProgress.isRejected"
+                        class="p-2 rounded-lg text-center text-xs font-medium"
+                        :class="pipelineProgress.isCompleted ? 'bg-success/10 text-success' : 'bg-error/10 text-error'"
+                    >
+                        {{ pipelineProgress.isCompleted ? $t('hr.recruitment.pipeline_completed') : $t('hr.recruitment.pipeline_rejected') }}
+                    </div>
+
+                    <StepStepper
+                        :steps="sortedSteps"
+                        :current-step-id="pipelineProgress.currentStepId"
+                        :selected-step-id="selectedStepId"
+                        :get-status="getInstanceStepStatus"
+                        @select="selectedStepId = $event"
+                    />
+
+                    <div v-if="selectedStepDef && selectedStepInterview" class="space-y-2">
+                        <div class="flex justify-end">
+                            <UButton
+                                size="xs"
+                                variant="link"
+                                color="neutral"
+                                icon="i-ph-arrow-square-out-light"
+                                :label="$t('hr.recruitment.open_full_page')"
+                                :to="`/hr/talents/${props.personId}/interview/${selectedStepDef.id}`"
+                            />
+                        </div>
+                        <StepDetail
+                            :step="selectedStepDef"
+                            :interview="selectedStepInterview"
+                            :step-status="getInstanceStepStatus(selectedStepDef.id)"
+                            :can-approve="canApproveSelected"
+                            :disabled="!isActive"
+                            @update="updateInterview"
+                            @approve="handleApproveStep"
+                            @reject="openRejectModal"
+                        />
+                    </div>
+
+                    <div v-else-if="approvalSteps.length && !selectedStepInterview" class="text-xs text-muted text-center py-6">
+                        {{ $t("hr.recruitment.select_step_hint") }}
+                    </div>
+
+                    <WorkflowTimeline :actions="pipelineProgress.actions" />
+                </div>
+            </div>
+        </div>
+
+        <ApplicationFormModal v-model:open="showCreateModal" :person-id="props.personId" :pipelines="pipelines" @saved="onApplicationSaved" />
+
+        <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="handleRejectStep" />
+                </div>
+            </template>
+        </UModal>
+    </div>
+</template>

package/app/composables/use-departments.ts

@@ -0,0 +1,59 @@
+export type Department = {
+    id: number
+    name: string
+    description?: string | null
+    color?: string | null
+    icon?: string | null
+    head?: { id: number, full_name: string, avatar?: string } | null
+    member_count?: number
+    avg_tenure_months?: number
+}
+
+export function useDepartments() {
+    const departments = useState<Department[]>('hr:departments', () => [])
+    const loading = ref(false)
+
+    async function fetchDepartments(force = false) {
+        if (!force && departments.value.length > 0) return
+        loading.value = true
+        try {
+            const res = await $fetch<any>('/api/hr/departments')
+            departments.value = Array.isArray(res) ? res : (res?.data ?? [])
+        }
+        catch { /* noop */ }
+        finally {
+            loading.value = false
+        }
+    }
+
+    async function saveDepartment(id: number | null, payload: Partial<Department>) {
+        if (id) {
+            const updated = await $fetch<Department>(`/api/hr/departments/${id}`, {
+                method: 'PATCH',
+                body: payload,
+            })
+            const idx = departments.value.findIndex(d => d.id === id)
+            if (idx >= 0) departments.value[idx] = { ...departments.value[idx], ...updated }
+            return updated
+        }
+        else {
+            const created = await $fetch<Department>('/api/hr/departments', {
+                method: 'POST',
+                body: payload,
+            })
+            departments.value = [created, ...departments.value]
+            return created
+        }
+    }
+
+    async function deleteDepartment(id: number) {
+        await $fetch(`/api/hr/departments/${id}`, { method: 'DELETE' })
+        departments.value = departments.value.filter(d => d.id !== id)
+    }
+
+    if (import.meta.client) {
+        fetchDepartments()
+    }
+
+    return { departments, loading, fetchDepartments, saveDepartment, deleteDepartment }
+}

package/app/composables/use-employee-detail.ts

@@ -0,0 +1,24 @@
+import type { InjectionKey, Ref } from "vue"
+
+export interface EmployeeDetailContext {
+    person: Ref<Person>
+    isReadonly: (tab: string) => boolean
+    onUpdated: (person: Person) => void
+}
+
+const EMPLOYEE_DETAIL_KEY: InjectionKey<EmployeeDetailContext> =
+    Symbol("hr-employee-detail")
+
+export function provideEmployeeDetail(ctx: EmployeeDetailContext) {
+    provide(EMPLOYEE_DETAIL_KEY, ctx)
+}
+
+export function useEmployeeDetail(): EmployeeDetailContext {
+    const ctx = inject(EMPLOYEE_DETAIL_KEY)
+    if (!ctx) {
+        throw new Error(
+            "useEmployeeDetail() must be called within the employee detail layout",
+        )
+    }
+    return ctx
+}

package/app/composables/use-holidays.ts

@@ -0,0 +1,48 @@
+export function useHolidays() {
+    const holidays = useState<CompanyHoliday[]>('holidays', () => [])
+    const loading = useState('holidays.loading', () => false)
+
+    async function fetchHolidays(year?: number) {
+        loading.value = true
+        try {
+            const res = await $fetch<any>('/api/hr/holidays', { query: year ? { year: String(year) } : {} })
+            holidays.value = (res?.data ?? res) ?? []
+        }
+        finally {
+            loading.value = false
+        }
+    }
+
+    async function createHoliday(payload: Partial<CompanyHoliday>) {
+        const res = await $fetch<any>('/api/hr/holidays', { method: 'POST', body: payload })
+        await fetchHolidays()
+        return res?.data ?? res
+    }
+
+    async function updateHoliday(id: number, payload: Partial<CompanyHoliday>) {
+        const res = await $fetch<any>(`/api/hr/holidays/${id}`, { method: 'PATCH', body: payload })
+        await fetchHolidays()
+        return res?.data ?? res
+    }
+
+    async function deleteHoliday(id: number) {
+        await $fetch(`/api/hr/holidays/${id}`, { method: 'DELETE' })
+        holidays.value = holidays.value.filter(h => h.id !== id)
+    }
+
+    async function copyFromPreviousYear(targetYear: number) {
+        const res = await $fetch<any>('/api/hr/holidays/copy', { method: 'POST', body: { target_year: targetYear } })
+        await fetchHolidays(targetYear)
+        return res?.data ?? res
+    }
+
+    return {
+        holidays,
+        loading,
+        fetchHolidays,
+        createHoliday,
+        updateHoliday,
+        deleteHoliday,
+        copyFromPreviousYear,
+    }
+}