HaimKortovich
3a52768b97
Some checks failed
Build and Publish / build-release (push) Failing after 1m31s
82 lines
3.3 KiB
Vue
82 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
const search = ref('')
|
|
const { data, pending, refresh } = useProviders('/providers')
|
|
|
|
// Ensure data is refreshed when page loads
|
|
onMounted(() => {
|
|
refresh()
|
|
})
|
|
|
|
const providers = computed(() => {
|
|
const list = data.value?.data ?? []
|
|
if (!search.value) return list
|
|
return list.filter((p: any) =>
|
|
`${p.name} ${p.email} ${p.contact_name}`.toLowerCase().includes(search.value.toLowerCase())
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-8 space-y-8 bg-gray-50 min-h-screen">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Providers</h1>
|
|
<p class="text-[13px] text-[var(--text-muted)]">Insurance carrier management</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<UBadge color="gray" variant="soft" size="lg">{{ providers.length }} providers</UBadge>
|
|
<NuxtLink to="/providers/new">
|
|
<UButton icon="i-heroicons-plus" color="primary">New Provider</UButton>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<UInput v-model="search" icon="i-heroicons-magnifying-glass" placeholder="Search providers..." class="w-72" />
|
|
<UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()">Refresh</UButton>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<NuxtLink v-for="p in providers" :key="p.provider_id" :to="`/providers/${p.provider_id}`">
|
|
<UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-start">
|
|
<p class="font-semibold text-[var(--text-primary)] text-lg">{{ p.name }}</p>
|
|
<UBadge :color="p.active ? 'green' : 'red'" variant="soft" size="xs">
|
|
{{ p.active ? 'Active' : 'Inactive' }}
|
|
</UBadge>
|
|
</div>
|
|
<div class="space-y-1 text-sm">
|
|
<div class="flex items-center gap-2 text-gray-500">
|
|
<UIcon name="i-heroicons-envelope" class="w-4 h-4" />
|
|
<span>{{ p.email }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-500">
|
|
<UIcon name="i-heroicons-phone" class="w-4 h-4" />
|
|
<span>{{ p.phone ?? '—' }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-500">
|
|
<UIcon name="i-heroicons-user" class="w-4 h-4" />
|
|
<span>{{ p.contact_name ?? '—' }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center pt-2 border-t text-xs text-gray-400">
|
|
<span>RUC: {{ p.ruc ?? '—' }}</span>
|
|
<UIcon name="i-heroicons-chevron-right" class="w-4 h-4" />
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</NuxtLink>
|
|
|
|
<div v-if="providers.length === 0" class="col-span-3 text-center py-16 text-gray-400">
|
|
<UIcon name="i-heroicons-building-office" class="w-12 h-12 mx-auto mb-4" />
|
|
<p class="text-lg font-medium">No providers found</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|