big refactor
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,43 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import { MOCK_CUSTOMERS, fmtMoney } from '~/data/mock-customers'
|
||||
const { isFavorite, toggleFavorite } = useClientFavorites()
|
||||
usePageTitle('Customers')
|
||||
|
||||
const page = ref(1)
|
||||
const search = ref('')
|
||||
const customerTypeFilter = ref<string | null>(null)
|
||||
const agentFilter = ref<string | null>(null)
|
||||
const paymentFilter = ref<string | null>(null)
|
||||
const sortBy = ref<string>('name_asc')
|
||||
const viewMode = ref<'card' | 'list'>('card')
|
||||
const debouncedSearch = refDebounced(search, 300)
|
||||
|
||||
const customerTypeItems = [
|
||||
{ label: 'All Types', value: null },
|
||||
{ label: 'Individual', value: 'individual' },
|
||||
{ label: 'Corporate', value: 'corporate' }
|
||||
]
|
||||
|
||||
const agentItems = [
|
||||
{ label: 'All Agents', value: null },
|
||||
...([...new Set(MOCK_CUSTOMERS.map(c => c.agent))].sort().map(a => ({ label: a, value: a })))
|
||||
]
|
||||
|
||||
const paymentItems = [
|
||||
{ label: 'All Payments', value: null },
|
||||
{ label: 'Current', value: 'Current' },
|
||||
{ label: 'Overdue', value: 'Overdue' },
|
||||
{ label: 'Grace period', value: 'Grace period' },
|
||||
{ label: 'N/A', value: 'N/A' },
|
||||
{ label: 'All Types', value: null },
|
||||
{ label: 'Individual', value: 'individual' },
|
||||
{ label: 'Corporate', value: 'corporate' }
|
||||
]
|
||||
|
||||
const sortItems = [
|
||||
{ label: 'Name (A–Z)', value: 'name_asc' },
|
||||
{ label: 'Premium (high–low)', value: 'premium_desc' },
|
||||
{ label: 'Policies (most)', value: 'policies_desc' },
|
||||
{ label: 'Name (A–Z)', value: 'name_asc' }
|
||||
]
|
||||
|
||||
watch([debouncedSearch, customerTypeFilter, agentFilter, paymentFilter], () => { page.value = 1 })
|
||||
watch([debouncedSearch, customerTypeFilter], () => { page.value = 1 })
|
||||
|
||||
const { data, pending, refresh } = useCustomer('/customers', {
|
||||
query: computed(() => {
|
||||
@@ -46,120 +27,50 @@ const { data, pending, refresh } = useCustomer('/customers', {
|
||||
|
||||
if (debouncedSearch.value) {
|
||||
filters[`filters[${i}][field]`] = 'search'
|
||||
filters[`filters[${i}][op]`] = '=='
|
||||
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}][op]`] = '=='
|
||||
filters[`filters[${i}][value]`] = customerTypeFilter.value
|
||||
i++
|
||||
}
|
||||
|
||||
return {
|
||||
'page[number]': page.value,
|
||||
'page[size]': 20,
|
||||
'page_size': 20,
|
||||
'page': page.value,
|
||||
...filters
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/* ── Mock fallback rows (shown when API returns nothing) ── */
|
||||
const allMockRows = MOCK_CUSTOMERS.map((m) => ({
|
||||
id: m.id,
|
||||
customer_type: m.type.toLowerCase(),
|
||||
first_name: m.name.split(' ')[0],
|
||||
last_name: m.name.split(' ').slice(1).join(' '),
|
||||
commercial_name: null,
|
||||
legal_name: null,
|
||||
ruc: null,
|
||||
email: m.email,
|
||||
phone: m.phone,
|
||||
birth_date: m.birthDate,
|
||||
gender: m.gender.toLowerCase(),
|
||||
legal_rep_name: null,
|
||||
document_id: m.documentId,
|
||||
_mock: m
|
||||
}))
|
||||
const customers = computed(() => data.value?.data ?? [])
|
||||
const meta = computed(() => data.value?.meta)
|
||||
|
||||
const mockRows = computed(() => {
|
||||
let rows = allMockRows
|
||||
// Filter by search
|
||||
const q = debouncedSearch.value.toLowerCase().trim()
|
||||
if (q) {
|
||||
rows = rows.filter(r => {
|
||||
const name = `${r.first_name} ${r.last_name}`.toLowerCase()
|
||||
return name.includes(q)
|
||||
|| (r.email ?? '').toLowerCase().includes(q)
|
||||
|| (r.phone ?? '').includes(q)
|
||||
|| (r.document_id ?? '').toLowerCase().includes(q)
|
||||
|| (r._mock.agent ?? '').toLowerCase().includes(q)
|
||||
|| r._mock.tags.some(t => t.toLowerCase().includes(q))
|
||||
})
|
||||
}
|
||||
// Filter by type
|
||||
if (customerTypeFilter.value) {
|
||||
rows = rows.filter(r => r.customer_type === customerTypeFilter.value)
|
||||
}
|
||||
// Filter by agent
|
||||
if (agentFilter.value) {
|
||||
rows = rows.filter(r => r._mock.agent === agentFilter.value)
|
||||
}
|
||||
// Filter by payment status
|
||||
if (paymentFilter.value) {
|
||||
rows = rows.filter(r => r._mock.paymentStatus === paymentFilter.value)
|
||||
}
|
||||
// Sort
|
||||
const sorted = [...rows]
|
||||
switch (sortBy.value) {
|
||||
case 'name_asc':
|
||||
sorted.sort((a, b) => `${a.first_name} ${a.last_name}`.localeCompare(`${b.first_name} ${b.last_name}`))
|
||||
break
|
||||
case 'premium_desc':
|
||||
sorted.sort((a, b) => b._mock.policies.reduce((s: number, p: any) => s + p.premium, 0) - a._mock.policies.reduce((s: number, p: any) => s + p.premium, 0))
|
||||
break
|
||||
case 'policies_desc':
|
||||
sorted.sort((a, b) => b._mock.policies.length - a._mock.policies.length)
|
||||
break
|
||||
}
|
||||
return sorted
|
||||
})
|
||||
|
||||
const apiCustomers = computed(() => data.value?.data ?? [])
|
||||
const customers = computed(() => apiCustomers.value.length > 0 ? apiCustomers.value : mockRows.value)
|
||||
const meta = computed(() => data.value?.meta)
|
||||
|
||||
const usingMock = computed(() => apiCustomers.value.length === 0 && mockRows.value.length > 0)
|
||||
|
||||
// display helpers
|
||||
const customerName = (c: any) => {
|
||||
function customerName(c: any) {
|
||||
if (c.customer_type === 'corporate') return c.commercial_name || c.legal_name || 'Unnamed company'
|
||||
const full = [c.first_name, c.last_name].filter(Boolean).join(' ')
|
||||
return full || 'Unnamed customer'
|
||||
}
|
||||
|
||||
const customerSubtitle = (c: any) => {
|
||||
if (c._mock) {
|
||||
const m = c._mock
|
||||
const total = m.policies.reduce((s: number, p: any) => s + p.premium, 0)
|
||||
return `${m.policies.length} ${m.policies.length === 1 ? 'policy' : 'policies'} · ${fmtMoney(total)}/yr`
|
||||
}
|
||||
function customerSubtitle(c: any) {
|
||||
return c.customer_type === 'corporate' ? c.ruc : c.email
|
||||
}
|
||||
|
||||
const customerTypeColor = (type: string) =>
|
||||
type === 'corporate' ? 'purple' : 'blue'
|
||||
function customerTypeColor(type: string) {
|
||||
return type === 'corporate' ? 'purple' : 'blue'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ci-root mx-auto max-w-7xl pb-12">
|
||||
<!-- Header -->
|
||||
<div class="ci-header">
|
||||
<div class="ci-header-left">
|
||||
<h1 class="ci-title">Customers</h1>
|
||||
<span class="ci-count-badge">{{ usingMock ? customers.length : (meta?.total_count ?? 0) }}</span>
|
||||
<span class="ci-count-badge">{{ meta?.total_count ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="ci-header-right">
|
||||
<NuxtLink to="/customers/new">
|
||||
@@ -171,17 +82,14 @@ const customerTypeColor = (type: string) =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="ci-filter-bar">
|
||||
<UInput
|
||||
v-model="search"
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
placeholder="Search by name, email, RUC, agent..."
|
||||
placeholder="Search by name, email, RUC..."
|
||||
class="ci-filter-search"
|
||||
/>
|
||||
<USelect v-model="customerTypeFilter" :items="customerTypeItems" class="ci-filter-select" />
|
||||
<USelect v-model="agentFilter" :items="agentItems" class="ci-filter-select" />
|
||||
<USelect v-model="paymentFilter" :items="paymentItems" class="ci-filter-select" />
|
||||
<USelect v-model="sortBy" :items="sortItems" class="ci-filter-select" />
|
||||
<UButton icon="i-heroicons-arrow-path" color="neutral" variant="ghost" size="sm" :loading="pending" @click="refresh()">Refresh</UButton>
|
||||
<div class="ci-view-toggle">
|
||||
@@ -194,15 +102,13 @@ const customerTypeColor = (type: string) =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pending && !usingMock" 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>
|
||||
|
||||
<template v-else>
|
||||
<!-- ═══ Card View ═══ -->
|
||||
<div v-if="viewMode === 'card'" 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">
|
||||
@@ -215,48 +121,11 @@ const customerTypeColor = (type: string) =>
|
||||
<p class="text-sm text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="w-6 h-6 rounded flex items-center justify-center transition-all"
|
||||
:class="isFavorite(c.id) ? 'text-amber-400 hover:text-amber-500' : 'text-gray-300 hover:text-amber-400'"
|
||||
title="Toggle favorite"
|
||||
@click.prevent.stop="toggleFavorite(c.id)"
|
||||
>
|
||||
<UIcon :name="isFavorite(c.id) ? 'i-heroicons-star-solid' : 'i-heroicons-star'" style="width: 16px; height: 16px;" />
|
||||
</button>
|
||||
<UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs">
|
||||
{{ c.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs">
|
||||
{{ c.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<!-- Mock client details -->
|
||||
<template v-if="c._mock">
|
||||
<div class="space-y-1 text-sm pt-2 border-t">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Phone</span>
|
||||
<span>{{ c._mock.phone }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Agent</span>
|
||||
<span>{{ c._mock.agent }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">Payment</span>
|
||||
<span
|
||||
class="text-xs font-medium px-1.5 py-0.5 rounded-full"
|
||||
:class="c._mock.paymentStatus === 'Current' ? 'bg-emerald-50 text-emerald-700' : c._mock.paymentStatus === 'Overdue' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'"
|
||||
>{{ c._mock.paymentStatus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="c._mock.tags.length" class="flex gap-1 flex-wrap pt-1">
|
||||
<span v-for="tag in c._mock.tags" :key="tag" class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{{ tag }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Individual fields (API) -->
|
||||
<template v-else>
|
||||
<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>
|
||||
@@ -272,7 +141,6 @@ const customerTypeColor = (type: string) =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Corporate fields (API) -->
|
||||
<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>
|
||||
@@ -287,7 +155,6 @@ const customerTypeColor = (type: string) =>
|
||||
<span>{{ c.legal_rep_name ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</UCard>
|
||||
</NuxtLink>
|
||||
@@ -299,7 +166,6 @@ const customerTypeColor = (type: string) =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ List View ═══ -->
|
||||
<div v-else class="ci-list-card">
|
||||
<table class="ci-list-table">
|
||||
<thead>
|
||||
@@ -308,16 +174,11 @@ const customerTypeColor = (type: string) =>
|
||||
<th class="ci-list-th">Type</th>
|
||||
<th class="ci-list-th">Email</th>
|
||||
<th class="ci-list-th">Phone</th>
|
||||
<th class="ci-list-th">Agent</th>
|
||||
<th class="ci-list-th" style="text-align: right;">Policies</th>
|
||||
<th class="ci-list-th" style="text-align: right;">Premium</th>
|
||||
<th class="ci-list-th">Payment</th>
|
||||
<th class="ci-list-th" style="width: 40px;" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="customers.length === 0">
|
||||
<td colspan="9" class="ci-list-empty">
|
||||
<td colspan="4" class="ci-list-empty">
|
||||
<UIcon name="i-heroicons-users" class="w-10 h-10 mx-auto mb-3" />
|
||||
<p class="text-base font-medium">No customers found</p>
|
||||
<p class="text-sm">Try adjusting your search or create a new customer</p>
|
||||
@@ -344,32 +205,6 @@ const customerTypeColor = (type: string) =>
|
||||
</td>
|
||||
<td class="ci-list-td ci-list-td--secondary">{{ c.email ?? '—' }}</td>
|
||||
<td class="ci-list-td ci-list-td--secondary">{{ c.phone ?? '—' }}</td>
|
||||
<td class="ci-list-td ci-list-td--secondary">{{ c._mock ? c._mock.agent : '—' }}</td>
|
||||
<td class="ci-list-td" style="text-align: right;">
|
||||
{{ c._mock ? c._mock.policies.length : '—' }}
|
||||
</td>
|
||||
<td class="ci-list-td" style="text-align: right; font-variant-numeric: tabular-nums;">
|
||||
{{ c._mock ? fmtMoney(c._mock.policies.reduce((s: number, p: any) => s + p.premium, 0)) + '/yr' : '—' }}
|
||||
</td>
|
||||
<td class="ci-list-td">
|
||||
<span
|
||||
v-if="c._mock"
|
||||
class="text-xs font-medium px-1.5 py-0.5 rounded-full"
|
||||
:class="c._mock.paymentStatus === 'Current' ? 'bg-emerald-50 text-emerald-700' : c._mock.paymentStatus === 'Overdue' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'"
|
||||
>{{ c._mock.paymentStatus }}</span>
|
||||
<span v-else class="ci-list-td--secondary">—</span>
|
||||
</td>
|
||||
<td class="ci-list-td" style="text-align: center;">
|
||||
<button
|
||||
type="button"
|
||||
class="w-6 h-6 rounded flex items-center justify-center transition-all"
|
||||
:class="isFavorite(c.id) ? 'text-amber-400 hover:text-amber-500' : 'text-gray-300 hover:text-amber-400'"
|
||||
title="Toggle favorite"
|
||||
@click.prevent.stop="toggleFavorite(c.id)"
|
||||
>
|
||||
<UIcon :name="isFavorite(c.id) ? 'i-heroicons-star-solid' : 'i-heroicons-star'" style="width: 14px; height: 14px;" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</NuxtLink>
|
||||
</tbody>
|
||||
@@ -388,7 +223,6 @@ const customerTypeColor = (type: string) =>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── Header ── */
|
||||
.ci-root { display: flex; flex-direction: column; gap: 16px; }
|
||||
.ci-header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.ci-header-left { display: flex; align-items: center; gap: 10px; }
|
||||
@@ -398,12 +232,10 @@ const customerTypeColor = (type: string) =>
|
||||
.ci-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: #fff; background: #01696f; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
|
||||
.ci-btn-primary:hover { background: #015258; }
|
||||
|
||||
/* ── Filter bar ── */
|
||||
.ci-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.ci-filter-search { width: 260px; }
|
||||
.ci-filter-select { width: auto; min-width: 130px; }
|
||||
|
||||
/* ── View toggle ── */
|
||||
.ci-view-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -434,7 +266,6 @@ const customerTypeColor = (type: string) =>
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* ── List view card ── */
|
||||
.ci-list-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
Reference in New Issue
Block a user