520 lines
20 KiB
Vue
520 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { useQuickLeads, type QuickLead } from '~/composables/useQuickLeads'
|
|
|
|
usePageTitle('Quick Leads')
|
|
|
|
const { leads, addLead, removeLead, recentLeads } = useQuickLeads()
|
|
const toast = useToast()
|
|
|
|
/* ── Form state ── */
|
|
const formOpen = ref(false)
|
|
const name = ref('')
|
|
const phone = ref('')
|
|
const email = ref('')
|
|
const product = ref('')
|
|
const source = ref('')
|
|
const priority = ref<'normal' | 'high' | 'urgent'>('normal')
|
|
const note = ref('')
|
|
|
|
const productOptions = [
|
|
{ label: 'Auto', value: 'Auto' },
|
|
{ label: 'Health', value: 'Health' },
|
|
{ label: 'Life', value: 'Life' },
|
|
{ label: 'General Risk', value: 'General Risk' },
|
|
{ label: 'Custom', value: 'Custom' },
|
|
]
|
|
|
|
const sourceOptions = [
|
|
{ label: 'Walk-in', value: 'walk-in' },
|
|
{ label: 'Referral', value: 'referral' },
|
|
{ label: 'Phone call', value: 'phone' },
|
|
{ label: 'Website', value: 'website' },
|
|
{ label: 'Social media', value: 'social' },
|
|
{ label: 'Other', value: 'other' },
|
|
]
|
|
|
|
const priorityOptions = [
|
|
{ label: 'Normal', value: 'normal' as const },
|
|
{ label: 'High — follow up today', value: 'high' as const },
|
|
{ label: 'Urgent — client waiting', value: 'urgent' as const },
|
|
]
|
|
|
|
function submit() {
|
|
if (!name.value.trim() || !product.value) return
|
|
addLead({
|
|
name: name.value.trim(),
|
|
phone: phone.value.trim(),
|
|
email: email.value.trim(),
|
|
product: product.value,
|
|
source: source.value || 'other',
|
|
priority: priority.value,
|
|
note: note.value.trim(),
|
|
agent: 'Me', // placeholder
|
|
})
|
|
toast.add({ title: 'Lead captured', description: `${name.value} added to quick leads`, color: 'success' })
|
|
resetForm()
|
|
}
|
|
|
|
function resetForm() {
|
|
name.value = ''
|
|
phone.value = ''
|
|
email.value = ''
|
|
product.value = ''
|
|
source.value = ''
|
|
priority.value = 'normal'
|
|
note.value = ''
|
|
formOpen.value = false
|
|
}
|
|
|
|
function confirmRemove(id: string) {
|
|
removeLead(id)
|
|
toast.add({ title: 'Lead removed', color: 'neutral' })
|
|
}
|
|
|
|
/* ── List filtering ── */
|
|
type ListFilter = 'all' | 'urgent' | 'high' | 'normal'
|
|
const activeFilter = ref<ListFilter>('all')
|
|
|
|
const filteredLeads = computed(() => {
|
|
if (activeFilter.value === 'all') return leads.value
|
|
return leads.value.filter(l => l.priority === activeFilter.value)
|
|
})
|
|
|
|
const filterCounts = computed(() => ({
|
|
all: leads.value.length,
|
|
urgent: leads.value.filter(l => l.priority === 'urgent').length,
|
|
high: leads.value.filter(l => l.priority === 'high').length,
|
|
normal: leads.value.filter(l => l.priority === 'normal').length,
|
|
}))
|
|
|
|
/* ── Helpers ── */
|
|
function priorityMeta(p: string) {
|
|
if (p === 'urgent') return { label: 'Urgent', class: 'ql-pri-urgent' }
|
|
if (p === 'high') return { label: 'High', class: 'ql-pri-high' }
|
|
return { label: 'Normal', class: 'ql-pri-normal' }
|
|
}
|
|
|
|
function formatDate(iso: string) {
|
|
const d = new Date(iso)
|
|
const now = new Date()
|
|
const diff = now.getTime() - d.getTime()
|
|
if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
|
|
if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
|
|
if (diff < 172800000) return 'Yesterday'
|
|
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
|
}
|
|
|
|
/* ── Seed demo data if empty ── */
|
|
onMounted(() => {
|
|
if (leads.value.length === 0) {
|
|
const now = Date.now()
|
|
const demoLeads: Omit<QuickLead, 'id'>[] = [
|
|
{ name: 'Diego Herrera', phone: '+506 6100-4422', email: 'diego.h@gmail.com', product: 'Auto', source: 'referral', priority: 'high', note: 'Referred by Roberto Jiménez — needs fleet quote for 3 vehicles', agent: 'Marco V.', createdAt: new Date(now - 2 * 86400000).toISOString() },
|
|
{ name: 'Valeria Núñez', phone: '+506 8899-1100', email: '', product: 'Auto', source: 'walk-in', priority: 'normal', note: 'Walk-in, interested in comprehensive auto', agent: 'Ana R.', createdAt: new Date(now - 4 * 86400000).toISOString() },
|
|
{ name: 'Patricia Mora', phone: '+506 7700-3311', email: 'patricia.mora@empresa.cr', product: 'Health', source: 'website', priority: 'urgent', note: 'Corporate group health RFP — 20 employees, need response by Friday', agent: 'Ana R.', createdAt: new Date(now - 1 * 86400000).toISOString() },
|
|
{ name: 'José Ramírez', phone: '+506 6045-8820', email: 'jramirez@outlook.com', product: 'Life', source: 'phone', priority: 'normal', note: 'Interested in term life, age 45', agent: 'Marco V.', createdAt: new Date(now - 6 * 86400000).toISOString() },
|
|
{ name: 'Lucía Castillo', phone: '+506 8312-5500', email: '', product: 'Auto', source: 'social', priority: 'high', note: 'Instagram DM — new car, wants quote ASAP', agent: 'Marco V.', createdAt: new Date(now - 3 * 86400000).toISOString() },
|
|
]
|
|
// Insert with proper IDs
|
|
for (const entry of demoLeads.reverse()) {
|
|
leads.value = [{
|
|
id: crypto.randomUUID?.() ?? String(Date.now() + Math.random()),
|
|
...entry,
|
|
}, ...leads.value]
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ql-page">
|
|
<!-- Back -->
|
|
<NuxtLink to="/onboarding" class="inline-flex">
|
|
<UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Sales Pipeline</UButton>
|
|
</NuxtLink>
|
|
|
|
<!-- Sales flow indicator -->
|
|
<SalesFlowIndicator current-stage="quick_lead" />
|
|
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Quick Leads</h1>
|
|
<p class="mt-1 text-[13px] text-[var(--text-muted)]">
|
|
Capture leads in seconds. Every lead lands here and stays visible until you move it to a full quote or customer profile.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="ql-add-btn"
|
|
@click="formOpen = !formOpen"
|
|
>
|
|
<UIcon :name="formOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-plus'" style="width: 14px; height: 14px;" />
|
|
{{ formOpen ? 'Close form' : 'New quick lead' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ═══ Dropdown form ═══ -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 -translate-y-2 max-h-0"
|
|
enter-to-class="opacity-100 translate-y-0 max-h-[600px]"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100 max-h-[600px]"
|
|
leave-to-class="opacity-0 -translate-y-2 max-h-0"
|
|
>
|
|
<div v-if="formOpen" class="ql-form-card">
|
|
<!-- Section: Contact -->
|
|
<div class="ql-section">
|
|
<p class="ql-section-title">Contact</p>
|
|
<div class="ql-fields">
|
|
<div class="ql-field ql-field-full">
|
|
<label class="ql-label">Name <span class="ql-required">*</span></label>
|
|
<UInput v-model="name" placeholder="Full name or company" size="sm" />
|
|
</div>
|
|
<div class="ql-field">
|
|
<label class="ql-label">Phone</label>
|
|
<UInput v-model="phone" placeholder="+506 0000-0000" size="sm" />
|
|
</div>
|
|
<div class="ql-field">
|
|
<label class="ql-label">Email</label>
|
|
<UInput v-model="email" placeholder="name@company.com" size="sm" type="email" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ql-divider" />
|
|
|
|
<!-- Section: Lead info -->
|
|
<div class="ql-section">
|
|
<p class="ql-section-title">Lead info</p>
|
|
<div class="ql-fields">
|
|
<div class="ql-field">
|
|
<label class="ql-label">Product line <span class="ql-required">*</span></label>
|
|
<USelect v-model="product" :items="productOptions" placeholder="Select line..." size="sm" />
|
|
</div>
|
|
<div class="ql-field">
|
|
<label class="ql-label">Source</label>
|
|
<USelect v-model="source" :items="sourceOptions" placeholder="How did they find us?" size="sm" />
|
|
</div>
|
|
<div class="ql-field ql-field-full">
|
|
<label class="ql-label">Priority</label>
|
|
<USelect v-model="priority" :items="priorityOptions" placeholder="Normal" size="sm" />
|
|
</div>
|
|
<div class="ql-field ql-field-full">
|
|
<label class="ql-label">Notes</label>
|
|
<UTextarea v-model="note" placeholder="Brief context, referral source, or anything useful for follow-up..." size="sm" :rows="2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="ql-footer">
|
|
<div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
|
|
<UIcon name="i-heroicons-bolt" style="width: 14px; height: 14px; opacity: 0.5;" />
|
|
Saves to quick lead list
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button type="button" class="ql-cancel-btn" @click="resetForm">Cancel</button>
|
|
<button type="button" class="ql-submit-btn" :class="!name.trim() || !product ? 'ql-btn-disabled' : ''" @click="submit">
|
|
<UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
|
|
Add Lead
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- ═══ KPI strip ═══ -->
|
|
<div class="ql-kpi-strip">
|
|
<div class="ql-kpi">
|
|
<p class="ql-kpi-label">Total leads</p>
|
|
<p class="ql-kpi-value">{{ leads.length }}</p>
|
|
</div>
|
|
<div class="ql-kpi">
|
|
<p class="ql-kpi-label">Last 10 days</p>
|
|
<p class="ql-kpi-value">{{ recentLeads(10).length }}</p>
|
|
</div>
|
|
<div class="ql-kpi">
|
|
<p class="ql-kpi-label">Urgent</p>
|
|
<p class="ql-kpi-value" style="color: #c13838;">{{ filterCounts.urgent }}</p>
|
|
</div>
|
|
<div class="ql-kpi">
|
|
<p class="ql-kpi-label">High priority</p>
|
|
<p class="ql-kpi-value" style="color: #c27b1a;">{{ filterCounts.high }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ Filter tabs ═══ -->
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="ql-filter-tabs">
|
|
<button
|
|
v-for="f in ([
|
|
{ id: 'all', label: 'All' },
|
|
{ id: 'urgent', label: 'Urgent' },
|
|
{ id: 'high', label: 'High' },
|
|
{ id: 'normal', label: 'Normal' },
|
|
] as { id: ListFilter; label: string }[])"
|
|
:key="f.id"
|
|
type="button"
|
|
class="ql-filter-tab"
|
|
:class="activeFilter === f.id ? 'ql-filter-on' : 'ql-filter-off'"
|
|
@click="activeFilter = f.id"
|
|
>
|
|
{{ f.label }}
|
|
<span class="ql-filter-count" :class="activeFilter === f.id ? 'ql-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
|
|
</button>
|
|
</div>
|
|
<span class="text-[11px] text-[var(--text-muted)]">{{ filteredLeads.length }} results</span>
|
|
</div>
|
|
|
|
<!-- ═══ Leads list ═══ -->
|
|
<div v-if="filteredLeads.length === 0" class="ql-empty">
|
|
<UIcon name="i-heroicons-bolt" style="width: 32px; height: 32px; color: #c0c0bc;" />
|
|
<p class="text-[13px] text-[var(--text-muted)] mt-2">No quick leads yet.</p>
|
|
<button type="button" class="ql-add-btn mt-3" @click="formOpen = true">
|
|
<UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
|
|
Add your first lead
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="ql-lead-list">
|
|
<TransitionGroup
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 -translate-y-1 scale-95"
|
|
enter-to-class="opacity-100 translate-y-0 scale-100"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0 scale-95"
|
|
>
|
|
<div v-for="lead in filteredLeads" :key="lead.id" class="ql-lead-card group">
|
|
<div class="ql-lead-top">
|
|
<div class="ql-lead-avatar">{{ lead.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<p class="text-[14px] font-semibold text-[var(--text-primary)] truncate">{{ lead.name }}</p>
|
|
<span :class="priorityMeta(lead.priority).class">{{ priorityMeta(lead.priority).label }}</span>
|
|
<span class="ql-product-tag">{{ lead.product }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 mt-0.5 text-[11px] text-[var(--text-muted)]">
|
|
<span v-if="lead.phone">{{ lead.phone }}</span>
|
|
<span v-if="lead.email">{{ lead.email }}</span>
|
|
<span>{{ formatDate(lead.createdAt) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="ql-lead-actions">
|
|
<NuxtLink :to="`/quotes/new`" title="Start quote">
|
|
<button type="button" class="ql-action-btn ql-action-quote">
|
|
<UIcon name="i-heroicons-calculator" style="width: 14px; height: 14px;" />
|
|
</button>
|
|
</NuxtLink>
|
|
<button type="button" class="ql-action-btn ql-action-delete" title="Remove" @click="confirmRemove(lead.id)">
|
|
<UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="lead.note" class="ql-lead-note">
|
|
<UIcon name="i-heroicons-chat-bubble-left-ellipsis" style="width: 11px; height: 11px; color: #8a8a86; flex-shrink: 0;" />
|
|
<span>{{ lead.note }}</span>
|
|
</div>
|
|
<div class="ql-lead-meta">
|
|
<span v-if="lead.source" class="ql-meta-tag">{{ lead.source }}</span>
|
|
<span class="ql-meta-tag">{{ lead.agent }}</span>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ql-page {
|
|
max-width: 64rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
/* ── Add button ── */
|
|
.ql-add-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
background: #01696f;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
white-space: nowrap;
|
|
}
|
|
.ql-add-btn:hover { background: #015458; }
|
|
|
|
/* ── Form card ── */
|
|
.ql-form-card {
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
overflow: hidden;
|
|
}
|
|
.ql-section { padding: 20px; }
|
|
.ql-section-title {
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary); margin-bottom: 16px;
|
|
}
|
|
.ql-fields {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
|
|
}
|
|
@media (max-width: 639px) { .ql-fields { grid-template-columns: 1fr; } }
|
|
.ql-field-full { grid-column: 1 / -1; }
|
|
.ql-field { display: flex; flex-direction: column; gap: 6px; }
|
|
.ql-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.04em; color: #8a8a86;
|
|
}
|
|
.ql-required { color: #c13838; }
|
|
.ql-divider { height: 1px; background: rgba(0, 0, 0, 0.06); margin: 0 20px; }
|
|
.ql-footer {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding: 16px 20px; border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
background: rgba(0, 0, 0, 0.015);
|
|
}
|
|
.ql-submit-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 8px 16px; border-radius: 8px;
|
|
background: #01696f; color: #fff;
|
|
font-size: 13px; font-weight: 500; border: none;
|
|
cursor: pointer; transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.ql-submit-btn:hover { background: #015458; }
|
|
.ql-btn-disabled { opacity: 0.5; pointer-events: none; }
|
|
.ql-cancel-btn {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 8px 14px; border-radius: 8px;
|
|
background: transparent; color: var(--text-muted);
|
|
font-size: 13px; font-weight: 500;
|
|
border: 1px solid rgba(0,0,0,0.08); cursor: pointer;
|
|
transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.ql-cancel-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
|
|
|
|
/* ── KPI strip ── */
|
|
.ql-kpi-strip {
|
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
|
|
border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
|
|
background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
|
overflow: hidden;
|
|
}
|
|
.ql-kpi { padding: 14px 18px; background: #fff; }
|
|
.ql-kpi:first-child { border-radius: 12px 0 0 12px; }
|
|
.ql-kpi:last-child { border-radius: 0 12px 12px 0; }
|
|
.ql-kpi-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.04em; color: #8a8a86;
|
|
}
|
|
.ql-kpi-value {
|
|
margin-top: 4px; font-size: 22px; font-weight: 600;
|
|
color: var(--text-primary); font-variant-numeric: tabular-nums;
|
|
}
|
|
@media (max-width: 640px) { .ql-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
|
|
|
|
/* ── Filter tabs ── */
|
|
.ql-filter-tabs {
|
|
display: inline-flex; gap: 2px; padding: 3px;
|
|
border-radius: 10px; background: rgba(0,0,0,0.04);
|
|
}
|
|
.ql-filter-tab {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 6px 12px; border-radius: 8px;
|
|
font-size: 12px; font-weight: 500; border: none;
|
|
cursor: pointer; transition: all 150ms ease; white-space: nowrap;
|
|
}
|
|
.ql-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
|
.ql-filter-off { background: transparent; color: var(--text-muted); }
|
|
.ql-filter-off:hover { color: var(--text-primary); }
|
|
.ql-filter-count {
|
|
font-size: 10px; font-weight: 600; padding: 1px 5px;
|
|
border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
|
|
}
|
|
.ql-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
|
|
|
|
/* ── Lead cards ── */
|
|
.ql-lead-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.ql-lead-card {
|
|
display: flex; flex-direction: column; gap: 8px;
|
|
padding: 14px 16px; border-radius: 10px;
|
|
border: 1px solid rgba(0,0,0,0.06); background: #fff;
|
|
transition: all 150ms ease;
|
|
}
|
|
.ql-lead-card:hover {
|
|
border-color: rgba(1,105,111,0.15);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.ql-lead-top { display: flex; align-items: center; gap: 10px; }
|
|
.ql-lead-avatar {
|
|
width: 36px; height: 36px; border-radius: 10px;
|
|
background: rgba(194,123,26,0.08); color: #c27b1a;
|
|
font-size: 12px; font-weight: 700;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.ql-lead-actions {
|
|
display: flex; gap: 4px; opacity: 0;
|
|
transition: opacity 150ms ease; flex-shrink: 0;
|
|
}
|
|
.ql-lead-card:hover .ql-lead-actions { opacity: 1; }
|
|
.ql-action-btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 28px; height: 28px; border-radius: 6px;
|
|
border: none; cursor: pointer;
|
|
background: rgba(0,0,0,0.03); color: #8a8a86;
|
|
transition: all 150ms ease;
|
|
}
|
|
.ql-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
|
|
.ql-action-quote:hover { background: rgba(1,105,111,0.1); color: #01696f; }
|
|
.ql-action-delete:hover { background: rgba(193,56,56,0.08); color: #c13838; }
|
|
|
|
.ql-lead-note {
|
|
display: flex; align-items: flex-start; gap: 5px;
|
|
padding-left: 46px;
|
|
font-size: 12px; color: var(--text-muted); line-height: 1.4;
|
|
}
|
|
.ql-lead-meta {
|
|
display: flex; gap: 4px; padding-left: 46px; flex-wrap: wrap;
|
|
}
|
|
.ql-meta-tag {
|
|
font-size: 10px; font-weight: 500; padding: 1px 7px;
|
|
border-radius: 4px; background: rgba(0,0,0,0.04); color: #8a8a86;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* ── Priority badges ── */
|
|
.ql-pri-urgent {
|
|
font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
|
|
background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap;
|
|
}
|
|
.ql-pri-high {
|
|
font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
|
|
background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
|
|
}
|
|
.ql-pri-normal {
|
|
font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
|
|
background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap;
|
|
}
|
|
.ql-product-tag {
|
|
font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
|
|
background: rgba(1,105,111,0.07); color: #01696f; white-space: nowrap;
|
|
}
|
|
|
|
/* ── Empty ── */
|
|
.ql-empty {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 40px 16px; text-align: center;
|
|
}
|
|
</style>
|