@codihaus/odp-app-hr 0.1.0

package/app/components/hr/person/activity/timeline.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+const { $api } = useNuxtApp()
+import HrInfoSection from "../../shared/section.vue"
+
+const props = defineProps<{
+    personId: string
+    notes?: HrNote[]
+    loading?: boolean
+}>()
+
+const transitions = ref<StageTransition[]>([])
+const transitionsLoading = ref(true)
+
+onMounted(async () => {
+    try {
+        const res = await $api<StageTransition[] | { data: StageTransition[] }>(`/hr/people/${props.personId}/transitions`)
+        transitions.value = Array.isArray(res) ? res : (res.data ?? [])
+    }
+    catch {
+        transitions.value = []
+    }
+    finally {
+        transitionsLoading.value = false
+    }
+})
+
+function userName(user: any): string {
+    if (!user) return ''
+    if (typeof user === 'object') return user.first_name ? `${user.first_name} ${user.last_name ?? ''}`.trim() : (user.email ?? '')
+    return String(user).slice(0, 8)
+}
+
+interface TimelineEntry { at: string, title: string, sub?: string, by?: string, icon: string, color: string }
+
+const entries = computed<TimelineEntry[]>(() => {
+    const out: TimelineEntry[] = []
+    for (const tr of transitions.value) {
+        out.push({
+            at: tr.date_created,
+            title: tr.from_stage ? `${tr.from_stage} → ${tr.to_stage}` : `Created at ${tr.to_stage}`,
+            sub: tr.reason,
+            by: userName(tr.performed_by),
+            icon: "i-ph-flow-arrow-light",
+            color: "text-primary",
+        })
+    }
+    for (const n of (props.notes ?? [])) {
+        out.push({
+            at: n.date_created,
+            title: "Note",
+            sub: n.body,
+            by: userName((n as any).author_id ?? n.author),
+            icon: "i-ph-note-light",
+            color: "text-muted",
+        })
+    }
+    return out.sort((a, b) => b.at.localeCompare(a.at))
+})
+
+const isLoading = computed(() => props.loading || transitionsLoading.value)
+</script>
+
+<template>
+    <div>
+        <HrInfoSection
+            title="Activity Timeline"
+            icon="i-ph-clock-light"
+        >
+            <div
+                v-if="isLoading"
+                class="p-6 text-muted text-sm"
+            >
+                <UIcon
+                    name="i-ph-spinner"
+                    class="animate-spin size-5 mx-auto"
+                />
+            </div>
+            <div
+                v-else-if="!entries.length"
+                class="p-6 text-muted text-sm"
+            >
+                No activity yet.
+            </div>
+            <ol
+                v-else
+                class="divide-y divide-default"
+            >
+                <li
+                    v-for="(e, i) in entries"
+                    :key="i"
+                    class="flex items-start gap-3 px-4 py-3 hover:bg-elevated/30 transition-colors"
+                >
+                    <UIcon
+                        :name="e.icon"
+                        :class="['size-5 shrink-0 mt-0.5', e.color]"
+                    />
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-baseline gap-2">
+                            <span class="font-medium text-sm text-default">{{ e.title }}</span>
+                            <span
+                                v-if="e.by"
+                                class="text-xs text-muted"
+                            >by {{ e.by }}</span>
+                        </div>
+                        <div
+                            v-if="e.sub"
+                            class="text-muted text-xs mt-0.5"
+                        >
+                            {{ e.sub }}
+                        </div>
+                    </div>
+                    <div class="text-muted text-xs whitespace-nowrap shrink-0">
+                        {{ e.at.slice(0, 10) }}
+                    </div>
+                </li>
+            </ol>
+        </HrInfoSection>
+    </div>
+</template>

package/app/components/hr/person/detail.vue

