@codihaus/odp-app-hr 0.1.0

package/app/components/hr/person/document/template-edit-drawer.vue

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { renderTemplateHtml } from '../../../../../shared/utils/template-render'
+import { PLACEHOLDER_HINTS_PERSON } from '../../../../../shared/utils/template-render'
+
+const props = defineProps<{ open: boolean, templateId: string | null }>()
+const emit = defineEmits<{ "update:open": [v: boolean], "archived": [] }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { templates, fetchTemplates, saveTemplate, archiveTemplate } = useTemplates()
+
+const template = computed<any | undefined>(() =>
+    props.templateId ? templates.value.find((tpl: any) => tpl.id === props.templateId) : undefined,
+)
+
+const SAMPLE_CONTEXT = {
+    person: {
+        full_name: 'Nguyen Van A',
+        employee_id: 'EMP-2026-001',
+        job_title: 'Software Engineer',
+        department: 'Engineering',
+        start_date: '2026-01-15',
+        probation_end: '2026-04-15',
+        email: 'nguyen.van.a@example.com',
+    },
+    today: new Date().toISOString().slice(0, 10),
+    company: { name: 'Your Company' },
+}
+
+const previewHtml = computed(() =>
+    template.value ? renderTemplateHtml(template.value.body_markdown ?? '', SAMPLE_CONTEXT) : '',
+)
+
+const CATEGORIES = [
+    { label: t('hr.templates.categories.general'), value: 'general' },
+    { label: t('hr.templates.categories.recruitment'), value: 'recruitment' },
+    { label: t('hr.templates.categories.onboarding'), value: 'onboarding' },
+    { label: t('hr.templates.categories.employment'), value: 'employment' },
+    { label: t('hr.templates.categories.offboarding'), value: 'offboarding' },
+    { label: t('hr.templates.categories.assets'), value: 'assets' },
+]
+
+const form = ref<{ name: string, category: string, body_markdown: string }>({
+    name: '',
+    category: 'general',
+    body_markdown: '',
+})
+
+watch(() => template.value, (tpl) => {
+    if (tpl) {
+        form.value = {
+            name: tpl.name ?? '',
+            category: tpl.category ?? 'general',
+            body_markdown: tpl.body_markdown ?? '',
+        }
+    }
+}, { immediate: true })
+
+const saving = ref(false)
+
+async function onSave() {
+    if (!template.value) return
+    saving.value = true
+    try {
+        await saveTemplate(template.value.id, form.value)
+        await fetchTemplates()
+        toast.add({ title: t('hr.templates.toast.saved'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        saving.value = false
+    }
+}
+
+async function onArchive() {
+    if (!template.value) return
+    try {
+        await archiveTemplate(template.value.id)
+        await fetchTemplates()
+        toast.add({ title: t('hr.templates.toast.archived'), color: 'success' })
+        emit('archived')
+        emit('update:open', false)
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+}
+</script>
+
+<template>
+    <USlideover
+        :open="open"
+        :ui="{ content: 'w-full sm:max-w-[1000px]' }"
+        @update:open="(v) => emit('update:open', v)"
+    >
+        <template #header>
+            <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-2">
+                    <UIcon
+                        name="i-ph-file-doc-light"
+                        class="size-5 text-muted"
+                    />
+                    <h2 class="text-base font-semibold">
+                        {{ template?.name ?? t('hr.templates.edit') }}
+                    </h2>
+                    <UBadge
+                        v-if="template"
+                        :label="template.category"
+                        variant="subtle"
+                        color="neutral"
+                        size="md"
+                    />
+                    <UBadge
+                        v-if="template?.is_archived"
+                        :label="t('hr.documents.status.archived')"
+                        color="warning"
+                        variant="subtle"
+                        size="md"
+                    />
+                </div>
+            </div>
+        </template>
+
+        <template #body>
+            <div
+                v-if="template"
+                class="grid grid-cols-2 gap-4 h-full"
+            >
+                <!-- Editor side -->
+                <div class="space-y-3 overflow-y-auto pr-1">
+                    <UFormField :label="t('hr.templates.fields.name')">
+                        <UInput
+                            v-model="form.name"
+                            size="sm"
+                        />
+                    </UFormField>
+                    <UFormField :label="t('hr.templates.fields.category')">
+                        <USelect
+                            v-model="form.category"
+                            :items="CATEGORIES"
+                            value-key="value"
+                            label-key="label"
+                            size="sm"
+                        />
+                    </UFormField>
+                    <UFormField :label="t('hr.templates.fields.body')">
+                        <UTextarea
+                            v-model="form.body_markdown"
+                            :rows="22"
+                            class="font-mono text-xs"
+                        />
+                    </UFormField>
+                    <details class="text-xs">
+                        <summary class="cursor-pointer text-muted hover:text-default">
+                            {{ t('hr.templates.placeholder_hint') }}
+                        </summary>
+                        <div class="mt-2 flex flex-wrap gap-1.5">
+                            <code
+                                v-for="ph in PLACEHOLDER_HINTS_PERSON"
+                                :key="ph"
+                                class="bg-elevated px-1.5 py-0.5 rounded text-xs"
+                            >{{ ph }}</code>
+                        </div>
+                    </details>
+                </div>
+
+                <!-- Preview side -->
+                <div class="space-y-2 overflow-y-auto">
+                    <div class="text-xs text-muted">
+                        {{ t('hr.templates.preview') }} · {{ SAMPLE_CONTEXT.person.full_name }}
+                    </div>
+                    <div
+                        class="rounded-lg border border-default bg-default p-4 prose prose-sm max-w-none"
+                        v-html="previewHtml"
+                    />
+                </div>
+            </div>
+            <div
+                v-else
+                class="p-8 text-center text-muted text-sm"
+            >
+                {{ t('common.no_data') }}
+            </div>
+        </template>
+
+        <template #footer>
+            <div class="flex items-center justify-between w-full">
+                <UButton
+                    v-if="template && !template.is_archived"
+                    size="sm"
+                    color="neutral"
+                    variant="soft"
+                    icon="i-ph-archive-light"
+                    :label="t('common.delete')"
+                    @click="onArchive"
+                />
+                <div class="flex-1" />
+                <UButton
+                    size="sm"
+                    variant="outline"
+                    :label="t('common.close')"
+                    @click="emit('update:open', false)"
+                />
+                <UButton
+                    size="sm"
+                    :label="t('common.save')"
+                    :loading="saving"
+                    @click="onSave"
+                />
+            </div>
+        </template>
+    </USlideover>
+</template>

package/app/components/hr/person/document/template-preview-card.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { renderTemplateHtml } from '../../../../../shared/utils/template-render'
+
+const props = defineProps<{
+    template: any
+    selected: boolean
+}>()
+const emit = defineEmits<{ "update:selected": [v: boolean] }>()
+
+const previewRef = ref<HTMLElement | null>(null)
+
+const html = computed(() => renderTemplateHtml(props.template.body_markdown ?? '', {}))
+
+defineExpose({ getEl: () => previewRef.value })
+</script>
+
+<template>
+    <div class="border border-default rounded">
+        <div class="flex items-center justify-between px-3 py-2 border-b border-default bg-elevated">
+            <label class="flex items-center gap-2 text-sm">
+                <UCheckbox
+                    :model-value="selected"
+                    @update:model-value="(v) => emit('update:selected', !!v)"
+                />
+                <span class="font-medium">{{ template.name }}</span>
+                <UBadge
+                    variant="subtle"
+                    color="neutral"
+                    size="md"
+                >{{ template.category }}</UBadge>
+            </label>
+        </div>
+        <div
+            ref="previewRef"
+            class="p-4 prose prose-sm max-w-none"
+            v-html="html"
+        />
+    </div>
+</template>

package/app/components/hr/person/document/trigger-modal.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import HrTemplatePreviewCard from "./template-preview-card.vue"
+
+const props = defineProps<{
+    open: boolean
+    event: string
+    personId: string
+}>()
+const emit = defineEmits<{ close: [] }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const api = useHrApi()
+
+const { triggers, fetchTriggers } = useTriggers()
+const { templates, fetchTemplates } = useTemplates()
+
+const trigger = computed(() => triggers.value.find(tr => tr.event_key === props.event))
+const templateList = computed(() =>
+    (trigger.value?.template_ids ?? [])
+        .map((id: string) => templates.value.find((tpl: any) => tpl.id === id))
+        .filter((t: any): t is NonNullable<typeof t> => !!t),
+)
+
+const selected = ref<Record<string, boolean>>({})
+const generating = ref(false)
+
+watch(() => props.open, (v) => {
+    if (v) {
+        fetchTriggers()
+        fetchTemplates()
+        selected.value = Object.fromEntries(templateList.value.map((t: any) => [t.id, true]))
+    }
+})
+
+watch(templateList, (list) => {
+    selected.value = Object.fromEntries(list.map((t: any) => [t.id, true]))
+})
+
+const eventLabel: Record<string, string> = {
+    on_offer_sent: t('hr.triggers.events.on_offer_sent'),
+    on_hire: t('hr.triggers.events.on_hire'),
+    on_probation_end: t('hr.triggers.events.on_probation_end'),
+    on_resign: t('hr.triggers.events.on_resign'),
+    on_asset_issued: t('hr.triggers.events.on_asset_issued'),
+    on_asset_returned: t('hr.triggers.events.on_asset_returned'),
+}
+
+const selectedCount = computed(() => Object.values(selected.value).filter(v => v).length)
+
+async function generateAll() {
+    generating.value = true
+    try {
+        for (const tpl of templateList.value) {
+            if (!selected.value[tpl.id]) continue
+            await api.generateDocument(props.personId, tpl.id)
+        }
+        toast.add({ title: t('hr.documents.toast.generated'), color: 'success' })
+        emit('close')
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        generating.value = false
+    }
+}
+</script>
+
+<template>
+    <UModal
+        :open="open"
+        :ui="{ content: 'sm:max-w-4xl' }"
+        @update:open="(v) => !v && emit('close')"
+    >
+        <template #content>
+            <UCard>
+                <div class="space-y-3 text-sm">
+                    <h3 class="font-semibold">
+                        {{ t('hr.documents.trigger_modal.title') }} — {{ eventLabel[event] ?? event }}
+                    </h3>
+                    <p
+                        v-if="!templateList.length"
+                        class="text-muted"
+                    >
+                        {{ t('hr.documents.trigger_modal.hint') }}
+                    </p>
+                    <div
+                        v-else
+                        class="space-y-3 max-h-[60vh] overflow-y-auto pr-2"
+                    >
+                        <HrTemplatePreviewCard
+                            v-for="tpl in templateList"
+                            :key="tpl.id"
+                            :template="tpl"
+                            :selected="!!selected[tpl.id]"
+                            @update:selected="(v) => (selected[tpl.id] = v)"
+                        />
+                    </div>
+                    <div class="flex justify-end gap-2 pt-2">
+                        <UButton
+                            variant="soft"
+                            color="neutral"
+                            @click="emit('close')"
+                        >
+                            {{ t('common.cancel') }}
+                        </UButton>
+                        <UButton
+                            :disabled="!templateList.length || selectedCount === 0"
+                            :loading="generating"
+                            icon="i-ph-file-pdf-light"
+                            @click="generateAll"
+                        >
+                            {{ t('hr.documents.trigger_modal.generate', { count: selectedCount }) }}
+                        </UButton>
+                    </div>
+                </div>
+            </UCard>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/person/employee-form-modal.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const open = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ created: [person: Person] }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { createPerson } = usePeople()
+
+const form = ref<Record<string, any>>({})
+const saving = ref(false)
+
+const EMPLOYEE_FIELD_NAMES = [
+    'first_name', 'last_name', 'email', 'phone',
+    'job_title', 'department_id', 'employment_type_id', 'start_date',
+]
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_people'])
+
+const formFields = computed(() => pickFields('hr_people', EMPLOYEE_FIELD_NAMES))
+
+watch(open, (v) => {
+    if (v) {
+        form.value = {}
+        fetchAll()
+    }
+})
+
+const canSave = computed(() => !!form.value.first_name?.trim())
+
+async function save() {
+    if (!canSave.value) return
+    saving.value = true
+    try {
+        const person = await createPerson({ ...form.value, stage: 'probation' })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        open.value = false
+        emit('created', person)
+    }
+    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.employees.actions.add') }}
+                </h3>
+
+                <div v-if="!isReady('hr_people')" class="py-6 text-sm text-muted text-center">
+                    {{ $t('common.loading') }}
+                </div>
+                <FormRoot
+                    v-else-if="formFields.length"
+                    v-model="form"
+                    :fields="formFields"
+                    :initial-values="{}"
+                />
+
+                <div class="flex justify-end gap-2 pt-2">
+                    <UButton :label="$t('common.cancel')" variant="ghost" @click="open = false" />
+                    <UButton
+                        :label="$t('common.save')"
+                        color="primary"
+                        :disabled="!canSave"
+                        :loading="saving"
+                        @click="save"
+                    />
+                </div>
+            </div>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/person/form-modal.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const open = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ saved: [person: Person] }>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { createPerson } = usePeople()
+
+const form = ref<Record<string, any>>({})
+const saving = ref(false)
+
+const TALENT_FIELD_NAMES = [
+    'first_name', 'last_name', 'email', 'phone',
+    'desired_position', 'source',
+]
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_people'])
+
+const formFields = computed(() => pickFields('hr_people', TALENT_FIELD_NAMES))
+
+watch(open, (v) => {
+    if (v) {
+        form.value = {}
+        fetchAll()
+    }
+})
+
+const canSave = computed(() => !!form.value.first_name?.trim())
+
+async function save() {
+    if (!canSave.value) return
+    saving.value = true
+    try {
+        const person = await createPerson({ ...form.value, stage: 'talent' })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        open.value = false
+        emit('saved', person)
+    }
+    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.talents.actions.add') }}
+                </h3>
+
+                <div v-if="!isReady('hr_people')" class="py-6 text-sm text-muted text-center">
+                    {{ $t('common.loading') }}
+                </div>
+                <FormRoot
+                    v-else-if="formFields.length"
+                    v-model="form"
+                    :fields="formFields"
+                    :initial-values="{}"
+                />
+
+                <div class="flex justify-end gap-2 pt-2">
+                    <UButton :label="$t('common.cancel')" variant="ghost" @click="open = false" />
+                    <UButton
+                        :label="$t('common.save')"
+                        color="primary"
+                        :disabled="!canSave"
+                        :loading="saving"
+                        @click="save"
+                    />
+                </div>
+            </div>
+        </template>
+    </UModal>
+</template>

package/app/components/hr/person/list-row.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import HrPersonStageBadge from "../shared/stage-badge.vue"
+
+defineProps<{
+    person: Person
+    columns: ("source" | "desired_position" | "employee_id" | "job_title" | "start_date")[]
+}>()
+</script>
+
+<template>
+    <NuxtLink
+        :to="['probation', 'active', 'resigned'].includes(person.stage) ? `/hr/employees/${person.id}` : `/hr/talents/${person.id}`"
+        class="grid grid-cols-12 gap-2 px-3 py-2 hover:bg-elevated rounded items-center text-sm"
+    >
+        <div class="col-span-3 font-medium truncate">{{ person.display_name }}</div>
+        <div
+            v-if="columns.includes('source')"
+            class="col-span-2 text-muted truncate"
+        >{{ person.source ?? '—' }}</div>
+        <div
+            v-if="columns.includes('desired_position')"
+            class="col-span-3 truncate"
+        >{{ person.desired_position ?? '—' }}</div>
+        <div
+            v-if="columns.includes('employee_id')"
+            class="col-span-2 text-muted truncate"
+        >{{ person.employee_id ?? '—' }}</div>
+        <div
+            v-if="columns.includes('job_title')"
+            class="col-span-2 truncate"
+        >{{ person.job_title ?? '—' }}</div>
+        <div
+            v-if="columns.includes('start_date')"
+            class="col-span-2 text-muted"
+        >{{ person.start_date ?? '—' }}</div>
+        <div class="col-span-2 flex justify-end">
+            <HrPersonStageBadge :stage="person.stage" />
+        </div>
+    </NuxtLink>
+</template>