From 53bbdca525253d96c876f6f4700ed7b602467ff1 Mon Sep 17 00:00:00 2001
From: HaimKortovich <haimkortovich88@gmail.com>
Date: Thu, 30 Apr 2026 16:41:34 -0500
Subject: [PATCH] bug fixes

---
 .../SolicitationTaskInfoDisplay.vue           |   4 +-
 app/components/layout/AppTopBar.vue           |   2 +-
 app/pages/customers/index.vue                 |   5 +
 app/pages/customers/new.vue                   | 268 +++++++++++-
 app/pages/policies/[id].vue                   |   6 +-
 app/pages/policies/book.vue                   |   6 +-
 app/pages/policies/groups/index.vue           |   6 +-
 app/pages/policies/index.vue                  |  13 +-
 app/pages/policies/new.vue                    | 414 +++++++++++-------
 app/pages/providers/index.vue                 |   6 +
 app/pages/providers/new.vue                   |  63 ++-
 app/pages/quotes/new.vue                      | 104 ++++-
 app/pages/sales/leads/index.vue               |   2 -
 app/pages/tasks/[id].vue                      | 304 -------------
 app/pages/tasks/index.vue                     | 176 --------
 opencode.json                                 |  15 +-
 16 files changed, 721 insertions(+), 673 deletions(-)
 delete mode 100644 app/pages/tasks/[id].vue
 delete mode 100644 app/pages/tasks/index.vue

diff --git a/app/components/back-office/SolicitationTaskInfoDisplay.vue b/app/components/back-office/SolicitationTaskInfoDisplay.vue
index 7825056..28c59a5 100644
--- a/app/components/back-office/SolicitationTaskInfoDisplay.vue
+++ b/app/components/back-office/SolicitationTaskInfoDisplay.vue
@@ -51,7 +51,7 @@ const props = defineProps<Props>()
     </div>
 
     <!-- Policy Details -->
-    <div v-if="task.task_info?.policy_details">
+    <div v-if="task.task_info?.insured_object">
       <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">
@@ -62,7 +62,7 @@ const props = defineProps<Props>()
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            <tr v-for="(value, key) in task.task_info.policy_details" :key="key">
+            <tr v-for="(value, key) in task.task_info.insured_object" :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>
diff --git a/app/components/layout/AppTopBar.vue b/app/components/layout/AppTopBar.vue
index 72217b4..a1521dc 100644
--- a/app/components/layout/AppTopBar.vue
+++ b/app/components/layout/AppTopBar.vue
@@ -78,7 +78,7 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
           Quick Lead
         </button>
       </NuxtLink>
-      <NuxtLink to="/quotes">
+      <NuxtLink to="/quotes/new">
         <button type="button" class="app-topbar-action-btn app-topbar-action-primary">
           <UIcon name="i-heroicons-document-text" style="width: 13px; height: 13px;" />
           New quote
diff --git a/app/pages/customers/index.vue b/app/pages/customers/index.vue
index 2b769f3..195c34e 100644
--- a/app/pages/customers/index.vue
+++ b/app/pages/customers/index.vue
@@ -47,6 +47,11 @@ const { data, pending, refresh } = useCustomer('/customers', {
   })
 })
 
+// Ensure data is refreshed when page loads
+onMounted(() => {
+  refresh()
+})
+
 const customers = computed(() => data.value?.data ?? [])
 const meta = computed(() => data.value?.meta)
 
diff --git a/app/pages/customers/new.vue b/app/pages/customers/new.vue
index 613145f..a7bca11 100644
--- a/app/pages/customers/new.vue
+++ b/app/pages/customers/new.vue
@@ -1,8 +1,270 @@
 <script setup lang="ts">
-const route = useRoute()
-await navigateTo({ path: '/registration/client', query: route.query }, { replace: true })
+import type { SelectItem } from '@nuxt/ui'
+
+const router = useRouter()
+const submitting = ref(false)
+const toast = useToast()
+const { $customer } = useNuxtApp()
+
+const customerType = ref<'individual' | 'corporate'>('individual')
+
+const individualForm = ref({
+  first_name: '',
+  last_name: '',
+  email: '',
+  phone: '',
+  document_id: '',
+  birth_date: '',
+  address: ''
+})
+
+const corporateForm = ref({
+  legal_name: '',
+  commercial_name: '',
+  email: '',
+  phone: '',
+  ruc: '',
+  legal_rep_name: '',
+  legal_rep_document_id: '',
+  address: ''
+})
+
+const isValid = computed(() => {
+  if (customerType.value === 'individual') {
+    return !!(
+      individualForm.value.first_name &&
+      individualForm.value.last_name &&
+      individualForm.value.email &&
+      individualForm.value.document_id &&
+      individualForm.value.birth_date
+    )
+  } else {
+    return !!(
+      corporateForm.value.legal_name &&
+      corporateForm.value.email &&
+      corporateForm.value.ruc &&
+      corporateForm.value.legal_rep_name &&
+      corporateForm.value.legal_rep_document_id
+    )
+  }
+})
+
+async function submit() {
+  submitting.value = true
+  try {
+    const body = customerType.value === 'individual'
+      ? {
+          customer_type: 'individual',
+          ...individualForm.value
+        }
+      : {
+          customer_type: 'corporate',
+          ...corporateForm.value
+        }
+
+    const data = await $customer('/customers', { method: 'POST', body }) as any
+    toast.add({ title: 'Customer created successfully', color: 'green' })
+    router.push(`/customers/${data.id}`)
+  } catch (e: any) {
+    toast.add({
+      title: 'Failed to create customer',
+      description: e?.data?.error ?? e.message,
+      color: 'red'
+    })
+  } finally {
+    submitting.value = false
+  }
+}
 </script>
 
 <template>
