@codihaus/odp-app-hr 0.1.0

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

@@ -0,0 +1,187 @@
+<template>
+    <div class="p-6 max-w-4xl space-y-4">
+        <div class="flex items-center justify-between">
+            <h2 class="text-base font-semibold text-default">
+                {{ $t('provisioning.linked_accounts') }}
+            </h2>
+            <UButton
+                icon="i-ph-arrow-clockwise-light"
+                variant="ghost"
+                size="sm"
+                :loading="pending"
+                @click="load"
+            />
+        </div>
+
+        <!-- No providers -->
+        <div
+            v-if="!pending && !statuses.length"
+            class="text-sm text-muted py-8 text-center border border-dashed border-default rounded-lg"
+        >
+            {{ $t('provisioning.no_providers_configured') }}
+        </div>
+
+        <!-- Status table -->
+        <div
+            v-else-if="statuses.length"
+            class="border border-default rounded-lg divide-y divide-default"
+        >
+            <div
+                v-for="s in statuses"
+                :key="s.provider_id"
+                class="p-4 flex items-center gap-4"
+            >
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2 flex-wrap">
+                        <span class="font-medium text-default text-sm">{{ s.provider_name }}</span>
+                        <UBadge
+                            :label="$t(`integrations.types.${s.provider_type}`)"
+                            color="neutral"
+                            variant="subtle"
+                            size="xs"
+                        />
+                        <UBadge
+                            :label="$t(`provisioning.status.${s.status}`)"
+                            :color="statusColor(s.status)"
+                            variant="subtle"
+                            size="sm"
+                        />
+                    </div>
+                    <div
+                        v-if="s.username"
+                        class="text-xs text-muted mt-1"
+                    >
+                        {{ $t('provisioning.username') }}: <span class="font-mono text-default">{{ s.username }}</span>
+                    </div>
+                    <div
+                        v-if="s.last_action_date"
+                        class="text-xs text-muted mt-0.5"
+                    >
+                        {{ $t('provisioning.last_action') }}: {{ s.last_action }} &middot; {{ formatDate(s.last_action_date) }}
+                    </div>
+                    <div
+                        v-if="s.last_error"
+                        class="text-xs text-error mt-1"
+                    >
+                        {{ s.last_error }}
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-2 shrink-0">
+                    <!-- Retry on error -->
+                    <UButton
+                        v-if="s.status === 'error' && s.last_log_id"
+                        icon="i-ph-arrow-clockwise-light"
+                        label="Retry"
+                        variant="outline"
+                        color="error"
+                        size="sm"
+                        :loading="retryingId === s.last_log_id"
+                        @click="retry(s)"
+                    />
+                    <!-- Manual create on not_created -->
+                    <UButton
+                        v-else-if="s.status === 'not_created'"
+                        icon="i-ph-plus-light"
+                        :label="$t('provisioning.create_account')"
+                        variant="outline"
+                        size="sm"
+                        :loading="creatingId === s.provider_id"
+                        @click="manualCreate(s)"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Loading -->
+        <div
+            v-else
+            class="flex justify-center py-8"
+        >
+            <UIcon
+                name="i-ph-spinner-light"
+                class="size-6 text-muted animate-spin"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { $api } = useNuxtApp()
+const props = defineProps<{
+    person: Person
+    readonly?: boolean
+}>()
+
+const toast = useToast()
+const { t } = useI18n()
+
+const statuses = useState<ProvisioningStatus[]>(`hr:provisioning:${props.person.id}`, () => [])
+const pending = ref(false)
+const retryingId = ref<string | null>(null)
+const creatingId = ref<string | null>(null)
+
+async function load() {
+    pending.value = true
+    try {
+        const res = await $api<any>(`/hr/people/${props.person.id}/provisioning`)
+        statuses.value = Array.isArray(res) ? res : (res?.data ?? [])
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        pending.value = false
+    }
+}
+
+async function retry(s: ProvisioningStatus) {
+    if (!s.last_log_id) return
+    retryingId.value = s.last_log_id
+    try {
+        await $api(`/hr/people/${props.person.id}/provisioning/${s.last_log_id}/retry`, { method: 'POST' })
+        toast.add({ title: 'Retry triggered', color: 'success' })
+        await load()
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        retryingId.value = null
+    }
+}
+
+async function manualCreate(s: ProvisioningStatus) {
+    creatingId.value = s.provider_id
+    try {
+        await $api(`/hr/people/${props.person.id}/provisioning`, {
+            method: 'POST',
+            body: { action: 'create' },
+        })
+        toast.add({ title: t('provisioning.create_account'), color: 'success' })
+        await load()
+    }
+    catch (err: any) {
+        toast.add({ title: err.message ?? t('hr.toast.error'), color: 'error' })
+    }
+    finally {
+        creatingId.value = null
+    }
+}
+
+function statusColor(status: ProvisioningStatus['status']) {
+    const map: Record<ProvisioningStatus['status'], string> = {
+        active: 'success',
+        disabled: 'warning',
+        not_created: 'neutral',
+        error: 'error',
+    }
+    return map[status] ?? 'neutral'
+}
+
+function formatDate(d: string) {
+    return new Date(d).toLocaleDateString()
+}
+
+onMounted(load)
+</script>

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import HrInfoSection from "../shared/section.vue"
+
+defineProps<{ person: Person, readonly?: boolean }>()
+
+const { can } = usePermissionRegistry()
+const canViewSensitive = computed(() => can('hr', 'sensitive.read'))
+const sensitiveReadonly = computed(() => !can('hr', 'sensitive.update'))
+</script>
+
+<template>
+    <div class="p-6 max-w-4xl space-y-6">
+        <HrEmployeesContract
+            :person="person"
+            :readonly="readonly"
+        />
+        <template v-if="canViewSensitive">
+            <HrEmployeesCompensation
+                :person="person"
+                :readonly="readonly || sensitiveReadonly"
+            />
+            <HrEmployeesInsurance
+                :person="person"
+                :readonly="readonly || sensitiveReadonly"
+            />
+        </template>
+        <HrInfoSection
+            v-else
+            :title="$t('hr.compensation.title')"
+            icon="i-ph-lock-light"
+        >
+            <div class="px-4 py-6 text-sm text-muted flex items-center gap-2">
+                <UIcon name="i-ph-lock-light" class="size-4" />
+                {{ $t('hr.permissions.sensitive_locked') }}
+            </div>
+        </HrInfoSection>
+    </div>
+</template>