@codihaus/odp-app-hr 0.1.0

package/app/components/hr/employees/assets/tab.vue

@@ -0,0 +1,432 @@
+<script lang="ts" setup>
+const { $api } = useNuxtApp()
+const props = defineProps<{ person: Person, readonly?: boolean }>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+type Asset = {
+    id: number
+    type: string
+    name: string
+    serial_number?: string | null
+    value?: number | null
+    images?: string[] | null
+    issued_at: string
+    returned_at?: string | null
+    status: 'issued' | 'returned'
+    notes?: string | null
+}
+
+const assets = useState<Asset[]>(`hr:assets:${props.person.id}`, () => [])
+const loading = ref(false)
+const showIssueModal = ref(false)
+
+const activeAssets = computed(() => assets.value.filter(a => !a.returned_at))
+const returnedAssets = computed(() => assets.value.filter(a => !!a.returned_at))
+
+const issueForm = ref<Record<string, any>>({
+    type: 'Laptop',
+    name: '',
+    serial_number: '',
+    value: null,
+    images: null,
+    issued_at: new Date().toISOString().slice(0, 10),
+    notes: '',
+})
+
+const ISSUE_FIELD_NAMES = ['type', 'name', 'serial_number', 'value', 'images', 'issued_at', 'notes']
+const { pickFields, fetchAll: fetchFields, isReady } = useHrFieldRegistry(['hr_assets'])
+
+const issueFields = computed(() => pickFields('hr_assets', ISSUE_FIELD_NAMES))
+const issueSaving = ref(false)
+
+async function fetchAssets() {
+    loading.value = true
+    try {
+        const res = await $api<any>(`/hr/people/${props.person.id}/assets`)
+        assets.value = Array.isArray(res) ? res : (res?.data ?? [])
+    }
+    catch { /* noop */ }
+    finally {
+        loading.value = false }
+}
+
+async function issueAsset() {
+    const f = issueForm.value
+    if (!f.name?.trim()) return
+    issueSaving.value = true
+    try {
+        const body: any = { type: f.type, name: f.name, issued_at: f.issued_at }
+        if (f.serial_number?.trim()) body.serial_number = f.serial_number
+        if (f.value && Number(f.value) > 0) body.value = Number(f.value)
+        if (f.images?.length) body.images = f.images
+        if (f.notes?.trim()) body.notes = f.notes
+
+        await $api(`/hr/people/${props.person.id}/assets`, { method: 'POST', body })
+        await fetchAssets()
+        showIssueModal.value = false
+        issueForm.value = {
+            type: 'Laptop', name: '', serial_number: '', value: null,
+            images: null, issued_at: new Date().toISOString().slice(0, 10), notes: '',
+        }
+        toast.add({ title: t('assets.toast.issued'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err?.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        issueSaving.value = false
+    }
+}
+
+async function markReturned(asset: Asset) {
+    const today = new Date().toISOString().slice(0, 10)
+    try {
+        await $api(`/hr/people/${props.person.id}/assets/${asset.id}`, {
+            method: 'PATCH',
+            body: { returned_at: today, status: 'returned' },
+        })
+        await fetchAssets()
+        toast.add({ title: t('assets.toast.returned'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err?.message ?? t('hr.toast.error'), color: 'error' })
+    }
+}
+
+async function cancelAsset(asset: Asset) {
+    try {
+        await $api(`/hr/people/${props.person.id}/assets/${asset.id}`, {
+            method: 'PATCH',
+            body: { status: 'cancelled' },
+        })
+        await fetchAssets()
+        toast.add({ title: t('assets.toast.cancelled'), color: 'success' })
+    }
+    catch (err: any) {
+        toast.add({ title: err?.message ?? t('hr.toast.error'), color: 'error' })
+    }
+}
+
+const selectedAsset = ref<Asset | null>(null)
+
+function openDetail(asset: Asset) {
+    selectedAsset.value = asset
+}
+
+onMounted(() => Promise.all([fetchAssets(), fetchFields()]))
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <HrInfoSection
+            :title="$t('assets.title')"
+            icon="i-ph-laptop-light"
+        >
+            <div
+                v-if="loading"
+                class="p-6 text-muted text-sm"
+            >
+                {{ $t('common.loading') }}
+            </div>
+
+            <div
+                v-else-if="!activeAssets.length"
+                class="p-6 text-muted text-sm flex items-center justify-between"
+            >
+                <span>{{ $t('assets.no_active') }}</span>
+                <UButton
+                    v-if="!readonly"
+                    size="xs"
+                    icon="i-ph-plus-light"
+                    variant="soft"
+                    @click="showIssueModal = true"
+                >
+                    {{ $t('assets.issue') }}
+                </UButton>
+            </div>
+
+            <table
+                v-else
+                class="w-full text-sm"
+            >
+                <thead>
+                    <tr class="text-left text-xs text-muted uppercase tracking-wider">
+                        <th class="px-4 py-2.5 font-medium w-32">
+                            {{ $t('assets.columns.type') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('assets.columns.name') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('assets.columns.serial') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('assets.columns.value') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium">
+                            {{ $t('assets.columns.issued_at') }}
+                        </th>
+                        <th class="px-4 py-2.5 font-medium w-10" />
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-default">
+                    <tr
+                        v-for="a in activeAssets"
+                        :key="a.id"
+                        class="cursor-pointer hover:bg-elevated/50 transition-colors"
+                        @click="openDetail(a)"
+                    >
+                        <td class="px-4 py-2.5">
+                            <span class="text-xs font-medium text-muted bg-muted/10 px-2 py-0.5 rounded">{{ a.type }}</span>
+                        </td>
+                        <td class="px-4 py-2.5 font-medium">
+                            <div class="flex items-center gap-2">
+                                <img
+                                    v-if="a.images?.length"
+                                    :src="getThumbnailUrl(a.images[0], { width: 32, height: 32, fit: 'cover' })"
+                                    class="size-8 rounded object-cover border border-default shrink-0"
+                                >
+                                {{ a.name }}
+                            </div>
+                        </td>
+                        <td class="px-4 py-2.5 text-muted">
+                            {{ a.serial_number || '—' }}
+                        </td>
+                        <td class="px-4 py-2.5 text-muted">
+                            {{ a.value ? new Intl.NumberFormat().format(a.value) : '—' }}
+                        </td>
+                        <td class="px-4 py-2.5 text-muted">
+                            {{ a.issued_at }}
+                        </td>
+                        <td class="px-4 py-2.5 text-right">
+                            <div
+                                v-if="!readonly"
+                                class="flex items-center justify-end gap-1"
+                            >
+                                <UButton
+                                    size="xs"
+                                    color="neutral"
+                                    variant="ghost"
+                                    icon="i-ph-arrow-u-up-left-light"
+                                    :title="$t('assets.return')"
+                                    @click.stop="markReturned(a)"
+                                />
+                                <UButton
+                                    v-if="!a.returned_at && a.status !== 'cancelled'"
+                                    size="xs"
+                                    color="neutral"
+                                    variant="ghost"
+                                    icon="i-ph-x-circle-light"
+                                    :title="$t('assets.cancel')"
+                                    @click.stop="cancelAsset(a)"
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div
+                v-if="!readonly && activeAssets.length"
+                class="px-4 py-3 border-t border-default"
+            >
+                <UButton
+                    size="xs"
+                    icon="i-ph-plus-light"
+                    variant="soft"
+                    @click="showIssueModal = true"
+                >
+                    {{ $t('assets.issue') }}
+                </UButton>
+            </div>
+        </HrInfoSection>
+
+        <!-- Returned assets accordion -->
+        <UAccordion
+            v-if="returnedAssets.length"
+            :items="[{ label: $t('assets.returned_section', { count: returnedAssets.length }), slot: 'returned' }]"
+        >
+            <template #returned>
+                <table class="w-full text-sm">
+                    <thead>
+                        <tr class="text-left text-xs text-muted uppercase tracking-wider">
+                            <th class="px-4 py-2.5 font-medium w-32">
+                                {{ $t('assets.columns.type') }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t('assets.columns.name') }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t('assets.columns.serial') }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t('assets.columns.issued_at') }}
+                            </th>
+                            <th class="px-4 py-2.5 font-medium">
+                                {{ $t('assets.columns.returned_at') }}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-default">
+                        <tr
+                            v-for="a in returnedAssets"
+                            :key="a.id"
+                        >
+                            <td class="px-4 py-2.5">
+                                <span class="text-xs font-medium text-muted bg-muted/10 px-2 py-0.5 rounded">{{ a.type }}</span>
+                            </td>
+                            <td class="px-4 py-2.5 font-medium">
+                                {{ a.name }}
+                            </td>
+                            <td class="px-4 py-2.5 text-muted">
+                                {{ a.serial_number || '—' }}
+                            </td>
+                            <td class="px-4 py-2.5 text-muted">
+                                {{ a.issued_at }}
+                            </td>
+                            <td class="px-4 py-2.5 text-muted">
+                                {{ a.returned_at }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </template>
+        </UAccordion>
+
+        <!-- Issue Asset Modal -->
+        <UModal
+            v-model:open="showIssueModal"
+            :title="$t('assets.issue_modal.title')"
+            :ui="{ content: 'sm:max-w-2xl' }"
+        >
+            <template #body>
+                <div v-if="!isReady('hr_assets')" class="px-4 py-6 text-sm text-muted">{{ $t('common.loading') }}</div>
+                <FormRoot
+                    v-else-if="issueFields.length"
+                    v-model="issueForm"
+                    :fields="issueFields"
+                    :initial-values="{}"
+                />
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <UButton
+                        color="neutral"
+                        variant="outline"
+                        :label="$t('common.cancel')"
+                        @click="showIssueModal = false"
+                    />
+                    <UButton
+                        color="primary"
+                        :label="$t('assets.issue_modal.confirm')"
+                        :loading="issueSaving"
+                        :disabled="!issueForm.name"
+                        @click="issueAsset"
+                    />
+                </div>
+            </template>
+        </UModal>
+
+        <!-- Asset Detail Drawer -->
+        <USlideover
+            :open="!!selectedAsset"
+            :title="selectedAsset?.name ?? ''"
+            @update:open="(v) => { if (!v) selectedAsset = null }"
+        >
+            <template #body>
+                <div
+                    v-if="selectedAsset"
+                    class="space-y-6"
+                >
+                    <!-- Image gallery -->
+                    <div v-if="selectedAsset.images?.length">
+                        <div class="grid gap-2" :class="selectedAsset.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'">
+                            <img
+                                v-for="imgId in selectedAsset.images"
+                                :key="imgId"
+                                :src="getThumbnailUrl(imgId, { width: 400, height: 300, fit: 'cover' })"
+                                class="w-full rounded-lg object-cover border border-default cursor-pointer"
+                                @click="window.open(getAssetUrl(imgId), '_blank')"
+                            >
+                        </div>
+                    </div>
+
+                    <!-- Info rows -->
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between py-2 border-b border-default">
+                            <span class="text-sm text-muted">{{ $t('assets.columns.type') }}</span>
+                            <UBadge
+                                :label="selectedAsset.type"
+                                color="neutral"
+                                variant="subtle"
+                                size="sm"
+                            />
+                        </div>
+                        <div class="flex items-center justify-between py-2 border-b border-default">
+                            <span class="text-sm text-muted">{{ $t('assets.columns.name') }}</span>
+                            <span class="text-sm font-medium">{{ selectedAsset.name }}</span>
+                        </div>
+                        <div
+                            v-if="selectedAsset.serial_number"
+                            class="flex items-center justify-between py-2 border-b border-default"
+                        >
+                            <span class="text-sm text-muted">{{ $t('assets.columns.serial') }}</span>
+                            <span class="text-sm font-mono">{{ selectedAsset.serial_number }}</span>
+                        </div>
+                        <div
+                            v-if="selectedAsset.value"
+                            class="flex items-center justify-between py-2 border-b border-default"
+                        >
+                            <span class="text-sm text-muted">{{ $t('assets.columns.value') }}</span>
+                            <span class="text-sm font-medium">{{ new Intl.NumberFormat().format(selectedAsset.value) }}</span>
+                        </div>
+                        <div class="flex items-center justify-between py-2 border-b border-default">
+                            <span class="text-sm text-muted">{{ $t('assets.columns.issued_at') }}</span>
+                            <span class="text-sm">{{ selectedAsset.issued_at }}</span>
+                        </div>
+                        <div
+                            v-if="selectedAsset.returned_at"
+                            class="flex items-center justify-between py-2 border-b border-default"
+                        >
+                            <span class="text-sm text-muted">{{ $t('assets.columns.returned_at') }}</span>
+                            <span class="text-sm">{{ selectedAsset.returned_at }}</span>
+                        </div>
+                        <div
+                            v-if="selectedAsset.notes"
+                            class="py-2"
+                        >
+                            <span class="text-sm text-muted block mb-1">{{ $t('assets.fields.notes') }}</span>
+                            <p class="text-sm whitespace-pre-wrap">{{ selectedAsset.notes }}</p>
+                        </div>
+                    </div>
+
+                    <!-- Actions -->
+                    <div
+                        v-if="!readonly && !selectedAsset.returned_at"
+                        class="flex gap-2 pt-2"
+                    >
+                        <UButton
+                            icon="i-ph-arrow-u-up-left-light"
+                            color="warning"
+                            variant="soft"
+                            @click="markReturned(selectedAsset!); selectedAsset = null"
+                        >
+                            {{ $t('assets.return') }}
+                        </UButton>
+                        <UButton
+                            v-if="selectedAsset.status !== 'cancelled'"
+                            icon="i-ph-x-circle-light"
+                            color="neutral"
+                            variant="soft"
+                            @click="cancelAsset(selectedAsset!); selectedAsset = null"
+                        >
+                            {{ $t('assets.cancel') }}
+                        </UButton>
+                    </div>
+                </div>
+            </template>
+        </USlideover>
+    </div>
+</template>

package/app/components/hr/employees/compensation.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+
+const props = defineProps<{ person: Person, readonly?: boolean }>()
+
+const api = useHrApi()
+const toast = useToast()
+const { t } = useI18n()
+
+const data = ref<Record<string, any>>({})
+const allowances = ref<Array<{ id?: number, name: string, amount: string, type?: string }>>([])
+const edits = ref<Record<string, any>>({})
+const editing = ref(false)
+const formModel = computed({
+    get: () => editing.value ? edits.value : data.value,
+    set: (val) => { edits.value = val },
+})
+const loading = ref(false)
+const saving = ref(false)
+
+async function load() {
+    loading.value = true
+    try {
+        const res = await api.getCompensation(props.person.id)
+        if (res) {
+            const { allowances: al, ...rest } = res
+            data.value = rest
+            allowances.value = al ?? []
+        }
+    }
+    finally { loading.value = false }
+}
+
+onMounted(() => Promise.all([load(), fetchFields()]))
+
+function startEdit() {
+    edits.value = { ...data.value }
+    editing.value = true
+}
+
+function cancelEdit() {
+    edits.value = {}
+    editing.value = false
+}
+
+async function save() {
+    saving.value = true
+    try {
+        await api.updateCompensation(props.person.id, { ...edits.value, allowances: allowances.value })
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        editing.value = false
+        await load()
+    }
+    catch { toast.add({ title: t('hr.toast.error'), color: 'error' }) }
+    finally { saving.value = false }
+}
+
+function addAllowance() {
+    allowances.value = [...allowances.value, { name: '', amount: '', type: 'Fixed' }]
+}
+
+function updateAllowance(idx: number, p: { name?: string, amount?: string, type?: string }) {
+    const list = [...allowances.value]
+    list[idx] = { ...list[idx]!, ...p }
+    allowances.value = list
+}
+
+function removeAllowance(idx: number) {
+    allowances.value = allowances.value.filter((_, i) => i !== idx)
+}
+
+const COMPENSATION_FIELD_NAMES = ['base_salary', 'currency', 'pay_frequency', 'bonus_target', 'bank_account']
+const { pickFields, fetchAll: fetchFields, isReady } = useHrFieldRegistry(['hr_compensations'])
+
+const compensationFields = computed(() => pickFields('hr_compensations', COMPENSATION_FIELD_NAMES))
+</script>
+
+<template>
+    <div class="space-y-4">
+        <HrInfoSection :title="$t('hr.compensation.title')" icon="i-ph-money-light">
+            <template #actions>
+                <div v-if="!readonly" class="flex items-center gap-2">
+                    <template v-if="editing">
+                        <UButton size="xs" variant="ghost" :label="$t('common.cancel')" @click="cancelEdit" />
+                        <UButton size="xs" color="primary" :label="$t('common.save')" :loading="saving" @click="save" />
+                    </template>
+                    <UButton v-else size="xs" variant="soft" icon="i-ph-pencil-simple-light" :label="$t('common.edit')" @click="startEdit" />
+                </div>
+            </template>
+
+            <div v-if="loading || !isReady('hr_compensations')" class="px-4 py-6 text-sm text-muted">{{ $t('common.loading') }}</div>
+            <FormRoot
+                v-else-if="compensationFields.length"
+                v-model="formModel"
+                :fields="compensationFields"
+                :initial-values="data"
+                :disabled="!editing || readonly"
+            />
+        </HrInfoSection>
+
+        <HrInfoSection :title="$t('hr.compensation.sections.allowances')" icon="i-ph-coins-light">
+            <div class="p-4 space-y-2 text-sm">
+                <div v-for="(a, i) in allowances" :key="i" class="flex items-center gap-2">
+                    <UInput
+                        :model-value="a.name"
+                        :disabled="!editing || readonly"
+                        :placeholder="$t('hr.compensation.allowance.name')"
+                        class="flex-1"
+                        @update:model-value="(v) => updateAllowance(i, { name: String(v) })"
+                    />
+                    <UInput
+                        :model-value="a.amount"
+                        :disabled="!editing || readonly"
+                        :placeholder="$t('hr.compensation.allowance.amount')"
+                        class="flex-1"
+                        @update:model-value="(v) => updateAllowance(i, { amount: String(v) })"
+                    />
+                    <UButton
+                        v-if="editing && !readonly"
+                        size="xs" color="neutral" variant="ghost"
+                        icon="i-ph-trash-light"
+                        @click="removeAllowance(i)"
+                    />
+                </div>
+                <UButton
+                    v-if="editing && !readonly"
+                    size="xs" variant="soft" icon="i-ph-plus-light"
+                    @click="addAllowance"
+                >
+                    {{ $t('hr.compensation.allowance.add') }}
+                </UButton>
+                <p v-if="!allowances.length" class="text-muted text-xs">{{ $t('common.no_data') }}</p>
+            </div>
+        </HrInfoSection>
+    </div>
+</template>

package/app/components/hr/employees/contract.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+
+const props = defineProps<{ person: Person, readonly?: boolean }>()
+
+const api = useHrApi()
+const toast = useToast()
+const { t } = useI18n()
+
+const data = ref<Record<string, any>>({})
+const edits = ref<Record<string, any>>({})
+const editing = ref(false)
+const formModel = computed({
+    get: () => editing.value ? edits.value : data.value,
+    set: (val) => { edits.value = val },
+})
+const loading = ref(false)
+const saving = ref(false)
+
+const CONTRACT_FIELD_NAMES = ['type', 'number', 'start_date', 'end_date', 'probation_end', 'renewal_count']
+const { pickFields, fetchAll, isReady } = useHrFieldRegistry(['hr_contracts'])
+
+const contractFields = computed(() => pickFields('hr_contracts', CONTRACT_FIELD_NAMES))
+
+async function load() {
+    loading.value = true
+    try { data.value = (await api.getContract(props.person.id)) ?? {} }
+    finally { loading.value = false }
+}
+
+onMounted(() => Promise.all([load(), fetchAll()]))
+
+function startEdit() {
+    edits.value = { ...data.value }
+    editing.value = true
+}
+
+function cancelEdit() {
+    edits.value = {}
+    editing.value = false
+}
+
+async function save() {
+    saving.value = true
+    try {
+        await api.updateContract(props.person.id, edits.value)
+        toast.add({ title: t('hr.toast.saved'), color: 'success' })
+        editing.value = false
+        await load()
+    }
+    catch { toast.add({ title: t('hr.toast.error'), color: 'error' }) }
+    finally { saving.value = false }
+}
+</script>
+
+<template>
+    <HrInfoSection :title="$t('hr.contract.title')" icon="i-ph-file-text-light">
+        <template #actions>
+            <div v-if="!readonly" class="flex items-center gap-2">
+                <template v-if="editing">
+                    <UButton size="xs" variant="ghost" :label="$t('common.cancel')" @click="cancelEdit" />
+                    <UButton size="xs" color="primary" :label="$t('common.save')" :loading="saving" @click="save" />
+                </template>
+                <UButton v-else size="xs" variant="soft" icon="i-ph-pencil-simple-light" :label="$t('common.edit')" @click="startEdit" />
+            </div>
+        </template>
+
+        <div v-if="loading || !isReady('hr_contracts')" class="px-4 py-6 text-sm text-muted">{{ $t('common.loading') }}</div>
+        <FormRoot
+            v-else-if="contractFields.length"
+            v-model="formModel"
+            :fields="contractFields"
+            :initial-values="data"
+            :disabled="!editing || readonly"
+        />
+    </HrInfoSection>
+</template>