add customer and providers
This commit is contained in:
@@ -1,99 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const { data, error, pending } = useCustomer(route.params.id)
|
||||
const id = route.params.id as string
|
||||
|
||||
const { data, error, pending, refresh } = useCustomer(`/customers/${id}`)
|
||||
const customer = computed(() => data.value?.data)
|
||||
|
||||
const isIndividual = computed(() => customer.value?.customer_type !== 'corporate')
|
||||
|
||||
const customerName = computed(() => {
|
||||
if (!customer.value) return ''
|
||||
return isIndividual.value
|
||||
? `${customer.value.first_name} ${customer.value.last_name}`
|
||||
: (customer.value.commercial_name || customer.value.legal_name)
|
||||
})
|
||||
|
||||
// policies — individual uses document_id, corporate uses ruc
|
||||
const policyFilterValue = computed(() =>
|
||||
isIndividual.value ? customer.value?.document_id : customer.value?.ruc
|
||||
)
|
||||
const policyFilterField = computed(() =>
|
||||
isIndividual.value ? 'applicant_document' : 'applicant_document'
|
||||
)
|
||||
|
||||
const { data: policiesData } = usePolicy('/car-policies', {
|
||||
query: computed(() => policyFilterValue.value ? {
|
||||
'filters[0][field]': policyFilterField.value,
|
||||
'filters[0][op]': '==',
|
||||
'filters[0][value]': policyFilterValue.value
|
||||
} : {})
|
||||
})
|
||||
|
||||
const customerPolicies = computed(() => policiesData.value?.data ?? [])
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return '—'
|
||||
return new Date(date).toLocaleDateString('es-PA', {
|
||||
day: '2-digit', month: 'short', year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const statusColor = (status: string) => ({
|
||||
quote_requested: 'yellow',
|
||||
quotes_received: 'blue',
|
||||
solicitation_sent: 'purple',
|
||||
active: 'green'
|
||||
}[status] ?? 'gray')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-8 bg-slate-100 min-h-screen">
|
||||
<div class="p-8 space-y-8 bg-gray-50 min-h-screen">
|
||||
<NuxtLink to="/customers">
|
||||
<UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Customers</UButton>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pending" class="max-w-3xl">
|
||||
<UCard class="bg-white shadow-sm border border-slate-200">
|
||||
<div class="h-48 animate-pulse bg-slate-200 rounded" />
|
||||
<UAlert v-if="error" color="red" variant="soft" title="Failed to load customer" :description="error.message" />
|
||||
|
||||
<div v-else-if="pending" class="space-y-4">
|
||||
<UCard v-for="n in 2" :key="n">
|
||||
<div class="h-32 animate-pulse bg-gray-200 rounded" />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<UAlert
|
||||
v-else-if="error"
|
||||
color="red"
|
||||
variant="soft"
|
||||
title="Failed to load customer"
|
||||
:description="error.message"
|
||||
/>
|
||||
|
||||
<!-- Customer View -->
|
||||
<div v-else-if="data" class="max-w-4xl space-y-6">
|
||||
|
||||
<!-- Header Card -->
|
||||
<UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
|
||||
<div class="flex items-center justify-between">
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<UAvatar size="xl" :alt="data.first_name" />
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-slate-900">
|
||||
{{ data.first_name }} {{ data.last_name }}
|
||||
</h1>
|
||||
<p class="text-slate-500 text-sm">
|
||||
{{ data.email }}
|
||||
</p>
|
||||
<template v-else-if="customer">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex items-center gap-4">
|
||||
<UAvatar :alt="customerName" size="xl" />
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h1 class="text-2xl font-bold text-slate-900">{{ customerName }}</h1>
|
||||
<UBadge :color="isIndividual ? 'blue' : 'purple'" variant="soft" size="sm">
|
||||
{{ isIndividual ? 'Individual' : 'Corporate' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-gray-500">{{ customer.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Details Card -->
|
||||
<UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
|
||||
<h2 class="text-lg font-semibold text-slate-800 mb-4">
|
||||
Personal Information
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 text-sm">
|
||||
|
||||
<div>
|
||||
<div class="text-slate-500">Birth Date</div>
|
||||
<div class="text-slate-800 font-medium">
|
||||
{{ data.birth_date }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-slate-500">Gender</div>
|
||||
<div class="text-slate-800 font-medium capitalize">
|
||||
{{ data.gender }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-slate-500">Phone</div>
|
||||
<div class="text-slate-800 font-medium">
|
||||
{{ data.phone }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-slate-500">Customer ID</div>
|
||||
<div class="text-slate-800 font-mono text-xs">
|
||||
{{ data.id }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
|
||||
<NuxtLink to="/policies/new">
|
||||
<UButton icon="i-heroicons-plus" color="primary" size="sm">New Policy</UButton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder for Policies -->
|
||||
<UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
|
||||
<h2 class="text-lg font-semibold text-slate-800 mb-4">
|
||||
Policies
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<div class="text-slate-500 text-sm">
|
||||
No policies yet.
|
||||
</div>
|
||||
</UCard>
|
||||
<!-- Individual details -->
|
||||
<UCard v-if="isIndividual" class="lg:col-span-1">
|
||||
<template #header>
|
||||
<p class="font-semibold text-slate-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-user" class="w-4 h-4" /> Customer Details
|
||||
</p>
|
||||
</template>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">ID</span>
|
||||
<span class="font-mono text-xs">{{ customer.id?.slice(0, 8) }}...</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Email</span>
|
||||
<span>{{ customer.email ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Phone</span>
|
||||
<span>{{ customer.phone ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Document ID</span>
|
||||
<span class="font-mono">{{ customer.document_id ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Birth Date</span>
|
||||
<span>{{ formatDate(customer.birth_date) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Gender</span>
|
||||
<span class="capitalize">{{ customer.gender ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
</div>
|
||||
<!-- Corporate details -->
|
||||
<UCard v-else class="lg:col-span-1">
|
||||
<template #header>
|
||||
<p class="font-semibold text-slate-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Company Details
|
||||
</p>
|
||||
</template>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">ID</span>
|
||||
<span class="font-mono text-xs">{{ customer.id?.slice(0, 8) }}...</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Legal Name</span>
|
||||
<span class="text-right max-w-44 truncate">{{ customer.legal_name ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Commercial Name</span>
|
||||
<span>{{ customer.commercial_name ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">RUC</span>
|
||||
<span class="font-mono">{{ customer.ruc ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Legal Rep</span>
|
||||
<span>{{ customer.legal_rep_name ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Rep Document</span>
|
||||
<span class="font-mono">{{ customer.legal_rep_document_id ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Email</span>
|
||||
<span>{{ customer.email ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Phone</span>
|
||||
<span>{{ customer.phone ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Address</span>
|
||||
<span class="text-right max-w-44 truncate">{{ customer.address ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Policies -->
|
||||
<UCard class="lg:col-span-2">
|
||||
<template #header>
|
||||
<p class="font-semibold text-slate-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-document-text" class="w-4 h-4" />
|
||||
Policies
|
||||
<UBadge color="gray" variant="soft" size="xs">{{ customerPolicies.length }}</UBadge>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<NuxtLink
|
||||
v-for="policy in customerPolicies"
|
||||
:key="policy.application_id"
|
||||
:to="`/policies/${policy.application_id}`"
|
||||
>
|
||||
<div class="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-truck" class="w-5 h-5 text-blue-400" />
|
||||
<div>
|
||||
<p class="font-medium text-sm text-slate-800">
|
||||
{{ policy.plate }} — {{ policy.year }} {{ policy.make }} {{ policy.model }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 font-mono">{{ policy.application_id?.slice(0, 8) }}...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UBadge :color="statusColor(policy.status)" variant="soft" size="xs">
|
||||
{{ policy.status?.replace(/_/g, ' ') }}
|
||||
</UBadge>
|
||||
<UIcon name="i-heroicons-chevron-right" class="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<div v-if="customerPolicies.length === 0" class="text-center py-8 text-gray-400">
|
||||
<UIcon name="i-heroicons-document-text" class="w-8 h-8 mx-auto mb-2" />
|
||||
<p class="text-sm">No policies yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -1,65 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
const { data, error, pending } = useCustomer('/')
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
const page = ref(1)
|
||||
const search = ref('')
|
||||
const customerTypeFilter = ref<string | null>(null)
|
||||
const debouncedSearch = refDebounced(search, 300)
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (!data.value) return []
|
||||
if (!search.value) return data.value
|
||||
const customerTypeItems = [
|
||||
{ label: 'All Types', value: null },
|
||||
{ label: 'Individual', value: 'individual' },
|
||||
{ label: 'Corporate', value: 'corporate' }
|
||||
]
|
||||
|
||||
return data.value.filter((c: any) =>
|
||||
`${c.first_name} ${c.last_name} ${c.email}`
|
||||
.toLowerCase()
|
||||
.includes(search.value.toLowerCase())
|
||||
)
|
||||
watch([debouncedSearch, customerTypeFilter], () => { page.value = 1 })
|
||||
|
||||
const { data, pending, refresh } = useCustomer('/customers', {
|
||||
query: computed(() => {
|
||||
const filters: Record<string, string> = {}
|
||||
let i = 0
|
||||
|
||||
if (debouncedSearch.value) {
|
||||
filters[`filters[${i}][field]`] = 'search'
|
||||
filters[`filters[${i}][op]`] = '=='
|
||||
filters[`filters[${i}][value]`] = debouncedSearch.value
|
||||
i++
|
||||
}
|
||||
|
||||
if (customerTypeFilter.value) {
|
||||
filters[`filters[${i}][field]`] = 'customer_type'
|
||||
filters[`filters[${i}][op]`] = '=='
|
||||
filters[`filters[${i}][value]`] = customerTypeFilter.value
|
||||
i++
|
||||
}
|
||||
|
||||
return {
|
||||
page_size: 20,
|
||||
page: page.value,
|
||||
...filters
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const total = computed(() => data.value?.length ?? 0)
|
||||
const customers = computed(() => data.value?.data ?? [])
|
||||
const meta = computed(() => data.value?.meta)
|
||||
|
||||
// display helpers
|
||||
const customerName = (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
|
||||
|
||||
const customerTypeColor = (type: string) =>
|
||||
type === 'corporate' ? 'purple' : 'blue'
|
||||
</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-3xl text-slate-900 font-bold">Customers</h1>
|
||||
<p class="text-gray-500 text-sm">Customer Relationship Management</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UBadge color="gray" variant="soft" size="lg">
|
||||
{{ meta?.total_count ?? 0 }} customers
|
||||
</UBadge>
|
||||
<NuxtLink to="/customers/new">
|
||||
<UButton icon="i-heroicons-plus" color="primary">New Customer</UButton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton icon="i-heroicons-plus" color="primary" to="/customers/new">
|
||||
New Customer
|
||||
<!-- Search + Filters -->
|
||||
<div class="flex gap-4 items-center flex-wrap">
|
||||
<UInput
|
||||
v-model="search"
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
placeholder="Search by name, email, RUC..."
|
||||
class="w-80"
|
||||
/>
|
||||
<USelect
|
||||
v-model="customerTypeFilter"
|
||||
:items="customerTypeItems"
|
||||
class="w-44"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path"
|
||||
color="gray"
|
||||
variant="soft"
|
||||
:loading="pending"
|
||||
@click="refresh()"
|
||||
>
|
||||
Refresh
|
||||
</UButton>
|
||||
</div>
|
||||
<!-- Error -->
|
||||
<UAlert
|
||||
v-if="error"
|
||||
color="red"
|
||||
variant="soft"
|
||||
title="Failed to load customers"
|
||||
:description="error.message"
|
||||
/>
|
||||
|
||||
<!-- Loading -->
|
||||
<div
|
||||
v-else-if="pending"
|
||||
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
<div v-if="pending" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<UCard v-for="n in 6" :key="n">
|
||||
<div class="h-32 animate-pulse bg-gray-200 rounded" />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Customer Grid -->
|
||||
<div
|
||||
v-else
|
||||
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
<CustomerCard
|
||||
v-for="customer in filtered"
|
||||
:key="customer.id"
|
||||
:customer="customer"
|
||||
/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<NuxtLink v-for="c in customers" :key="c.id" :to="`/customers/${c.id}`">
|
||||
<UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<UAvatar :alt="customerName(c)" size="md" />
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-slate-900 truncate">{{ customerName(c) }}</p>
|
||||
<p class="text-sm text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs" class="flex-shrink-0">
|
||||
{{ c.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<!-- Individual fields -->
|
||||
<div v-if="c.customer_type !== 'corporate'" class="space-y-1 text-sm pt-2 border-t">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Phone</span>
|
||||
<span>{{ c.phone ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Birth Date</span>
|
||||
<span>{{ c.birth_date ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Gender</span>
|
||||
<span class="capitalize">{{ c.gender ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Corporate fields -->
|
||||
<div v-else class="space-y-1 text-sm pt-2 border-t">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Legal Name</span>
|
||||
<span class="truncate max-w-40 text-right">{{ c.legal_name ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">RUC</span>
|
||||
<span class="font-mono">{{ c.ruc ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Legal Rep</span>
|
||||
<span>{{ c.legal_rep_name ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</NuxtLink>
|
||||
|
||||
<div v-if="customers.length === 0" class="col-span-3 text-center py-16 text-gray-400">
|
||||
<UIcon name="i-heroicons-users" class="w-12 h-12 mx-auto mb-4" />
|
||||
<p class="text-lg font-medium">No customers found</p>
|
||||
<p class="text-sm">Try adjusting your search or create a new customer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="meta && meta.total_pages > 1" class="flex justify-center">
|
||||
<UPagination
|
||||
v-model="page"
|
||||
:total="meta.total_count"
|
||||
:page-count="meta.page_size"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,126 +1,285 @@
|
||||
<script setup lang="ts">
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
import type { SelectItem } from '@nuxt/ui'
|
||||
|
||||
const schema = z.object({
|
||||
first_name: z.string().min(1, 'First name is required'),
|
||||
last_name: z.string().min(1, 'Last name is required'),
|
||||
email: z.string().email('Invalid email'),
|
||||
phone: z.string().min(1, 'Phone is required'),
|
||||
birth_date: z.string().min(1, 'Birth date is required'),
|
||||
gender: z.enum(['male', 'female'])
|
||||
const router = useRouter()
|
||||
const submitting = ref(false)
|
||||
const toast = useToast()
|
||||
const { $customer } = useNuxtApp()
|
||||
|
||||
const customerType = ref<'individual' | 'corporate'>('individual')
|
||||
|
||||
// individual form
|
||||
const individualForm = ref({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
birth_date: '',
|
||||
gender: '',
|
||||
document_id: ''
|
||||
})
|
||||
|
||||
type Schema = z.output<typeof schema>
|
||||
|
||||
const state = reactive<Partial<Schema>>({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
birth_date: '',
|
||||
gender: 'male'
|
||||
// corporate form
|
||||
const corporateForm = ref({
|
||||
legal_name: '',
|
||||
commercial_name: '',
|
||||
ruc: '',
|
||||
legal_rep_name: '',
|
||||
legal_rep_document_id: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
const genderItems = ref<SelectItem[]>([
|
||||
{ label: 'Male', value: 'male' },
|
||||
{ label: 'Female', value: 'female' }
|
||||
])
|
||||
|
||||
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||
const isValid = computed(() => {
|
||||
if (customerType.value === 'individual') {
|
||||
return individualForm.value.first_name &&
|
||||
individualForm.value.last_name &&
|
||||
individualForm.value.email &&
|
||||
individualForm.value.document_id
|
||||
}
|
||||
return corporateForm.value.legal_name && corporateForm.value.ruc
|
||||
})
|
||||
|
||||
async function submit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
await useCustomer('/', {
|
||||
const isIndividual = customerType.value === 'individual'
|
||||
const data = await $customer(isIndividual ? '/customers' : '/customers/corporate', {
|
||||
method: 'POST',
|
||||
body: event.data
|
||||
})
|
||||
|
||||
body: isIndividual ? individualForm.value : corporateForm.value
|
||||
}) as any
|
||||
toast.add({ title: 'Customer created successfully', color: 'green' })
|
||||
router.push(`/customers/${data.data.id}`)
|
||||
} catch (e: any) {
|
||||
toast.add({
|
||||
title: 'Customer created',
|
||||
description: 'The customer was successfully created.',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
router.push('/customers')
|
||||
} catch (err: any) {
|
||||
toast.add({
|
||||
title: 'Error',
|
||||
description: err?.message || 'Failed to create customer',
|
||||
color: 'error'
|
||||
title: 'Failed to create customer',
|
||||
description: e?.data?.errors ? JSON.stringify(e.data.errors) : e.message,
|
||||
color: 'red'
|
||||
})
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50 p-10">
|
||||
<div class="max-w-5xl mx-auto space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="p-8 space-y-8 bg-gray-50 min-h-screen">
|
||||
<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-3xl font-bold text-gray-900">New Customer</h1>
|
||||
<p class="text-gray-500 mt-1">Create a new customer profile</p>
|
||||
<h1 class="text-3xl text-slate-900 font-bold">New Customer</h1>
|
||||
<p class="text-gray-500 text-sm">Create a new customer record</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
|
||||
<UForm
|
||||
:schema="schema"
|
||||
:state="state"
|
||||
class="space-y-6"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<!-- Grid -->
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
|
||||
<UFormField label="First Name" name="first_name">
|
||||
<UInput v-model="state.first_name" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Last Name" name="last_name">
|
||||
<UInput v-model="state.last_name" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Email" name="email">
|
||||
<UInput v-model="state.email" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Phone" name="phone">
|
||||
<UInput v-model="state.phone" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Birth Date" name="birth_date">
|
||||
<UInput v-model="state.birth_date" type="date" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Gender" name="gender">
|
||||
<USelect
|
||||
v-model="state.gender"
|
||||
:items="[
|
||||
{ label: 'Male', value: 'male' },
|
||||
{ label: 'Female', value: 'female' }
|
||||
]"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-4 pt-4">
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
@click="$router.push('/customers')"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
|
||||
<UButton type="submit" color="primary">
|
||||
Create Customer
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
</UForm>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Type selector -->
|
||||
<div class="flex gap-4 max-w-2xl">
|
||||
<div
|
||||
v-for="type in ['individual', 'corporate']"
|
||||
:key="type"
|
||||
class="flex-1 border-2 rounded-xl p-4 text-center transition-all cursor-pointer"
|
||||
:class="customerType === type
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300'"
|
||||
@click="customerType = type as any"
|
||||
>
|
||||
<UIcon
|
||||
:name="type === 'individual' ? 'i-heroicons-user' : 'i-heroicons-building-office'"
|
||||
class="w-8 h-8 mx-auto mb-2"
|
||||
:class="customerType === type ? 'text-primary-500' : 'text-gray-400'"
|
||||
/>
|
||||
<p
|
||||
class="font-medium text-sm"
|
||||
:class="customerType === type ? 'text-primary-700' : 'text-gray-600'"
|
||||
>
|
||||
{{ type === 'individual' ? 'Individual' : 'Corporate' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Individual form -->
|
||||
<UCard v-if="customerType === 'individual'" class="max-w-2xl">
|
||||
<template #header>
|
||||
<p class="font-semibold text-slate-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-user-plus" class="w-4 h-4" />
|
||||
Individual Customer
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<UFormField label="First Name" required>
|
||||
<UInput v-model="individualForm.first_name" placeholder="Juan" class="w-full" />
|
||||
</UFormField>
|
||||
<UFormField label="Last Name" required>
|
||||
<UInput v-model="individualForm.last_name" placeholder="Pérez" class="w-full" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<UFormField label="Document ID" required>
|
||||
<UInput
|
||||
v-model="individualForm.document_id"
|
||||
placeholder="V-12345678"
|
||||
icon="i-heroicons-identification"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Email" required>
|
||||
<UInput
|
||||
v-model="individualForm.email"
|
||||
type="email"
|
||||
placeholder="juan@example.com"
|
||||
icon="i-heroicons-envelope"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Phone">
|
||||
<UInput
|
||||
v-model="individualForm.phone"
|
||||
placeholder="+507 6000-0000"
|
||||
icon="i-heroicons-phone"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<UFormField label="Birth Date">
|
||||
<UInput v-model="individualForm.birth_date" type="date" class="w-full" />
|
||||
</UFormField>
|
||||
<UFormField label="Gender">
|
||||
<USelect v-model="individualForm.gender" :items="genderItems" class="w-full" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<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>
|
||||
</template>
|
||||
</UCard>
|
||||
|
||||
<!-- Corporate form -->
|
||||
<UCard v-else class="max-w-2xl">
|
||||
<template #header>
|
||||
<p class="font-semibold text-slate-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-building-office" class="w-4 h-4" />
|
||||
Corporate Customer
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Legal Name" required>
|
||||
<UInput
|
||||
v-model="corporateForm.legal_name"
|
||||
placeholder="Empresa S.A."
|
||||
icon="i-heroicons-building-office"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Commercial Name">
|
||||
<UInput
|
||||
v-model="corporateForm.commercial_name"
|
||||
placeholder="Empresa"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="RUC" required>
|
||||
<UInput
|
||||
v-model="corporateForm.ruc"
|
||||
placeholder="1234567-1-123456"
|
||||
icon="i-heroicons-identification"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<UFormField label="Legal Representative">
|
||||
<UInput
|
||||
v-model="corporateForm.legal_rep_name"
|
||||
placeholder="Juan Pérez"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Legal Rep Document ID">
|
||||
<UInput
|
||||
v-model="corporateForm.legal_rep_document_id"
|
||||
placeholder="V-12345678"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<UFormField label="Email">
|
||||
<UInput
|
||||
v-model="corporateForm.email"
|
||||
type="email"
|
||||
placeholder="contacto@empresa.com"
|
||||
icon="i-heroicons-envelope"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Phone">
|
||||
<UInput
|
||||
v-model="corporateForm.phone"
|
||||
placeholder="+507 300-0000"
|
||||
icon="i-heroicons-phone"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Address">
|
||||
<UInput
|
||||
v-model="corporateForm.address"
|
||||
placeholder="Av. Balboa, Panama City"
|
||||
icon="i-heroicons-map-pin"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<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 Corporate Customer
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user