bug fixes

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>