big refactor

app/components/back-office/QuoteTaskInfoDisplay.vue

@@ -0,0 +1,42 @@
+<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>