@@ -0,0 +1,303 @@
+<script lang="ts" setup>
+import HrTabProfile from "./profile/tab.vue";
+import HrTabRecruitment from "../talents/tab.vue";
+import HrTabActivity from "./activity/tab.vue";
+import HrTabEmployment from "../employees/tab.vue";
+import HrPersonTabAssets from "../employees/assets/tab.vue";
+import HrTabProvisioning from "../employees/provisioning/tab.vue";
+import HrPersonStageBadge from "../shared/stage-badge.vue";
+
+const props = defineProps<{
+    person: Person;
+    backTo: string;
+    enabledTabs: string[];
+    readonlyTabs?: string[];
+}>();
+
+const { t } = useI18n();
+const toast = useToast();
+const { hire } = usePeople();
+
+const localPerson = ref<Person>({ ...props.person });
+
+const acting = ref(false);
+
+const TALENT_PIPELINE = ["talent", "interviewing", "offer"];
+const isTalent = computed(() => TALENT_PIPELINE.includes(localPerson.value.stage));
+
+// Step-by-step pipeline advance (talent → interviewing → offer). Hiring is a separate action.
+const nextStageAction = computed<{ to: string; label: string } | null>(() => {
+    switch (localPerson.value.stage) {
+        case "talent":
+            return { to: "interviewing", label: t("hr.actions.move_to_interviewing") };
+        case "interviewing":
+            return { to: "offer", label: t("hr.actions.send_offer") };
+        default:
+            return null;
+    }
+});
+
+async function onStageAction() {
+    const action = nextStageAction.value;
+    if (!action) return;
+    acting.value = true;
+    try {
+        await $fetch(`/api/hr/people/${localPerson.value.id}/transition`, {
+            method: "POST",
+            body: { to: action.to, reason: "" },
+        });
+        localPerson.value = { ...localPerson.value, stage: action.to };
+        toast.add({ title: t("hr.toast.stage_changed", { stage: action.to }), color: "success" });
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" });
+    } finally {
+        acting.value = false;
+    }
+}
+
+// Direct convert to employee (any talent stage → probation), with confirmation
+const showConvert = ref(false);
+const convertForm = ref({ start_date: new Date().toISOString().slice(0, 10), reason: "" });
+
+function openConvert() {
+    convertForm.value = { start_date: new Date().toISOString().slice(0, 10), reason: "" };
+    showConvert.value = true;
+}
+
+async function onConvertConfirm() {
+    acting.value = true;
+    try {
+        await hire(String(localPerson.value.id), {
+            reason: convertForm.value.reason,
+            start_date: convertForm.value.start_date,
+        });
+        showConvert.value = false;
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" });
+    } finally {
+        acting.value = false;
+    }
+}
+
+watch(
+    () => props.person,
+    (p) => {
+        localPerson.value = { ...p };
+    },
+);
+
+const EMPLOYEE_STAGES = ["probation", "active", "resigned"];
+
+const TALENT_STAGES = ["talent", "interviewing", "offer"];
+
+const BASE_TAB_DEFS: { id: string; label: string; icon: string }[] = [
+    { id: "profile", label: t("hr.tabs.profile"), icon: "i-ph-user-light" },
+    { id: "activity", label: t("hr.tabs.activity"), icon: "i-ph-clock-light" },
+];
+
+const allTabDefs = computed(() => {
+    const tabs = [...BASE_TAB_DEFS];
+
+    if (TALENT_STAGES.includes(localPerson.value.stage)) {
+        tabs.splice(1, 0, {
+            id: "recruitment",
+            label: t("hr.tabs.recruitment"),
+            icon: "i-ph-clipboard-text-light",
+        });
+    }
+
+    if (EMPLOYEE_STAGES.includes(localPerson.value.stage)) {
+        tabs.splice(1, 0, {
+            id: "employment",
+            label: t("hr.tabs.employment"),
+            icon: "i-ph-briefcase-light",
+        });
+        const empIdx = tabs.findIndex((tab) => tab.id === "employment");
+        tabs.splice(empIdx + 1, 0, {
+            id: "assets",
+            label: t("assets.tab_label"),
+            icon: "i-heroicons-computer-desktop",
+        });
+        const assetsIdx = tabs.findIndex((tab) => tab.id === "assets");
+        tabs.splice(assetsIdx + 1, 0, {
+            id: "provisioning",
+            label: t("hr.tabs.provisioning"),
+            icon: "i-ph-plugs-connected-light",
+        });
+    }
+
+    return tabs;
+});
+
+const tabItems = computed(() =>
+    allTabDefs.value.map((tab) => ({
+        label: tab.label,
+        icon: tab.icon,
+        value: tab.id,
+    })),
+);
+const activeTab = ref(props.enabledTabs[0] ?? "profile");
+
+watch(
+    () => props.enabledTabs,
+    (tabs) => {
+        if (!tabs.includes(activeTab.value))
+            activeTab.value = tabs[0] ?? "profile";
+    },
+);
+
+const isRO = (tab: string) => props.readonlyTabs?.includes(tab) ?? false;
+
+const subtitle = computed(() => {
+    const p = localPerson.value;
+    const bits: string[] = [];
+    if (p.job_title) bits.push(p.job_title);
+    if (p.desired_position && !p.job_title) bits.push(p.desired_position);
+    if (p.employee_id) bits.push(p.employee_id);
+    return bits.join(" · ");
+});
+</script>
+
+<template>
+    <UDashboardPanel>
+        <template #header>
+            <UDashboardNavbar
+                :title="localPerson.display_name"
+                :ui="{ title: 'text-lg font-semibold' }"
+            >
+                <template #leading>
+                    <UButton
+                        icon="i-ph-arrow-left-light"
+                        variant="ghost"
+                        size="sm"
+                        @click="navigateTo(backTo)"
+                    />
+                </template>
+
+                <template #right>
+                    <span
+                        v-if="subtitle"
+                        class="text-xs text-muted hidden lg:inline"
+                        >{{ subtitle }}</span
+                    >
+                    <UButton
+                        v-if="nextStageAction"
+                        size="sm"
+                        color="neutral"
+                        variant="soft"
+                        icon="i-ph-arrow-right-light"
+                        :label="nextStageAction.label"
+                        :disabled="acting"
+                        @click="onStageAction"
+                    />
+                    <UButton
+                        v-if="isTalent"
+                        size="sm"
+                        color="primary"
+                        variant="solid"
+                        icon="i-ph-user-switch-light"
+                        :label="$t('hr.convert.action')"
+                        :disabled="acting"
+                        @click="openConvert"
+                    />
+                </template>
+            </UDashboardNavbar>
+        </template>
+
+        <template #body>
+            <div class="flex flex-col h-full">
+                <UTabs
+                    v-model="activeTab"
+                    :items="tabItems"
+                    variant="link"
+                    :content="false"
+                />
+
+                <div class="flex-1 overflow-auto py-6">
+                    <HrTabProfile
+                        v-if="activeTab === 'profile'"
+                        :person="localPerson"
+                        :readonly="isRO('profile')"
+                    />
+                    <HrTabRecruitment
+                        v-else-if="activeTab === 'recruitment'"
+                        :person-id="localPerson.id"
+                    />
+                    <HrTabEmployment
+                        v-else-if="activeTab === 'employment'"
+                        :person="localPerson"
+                        :readonly="isRO('employment')"
+                    />
+                    <HrPersonTabAssets
+                        v-else-if="activeTab === 'assets'"
+                        :person="localPerson"
+                        :readonly="isRO('assets')"
+                    />
+                    <HrTabProvisioning
+                        v-else-if="activeTab === 'provisioning'"
+                        :person="localPerson"
+                        :readonly="isRO('provisioning')"
+                    />
+                    <HrTabActivity
+                        v-else-if="activeTab === 'activity'"
+                        :person-id="localPerson.id"
+                        :readonly="isRO('activity')"
+                    />
+                </div>
+            </div>
+        </template>
+    </UDashboardPanel>
+
+    <UModal
+        :open="showConvert"
+        :title="$t('hr.convert.title')"
+        @update:open="showConvert = $event"
+    >
+        <template #body>
+            <div class="space-y-4">
+                <p class="text-sm text-muted">
+                    {{ $t('hr.convert.description', { name: localPerson.display_name }) }}
+                </p>
+                <div class="flex items-center gap-2 text-sm">
+                    <HrPersonStageBadge :stage="localPerson.stage" />
+                    <UIcon name="i-ph-arrow-right-light" class="size-4 text-muted" />
+                    <HrPersonStageBadge stage="probation" />
+                </div>
+                <ul class="text-xs text-muted list-disc pl-5 space-y-1">
+                    <li>{{ $t('hr.convert.note_employee_id') }}</li>
+                    <li>{{ $t('hr.convert.note_moved') }}</li>
+                </ul>
+                <UFormField :label="$t('hr.convert.start_date')" required>
+                    <UInput v-model="convertForm.start_date" type="date" class="w-full" />
+                </UFormField>
+                <UFormField :label="$t('hr.convert.reason')">
+                    <UTextarea
+                        v-model="convertForm.reason"
+                        :rows="2"
+                        :placeholder="$t('hr.stages.reason_placeholder')"
+                        class="w-full"
+                    />
+                </UFormField>
+            </div>
+        </template>
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <UButton
+                    color="neutral"
+                    variant="outline"
+                    :label="$t('common.cancel')"
+                    :disabled="acting"
+                    @click="showConvert = false"
+                />
+                <UButton
+                    color="primary"
+                    icon="i-ph-user-switch-light"
+                    :label="$t('hr.convert.action')"
+                    :loading="acting"
+                    :disabled="!convertForm.start_date"
+                    @click="onConvertConfirm"
+                />
+            </div>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/person/document/tab-documents.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import HrInfoSection from "../../shared/section.vue"
+
+const props = defineProps<{ personId: string, readonly?: boolean }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const api = useHrApi()
+
+const documents = ref<any[]>([])
+const loading = ref(false)
+
+const STATUS_COLOR: Record<string, "success" | "warning" | "error" | "neutral"> = {
+    generated: "success",
+    signed: "success",
+    pending: "warning",
+    expired: "error",
+    archived: "neutral",
+}
+
+async function fetchDocuments() {
+    loading.value = true
+    try {
+        documents.value = await api.listDocuments(props.personId)
+    }
+    catch { /* noop */ }
+    finally {
+        loading.value = false
+    }
+}
+
+async function deleteDocument(docId: string) {
+    try {
+        await api.deleteDocument(props.personId, docId)
+        documents.value = documents.value.filter(d => d.id !== docId)
+        toast.add({ title: t('hr.documents.toast.deleted'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+}
+
+onMounted(fetchDocuments)
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <HrInfoSection
+            :title="t('hr.documents.title')"
+            icon="i-ph-folder-light"
+        >
+            <div
+                v-if="loading"
+                class="p-6 text-muted text-sm"
+            >
+                {{ t('common.loading') }}
+            </div>
+            <div
+                v-else-if="!documents.length"
+                class="p-6 text-muted text-sm"
+            >
+                {{ t('hr.documents.empty') }}
+            </div>
+            <div
+                v-else
+                class="divide-y divide-default"
+            >
+                <div
+                    v-for="d in documents"
+                    :key="d.id"
+                    class="flex items-center gap-3 px-4 py-3 hover:bg-elevated/30 transition-colors"
+                >
+                    <UIcon
+                        name="i-ph-file-text-light"
+                        class="size-5 text-muted shrink-0"
+                    />
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium text-default truncate">
+                            {{ d.name }}
+                        </div>
+                        <div class="text-xs text-muted">
+                            {{ d.category }} · {{ d.date_created }}
+                        </div>
+                    </div>
+                    <UBadge
+                        :color="STATUS_COLOR[d.status] ?? 'neutral'"
+                        variant="subtle"
+                        size="md"
+                    >
+                        {{ t(`hr.documents.status.${d.status}`) }}
+                    </UBadge>
+                    <UBadge
+                        v-if="d.status === 'generated'"
+                        color="info"
+                        variant="subtle"
+                        size="md"
+                    >
+                        {{ t('hr.documents.status.generated') }}
+                    </UBadge>
+                    <UButton
+                        v-if="d.file?.id"
+                        :to="`/assets/${d.file.id}`"
+                        target="_blank"
+                        size="xs"
+                        variant="ghost"
+                        icon="i-ph-download-simple-light"
+                    />
+                    <UButton
+                        v-if="!readonly"
+                        size="xs"
+                        variant="ghost"
+                        color="error"
+                        icon="i-ph-trash-light"
+                        @click="deleteDocument(d.id)"
+                    />
+                </div>
+            </div>
+        </HrInfoSection>
+    </div>
+</template>