-  <div class="p-8 text-sm text-[var(--text-muted)]">Redirecting...</div>
+  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-4">
+      <NuxtLink to="/customers">
+        <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Customers</UButton>
+      </NuxtLink>
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Customer</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Register a new customer in the system</p>
+      </div>
+    </div>
+
+    <!-- Customer Type Selection -->
+    <UCard>
+      <template #header>
+        <p class="font-semibold text-[var(--text-primary)]">Customer Type</p>
+      </template>
+      <div class="flex gap-4">
+        <div
+          class="flex-1 border-2 rounded-xl p-4 text-center transition-all cursor-pointer"
+          :class="[
+            customerType === 'individual'
+              ? 'border-primary-500 bg-primary-50'
+              : 'border-gray-200 bg-[var(--surface)] hover:border-gray-300'
+          ]"
+          @click="customerType = 'individual'"
+        >
+          <UIcon name="i-heroicons-user" class="w-8 h-8 mx-auto mb-2" :class="customerType === 'individual' ? 'text-primary-500' : 'text-gray-400'" />
+          <p class="font-medium text-sm" :class="customerType === 'individual' ? 'text-primary-700' : 'text-gray-600'">Individual</p>
+        </div>
+        <div
+          class="flex-1 border-2 rounded-xl p-4 text-center transition-all cursor-pointer"
+          :class="[
+            customerType === 'corporate'
+              ? 'border-primary-500 bg-primary-50'
+              : 'border-gray-200 bg-[var(--surface)] hover:border-gray-300'
+          ]"
+          @click="customerType = 'corporate'"
+        >
+          <UIcon name="i-heroicons-building-office" class="w-8 h-8 mx-auto mb-2" :class="customerType === 'corporate' ? 'text-primary-500' : 'text-gray-400'" />
+          <p class="font-medium text-sm" :class="customerType === 'corporate' ? 'text-primary-700' : 'text-gray-600'">Corporate</p>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Individual Form -->
+    <template v-if="customerType === 'individual'">
+      <UCard>
+        <template #header>
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
+            <UIcon name="i-heroicons-user" class="w-4 h-4" />
+            Personal Information
+          </p>
+        </template>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <UFormField label="First Name" required class="col-span-2 md:col-span-1">
+            <UInput v-model="individualForm.first_name" placeholder="Juan" class="w-full" />
+          </UFormField>
+          <UFormField label="Last Name" required class="col-span-2 md:col-span-1">
+            <UInput v-model="individualForm.last_name" placeholder="Pérez" class="w-full" />
+          </UFormField>
+          <UFormField label="Email" required>
+            <UInput v-model="individualForm.email" type="email" placeholder="juan@example.com" class="w-full" />
+          </UFormField>
+          <UFormField label="Phone">
+            <UInput v-model="individualForm.phone" placeholder="+507-1234-5678" class="w-full" />
+          </UFormField>
+          <UFormField label="Document ID" required>
+            <UInput v-model="individualForm.document_id" placeholder="8-123-456" class="w-full" />
+          </UFormField>
+          <UFormField label="Date of Birth" required>
+            <UInput v-model="individualForm.birth_date" type="date" class="w-full" />
+          </UFormField>
+          <UFormField label="Address" class="col-span-2">
+            <UInput v-model="individualForm.address" placeholder="Calle 50, Panama City" class="w-full" />
+          </UFormField>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Corporate Form -->
+    <template v-else>
+      <UCard>
+        <template #header>
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
+            <UIcon name="i-heroicons-building-office" class="w-4 h-4" />
+            Company Information
+          </p>
+        </template>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <UFormField label="Legal Name" required class="col-span-2">
+            <UInput v-model="corporateForm.legal_name" placeholder="Empresa XYZ S.A." class="w-full" />
+          </UFormField>
+          <UFormField label="Commercial Name">
+            <UInput v-model="corporateForm.commercial_name" placeholder="XYZ Corp" class="w-full" />
+          </UFormField>
+          <UFormField label="RUC" required>
+            <UInput v-model="corporateForm.ruc" placeholder="123456-1-123456" class="w-full" />
+          </UFormField>
+          <UFormField label="Email" required>
+            <UInput v-model="corporateForm.email" type="email" placeholder="contact@empresa.com" class="w-full" />
+          </UFormField>
+          <UFormField label="Phone">
+            <UInput v-model="corporateForm.phone" placeholder="+507-1234-5678" class="w-full" />
+          </UFormField>
+          <UFormField label="Legal Representative Name" required>
+            <UInput v-model="corporateForm.legal_rep_name" placeholder="Carlos López" class="w-full" />
+          </UFormField>
+          <UFormField label="Legal Representative Document ID" required>
+            <UInput v-model="corporateForm.legal_rep_document_id" placeholder="8-789-012" class="w-full" />
+          </UFormField>
+          <UFormField label="Address" class="col-span-2">
+            <UInput v-model="corporateForm.address" placeholder="Calle 100, Panama City" class="w-full" />
+          </UFormField>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Submit -->
+    <div class="flex justify-end gap-3">
+      <NuxtLink to="/customers">
+        <UButton color="gray" variant="soft">Cancel</UButton>
+      </NuxtLink>
+      <UButton
+        color="primary"
+        icon="i-heroicons-check"
+        :loading="submitting"
+        :disabled="!isValid"
+        @click="submit"
+      >
+        Create Customer
+      </UButton>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+/* Prevent width expansion when dropdowns open */
+:deep(.grid) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UFormField) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UInput) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.USelect) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Prevent dropdown menus from expanding container */
+:deep([role="listbox"]) {
+  position: fixed !important;
+  z-index: 50;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+/* Ensure form fields don't cause expansion */
+:deep(.space-y-4) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Prevent any element from expanding beyond container */
+:deep(*) {
+  max-width: 100%;
+}
+
+/* Specific fix for dropdown positioning */
+:deep(.USelectMenuPopover) {
+  position: fixed !important;
+  z-index: 100;
+}
+
+/* Ensure form stability */
+:deep(.UCard) {
+  width: 100%;
+  min-width: 0;
+}
+</style>
diff --git a/app/pages/policies/[id].vue b/app/pages/policies/[id].vue
index fe30550..441e80c 100644
--- a/app/pages/policies/[id].vue
+++ b/app/pages/policies/[id].vue
@@ -26,7 +26,7 @@ function statusColor(status: string) {
   switch (status) {
     case 'quote_requested': return 'yellow'
     case 'quotes_received': return 'blue'
-    case 'solicitation_sent': return 'purple'
+    case 'awaiting_policy': return 'purple'
     case 'issued': return 'green'
     default: return 'gray'
   }
@@ -36,7 +36,7 @@ function statusLabel(status: string) {
   switch (status) {
     case 'quote_requested': return 'Quote Requested'
     case 'quotes_received': return 'Quotes Received'
-    case 'solicitation_sent': return 'Solicitation Sent'
+    case 'awaiting_policy': return 'Awaiting Policy'
     case 'issued': return 'Issued'
     default: return status
   }
@@ -57,7 +57,7 @@ function policyApplicantDoc(p: any) {
 }
 
 function policyDetailsSummary(p: any) {
-  const d = p.policy_details
+  const d = p.insured_object
   if (!d || typeof d !== 'object') return '—'
   if (p.policy_type === 'car') {
     const parts = [d.year, d.make, d.model].filter((x: any) => x != null && String(x) !== '')
diff --git a/app/pages/policies/book.vue b/app/pages/policies/book.vue
index 348d268..dd7ad58 100644
--- a/app/pages/policies/book.vue
+++ b/app/pages/policies/book.vue
@@ -36,7 +36,7 @@ function policyApplicantName(p: any) {
 }
 
 function policyDetailsSummary(p: any) {
-  const d = p.policy_details
+  const d = p.insured_object
   if (!d || typeof d !== 'object') return '—'
   if (p.policy_type === 'car') {
     const parts = [d.year, d.make, d.model].filter((x: any) => x !== undefined && x !== null && String(x) !== '')
@@ -55,7 +55,7 @@ function statusColor(status: string) {
   switch (status) {
     case 'quote_requested': return 'yellow'
     case 'quotes_received': return 'blue'
-    case 'solicitation_sent': return 'purple'
+    case 'awaiting_policy': return 'purple'
     case 'issued': return 'green'
     default: return 'gray'
   }
@@ -65,7 +65,7 @@ function statusLabel(status: string) {
   switch (status) {
     case 'quote_requested': return 'Quote Requested'
     case 'quotes_received': return 'Quotes Received'
-    case 'solicitation_sent': return 'Solicitation Sent'
+    case 'awaiting_policy': return 'Awaiting Policy'
     case 'issued': return 'Issued'
     default: return status
   }
diff --git a/app/pages/policies/groups/index.vue b/app/pages/policies/groups/index.vue
index 0905730..493c8bf 100644
--- a/app/pages/policies/groups/index.vue
+++ b/app/pages/policies/groups/index.vue
@@ -29,7 +29,7 @@ function policyApplicantName(p: any) {
 }
 
 function policyDetailsSummary(p: any) {
-  const d = p.policy_details
+  const d = p.insured_object
   if (!d || typeof d !== 'object') return '—'
   if (p.policy_type === 'car') {
     const parts = [d.year, d.make, d.model].filter((x: any) => x !== undefined && x !== null && String(x) !== '')
@@ -48,7 +48,7 @@ function statusColor(status: string) {
   switch (status) {
     case 'quote_requested': return 'yellow'
     case 'quotes_received': return 'blue'
-    case 'solicitation_sent': return 'purple'
+    case 'awaiting_policy': return 'purple'
     case 'issued': return 'green'
     default: return 'gray'
   }
@@ -58,7 +58,7 @@ function statusLabel(status: string) {
   switch (status) {
     case 'quote_requested': return 'Quote Requested'
     case 'quotes_received': return 'Quotes Received'
-    case 'solicitation_sent': return 'Solicitation Sent'
+    case 'awaiting_policy': return 'Awaiting Policy'
     case 'issued': return 'Issued'
     default: return status
   }
diff --git a/app/pages/policies/index.vue b/app/pages/policies/index.vue
index 25cb0fb..90bfd06 100644
--- a/app/pages/policies/index.vue
+++ b/app/pages/policies/index.vue
@@ -11,7 +11,7 @@ const statusItems = [
   { label: 'All Statuses', value: null },
   { label: 'Quote Requested', value: 'quote_requested' },
   { label: 'Quotes Received', value: 'quotes_received' },
-  { label: 'Solicitation Sent', value: 'solicitation_sent' },
+  { label: 'Awaiting Policy', value: 'awaiting_policy' },
   { label: 'Issued', value: 'issued' }
 ]
 
@@ -45,6 +45,11 @@ const { data, pending, refresh } = usePolicy('/policies', {
   })
 })
 
+// Ensure data is refreshed when page loads
+onMounted(() => {
+  refresh()
+})
+
 const policies = computed(() => data.value?.data ?? [])
 const meta = computed(() => data.value?.meta)
 
@@ -67,7 +72,7 @@ function policyApplicantDoc(p: any) {
 }
 
 function policyDetailsSummary(p: any) {
-  const d = p.policy_details
+  const d = p.insured_object
   if (!d || typeof d !== 'object') return '—'
   if (p.policy_type === 'car') {
     const parts = [d.year, d.make, d.model].filter((x: any) => x !== undefined && x !== null && String(x) !== '')
@@ -86,7 +91,7 @@ function statusColor(status: string) {
   switch (status) {
     case 'quote_requested': return 'yellow'
     case 'quotes_received': return 'blue'
-    case 'solicitation_sent': return 'purple'
+    case 'awaiting_policy': return 'purple'
     case 'issued': return 'green'
     default: return 'gray'
   }
@@ -96,7 +101,7 @@ function statusLabel(status: string) {
   switch (status) {
     case 'quote_requested': return 'Quote Requested'
     case 'quotes_received': return 'Quotes Received'
-    case 'solicitation_sent': return 'Solicitation Sent'
+    case 'awaiting_policy': return 'Awaiting Policy'
     case 'issued': return 'Issued'
     default: return status
   }
diff --git a/app/pages/policies/new.vue b/app/pages/policies/new.vue
index 7329c18..5730538 100644
--- a/app/pages/policies/new.vue
+++ b/app/pages/policies/new.vue
@@ -3,75 +3,62 @@ import type { SelectItem } from '@nuxt/ui'
 import { refDebounced } from '@vueuse/core'
 
 const router = useRouter()
-const policyType = ref<'car' | 'life' | 'fire'>('car')
+const policyType = ref<'car' | 'life' | 'fire_structure' | 'fire_contents'>('car')
 const submitting  = ref(false)
 const toast       = useToast()
 const { $policy } = useNuxtApp()
 
 // ---------------------------------------------------------------------------
-// Customer selection
+// Buyer and Insured Information
 // ---------------------------------------------------------------------------
 
-const customerSearch          = ref('')
-const debouncedCustomerSearch = refDebounced(customerSearch, 300)
-const customerPage            = ref(1)
-const selectedCustomer        = ref<any>(null)
-
-const { data: customersData, pending: customersPending } = useCustomer('/customers', {
-  query: computed(() => ({
-    'page_size': 12,
-    'page': customerPage.value,
-    ...(debouncedCustomerSearch.value && {
-      'filters[0][field]': 'search',
-      'filters[0][op]': '==',
-      'filters[0][value]': debouncedCustomerSearch.value
-    })
-  }))
+const buyerInfo = ref({
+  type: 'individual' as 'individual' | 'corporate',
+  name: '',
+  date_of_birth: '',
+  document_id: '',
+  email: '',
+  phone: '',
+  address: '',
+  company_name: '',
+  ruc: '',
+  legal_rep_name: '',
+  legal_rep_document: ''
 })
 
-watch(debouncedCustomerSearch, () => { customerPage.value = 1 })
+const insuredInfo = ref({
+  type: 'individual' as 'individual' | 'corporate',
+  name: '',
+  date_of_birth: '',
+  document_id: '',
+  gender: 'male' as 'male' | 'female',
+  email: '',
+  phone: '',
+  address: '',
+  company_name: '',
+  ruc: '',
+  legal_rep_name: '',
+  legal_rep_document: ''
+})
 
-const customerItems = computed(() => customersData.value?.data ?? [])
-const customerMeta  = computed(() => customersData.value?.meta)
-
-function selectCustomer(customer: any) {
-  selectedCustomer.value = customer
+function copyBuyerToInsured() {
+  insuredInfo.value = { ...buyerInfo.value }
 }
 
-const customerDisplayName = (c: any) =>
-  c.customer_type === 'corporate'
-    ? (c.commercial_name || c.legal_name)
-    : `${c.first_name} ${c.last_name}`
-
-const customerSubtitle = (c: any) =>
-  c.customer_type === 'corporate' ? c.ruc : c.email
-
-// Build applicant_info from selected customer — shape varies by type
-const applicantInfo = computed(() => {
-  const c = selectedCustomer.value
-  if (!c) return null
-  if (c.customer_type === 'corporate') {
-    return {
-      company_name:       c.legal_name,
-      ruc:                c.ruc,
-      legal_rep_name:     c.legal_rep_name,
-      legal_rep_document: c.legal_rep_document_id
-    }
-  }
-  return {
-    name:          `${c.first_name} ${c.last_name}`.trim(),
-    date_of_birth: c.birth_date,
-    document_id:   c.document_id
+const isBuyerValid = computed(() => {
+  const b = buyerInfo.value
+  if (b.type === 'corporate') {
+    return !!(b.company_name && b.ruc && b.legal_rep_name && b.legal_rep_document)
   }
+  return !!(b.name && b.date_of_birth && b.document_id)
 })
 
-const isApplicantValid = computed(() => {
-  const c = selectedCustomer.value
-  if (!c) return false
-  if (c.customer_type === 'corporate') {
-    return !!(c.legal_name && c.ruc)
+const isInsuredValid = computed(() => {
+  const i = insuredInfo.value
+  if (i.type === 'corporate') {
+    return !!(i.company_name && i.ruc && i.legal_rep_name && i.legal_rep_document)
   }
-  return !!(c.birth_date && c.document_id)
+  return !!(i.name && i.date_of_birth && i.document_id && i.gender)
 })
 
 // ---------------------------------------------------------------------------
@@ -81,7 +68,8 @@ const isApplicantValid = computed(() => {
 const policyTypeItems = ref<SelectItem[]>([
   { label: 'Car Insurance',  value: 'car'  },
   { label: 'Life Insurance', value: 'life', disabled: true },
-  { label: 'Fire Insurance', value: 'fire', disabled: true }
+  { label: 'Fire Structure', value: 'fire_structure', disabled: true },
+  { label: 'Fire Contents', value: 'fire_contents', disabled: true }
 ])
 
 // ---------------------------------------------------------------------------
@@ -94,11 +82,16 @@ const carForm = ref({
     make:           '',
     model:          '',
     year:           new Date().getFullYear(),
-    car_value:      '',
+    market_value:   '',
+    requested_value: '',
     use_type:       'private',
     car_type:       'sedan',
     chassis_number: '',
-    engine_number:  ''
+    engine_number:  '',
+    rc_limits: {
+      bodily_injury: 0,
+      property_damage: 0
+    }
   },
   selected_providers: [] as { provider_id: string, email: string }[]
 })
@@ -169,14 +162,15 @@ async function submitCarPolicy() {
       method: 'POST',
       body: {
         policy_type:        'car',
-        applicant_info:     applicantInfo.value,
-        policy_details:     carForm.value.car_details,
+        buyer:              buyerInfo.value,
+        insured:            insuredInfo.value,
+        insured_object:     carForm.value.car_details,
         selected_providers: carForm.value.selected_providers
       }
     }) as any
 
     toast.add({ title: 'Policy submitted successfully', color: 'green' })
-    router.push(`/policies/app/${data.application_id}`)
+    router.push(`/policies/${data.application_id}`)
   } catch (e: any) {
     toast.add({
       title:       'Failed to submit policy',
@@ -191,14 +185,15 @@ async function submitCarPolicy() {
 const isCarFormValid = computed(() => {
   const { car_details, selected_providers } = carForm.value
   return (
-    isApplicantValid.value &&
+    isBuyerValid.value &&
+    isInsuredValid.value &&
     car_details.plate &&
     car_details.make &&
     car_details.model &&
     car_details.year &&
-    car_details.car_value &&
-    car_details.chassis_number &&
-    car_details.engine_number &&
+    car_details.market_value &&
+    car_details.requested_value &&
+    car_details.rc_limits &&
     selected_providers.length > 0
   )
 })
@@ -219,113 +214,145 @@ const isCarFormValid = computed(() => {
       </div>
     </div>
 
-    <!-- Customer Selection -->
+    <!-- Buyer Information -->
     <UCard>
       <template #header>
         <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
-          <UIcon name="i-heroicons-users" class="w-4 h-4" />
-          Select Customer
+          <UIcon name="i-heroicons-user" class="w-4 h-4" />
+          Buyer Information
         </p>
       </template>
 
       <div class="space-y-4">
-        <UInput
-          v-model="customerSearch"
-          icon="i-heroicons-magnifying-glass"
-          placeholder="Search by name, email, RUC..."
-          class="w-full max-w-sm"
-        />
-
-        <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
-          <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
+        <div class="flex gap-4 mb-4">
+          <UFormField label="Type" required class="flex-1">
+            <USelect v-model="buyerInfo.type" :items="[{label: 'Individual', value: 'individual'}, {label: 'Corporate', value: 'corporate'}]" class="w-full" />
+          </UFormField>
         </div>
 
-        <div v-else class="space-y-3">
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 max-h-72 overflow-y-auto pr-1">
-            <div
-              v-for="c in customerItems"
-              :key="c.id"
-              class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
-              :class="selectedCustomer?.id === c.id
-                ? 'border-primary-500 bg-primary-50'
-                : 'border-gray-200 hover:border-gray-300 bg-[var(--surface)]'"
-              @click="selectCustomer(c)"
-            >
-              <UAvatar :alt="customerDisplayName(c)" size="sm" />
-              <div class="min-w-0 flex-1">
-                <div class="flex items-center gap-1.5">
-                  <p class="font-medium text-sm text-[var(--text-primary)] truncate">{{ customerDisplayName(c) }}</p>
-                  <UBadge
-                    :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
-                    variant="soft" size="xs" class="flex-shrink-0"
-                  >
-                    {{ c.customer_type === 'corporate' ? 'Corp' : 'Ind' }}
-                  </UBadge>
-                </div>
-                <p class="text-xs text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
-              </div>
-              <UIcon
-                v-if="selectedCustomer?.id === c.id"
-                name="i-heroicons-check-circle"
-                class="w-5 h-5 text-primary-500 flex-shrink-0"
-              />
-            </div>
-
-            <div v-if="customerItems.length === 0" class="col-span-3 text-center py-6 text-gray-400 text-sm">
-              No customers found.
-              <NuxtLink to="/customers/new" class="text-primary-500 underline ml-1">Create one</NuxtLink>
-            </div>
+        <template v-if="buyerInfo.type === 'individual'">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Full Name" required class="col-span-2">
+              <UInput v-model="buyerInfo.name" placeholder="Juan Pérez" class="w-full" />
+            </UFormField>
+            <UFormField label="Date of Birth" required>
+              <UInput v-model="buyerInfo.date_of_birth" type="date" class="w-full" />
+            </UFormField>
+            <UFormField label="Document ID" required>
+              <UInput v-model="buyerInfo.document_id" placeholder="8-123-456" class="w-full" />
+            </UFormField>
+            <UFormField label="Email">
+              <UInput v-model="buyerInfo.email" type="email" placeholder="juan@example.com" class="w-full" />
+            </UFormField>
+            <UFormField label="Phone">
+              <UInput v-model="buyerInfo.phone" placeholder="+507-1234-5678" class="w-full" />
+            </UFormField>
+            <UFormField label="Address" class="col-span-2">
+              <UInput v-model="buyerInfo.address" placeholder="Calle 50, Panama City" class="w-full" />
+            </UFormField>
           </div>
+        </template>
 
-          <div v-if="customerMeta && customerMeta.total_pages > 1" class="flex justify-between items-center text-sm text-gray-500">
-            <span>{{ customerMeta.total_count }} customers</span>
-            <UPagination
-              v-model="customerPage"
-              :total="customerMeta.total_count"
-              :page-count="customerMeta.page_size"
-              size="sm"
-            />
+        <template v-else>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Company Name" required class="col-span-2">
+              <UInput v-model="buyerInfo.company_name" placeholder="Empresa XYZ S.A." class="w-full" />
+            </UFormField>
+            <UFormField label="RUC" required>
+              <UInput v-model="buyerInfo.ruc" placeholder="987654-1-987654" class="w-full" />
+            </UFormField>
+            <UFormField label="Legal Representative Name" required>
+              <UInput v-model="buyerInfo.legal_rep_name" placeholder="Carlos López" class="w-full" />
+            </UFormField>
+            <UFormField label="Legal Representative Document" required>
+              <UInput v-model="buyerInfo.legal_rep_document" placeholder="8-789-012" class="w-full" />
+            </UFormField>
+            <UFormField label="Email">
+              <UInput v-model="buyerInfo.email" type="email" placeholder="carlos@empresa-xyz.com" class="w-full" />
+            </UFormField>
+            <UFormField label="Phone">
+              <UInput v-model="buyerInfo.phone" placeholder="+507-8765-4321" class="w-full" />
+            </UFormField>
+            <UFormField label="Address" class="col-span-2">
+              <UInput v-model="buyerInfo.address" placeholder="Calle 100, Panama City" class="w-full" />
+            </UFormField>
           </div>
+        </template>
+      </div>
+    </UCard>
+
+    <!-- Insured Information -->
+    <UCard>
+      <template #header>
+        <div class="flex justify-between items-center">
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
+            <UIcon name="i-heroicons-shield-check" class="w-4 h-4" />
+            Insured Information
+          </p>
+          <UButton size="xs" color="gray" variant="soft" @click="copyBuyerToInsured">
+            Copy from Buyer
+          </UButton>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <div class="flex gap-4 mb-4">
+          <UFormField label="Type" required class="flex-1">
+            <USelect v-model="insuredInfo.type" :items="[{label: 'Individual', value: 'individual'}, {label: 'Corporate', value: 'corporate'}]" class="w-full" />
+          </UFormField>
         </div>
 
-        <!-- Selected summary -->
-        <div
-          v-if="selectedCustomer"
-          class="flex items-center gap-4 p-3 bg-primary-50 border border-primary-200 rounded-lg text-sm"
-        >
-          <UAvatar :alt="customerDisplayName(selectedCustomer)" size="sm" />
-          <div class="flex-1">
-            <div class="flex items-center gap-2">
-              <p class="font-medium text-primary-800">{{ customerDisplayName(selectedCustomer) }}</p>
-              <UBadge
-                :color="selectedCustomer.customer_type === 'corporate' ? 'purple' : 'blue'"
-                variant="soft" size="xs"
-              >
-                {{ selectedCustomer.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
-              </UBadge>
-            </div>
-            <p class="text-primary-600 text-xs">{{ selectedCustomer.email }}</p>
+        <template v-if="insuredInfo.type === 'individual'">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Full Name" required class="col-span-2">
+              <UInput v-model="insuredInfo.name" placeholder="María García" class="w-full" />
+            </UFormField>
+            <UFormField label="Date of Birth" required>
+              <UInput v-model="insuredInfo.date_of_birth" type="date" class="w-full" />
+            </UFormField>
+            <UFormField label="Document ID" required>
+              <UInput v-model="insuredInfo.document_id" placeholder="8-456-789" class="w-full" />
+            </UFormField>
+            <UFormField label="Gender" required>
+              <USelect v-model="insuredInfo.gender" :items="[{label: 'Male', value: 'male'}, {label: 'Female', value: 'female'}]" class="w-full" />
+            </UFormField>
+            <UFormField label="Email">
+              <UInput v-model="insuredInfo.email" type="email" placeholder="maria@example.com" class="w-full" />
+            </UFormField>
+            <UFormField label="Phone">
+              <UInput v-model="insuredInfo.phone" placeholder="+507-8765-4321" class="w-full" />
+            </UFormField>
+            <UFormField label="Address" class="col-span-2">
+              <UInput v-model="insuredInfo.address" placeholder="Calle 75, Panama City" class="w-full" />
+            </UFormField>
           </div>
-          <div class="text-xs text-primary-600 text-right space-y-0.5">
-            <template v-if="selectedCustomer.customer_type === 'corporate'">
-              <p>RUC: {{ selectedCustomer.ruc ?? '—' }}</p>
-              <p>Rep: {{ selectedCustomer.legal_rep_name ?? '—' }}</p>
-            </template>
-            <template v-else>
-              <p>DOB: {{ selectedCustomer.birth_date ?? '—' }}</p>
-              <p>Doc: {{ selectedCustomer.document_id ?? '—' }}</p>
-            </template>
-          </div>
-          <UButton size="xs" color="gray" variant="ghost" @click="selectedCustomer = null">Change</UButton>
-        </div>
+        </template>
 
-        <!-- Warn if individual customer missing required fields -->
-        <UAlert
-          v-if="selectedCustomer && selectedCustomer.customer_type !== 'corporate' && (!selectedCustomer.birth_date || !selectedCustomer.document_id)"
-          color="yellow" variant="soft" icon="i-heroicons-exclamation-triangle"
-          title="Incomplete customer record"
-          description="This customer is missing date of birth or document ID. Please update their record before submitting."
-        />
+        <template v-else>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Company Name" required class="col-span-2">
+              <UInput v-model="insuredInfo.company_name" placeholder="Empresa ABC S.A." class="w-full" />
+            </UFormField>
+            <UFormField label="RUC" required>
+              <UInput v-model="insuredInfo.ruc" placeholder="123456-1-123456" class="w-full" />
+            </UFormField>
+            <UFormField label="Legal Representative Name" required>
+              <UInput v-model="insuredInfo.legal_rep_name" placeholder="María García" class="w-full" />
+            </UFormField>
+            <UFormField label="Legal Representative Document" required>
+              <UInput v-model="insuredInfo.legal_rep_document" placeholder="8-456-789" class="w-full" />
+            </UFormField>
+            <UFormField label="Email">
+              <UInput v-model="insuredInfo.email" type="email" placeholder="contact@empresa-abc.com" class="w-full" />
+            </UFormField>
+            <UFormField label="Phone">
+              <UInput v-model="insuredInfo.phone" placeholder="+507-1234-5678" class="w-full" />
+            </UFormField>
+            <UFormField label="Address" class="col-span-2">
+              <UInput v-model="insuredInfo.address" placeholder="Calle 50, Panama City" class="w-full" />
+            </UFormField>
+          </div>
+        </template>
       </div>
     </UCard>
 
@@ -389,8 +416,11 @@ const isCarFormValid = computed(() => {
               class="w-full"
             />
           </UFormField>
-          <UFormField label="Car Value (USD)" required>
-            <UInput v-model="carForm.car_details.car_value" type="number" placeholder="18000" class="w-full" />
+          <UFormField label="Market Value (USD)" required>
+            <UInput v-model="carForm.car_details.market_value" type="number" placeholder="18000" class="w-full" />
+          </UFormField>
+          <UFormField label="Requested Value (USD)" required>
+            <UInput v-model="carForm.car_details.requested_value" type="number" placeholder="20000" class="w-full" />
           </UFormField>
           <UFormField label="Use Type" required>
             <USelect v-model="carForm.car_details.use_type" :items="useTypeItems" class="w-full" />
@@ -398,13 +428,26 @@ const isCarFormValid = computed(() => {
           <UFormField label="Car Type" required>
             <USelect v-model="carForm.car_details.car_type" :items="carTypeItems" class="w-full" />
           </UFormField>
-          <UFormField label="Chassis Number" required>
+          <UFormField label="Chassis Number">
             <UInput v-model="carForm.car_details.chassis_number" placeholder="9BWZZZ377VT004251" class="w-full" />
           </UFormField>
-          <UFormField label="Engine Number" required>
+          <UFormField label="Engine Number">
             <UInput v-model="carForm.car_details.engine_number" placeholder="1NZ-FE-1234567" class="w-full" />
           </UFormField>
         </div>
+
+        <!-- RC Limits -->
+        <div class="mt-6 pt-6 border-t">
+          <p class="font-medium text-sm text-[var(--text-primary)] mb-4">RC Limits</p>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Bodily Injury Limit (USD)" required>
+              <UInput v-model.number="carForm.car_details.rc_limits.bodily_injury" type="number" placeholder="50000" class="w-full" />
+            </UFormField>
+            <UFormField label="Property Damage Limit (USD)" required>
+              <UInput v-model.number="carForm.car_details.rc_limits.property_damage" type="number" placeholder="25000" class="w-full" />
+            </UFormField>
+          </div>
+        </div>
       </UCard>
 
       <!-- Provider Selection -->
@@ -500,3 +543,58 @@ const isCarFormValid = computed(() => {
     </template>
   </div>
 </template>
+
+<style scoped>
+/* Prevent width expansion when dropdowns open */
+:deep(.grid) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UFormField) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UInput) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.USelect) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Prevent dropdown menus from expanding container */
+:deep([role="listbox"]) {
+  position: fixed !important;
+  z-index: 50;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+/* Ensure form fields don't cause expansion */
+:deep(.space-y-4) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Prevent any element from expanding beyond container */
+:deep(*) {
+  max-width: 100%;
+}
+
+/* Specific fix for dropdown positioning */
+:deep(.USelectMenuPopover) {
+  position: fixed !important;
+  z-index: 100;
+}
+
+/* Ensure form stability */
+:deep(.UCard) {
+  width: 100%;
+  min-width: 0;
+}
+</style>
diff --git a/app/pages/providers/index.vue b/app/pages/providers/index.vue
index 48258a9..49c5542 100644
--- a/app/pages/providers/index.vue
+++ b/app/pages/providers/index.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 const search = ref('')
 const { data, pending, refresh } = useProviders('/providers')
+
+// Ensure data is refreshed when page loads
+onMounted(() => {
+  refresh()
+})
+
 const providers = computed(() => {
   const list = data.value?.data ?? []
   if (!search.value) return list
diff --git a/app/pages/providers/new.vue b/app/pages/providers/new.vue
index efbbafe..33622e0 100644
--- a/app/pages/providers/new.vue
+++ b/app/pages/providers/new.vue
@@ -5,10 +5,10 @@ const toast = useToast()
 const { $providers } = useNuxtApp()
 
 const form = ref({
-  name: '', email: '', phone: '', contact_name: '', ruc: '', address: ''
+  provider_id: '', name: '', email: '', phone: '', contact_name: '', ruc: '', address: ''
 })
 
-const isValid = computed(() => form.value.name && form.value.email)
+const isValid = computed(() => form.value.provider_id && form.value.name && form.value.email)
 
 async function submit() {
   submitting.value = true
@@ -45,6 +45,10 @@ async function submit() {
 
       <div class="space-y-4">
         <div class="grid grid-cols-2 gap-4">
+          <UFormField label="Provider ID" required>
+            <UInput v-model="form.provider_id" placeholder="seguros-abc" class="w-full" />
+            <p class="text-xs text-gray-500 mt-1">Alphanumeric identifier (letters and numbers only)</p>
+          </UFormField>
           <UFormField label="Company Name" required class="col-span-2">
             <UInput v-model="form.name" placeholder="Seguros Panama S.A." class="w-full" />
           </UFormField>
@@ -77,3 +81,58 @@ async function submit() {
     </UCard>
   </div>
 </template>
+
+<style scoped>
+/* Prevent width expansion when dropdowns open */
+:deep(.grid) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UFormField) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UInput) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.USelect) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Prevent dropdown menus from expanding container */
+:deep([role="listbox"]) {
+  position: fixed !important;
+  z-index: 50;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+/* Ensure form fields don't cause expansion */
+:deep(.space-y-4) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Prevent any element from expanding beyond container */
+:deep(*) {
+  max-width: 100%;
+}
+
+/* Specific fix for dropdown positioning */
+:deep(.USelectMenuPopover) {
+  position: fixed !important;
+  z-index: 100;
+}
+
+/* Ensure form stability */
+:deep(.UCard) {
+  width: 100%;
+  min-width: 0;
+}
+</style>
diff --git a/app/pages/quotes/new.vue b/app/pages/quotes/new.vue
index 291bc7c..ec6b502 100644
--- a/app/pages/quotes/new.vue
+++ b/app/pages/quotes/new.vue
@@ -276,7 +276,7 @@ async function submitQuote() {
           legal_rep_document: form.customerSelection.selectedBuyer.legal_rep_document_id
         })
       },
-      policy_details: getPolicyDetails(form),
+      insured_object: getPolicyDetails(form),
       selected_providers: form.selectedProviders.map(id => ({
         provider_id: id,
         email: ''
@@ -353,7 +353,7 @@ function getPolicyDetails(form: any) {
 </script>
 
 <template>
-  <div class="max-w-4xl mx-auto">
+  <div class="max-w-4xl mx-auto quote-form-container">
     <div class="mb-8">
       <div class="flex items-center gap-3 mb-2">
         <div class="w-10 h-10 rounded-lg bg-[var(--brand)] flex items-center justify-center">
@@ -386,14 +386,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-truck',
           content: '',
           value: 'vehicle',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -489,14 +489,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-shield-check',
           content: '',
           value: 'life',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -573,14 +573,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-building-office-2',
           content: '',
           value: 'property',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -642,14 +642,14 @@ function getPolicyDetails(form: any) {
           icon: 'i-heroicons-building-office-2',
           content: '',
           value: 'contents',
-          defaultOpen: true
+          defaultOpen: false
         },
         {
           label: 'Provider Selection',
           icon: 'i-heroicons-building-office',
           content: '',
           value: 'provider',
-          defaultOpen: true
+          defaultOpen: false
         }
       ]">
         <template #body="{ item }">
@@ -698,3 +698,87 @@ function getPolicyDetails(form: any) {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* Main container width stability */
+.quote-form-container {
+  width: 100%;
+  max-width: 56rem; /* max-w-4xl equivalent */
+  margin: 0 auto;
+}
+
+/* Prevent width expansion when dropdowns open */
+:deep(.grid) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UFormField) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.UInput) {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.USelectMenu) {
+  min-width: 0;
+  width: 100%;
+}
+
+/* Ensure accordion content maintains width */
+:deep(.UAccordion) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep([data-headlessui-state]) {
+  min-width: 0;
+}
+
+/* Prevent dropdown menus from expanding container */
+:deep([role="listbox"]) {
+  position: fixed !important;
+  z-index: 50;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+/* Ensure form fields don't cause expansion */
+:deep(.p-5) {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Fix accordion content width */
+:deep(.UAccordionItem) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.UAccordionContent) {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Prevent any element from expanding beyond container */
+:deep(*) {
+  max-width: 100%;
+}
+
+/* Specific fix for dropdown positioning */
+:deep(.USelectMenuPopover) {
+  position: fixed !important;
+  z-index: 100;
+}
+
+/* Ensure form stability */
+:deep(.UForm) {
+  width: 100%;
+  min-width: 0;
+}
+</style>
diff --git a/app/pages/sales/leads/index.vue b/app/pages/sales/leads/index.vue
index ea5b312..cdba14f 100644
--- a/app/pages/sales/leads/index.vue
+++ b/app/pages/sales/leads/index.vue
@@ -2,8 +2,6 @@
 definePageMeta({ ssr: false })
 usePageTitle('Leads Hub')
 
-const sidebarFeatures = useSidebarFeatures()
-
 /* ── Types ── */
 
 type LeadSource = 'walk_in' | 'instagram' | 'facebook' | 'google' | 'referral' | 'website' | 'phone' | 'campaign'
diff --git a/app/pages/tasks/[id].vue b/app/pages/tasks/[id].vue
deleted file mode 100644
index 6f8ccd0..0000000
--- a/app/pages/tasks/[id].vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const id = route.params.id as string
-
-const { data, pending, error, refresh } = useTasks(`/tasks/${id}`)
-const task = computed(() => data.value.task)
-
-const payload = computed(() => data.value?.payload)
-
-const isSolicitation = computed(() => task.value?.comm_type === 'solicitation')
-const isQuote        = computed(() => task.value?.comm_type === 'quote')
-
-// ── Respond (quote) ──────────────────────────────────────────────────────────
-const isRespondOpen = ref(false)
-const submitting    = ref(false)
-const toast         = useToast()
-const { $tasks } = useNuxtApp()
-
-const plans = ref([{ name: '', premium: '', coverage_details: '', deductible: '', coverage_limit: '' }])
-const respondForm = ref({ valid_until: '', entered_by: '' })
-
-function addPlan() { plans.value.push({ name: '', premium: '', coverage_details: '', deductible: '', coverage_limit: '' }) }
-function removePlan(i: number) { plans.value.splice(i, 1) }
-
-async function submitResponse() {
-  submitting.value = true
-  try {
-    await $tasks(`/tasks/${id}/respond`, {
-      method: 'POST',
-      body: {
-        valid_until: respondForm.value.valid_until,
-        entered_by:  respondForm.value.entered_by,
-        plans: plans.value.map(p => ({
-          name: p.name, premium: parseFloat(p.premium), coverage_details: p.coverage_details,
-          deductible: p.deductible ? parseFloat(p.deductible) : 0,
-          coverage_limit: p.coverage_limit ? parseFloat(p.coverage_limit) : 0
-        }))
-      }
-    })
-    toast.add({ title: 'Response submitted', color: 'green' })
-    isRespondOpen.value = false
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { submitting.value = false }
-}
-
-const isRespondFormValid = computed(() =>
-  respondForm.value.valid_until && respondForm.value.entered_by &&
-  plans.value.every(p => p.name && p.premium && p.coverage_details)
-)
-
-// ── Confirm delivery (solicitation) ─────────────────────────────────────────
-const confirmingDelivery = ref(false)
-
-async function confirmDelivery() {
-  confirmingDelivery.value = true
-  try {
-    await $tasks(`/tasks/${id}/confirm-delivery`, { method: 'POST' })
-    toast.add({ title: 'Delivery confirmed', color: 'green' })
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { confirmingDelivery.value = false }
-}
-
-// ── Issue policy (solicitation) ──────────────────────────────────────────────
-const isIssueOpen = ref(false)
-const issuing     = ref(false)
-const issueForm   = ref({ policy_number: '', effective_date: '', expiry_date: '' })
-
-const isIssueFormValid = computed(() =>
-  issueForm.value.policy_number && issueForm.value.effective_date && issueForm.value.expiry_date
-)
-
-async function submitIssuePolicy() {
-  issuing.value = true
-  try {
-    await $tasks(`/tasks/${id}/issue-policy`, { method: 'POST', body: issueForm.value })
-    toast.add({ title: 'Policy issued successfully', color: 'green' })
-    isIssueOpen.value = false
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { issuing.value = false }
-}
-
-// ── Solicitation PDF ─────────────────────────────────────────────────────────
-const pdfUrl     = computed(() => task.value?.download_url ?? null)
-const showPdf    = ref(false)
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-const statusColor = (s: string) =>
-  ({ pending: 'yellow', responded: 'blue', delivered: 'purple', issued: 'green' }[s] ?? 'gray')
-
-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="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <NuxtLink to="/tasks">
-      <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Tasks</UButton>
-    </NuxtLink>
-
-    <UAlert v-if="error" color="red" variant="soft" title="Failed to load task" :description="error.message" />
-    <div v-else-if="pending" class="space-y-4"><UCard v-for="n in 3" :key="n"><div class="h-32 animate-pulse bg-gray-200 rounded" /></UCard></div>
-
-    <template v-else-if="task">
-      <!-- Header -->
-      <div class="flex justify-between items-start">
-        <div class="space-y-2">
-          <div class="flex items-center gap-2 flex-wrap">
-            <UBadge :color="statusColor(task.status)" variant="soft">{{ task.status }}</UBadge>
-            <UBadge color="blue" variant="outline">{{ task.policy_type?.toUpperCase() }}</UBadge>
-            <UBadge color="gray" variant="outline">{{ task.comm_type }}</UBadge>
-          </div>
-          <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)] font-mono">{{ task.application_id }}</h1>
-          <p class="mt-1 text-[13px] text-[var(--text-muted)]">Received {{ formatDate(task.created_at) }}</p>
-        </div>
-
-        <!-- Actions -->
-        <div class="flex gap-2 flex-wrap justify-end">
-          <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
-
-          <!-- Quote actions -->
-          <UButton v-if="isQuote && task.status === 'pending'"
-            icon="i-heroicons-chat-bubble-left-right" color="primary" @click="isRespondOpen = true">
-            Record Response
-          </UButton>
-
-          <!-- Solicitation actions -->
-          <template v-if="isSolicitation">
-            <UButton v-if="task.status === 'pending'"
-              icon="i-heroicons-check" color="green" variant="soft"
-              :loading="confirmingDelivery" @click="confirmDelivery">
-              Confirm Delivery
-            </UButton>
-            <UButton v-if="task.status === 'delivered'"
-              icon="i-heroicons-document-check" color="primary" @click="isIssueOpen = true">
-              Issue Policy
-            </UButton>
-          </template>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <!-- Task info -->
-        <UCard>
-          <template #header><p class="font-semibold text-[var(--text-primary)]">Task Info</p></template>
-          <div class="space-y-2 text-sm">
-            <div class="flex justify-between"><span class="text-gray-500">Task ID</span><span class="font-mono text-xs">{{ task.id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Application ID</span><span class="font-mono text-xs">{{ task.application_id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Provider ID</span><span class="font-mono text-xs">{{ task.provider_id }}</span></div>
-            <div v-if="task.provider_name" class="flex justify-between"><span class="text-gray-500">Provider</span><span>{{ task.provider_name }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Org</span><span class="font-mono text-xs">{{ task.org_id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Created</span><span>{{ formatDate(task.created_at) }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Updated</span><span>{{ formatDate(task.updated_at) }}</span></div>
-          </div>
-        </UCard>
-
-        <!-- Payload -->
-        <UCard>
-          <template #header><p class="font-semibold text-[var(--text-primary)]">Request Payload</p></template>
-          <div class="space-y-4 text-sm">
-            <div v-if="payload?.applicant_info">
-              <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Applicant</p>
-              <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
-                <div class="flex justify-between"><span class="text-gray-500">Name</span><span>{{ payload.applicant_info.name }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">DOB</span><span>{{ payload.applicant_info.date_of_birth }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Document</span><span class="font-mono text-xs">{{ payload.applicant_info.document_id }}</span></div>
-              </div>
-            </div>
-            <div v-if="payload?.car_details">
-              <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Vehicle</p>
-              <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
-                <div class="flex justify-between"><span class="text-gray-500">Plate</span><span class="font-mono font-medium">{{ payload.car_details.plate }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Vehicle</span><span>{{ payload.car_details.year }} {{ payload.car_details.make }} {{ payload.car_details.model }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Value</span><span>${{ Number(payload.car_details.car_value).toLocaleString() }}</span></div>
-              </div>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <!-- Solicitation PDF section -->
-      <UCard v-if="isSolicitation">
-        <template #header>
-          <div class="flex justify-between items-center">
-            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
-              <UIcon name="i-heroicons-document-text" class="w-4 h-4" /> Solicitation Document
-            </p>
-            <div class="flex gap-2">
-              <UButton v-if="pdfUrl" icon="i-heroicons-eye" color="gray" variant="soft" size="xs"
-                @click="showPdf = !showPdf">{{ showPdf ? 'Hide' : 'Preview' }}</UButton>
-              <UButton v-if="pdfUrl" icon="i-heroicons-arrow-top-right-on-square"
-                color="gray" variant="soft" size="xs" :to="pdfUrl" target="_blank">Open</UButton>
-            </div>
-          </div>
-        </template>
-
-        <div v-if="!pdfUrl" class="text-center py-10 text-gray-400">
-          <UIcon name="i-heroicons-document" class="w-10 h-10 mx-auto mb-2" />
-          <p class="text-sm">No solicitation document available</p>
-        </div>
-
-        <div v-else-if="showPdf">
-          <iframe :src="pdfUrl" class="w-full rounded-lg border" style="height: 600px;" />
-        </div>
-
-        <div v-else class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
-          <UIcon name="i-heroicons-document-text" class="w-8 h-8 text-red-400 flex-shrink-0" />
-          <div class="flex-1 min-w-0">
-            <p class="text-sm font-medium text-[var(--text-primary)]">Solicitation v{{ task.version ?? 1 }}</p>
-            <p class="text-xs text-gray-400 font-mono truncate">{{ task.s3_key }}</p>
-          </div>
-          <UBadge :color="statusColor(task.status)" variant="soft" size="sm">{{ task.status }}</UBadge>
-        </div>
-      </UCard>
-    </template>
-
-    <!-- Quote respond slideover -->
-    <USlideover v-model:open="isRespondOpen" side="right">
-      <template #content>
-        <div class="flex flex-col h-full">
-          <div class="flex justify-between items-center p-6 border-b">
-            <div><h2 class="text-lg font-semibold text-[var(--text-primary)]">Record Quote Response</h2></div>
-            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isRespondOpen = false" />
-          </div>
-          <div class="flex-1 overflow-y-auto p-6 space-y-6">
-            <div class="grid grid-cols-2 gap-4">
-              <UFormField label="Valid Until" required>
-                <UInput v-model="respondForm.valid_until" type="date" class="w-full" />
-              </UFormField>
-              <UFormField label="Entered By" required>
-                <UInput v-model="respondForm.entered_by" placeholder="Your name" class="w-full" />
-              </UFormField>
-            </div>
-            <div class="space-y-3">
-              <div class="flex justify-between items-center">
-                <p class="font-medium text-sm text-[var(--text-primary)]">Plans <UBadge color="gray" variant="soft" size="xs" class="ml-1">{{ plans.length }}</UBadge></p>
-                <UButton icon="i-heroicons-plus" size="xs" color="gray" variant="soft" @click="addPlan">Add Plan</UButton>
-              </div>
-              <div v-for="(plan, i) in plans" :key="i" class="border rounded-lg p-4 space-y-3">
-                <div class="flex justify-between items-center">
-                  <p class="text-sm font-semibold text-[var(--text-primary)]">Plan {{ i + 1 }}</p>
-                  <UButton v-if="plans.length > 1" icon="i-heroicons-trash" size="xs" color="red" variant="ghost" @click="removePlan(i)" />
-                </div>
-                <div class="grid grid-cols-2 gap-3">
-                  <UFormField label="Name" required><UInput v-model="plan.name" placeholder="Basic / Standard / Premium" class="w-full" /></UFormField>
-                  <UFormField label="Premium (USD)" required><UInput v-model="plan.premium" type="number" class="w-full" /></UFormField>
-                  <UFormField label="Deductible"><UInput v-model="plan.deductible" type="number" class="w-full" /></UFormField>
-                  <UFormField label="Coverage Limit"><UInput v-model="plan.coverage_limit" type="number" class="w-full" /></UFormField>
-                </div>
-                <UFormField label="Coverage Details" required>
-                  <UTextarea v-model="plan.coverage_details" :rows="2" class="w-full" />
-                </UFormField>
-              </div>
-            </div>
-          </div>
-          <div class="p-6 border-t flex justify-end gap-3">
-            <UButton color="gray" variant="soft" @click="isRespondOpen = false">Cancel</UButton>
-            <UButton color="primary" icon="i-heroicons-paper-airplane" :loading="submitting" :disabled="!isRespondFormValid" @click="submitResponse">
-              Submit Response
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </USlideover>
-
-    <!-- Issue policy slideover -->
-    <USlideover v-model:open="isIssueOpen" side="right">
-      <template #content>
-        <div class="flex flex-col h-full">
-          <div class="flex justify-between items-center p-6 border-b">
-            <div>
-              <h2 class="text-lg font-semibold text-[var(--text-primary)]">Issue Policy</h2>
-              <p class="text-sm text-gray-500">Enter the policy details from the provider</p>
-            </div>
-            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isIssueOpen = false" />
-          </div>
-          <div class="flex-1 p-6 space-y-4">
-            <UFormField label="Policy Number" required>
-              <UInput v-model="issueForm.policy_number" placeholder="POL-2026-001" class="w-full" />
-            </UFormField>
-            <UFormField label="Effective Date" required>
-              <UInput v-model="issueForm.effective_date" type="date" class="w-full" />
-            </UFormField>
-            <UFormField label="Expiry Date" required>
-              <UInput v-model="issueForm.expiry_date" type="date" class="w-full" />
-            </UFormField>
-          </div>
-          <div class="p-6 border-t flex justify-end gap-3">
-            <UButton color="gray" variant="soft" @click="isIssueOpen = false">Cancel</UButton>
-            <UButton color="primary" icon="i-heroicons-document-check" :loading="issuing" :disabled="!isIssueFormValid" @click="submitIssuePolicy">
-              Issue Policy
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </USlideover>
-  </div>
-</template>
diff --git a/app/pages/tasks/index.vue b/app/pages/tasks/index.vue
deleted file mode 100644
index 72a6384..0000000
--- a/app/pages/tasks/index.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import type { SelectItem } from '@nuxt/ui'
-
-const page = ref(1)
-const statusFilter = ref<string | null>(null)
-const policyTypeFilter = ref<string | null>(null)
-const commTypeFilter = ref<string | null>(null)
-
-const statusItems = ref<SelectItem[]>([
-  { label: 'All Statuses', value: null },
-  { label: 'Pending', value: 'pending' },
-  { label: 'Responded', value: 'responded' }
-])
-
-const policyTypeItems = ref<SelectItem[]>([
-  { label: 'All Types', value: null },
-  { label: 'Car', value: 'car' },
-  { label: 'Life', value: 'life' },
-  { label: 'Fire', value: 'fire' }
-])
-
-const commTypeItems = ref<SelectItem[]>([
-  { label: 'All Comm Types', value: null },
-  { label: 'Quote', value: 'quote' },
-  { label: 'Solicitation', value: 'solicitation' }
-])
-
-watch([statusFilter, policyTypeFilter, commTypeFilter], () => { page.value = 1 })
-
-const { data, pending, error, refresh } = useTasks('/tasks', {
-  query: computed(() => ({
-    page: page.value,
-    limit: 20,
-    ...(statusFilter.value     && { status:      statusFilter.value }),
-    ...(policyTypeFilter.value && { policy_type: policyTypeFilter.value }),
-    ...(commTypeFilter.value   && { comm_type:   commTypeFilter.value })
-  }))
-})
-
-const tasks      = computed(() => data.value?.tasks ?? [])
-const total      = computed(() => data.value?.total ?? 0)
-const totalPages = computed(() => Math.ceil(total.value / 20))
-
-const statusColor = (status: string) => {
-  switch (status) {
-    case 'pending':   return 'yellow'
-    case 'responded': return 'green'
-    default:          return 'gray'
-  }
-}
-
-const policyTypeColor = (type: string) => {
-  switch (type) {
-    case 'car':  return 'blue'
-    case 'life': return 'purple'
-    case 'fire': return 'orange'
-    default:     return 'gray'
-  }
-}
-
-const formatDate = (date: string) => {
-  if (!date) return '—'
-  return new Date(date).toLocaleDateString('es-PA', {
-    day: '2-digit', month: 'short', year: 'numeric',
-    hour: '2-digit', minute: '2-digit'
-  })
-}
-</script>
-
-<template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <!-- Header -->
-    <div class="flex justify-between items-center">
-      <div>
-        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Tasks</h1>
-        <p class="text-[13px] text-[var(--text-muted)]">Carrier Inbox — Quote & Solicitation Requests</p>
-      </div>
-      <div class="flex items-center gap-3">
-        <UBadge color="gray" variant="soft" size="lg">{{ total }} tasks</UBadge>
-        <UButton
-          icon="i-heroicons-arrow-path"
-          color="gray"
-          variant="soft"
-          :loading="pending"
-          @click="refresh()"
-        >
-          Refresh
-        </UButton>
-      </div>
-    </div>
-
-    <!-- Filters -->
-    <div class="flex gap-4 items-center flex-wrap">
-      <USelect v-model="statusFilter"      :items="statusItems"      class="w-44" />
-      <USelect v-model="policyTypeFilter"  :items="policyTypeItems"  class="w-44" />
-      <USelect v-model="commTypeFilter"    :items="commTypeItems"    class="w-44" />
-    </div>
-
-    <UAlert
-      v-if="error"
-      color="red"
-      variant="soft"
-      title="Failed to load tasks"
-      :description="error.message"
-    />
-
-    <div v-else-if="pending && tasks.length === 0" class="grid gap-4">
-      <UCard v-for="n in 5" :key="n">
-        <div class="h-20 animate-pulse bg-gray-200 rounded" />
-      </UCard>
-    </div>
-
-    <template v-else>
-      <div class="space-y-3" :class="pending ? 'opacity-60 pointer-events-none' : ''">
-        <NuxtLink
-          v-for="task in tasks"
-          :key="task.id"
-          :to="`/tasks/${task.id}`"
-        >
-          <UCard class="hover:shadow-md transition-shadow cursor-pointer">
-            <div class="flex items-center justify-between gap-4">
-              <!-- Left -->
-              <div class="flex items-center gap-4 min-w-0">
-                <div class="flex flex-col gap-1">
-                  <UBadge :color="statusColor(task.status)" variant="soft" size="xs">
-                    {{ task.status }}
-                  </UBadge>
-                  <UBadge :color="policyTypeColor(task.policy_type)" variant="outline" size="xs">
-                    {{ task.policy_type?.toUpperCase() }}
-                  </UBadge>
-                </div>
-
-                <div class="min-w-0">
-                  <p class="font-mono text-sm font-medium text-[var(--text-primary)] truncate">
-                    {{ task.application_id }}
-                  </p>
-                  <p class="text-xs text-gray-400">
-                    Provider: <span class="font-mono">{{ task.provider_id }}</span>
-                  </p>
-                </div>
-              </div>
-
-              <!-- Right -->
-              <div class="flex items-center gap-6 flex-shrink-0 text-sm text-gray-500">
-                <div class="text-right">
-                  <p class="text-xs text-gray-400">Comm Type</p>
-                  <UBadge color="gray" variant="soft" size="xs">{{ task.comm_type }}</UBadge>
-                </div>
-                <div class="text-right">
-                  <p class="text-xs text-gray-400">Received</p>
-                  <p>{{ formatDate(task.created_at) }}</p>
-                </div>
-                <UIcon name="i-heroicons-chevron-right" class="w-4 h-4 text-gray-400" />
-              </div>
-            </div>
-          </UCard>
-        </NuxtLink>
-
-        <div v-if="tasks.length === 0 && !pending" class="text-center py-16 text-gray-400">
-          <UIcon name="i-heroicons-inbox" class="w-12 h-12 mx-auto mb-4" />
-          <p class="text-lg font-medium">No tasks found</p>
-          <p class="text-sm">Adjust your filters or wait for new requests</p>
-        </div>
-      </div>
-
-      <!-- Pagination -->
-      <div v-if="totalPages > 1" class="flex justify-center">
-        <UPagination
-          v-model="page"
-          :total="total"
-          :page-count="20"
-        />
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/opencode.json b/opencode.json
index a0badbf..76039cc 100644
--- a/opencode.json
+++ b/opencode.json
@@ -5,7 +5,18 @@
       "type": "remote",
       "url": "https://ui.nuxt.com/mcp",
       "enabled": true
+    },
+    "browsermcp": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "@browsermcp/mcp@0.1.3"
+      ],
+      "enabled": true
     }
-  }
+  },
+  "plugin": [
+    "opencode-browser"
+  ]
 }
-