@codihaus/odp-app-hr 0.1.0

package/app/components/hr/person/profile/tab.vue

@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import HrInfoSection from "../../shared/section.vue";
+import HrInfoRow from "../../shared/row.vue";
+import HrPersonStageBadge from "../../shared/stage-badge.vue";
+
+const props = defineProps<{ person: Person; readonly?: boolean }>();
+const emit = defineEmits<{ updated: [person: Person] }>();
+
+const api = useHrApi();
+const toast = useToast();
+const { t } = useI18n();
+
+const editing = ref(false);
+const saving = ref(false);
+const edits = ref<Record<string, any>>({});
+
+const initials = computed(() => {
+    const parts = props.person.display_name.trim().split(/\s+/);
+    if (parts.length === 1) return (parts[0] ?? "?").slice(0, 2).toUpperCase();
+    return (
+        (parts[0]?.[0] ?? "") + (parts[parts.length - 1]?.[0] ?? "")
+    ).toUpperCase();
+});
+
+const tenure = computed(() => {
+    if (!props.person.start_date) return null;
+    const start = new Date(props.person.start_date).getTime();
+    if (Number.isNaN(start)) return null;
+    const years = (Date.now() - start) / (365.25 * 86400000);
+    if (years < 1) {
+        const months = Math.round(years * 12);
+        return `${months} month${months === 1 ? "" : "s"}`;
+    }
+    return `${years.toFixed(1)} years`;
+});
+
+function startEdit() {
+    edits.value = { ...props.person };
+    editing.value = true;
+}
+
+function cancelEdit() {
+    editing.value = false;
+    edits.value = {};
+}
+
+async function save() {
+    saving.value = true;
+    try {
+        const updated = await api.updatePerson(
+            String(props.person.id),
+            edits.value,
+        );
+        emit("updated", updated);
+        toast.add({ title: t("hr.toast.saved"), color: "success" });
+        editing.value = false;
+    } catch {
+        toast.add({ title: t("hr.toast.error"), color: "error" });
+    } finally {
+        saving.value = false;
+    }
+}
+
+const PROFILE_FIELD_NAMES = [
+    "first_name",
+    "last_name",
+    "email",
+    "phone",
+    "date_of_birth",
+    "gender",
+    "nationality",
+    "id_number",
+    "desired_position",
+    "source",
+    "department_id",
+    "employment_type_id",
+    "job_title",
+    "employee_id",
+    "start_date",
+];
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(["hr_people"]);
+
+const profileFields = computed(() =>
+    pickFields("hr_people", PROFILE_FIELD_NAMES),
+);
+
+onMounted(fetchAll);
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Header -->
+        <div class="flex items-start gap-6 flex-wrap">
+            <UAvatar
+                :text="initials"
+                size="xl"
+                class="bg-primary/10 text-primary font-semibold"
+            />
+            <div class="flex-1 min-w-0">
+                <h2 class="text-xl font-semibold text-default">
+                    {{ person.display_name }}
+                </h2>
+                <p
+                    v-if="person.job_title || person.desired_position"
+                    class="text-sm text-muted mt-0.5"
+                >
+                    {{ person.job_title ?? person.desired_position }}
+                </p>
+                <div class="flex items-center gap-2 mt-2 flex-wrap">
+                    <HrPersonStageBadge :stage="person.stage" />
+                </div>
+            </div>
+            <UButton
+                v-if="!readonly && !editing"
+                size="xs"
+                variant="soft"
+                icon="i-ph-pencil-simple-light"
+                @click="startEdit"
+            >
+                {{ $t("common.edit") }}
+            </UButton>
+        </div>
+
+        <!-- Edit mode: FormRoot -->
+        <template v-if="editing">
+            <div
+                v-if="!isReady('hr_people')"
+                class="px-4 py-6 text-sm text-muted"
+            >
+                {{ $t("common.loading") }}
+            </div>
+            <FormRoot
+                v-else-if="profileFields.length"
+                v-model="edits"
+                :fields="profileFields"
+                :initial-values="person"
+            />
+            <div class="flex justify-end gap-2">
+                <UButton
+                    color="neutral"
+                    variant="outline"
+                    :label="$t('common.cancel')"
+                    @click="cancelEdit"
+                />
+                <UButton
+                    :loading="saving"
+                    :label="$t('common.save')"
+                    @click="save"
+                />
+            </div>
+        </template>
+
+        <!-- Read-only mode: InfoSections -->
+        <template v-else>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Contact -->
+                <HrInfoSection title="Contact" icon="i-ph-address-book-light">
+                    <HrInfoRow
+                        icon="i-ph-envelope-light"
+                        label="Email"
+                        :value="person.email"
+                    />
+                    <HrInfoRow
+                        icon="i-ph-phone-light"
+                        label="Phone"
+                        :value="person.phone"
+                    />
+                    <HrInfoRow
+                        icon="i-ph-cake-light"
+                        label="Date of birth"
+                        :value="person.date_of_birth"
+                    />
+                </HrInfoSection>
+
+                <!-- Recruitment (talents) / Employment (employees) -->
+                <HrInfoSection
+                    v-if="
+                        ['talent', 'interviewing', 'offer'].includes(
+                            person.stage,
+                        )
+                    "
+                    title="Recruitment"
+                    icon="i-ph-magnet-straight-light"
+                >
+                    <HrInfoRow
+                        icon="i-ph-briefcase-light"
+                        label="Desired position"
+                        :value="person.desired_position"
+                    />
+                    <HrInfoRow
+                        icon="i-ph-flag-light"
+                        label="Source"
+                        :value="person.source"
+                    />
+                </HrInfoSection>
+
+                <HrInfoSection
+                    v-else
+                    title="Employment"
+                    icon="i-ph-identification-badge-light"
+                >
+                    <HrInfoRow
+                        icon="i-ph-hash-light"
+                        label="Employee ID"
+                        :value="person.employee_id"
+                    />
+                    <HrInfoRow
+                        icon="i-ph-briefcase-light"
+                        label="Job title"
+                        :value="person.job_title"
+                    />
+                    <HrInfoRow
+                        v-if="person.start_date"
+                        icon="i-ph-calendar-light"
+                        label="Start date"
+                    >
+                        {{ person.start_date }}
+                        <span v-if="tenure" class="text-muted text-xs ml-1">
+                            · {{ tenure }}
+                        </span>
+                    </HrInfoRow>
+                </HrInfoSection>
+            </div>
+
+            <!-- Meta -->
+            <div class="text-xs text-muted pt-4 border-t border-default">
+                ID: {{ person.id }}
+            </div>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import type { DocumentTriggerEvent } from "../../../../shared/types"
+
+const { triggers, setTrigger } = useTriggers()
+const { templates } = useTemplates()
+
+const eventMeta: Record<DocumentTriggerEvent, { label: string, icon: string, description: string, color: "primary" | "info" | "warning" | "success" | "neutral" }> = {
+    on_offer_sent: { label: "Offer Sent", icon: "i-ph-envelope-simple-light", description: "Fires when an offer is sent to a candidate.", color: "info" },
+    on_hire: { label: "Hire", icon: "i-ph-rocket-launch-light", description: "Fires when a candidate is hired (Offer → Probation).", color: "primary" },
+    on_probation_end: { label: "Probation End", icon: "i-ph-hourglass-medium-light", description: "Fires when an employee is confirmed (Probation → Active).", color: "success" },
+    on_resign: { label: "Resign", icon: "i-ph-sign-out-light", description: "Fires when an employee resigns (Active → Resigned).", color: "warning" },
+    on_asset_issued: { label: "Asset Issued", icon: "i-ph-laptop-light", description: "Fires when an asset is issued to an employee.", color: "neutral" },
+    on_asset_returned: { label: "Asset Returned", icon: "i-ph-laptop-light", description: "Fires when an issued asset is returned.", color: "neutral" },
+}
+
+const activeTemplates = computed(() => templates.value.filter(t => !t.is_archived))
+
+function toggleTemplate(event: DocumentTriggerEvent, templateId: string, currentIds: string[], autoGenerate: boolean) {
+    const next = currentIds.includes(templateId)
+        ? currentIds.filter(id => id !== templateId)
+        : [...currentIds, templateId]
+    setTrigger(event, next, autoGenerate)
+}
+</script>
+
+<template>
+    <div class="space-y-5">
+        <p class="text-sm text-muted">
+            {{ $t('triggers.description') }}
+        </p>
+
+        <ul class="space-y-3">
+            <li
+                v-for="t in triggers"
+                :key="t.event"
+                class="rounded-lg border border-default bg-default overflow-hidden"
+            >
+                <header class="flex items-center justify-between gap-3 px-4 py-3 border-b border-default bg-elevated/30">
+                    <div class="flex items-center gap-3 min-w-0">
+                        <div
+                            class="p-2 rounded-lg shrink-0 bg-default"
+                            :class="`text-${eventMeta[t.event].color}`"
+                        >
+                            <UIcon
+                                :name="eventMeta[t.event].icon"
+                                class="size-4"
+                            />
+                        </div>
+                        <div class="min-w-0">
+                            <div class="text-sm font-medium text-default">
+                                {{ eventMeta[t.event].label }}
+                            </div>
+                            <p class="text-xs text-muted">
+                                {{ eventMeta[t.event].description }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                        <UBadge
+                            v-if="t.template_ids.length === 0"
+                            :label="$t('triggers.no_templates')"
+                            color="neutral"
+                            variant="subtle"
+                            size="md"
+                        />
+                        <UBadge
+                            v-else
+                            :label="`${t.template_ids.length} template${t.template_ids.length === 1 ? '' : 's'}`"
+                            color="primary"
+                            variant="subtle"
+                            size="md"
+                        />
+                        <USwitch
+                            :model-value="t.auto_generate"
+                            :label="$t('triggers.auto')"
+                            @update:model-value="(v) => setTrigger(t.event, t.template_ids, !!v)"
+                        />
+                    </div>
+                </header>
+
+                <div class="p-3">
+                    <div
+                        v-if="activeTemplates.length === 0"
+                        class="text-xs text-muted italic"
+                    >
+                        {{ $t('triggers.no_active_templates') }}
+                    </div>
+                    <div
+                        v-else
+                        class="flex flex-wrap gap-2"
+                    >
+                        <button
+                            v-for="tpl in activeTemplates"
+                            :key="tpl.id"
+                            type="button"
+                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors border"
+                            :class="t.template_ids.includes(tpl.id)
+                                ? 'border-primary bg-primary/10 text-primary font-medium'
+                                : 'border-default text-muted hover:bg-elevated/50 hover:text-default'"
+                            @click="toggleTemplate(t.event, tpl.id, t.template_ids, t.auto_generate)"
+                        >
+                            <UIcon
+                                :name="t.template_ids.includes(tpl.id) ? 'i-ph-check-light' : 'i-ph-plus-light'"
+                                class="size-3"
+                            />
+                            {{ tpl.name }}
+                        </button>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>

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

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import type { DocumentTemplate } from "../../../../shared/types"
+import HrTemplateEditDrawer from "../person/document/template-edit-drawer.vue"
+
+const { templates, createTemplate } = useTemplates()
+
+const drawerOpen = ref(false)
+const editingId = ref<string | null>(null)
+
+const CATEGORY_COLOR: Record<DocumentTemplate["category"], "primary" | "success" | "warning" | "info" | "neutral"> = {
+    Onboarding: "primary",
+    Probation: "info",
+    Resignation: "warning",
+    Asset: "success",
+    Misc: "neutral",
+    Other: "neutral",
+}
+
+const CATEGORY_ICON: Record<DocumentTemplate["category"], string> = {
+    Onboarding: "i-ph-rocket-launch-light",
+    Probation: "i-ph-hourglass-medium-light",
+    Resignation: "i-ph-sign-out-light",
+    Asset: "i-ph-laptop-light",
+    Misc: "i-ph-file-text-light",
+    Other: "i-ph-file-text-light",
+}
+
+function openTemplate(id: string) {
+    editingId.value = id
+    drawerOpen.value = true
+}
+
+async function newTemplate() {
+    const created = await createTemplate({
+        name: "Untitled Template",
+        category: "Misc",
+        body_markdown: "# {{full_name}}\n\nWrite your template here.",
+        available_placeholders: ["full_name"],
+    })
+    openTemplate(created.id)
+}
+
+function bodySnippet(body: string): string {
+    return body
+        .replace(/^#+\s+/gm, "")
+        .replace(/\{\{[^}]+\}\}/g, "…")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 140)
+}
+
+const groupedTemplates = computed(() => {
+    const groups = new Map<DocumentTemplate["category"], DocumentTemplate[]>()
+    for (const t of templates.value) {
+        if (t.is_archived) continue
+        const list = groups.get(t.category) ?? []
+        list.push(t)
+        groups.set(t.category, list)
+    }
+    return Array.from(groups.entries())
+})
+
+const archivedTemplates = computed(() => templates.value.filter(t => t.is_archived))
+</script>
+
+<template>
+    <div class="space-y-5">
+        <div class="flex items-start justify-between gap-4">
+            <p class="text-sm text-muted">
+                {{ $t('templates.description') }}
+            </p>
+            <UButton
+                color="primary"
+                size="sm"
+                icon="i-ph-plus-light"
+                :label="$t('templates.new')"
+                @click="newTemplate"
+            />
+        </div>
+
+        <div
+            v-if="groupedTemplates.length === 0"
+            class="rounded-xl border border-dashed border-default p-12 text-center"
+        >
+            <UIcon
+                name="i-ph-file-doc-light"
+                class="size-10 mx-auto mb-3 opacity-40"
+            />
+            <p class="text-sm font-medium text-default mb-1">
+                {{ $t('templates.empty') }}
+            </p>
+            <p class="text-xs text-muted mb-4">
+                {{ $t('templates.empty_hint') }}
+            </p>
+            <UButton
+                color="primary"
+                size="sm"
+                icon="i-ph-plus-light"
+                :label="$t('templates.new')"
+                @click="newTemplate"
+            />
+        </div>
+
+        <section
+            v-for="[category, list] in groupedTemplates"
+            :key="category"
+            class="space-y-2"
+        >
+            <div class="flex items-center gap-2 px-1">
+                <UIcon
+                    :name="CATEGORY_ICON[category]"
+                    class="size-4 text-muted"
+                />
+                <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">
+                    {{ category }}
+                </h3>
+                <span class="text-xs text-muted">· {{ list.length }}</span>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <button
+                    v-for="t in list"
+                    :key="t.id"
+                    type="button"
+                    class="text-left rounded-lg border border-default bg-default p-4 hover:border-primary/40 hover:bg-elevated/30 transition-colors group"
+                    @click="openTemplate(t.id)"
+                >
+                    <div class="flex items-start gap-3">
+                        <div class="p-2 rounded-lg shrink-0 bg-elevated">
+                            <UIcon
+                                :name="CATEGORY_ICON[t.category]"
+                                class="size-4"
+                                :class="`text-${CATEGORY_COLOR[t.category]}`"
+                            />
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2 mb-1">
+                                <div class="font-medium text-sm text-default truncate group-hover:text-primary transition-colors">
+                                    {{ t.name }}
+                                </div>
+                                <UBadge
+                                    :color="CATEGORY_COLOR[t.category]"
+                                    variant="subtle"
+                                    size="md"
+                                >
+                                    {{ t.category }}
+                                </UBadge>
+                            </div>
+                            <p class="text-xs text-muted line-clamp-2">
+                                {{ bodySnippet(t.body_markdown) }}
+                            </p>
+                            <div class="mt-2 flex items-center gap-1.5 text-xs text-muted">
+                                <UIcon
+                                    name="i-ph-brackets-curly-light"
+                                    class="size-3"
+                                />
+                                {{ t.available_placeholders.length }} placeholder{{ t.available_placeholders.length === 1 ? '' : 's' }}
+                            </div>
+                        </div>
+                        <UIcon
+                            name="i-ph-pencil-simple-line-light"
+                            class="size-4 text-muted opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                        />
+                    </div>
+                </button>
+            </div>
+        </section>
+
+        <section
+            v-if="archivedTemplates.length > 0"
+            class="space-y-2 pt-4 border-t border-default"
+        >
+            <details>
+                <summary class="cursor-pointer text-xs text-muted hover:text-default">
+                    {{ $t('templates.archived', { count: archivedTemplates.length }) }}
+                </summary>
+                <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <button
+                        v-for="t in archivedTemplates"
+                        :key="t.id"
+                        type="button"
+                        class="text-left rounded-lg border border-default bg-elevated/30 p-3 opacity-60 hover:opacity-100 transition-opacity"
+                        @click="openTemplate(t.id)"
+                    >
+                        <div class="font-medium text-sm text-default">
+                            {{ t.name }}
+                        </div>
+                        <div class="text-xs text-muted">
+                            {{ t.category }}
+                        </div>
+                    </button>
+                </div>
+            </details>
+        </section>
+
+        <HrTemplateEditDrawer
+            v-model:open="drawerOpen"
+            :template-id="editingId"
+        />
+    </div>
+</template>

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

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { LIFECYCLE_STAGES } from "../../../../shared/types/person"
+
+const { general, lifecycleLabels, setStageLabel, save, isPending } = useHrSettings()
+</script>
+
+<template>
+    <div class="space-y-5">
+        <div class="rounded-xl border border-default bg-default p-4 space-y-4">
+            <div>
+                <div class="text-sm font-semibold text-default">
+                    {{ $t('settings.general.company_defaults_title') }}
+                </div>
+                <p class="mt-0.5 text-xs text-muted">
+                    {{ $t('settings.general.company_defaults_desc') }}
+                </p>
+            </div>
+            <div class="space-y-4">
+                <UFormField :label="$t('settings.general.company_name')">
+                    <UInput
+                        v-model="general.company_name"
+                        size="sm"
+                        class="w-full max-w-md"
+                    />
+                </UFormField>
+                <UFormField
+                    :label="$t('settings.general.default_currency')"
+                    :help="$t('settings.general.default_currency_help')"
+                >
+                    <UInput
+                        v-model="general.default_currency"
+                        size="sm"
+                        class="w-full max-w-xs"
+                    />
+                </UFormField>
+                <UFormField
+                    :label="$t('settings.general.fiscal_year_start_month')"
+                    :help="$t('settings.general.fiscal_year_start_month_help')"
+                >
+                    <UInputNumber
+                        v-model="general.fiscal_year_start_month"
+                        :min="1"
+                        :max="12"
+                        size="sm"
+                        class="w-full max-w-xs"
+                    />
+                </UFormField>
+            </div>
+            <div class="pt-2">
+                <UButton
+                    color="primary"
+                    size="sm"
+                    :loading="isPending"
+                    @click="save(general)"
+                >
+                    {{ $t('common.save') }}
+                </UButton>
+            </div>
+        </div>
+
+        <div class="rounded-xl border border-default bg-default p-4 space-y-3">
+            <div>
+                <div class="text-sm font-semibold text-default">
+                    {{ $t('settings.general.stage_labels') }}
+                </div>
+                <p class="mt-0.5 text-xs text-muted">
+                    {{ $t('settings.general.stage_labels_desc') }}
+                </p>
+            </div>
+            <ul class="space-y-2">
+                <li
+                    v-for="stage in LIFECYCLE_STAGES"
+                    :key="stage"
+                    class="flex items-center gap-3"
+                >
+                    <code class="text-xs text-muted w-28 shrink-0">{{ stage }}</code>
+                    <UInput
+                        :model-value="lifecycleLabels[stage]"
+                        size="sm"
+                        class="flex-1 max-w-md"
+                        @update:model-value="(v) => setStageLabel(stage, String(v))"
+                    />
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>