76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { CustomerResponse } from '#open-fetch'
|
|
defineProps<{
|
|
customer: CustomerResponse<any>
|
|
}>()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
class="bg-gradient-to-b from-white to-slate-50
|
|
border border-slate-200 shadow-sm rounded-xl"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
|
|
<!-- Avatar + Name -->
|
|
<div class="flex items-center gap-3">
|
|
<UAvatar
|
|
:alt="customer.first_name"
|
|
size="lg"
|
|
class="bg-primary-100 text-primary-700"
|
|
/>
|
|
<div>
|
|
<div class="font-semibold text-slate-900 text-lg">
|
|
{{ customer.first_name }} {{ customer.last_name }}
|
|
</div>
|
|
<div class="text-sm text-slate-500">
|
|
{{ customer.email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-3 text-sm mt-4">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">Birth Date</span>
|
|
<span class="text-slate-700">{{ customer.birth_date }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">Gender</span>
|
|
<span class="text-slate-700 capitalize">
|
|
{{ customer.gender }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">Phone</span>
|
|
<span class="text-slate-700">
|
|
{{ customer.phone }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-between pt-4 border-t border-slate-100">
|
|
<UButton
|
|
as="NuxtLink"
|
|
size="xs"
|
|
variant="ghost"
|
|
:to="{ name: 'customers-id', params: { id: customer.id } }"
|
|
>
|
|
View
|
|
</UButton>
|
|
|
|
<UButton size="xs" variant="ghost" color="primary">
|
|
Policies
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|