policy-ui/app/pages/index.vue

<script setup lang="ts">
const { data: session } = useAuth()

const userName = computed(() => session.value?.user?.name || 'User')

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 }}, {{ userName }}
        </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>