@codihaus/odp-app-hr 0.1.0

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

@@ -0,0 +1,238 @@
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <template v-if="employee">
+            <!-- Status Banner -->
+            <div
+                class="flex items-center gap-4 p-4 rounded-lg border"
+                :class="employee.stage === 'active'
+                    ? 'bg-success/5 border-success/20'
+                    : employee.stage === 'probation'
+                        ? 'bg-warning/5 border-warning/20'
+                        : 'bg-neutral/5 border-default'
+                "
+            >
+                <UAvatar
+                    icon="i-ph-identification-badge-light"
+                    size="lg"
+                    class="bg-primary/10 text-primary"
+                />
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                        <h3 class="font-semibold text-default">
+                            {{ employee.employee_id }}
+                        </h3>
+                        <UBadge
+                            :label="$t(`hr.stages.${employee.stage}`)"
+                            :color="employee.stage === 'active' ? 'success' : employee.stage === 'probation' ? 'warning' : 'neutral'"
+                            variant="subtle"
+                            size="md"
+                        />
+                    </div>
+                    <p class="text-sm text-muted mt-0.5">
+                        {{ employee.department?.name }} &middot; {{ employee.job_title }} &middot; {{ employee.employment_type }}
+                    </p>
+                    <p class="text-xs text-muted mt-1">
+                        {{ $t('contacts.hr.start_date') }}: {{ employee.start_date }}
+                    </p>
+                </div>
+                <UButton
+                    icon="i-ph-arrow-square-out-light"
+                    :label="$t('contacts.hr.full_profile')"
+                    variant="outline"
+                    size="sm"
+                    @click="navigateTo(`/hr/employees/${employee.id}`)"
+                />
+            </div>
+
+            <!-- Summary grid -->
+            <div
+                v-if="isEmployee"
+                class="grid grid-cols-1 lg:grid-cols-3 gap-4"
+            >
+                <!-- Contract summary -->
+                <div class="border border-default rounded-lg p-4">
+                    <div class="flex items-center gap-2 mb-3">
+                        <UIcon
+                            name="i-ph-file-text-light"
+                            class="size-4 text-muted"
+                        />
+                        <span class="text-sm font-medium text-default">{{ $t('contacts.hr.contract') }}</span>
+                    </div>
+                    <div class="space-y-2 text-sm">
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('hr.contract.fields.contract_type') }}</span>
+                            <span class="text-default font-medium">{{ contract?.contract_type }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('contacts.hr.expires') }}</span>
+                            <span class="text-default">{{ contract?.end_date || 'Indefinite' }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Compensation summary -->
+                <div class="border border-default rounded-lg p-4">
+                    <div class="flex items-center gap-2 mb-3">
+                        <UIcon
+                            name="i-ph-money-light"
+                            class="size-4 text-muted"
+                        />
+                        <span class="text-sm font-medium text-default">{{ $t('hr.compensation.title') }}</span>
+                    </div>
+                    <div class="space-y-2 text-sm">
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('hr.compensation.fields.base_salary') }}</span>
+                            <span class="text-default font-semibold">{{ compensation?.base_salary }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('hr.compensation.fields.bonus_target') }}</span>
+                            <span class="text-default">{{ compensation?.bonus_target }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Insurance summary -->
+                <div class="border border-default rounded-lg p-4">
+                    <div class="flex items-center gap-2 mb-3">
+                        <UIcon
+                            name="i-ph-shield-check-light"
+                            class="size-4 text-muted"
+                        />
+                        <span class="text-sm font-medium text-default">{{ $t('hr.insurance.title') }}</span>
+                    </div>
+                    <div class="space-y-2 text-sm">
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('hr.insurance.social') }}</span>
+                            <span class="text-default font-mono">{{ insurance?.social_insurance_number }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-muted">{{ $t('hr.insurance.fields.tax_code') }}</span>
+                            <span class="text-default font-mono">{{ insurance?.tax_code }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Leave Balance compact (employee only) -->
+            <div
+                v-if="isEmployee && leaveBalances && leaveBalances.length"
+                class="border border-default rounded-lg"
+            >
+                <div class="px-4 py-3 border-b border-default bg-elevated/30">
+                    <h3 class="text-sm font-medium flex items-center gap-2">
+                        <UIcon
+                            name="i-ph-calendar-check-light"
+                            class="size-4 text-muted"
+                        />
+                        {{ $t('contacts.hr.leave_balance') }}
+                    </h3>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-4 divide-x divide-default">
+                    <div
+                        v-for="leave in leaveBalances"
+                        :key="leave.leave_type_id"
+                        class="p-3 text-center"
+                    >
+                        <div
+                            class="text-xl font-bold"
+                            :class="(leave.allocated - leave.used) <= 2 ? 'text-error' : 'text-default'"
+                        >
+                            {{ leave.allocated - leave.used }}
+                        </div>
+                        <div class="text-xs text-muted mt-0.5">
+                            {{ leave.leave_type?.name }}
+                        </div>
+                        <div class="w-full bg-elevated rounded-full h-1 mt-1.5">
+                            <div
+                                class="h-1 rounded-full"
+                                :class="(leave.allocated - leave.used) <= 2 ? 'bg-error' : 'bg-primary'"
+                                :style="{ width: `${leave.allocated > 0 ? (leave.used / leave.allocated) * 100 : 0}%` }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-xs text-muted italic border-t border-default pt-4">
+                {{ $t('contacts.hr.full_profile') }} &middot;
+                <NuxtLink
+                    :to="`/hr/employees/${employee.id}`"
+                    class="text-primary hover:underline"
+                >
+                    {{ $t('contacts.hr.full_profile') }}
+                </NuxtLink>
+            </div>
+        </template>
+
+        <!-- No HR record -->
+        <div
+            v-else-if="!pending"
+            class="flex flex-col items-center justify-center py-12 text-center"
+        >
+            <UIcon
+                name="i-ph-identification-badge-light"
+                class="size-10 text-muted opacity-30 mb-3"
+            />
+            <p class="text-sm text-muted">
+                {{ $t('contacts.hr.not_linked') }}
+            </p>
+        </div>
+
+        <!-- Loading -->
+        <div
+            v-else
+            class="flex justify-center py-12"
+        >
+            <UIcon
+                name="i-ph-spinner-light"
+                class="size-8 text-muted animate-spin"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    contact: Record<string, any>
+}>()
+
+const api = useHrApi()
+
+const personId = computed(() => props.contact?.hr_person_id ?? null)
+const isEmployee = computed(() => ['probation', 'active', 'resigned'].includes(employee.value?.stage ?? ''))
+
+const employee = useState<Person | null>(`hr:contact-tab:person:${props.contact?.id}`, () => null)
+const contract = useState<any | null>(`hr:contact-tab:contract:${props.contact?.id}`, () => null)
+const compensation = useState<any | null>(`hr:contact-tab:compensation:${props.contact?.id}`, () => null)
+const insurance = useState<any | null>(`hr:contact-tab:insurance:${props.contact?.id}`, () => null)
+const leaveBalances = useState<any[] | null>(`hr:contact-tab:leave:${props.contact?.id}`, () => null)
+const pending = ref(false)
+
+async function loadData() {
+    if (!personId.value) return
+    pending.value = true
+    try {
+        employee.value = await api.getPerson(personId.value)
+        if (isEmployee.value) {
+            const [c, comp, ins, lb] = await Promise.allSettled([
+                api.getContract(personId.value),
+                api.getCompensation(personId.value),
+                api.getInsurance(personId.value),
+                $api<any>(`/hr/people/${personId.value}/leave-balances`),
+            ])
+            if (c.status === 'fulfilled') contract.value = c.value
+            if (comp.status === 'fulfilled') compensation.value = comp.value
+            if (ins.status === 'fulfilled') insurance.value = ins.value
+            if (lb.status === 'fulfilled') {
+                const raw = lb.value
+                leaveBalances.value = Array.isArray(raw) ? raw : (raw?.data ?? [])
+            }
+        }
+    }
+    finally {
+        pending.value = false
+    }
+}
+
+onMounted(loadData)
+</script>

package/app/components/hr/department/card.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="border border-default rounded-lg hover:border-primary/30 transition-colors overflow-hidden">
+        <!-- Colored top border accent -->
+        <div
+            class="h-1 w-full"
+            :style="{ backgroundColor: department.color || '#6366f1' }"
+        />
+
+        <div class="p-4 border-b border-default">
+            <div class="flex items-center justify-between gap-3">
+                <div class="flex items-center gap-3 min-w-0">
+                    <div
+                        class="p-2 rounded-lg shrink-0"
+                        :style="{ backgroundColor: (department.color || '#6366f1') + '15', color: department.color || '#6366f1' }"
+                    >
+                        <UIcon
+                            :name="department.icon || 'i-heroicons-building-office'"
+                            class="size-5"
+                        />
+                    </div>
+                    <div class="min-w-0">
+                        <h3 class="font-semibold text-default truncate">
+                            {{ department.name }}
+                        </h3>
+                        <p
+                            v-if="department.description"
+                            class="text-xs text-muted truncate"
+                        >
+                            {{ department.description }}
+                        </p>
+                    </div>
+                </div>
+                <UDropdownMenu
+                    :items="menuItems"
+                >
+                    <UButton
+                        icon="i-ph-dots-three-vertical"
+                        color="neutral"
+                        variant="ghost"
+                        size="xs"
+                    />
+                </UDropdownMenu>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 divide-x divide-default">
+            <div class="p-3 text-center">
+                <div class="text-lg font-bold text-default">
+                    {{ department.member_count ?? 0 }}
+                </div>
+                <div class="text-xs text-muted">
+                    {{ $t('departments.stats.members', { count: '' }).trim() }}
+                </div>
+            </div>
+            <div class="p-3 text-center">
+                <div class="text-lg font-bold text-default">
+                    {{ formatTenure(department.avg_tenure_months ?? 0) }}
+                </div>
+                <div class="text-xs text-muted">
+                    {{ $t('departments.stats.avg_tenure') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="p-4 border-t border-default">
+            <div class="text-xs text-muted mb-2">
+                {{ $t('departments.head') }}
+            </div>
+            <div
+                v-if="department.head"
+                class="flex items-center gap-2"
+            >
+                <UAvatar
+                    :src="department.head.avatar"
+                    icon="i-ph-user-light"
+                    size="xs"
+                    class="bg-primary/10 text-primary"
+                />
+                <NuxtLink
+                    :to="`/hr/employees/${department.head.id}`"
+                    class="text-sm font-medium text-default hover:text-primary"
+                >
+                    {{ department.head.full_name }}
+                </NuxtLink>
+            </div>
+            <div
+                v-else
+                class="text-sm text-muted"
+            >
+                {{ $t('departments.no_head') }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n()
+
+const props = defineProps<{
+    department: {
+        id: number
+        name: string
+        description?: string
+        color?: string
+        icon?: string
+        member_count?: number
+        avg_tenure_months?: number
+        head?: { id: number, full_name: string, avatar?: string } | null
+    }
+}>()
+
+const emit = defineEmits<{
+    edit: []
+    delete: []
+}>()
+
+const menuItems = computed(() => [
+    [
+        {
+            label: t('common.edit'),
+            icon: 'i-ph-pencil-light',
+            onSelect: () => emit('edit'),
+        },
+        {
+            label: t('common.delete'),
+            icon: 'i-ph-trash-light',
+            color: 'error' as const,
+            onSelect: () => emit('delete'),
+        },
+    ],
+])
+
+function formatTenure(months: number): string {
+    if (months < 1) return t('departments.tenure.less_than_month')
+    const years = Math.floor(months / 12)
+    const rem = months % 12
+    if (years === 0) return t('departments.tenure.months', { count: months })
+    if (rem === 0) return t('departments.tenure.years', { count: years })
+    return t('departments.tenure.years_months', { years, months: rem })
+}
+</script>

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

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+const toast = useToast()
+const { saveDepartment } = useDepartments()
+
+const props = defineProps<{
+    department?: any | null
+}>()
+
+const emit = defineEmits<{
+    close: []
+    saved: []
+}>()
+
+const DEPT_FIELD_NAMES = ['name', 'code', 'description', 'head_person_id', 'parent_department_id']
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_departments'])
+
+const formFields = computed(() => pickFields('hr_departments', DEPT_FIELD_NAMES))
+
+const form = ref<Record<string, any>>({})
+const saving = ref(false)
+
+const isEdit = computed(() => !!props.department)
+const canSave = computed(() => !!form.value.name?.trim())
+
+watch(() => props.department, (dept) => {
+    form.value = dept
+        ? { name: dept.name, code: dept.code, description: dept.description, head_person_id: dept.head_person_id, parent_department_id: dept.parent_department_id }
+        : {}
+}, { immediate: true })
+
+onMounted(fetchAll)
+
+async function handleSave() {
+    if (!canSave.value) return
+    saving.value = true
+    try {
+        await saveDepartment(props.department?.id ?? null, { ...form.value })
+        toast.add({
+            title: isEdit.value ? t('departments.toast.updated') : t('departments.toast.created'),
+            color: 'success',
+        })
+        emit('saved')
+    }
+    catch (err: any) {
+        toast.add({ title: err?.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        saving.value = false
+    }
+}
+</script>
+
+<template>
+    <UModal
+        :open="true"
+        :title="isEdit ? $t('departments.edit') : $t('departments.create')"
+        @close="$emit('close')"
+    >
+        <template #body>
+            <div v-if="!isReady('hr_departments')" 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="department ?? {}"
+            />
+        </template>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <UButton
+                    color="neutral"
+                    variant="outline"
+                    :label="$t('common.cancel')"
+                    @click="$emit('close')"
+                />
+                <UButton
+                    color="primary"
+                    :label="isEdit ? $t('common.save') : $t('departments.create')"
+                    :loading="saving"
+                    :disabled="!canSave"
+                    @click="handleSave"
+                />
+            </div>
+        </template>
+    </UModal>
+</template>