big refactor

app/components/policies/QuoteSelectionBoard.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+interface PlanItem {
+  provider_id: string
+  quote_id: string
+  valid_until: string | null
+  received_at: string
+  plan_id: string
+  name: string
+  premium: number
+  coverage_details: string
+  deductible?: number
+  coverage_limit?: number
+}
+
+interface Props {
+  items: PlanItem[]
+  selectedPlanId: string | null
+  policyApplicationId: string
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+
+const emit = defineEmits<{
+  select: [planId: string]
+}>()
+
+function formatPremium(value: number): string {
+  return '$' + value.toLocaleString()
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleDateString('es-PA', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  })
+}
+
+function handleSelect(planId: string) {
+  if (props.loading) return
+  emit('select', planId)
+}
+</script>
+
+<template>
+  <div class="quote-selection-board grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+    <div
+      v-for="item in items"
+      :key="item.plan_id"
+      class="quote-card rounded-xl border px-3.5 py-3 shadow-sm transition cursor-pointer"
+      :class="selectedPlanId === item.plan_id
+        ? 'border-primary ring-2 ring-primary/30 bg-primary/5'
+        : 'border-[var(--card-border)] bg-[var(--surface)] hover:border-[var(--brand)]/30 hover:shadow-md'"
+      @click="handleSelect(item.plan_id)"
+    >
+      <!-- Provider ID -->
+      <p class="text-[11px] font-mono text-gray-500 truncate">{{ item.provider_id }}</p>
+
+      <!-- Plan name -->
+      <p class="text-sm font-semibold text-[var(--text-primary)] mt-1 truncate">{{ item.name }}</p>
+
+      <!-- Premium -->
+      <p class="text-lg font-bold text-green-600 mt-2">{{ formatPremium(item.premium) }}</p>
+
+      <!-- Valid until -->
+      <p v-if="item.valid_until" class="text-[11px] text-gray-500 mt-1">
+        Valid until {{ formatDate(item.valid_until) }}
+      </p>
+
+      <!-- Coverage details preview -->
+      <p v-if="item.coverage_details" class="text-xs text-gray-600 mt-2 line-clamp-2">
+        {{ item.coverage_details }}
+      </p>
+
+      <!-- Footer -->
+      <div class="mt-3 flex justify-end">
+        <UBadge v-if="selectedPlanId === item.plan_id" color="green" variant="soft" size="xs">Selected</UBadge>
+        <UButton v-else-if="!loading" size="xs" color="primary" @click.stop="handleSelect(item.plan_id)">Select</UButton>
+        <UBadge v-else color="gray" variant="soft" size="xs">Processing...</UBadge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quote-card {
+  transition: all 0.15s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.quote-card:hover {
+  transform: translateY(-1px);
+}
+</style>