100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { data, error, pending } = useCustomer(route.params.id)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-8 bg-slate-100 min-h-screen">
|
|
|
|
<!-- 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" />
|
|
</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>
|
|
</div>
|
|
</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>
|
|
</UCard>
|
|
|
|
<!-- 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="text-slate-500 text-sm">
|
|
No policies yet.
|
|
</div>
|
|
</UCard>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|