add customer and providers

app/components/customer/CustomerCard.vue

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