policy-ui/app/components/sales/SalesFlowIndicator.vue

<script setup lang="ts">
/**
 * Airline-ticket-style horizontal flow indicator for the sales process.
 * Always visible at the top of any sales page, highlighting "you are here."
 */
const props = defineProps<{
  /** Which stage the current page represents */
  currentStage: 'quick_lead' | 'customer' | 'new_quote'
}>()

const stages = [
  { id: 'quick_lead', label: 'Quick Lead', icon: 'i-heroicons-bolt', route: '/sales/quick-lead' },
  { id: 'customer', label: 'Customer', icon: 'i-heroicons-user-plus', route: '/customers/new' },
  { id: 'new_quote', label: 'New Quote', icon: 'i-heroicons-document-magnifying-glass', route: '/quotes/new' },
] as const

type StageId = typeof stages[number]['id']

function stageIndex(id: StageId): number {
  return stages.findIndex(s => s.id === id)
}

const currentIdx = computed(() => stageIndex(props.currentStage))

function state(id: StageId): 'done' | 'current' | 'upcoming' {
  const idx = stageIndex(id)
  if (idx < currentIdx.value) return 'done'
  if (idx === currentIdx.value) return 'current'
  return 'upcoming'
}
</script>

<template>
  <nav class="sfi-root" aria-label="Sales process flow">
    <div class="sfi-track">
      <template v-for="(stage, i) in stages" :key="stage.id">
        <!-- Connector -->
        <div
          v-if="i > 0"
          class="sfi-connector"
          :class="state(stage.id) === 'upcoming' ? 'sfi-conn-upcoming' : 'sfi-conn-done'"
        />

        <!-- Stage node -->
        <NuxtLink
          :to="stage.route"
          class="sfi-node"
          :class="[
            `sfi-node-${state(stage.id)}`,
            state(stage.id) !== 'upcoming' ? 'sfi-node-clickable' : '',
          ]"
          :aria-current="state(stage.id) === 'current' ? 'step' : undefined"
        >
          <div class="sfi-icon-circle" :class="`sfi-ic-${state(stage.id)}`">
            <UIcon v-if="state(stage.id) === 'done'" name="i-heroicons-check" style="width: 14px; height: 14px;" />
            <UIcon v-else :name="stage.icon" style="width: 14px; height: 14px;" />
          </div>
          <span class="sfi-label">{{ stage.label }}</span>
        </NuxtLink>
      </template>
    </div>
  </nav>
</template>

<style scoped>
.sfi-root {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  padding: 16px 20px;
}

.sfi-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ── Connector line ── */
.sfi-connector {
  flex: 1;
  height: 2px;
  min-width: 16px;
  max-width: 80px;
  margin-top: 17px; /* vertically center with the 36px circle */
  border-radius: 1px;
}
.sfi-conn-done {
  background: #01696f;
}
.sfi-conn-upcoming {
  background: rgba(0,0,0,0.08);
}

/* ── Stage node ── */
.sfi-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-width: 72px;
  padding: 0 4px;
  cursor: default;
  flex-shrink: 0;
}
.sfi-node-clickable {
  cursor: pointer;
}
.sfi-node-clickable:hover .sfi-label {
  color: #01696f;
}
.sfi-node-clickable:hover .sfi-ic-done {
  box-shadow: 0 0 0 3px rgba(1,105,111,0.12);
}

/* ── Icon circle ── */
.sfi-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 180ms ease;
}
.sfi-ic-done {
  background: #01696f;
  color: #fff;
}
.sfi-ic-current {
  background: #fff;
  border: 2.5px solid #01696f;
  color: #01696f;
  box-shadow: 0 0 0 4px rgba(1,105,111,0.10);
  animation: sfi-glow 2.5s ease-in-out infinite;
}
.sfi-ic-upcoming {
  background: rgba(0,0,0,0.04);
  color: #c0c0bc;
  border: 1.5px solid rgba(0,0,0,0.06);
}

@keyframes sfi-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(1,105,111,0.10); }
  50% { box-shadow: 0 0 0 6px rgba(1,105,111,0.18); }
}

/* ── Labels ── */
.sfi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  text-align: center;
  transition: color 150ms ease;
}
.sfi-node-upcoming .sfi-label {
  color: #c0c0bc;
}
.sfi-node-current .sfi-label {
  color: #01696f;
  font-weight: 700;
}

</style>