software-engineering/policy-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug fixes
All checks were successful
Build and Publish / build-release (push) Successful in 4m19s
Details

Browse Source
This commit is contained in:
HaimKortovich
2026-04-30 16:41:34 -05:00
parent 7d5e198156
commit 53bbdca525
16 changed files with 721 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/pages/customers/index.vue
View File

@@ -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)

268
app/pages/customers/new.vue
View File

@@ -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>