43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
task: any // TODO: Type properly
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const formatDate = (d: string) => d
|
|
? new Date(d).toLocaleDateString('es-PA', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
|
|
: '—'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4 text-sm">
|
|
<!-- Basic Info -->
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<div class="text-gray-500">Task ID</div>
|
|
<div class="font-mono text-xs text-right">{{ task.id }}</div>
|
|
|
|
<div class="text-gray-500">Application ID</div>
|
|
<div class="font-mono text-xs text-right">{{ task.application_id }}</div>
|
|
|
|
<div class="text-gray-500">Provider ID</div>
|
|
<div class="font-mono text-xs text-right">{{ task.task_info?.provider_id }}</div>
|
|
|
|
<div v-if="task.task_info?.provider_name" class="text-gray-500">Provider</div>
|
|
<div v-if="task.task_info?.provider_name" class="text-right">{{ task.task_info.provider_name }}</div>
|
|
|
|
<div class="text-gray-500">Org</div>
|
|
<div class="font-mono text-xs text-right">{{ task.org_id }}</div>
|
|
|
|
<div class="text-gray-500">Created</div>
|
|
<div class="text-right">{{ formatDate(task.created_at) }}</div>
|
|
|
|
<div class="text-gray-500">Updated</div>
|
|
<div class="text-right">{{ formatDate(task.updated_at) }}</div>
|
|
|
|
<div class="text-gray-500">Policy Type</div>
|
|
<div class="text-right uppercase text-xs">{{ task.task_info?.policy_type || '—' }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|