75 lines
3.0 KiB
Vue
75 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
task: any // TODO: Type properly
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<!-- Applicant Info -->
|
|
<div v-if="task.task_info?.applicant_info">
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Applicant Information</h3>
|
|
<div class="border rounded-lg overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr v-for="(value, key) in task.task_info.applicant_info" :key="key">
|
|
<td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
|
|
<td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vehicle Info -->
|
|
<div v-if="task.task_info?.vehicle_info">
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Vehicle Information</h3>
|
|
<div class="border rounded-lg overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr v-for="(value, key) in task.task_info.vehicle_info" :key="key">
|
|
<td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
|
|
<td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Policy Details -->
|
|
<div v-if="task.task_info?.policy_details">
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Policy Details</h3>
|
|
<div class="border rounded-lg overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr v-for="(value, key) in task.task_info.policy_details" :key="key">
|
|
<td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
|
|
<td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|