123 lines
5.9 KiB
Vue
123 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
/* ── Time ── */
|
|
const timeGreeting = computed(() => {
|
|
const h = new Date().getHours()
|
|
if (h < 12) return 'Good morning'
|
|
if (h < 17) return 'Good afternoon'
|
|
return 'Good evening'
|
|
})
|
|
|
|
const currentDate = computed(() =>
|
|
new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date())
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-full pb-12">
|
|
<div class="mx-auto max-w-6xl px-4 py-12">
|
|
<!-- Greeting -->
|
|
<div class="mb-12">
|
|
<h1 class="text-3xl font-semibold tracking-tight text-[var(--text-primary)]">
|
|
{{ timeGreeting }}, User
|
|
</h1>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ currentDate }}</p>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<NuxtLink
|
|
to="/quotes/new"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-document-text" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">New Quote</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">Create a new insurance quote</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/onboarding"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-arrow-trending-up" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">Pipeline</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">View sales pipeline</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/sales/quick-lead"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-bolt" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">Quick Lead</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">Capture a new lead</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/customers"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-users" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">Customers</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">Manage customer profiles</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/policies"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-shield-check" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">Policies</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">View and manage policies</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/providers"
|
|
class="group flex items-center gap-4 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 transition-all hover:border-[var(--brand)] hover:shadow-md"
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--brand)] text-white">
|
|
<UIcon name="i-heroicons-building-office" class="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-[var(--text-primary)]">Providers</h3>
|
|
<p class="mt-1 text-sm text-[var(--text-muted)]">Manage insurance providers</p>
|
|
</div>
|
|
<UIcon name="i-heroicons-arrow-right" class="ml-auto h-5 w-5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--brand)]" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Welcome Message -->
|
|
<div class="mt-12 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-8">
|
|
<h2 class="text-xl font-semibold text-[var(--text-primary)]">Welcome to Segur-OS</h2>
|
|
<p class="mt-2 text-[var(--text-muted)]">
|
|
Your insurance management dashboard. Get started by creating a new quote or exploring the available features.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|