WIP

app/pages/customers/[id].vue

@@ -0,0 +1,99 @@
+<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>