|
|
<h2>Quotations Pipeline — pick the view that fits how you chase quotes</h2>
|
|
|
<p class="subtitle">Same data, two ways to see “what needs following up today.” This is the screen that gets messed up right now — we’ll build whichever one you pick. Every quote shows its <b>owner</b> (employee) and its <b>next nudge</b>.</p>
|
|
|
|
|
|
<div class="split">
|
|
|
|
|
|
<!-- ============ OPTION A: KANBAN BOARD ============ -->
|
|
|
<div class="mockup">
|
|
|
<div class="mockup-header">A · Pipeline board — the whole funnel at a glance</div>
|
|
|
<div class="mockup-body">
|
|
|
<div style="display:flex;gap:8px;overflow-x:auto">
|
|
|
|
|
|
<div style="flex:1;min-width:120px">
|
|
|
<div style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.7;margin-bottom:6px">Enquiry · 2</div>
|
|
|
<div style="border:1px solid rgba(128,128,128,.35);border-radius:8px;padding:8px;margin-bottom:6px">
|
|
|
<div style="font-weight:600;font-size:13px">Kolhapur Urban Coop</div>
|
|
|
<div style="font-size:12px;opacity:.75">Mobile App · quote not sent</div>
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
|
|
|
<span style="font-size:11px;background:rgba(128,128,128,.18);padding:1px 7px;border-radius:20px">Anil</span>
|
|
|
<span style="font-size:11px;color:#8a8f98">3d</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="border:1px solid rgba(128,128,128,.35);border-radius:8px;padding:8px">
|
|
|
<div style="font-weight:600;font-size:13px">Pratibha Nagari</div>
|
|
|
<div style="font-size:12px;opacity:.75">RTGS/NEFT</div>
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
|
|
|
<span style="font-size:11px;background:rgba(128,128,128,.18);padding:1px 7px;border-radius:20px">Rahul</span>
|
|
|
<span style="font-size:11px;color:#8a8f98">1d</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style="flex:1;min-width:120px">
|
|
|
<div style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.7;margin-bottom:6px">Quoted · Waiting · 3</div>
|
|
|
<div style="border:1px solid rgba(229,72,77,.5);border-radius:8px;padding:8px;margin-bottom:6px">
|
|
|
<div style="font-weight:600;font-size:13px">Sahakari Bank Pune</div>
|
|
|
<div style="font-size:12px;opacity:.75">Core Banking · ₹1,20,000</div>
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
|
|
|
<span style="font-size:11px;background:rgba(128,128,128,.18);padding:1px 7px;border-radius:20px">Priya</span>
|
|
|
<span style="font-size:11px;color:#e5484d;font-weight:600">chase overdue · 9d</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="border:1px solid rgba(245,166,35,.55);border-radius:8px;padding:8px;margin-bottom:6px">
|
|
|
<div style="font-weight:600;font-size:13px">Janata Credit Society</div>
|
|
|
<div style="font-size:12px;opacity:.75">SMS Alerts · ₹85,000</div>
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
|
|
|
<span style="font-size:11px;background:rgba(128,128,128,.18);padding:1px 7px;border-radius:20px">Rahul</span>
|
|
|
<span style="font-size:11px;color:#f5a623;font-weight:600">nudge in 2d</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="border:1px solid rgba(229,72,77,.5);border-radius:8px;padding:8px">
|
|
|
<div style="font-weight:600;font-size:13px">Deccan Mercantile</div>
|
|
|
<div style="font-size:12px;opacity:.75">Core Banking · ₹2,40,000</div>
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">
|
|
|
<span style="font-size:11px;background:rgba(128,128,128,.18);padding:1px 7px;border-radius:20px">Priya</span>
|
|
|
<span style="font-size:11px;color:#e5484d;font-weight:600">final nudge · 15d</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style="flex:1;min-width:110px">
|
|
|
<div style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.7;margin-bottom:6px">Won · 1</div>
|
|
|
<div style="border:1px solid rgba(48,164,108,.55);border-radius:8px;padding:8px">
|
|
|
<div style="font-weight:600;font-size:13px">Shivneri Sahakari</div>
|
|
|
<div style="font-size:12px;opacity:.75">Mobile App · ₹60,000</div>
|
|
|
<div style="margin-top:6px">
|
|
|
<span style="font-size:11px;color:#30a46c;font-weight:600">→ convert to invoice</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- ============ OPTION B: CHASE-LIST ============ -->
|
|
|
<div class="mockup">
|
|
|
<div class="mockup-header">B · Chase-list — one ranked “do this now” list</div>
|
|
|
<div class="mockup-body">
|
|
|
<div style="display:flex;gap:6px;margin-bottom:8px;font-size:11px">
|
|
|
<span style="background:rgba(128,128,128,.18);padding:3px 9px;border-radius:20px">All quotes</span>
|
|
|
<span style="border:1px solid rgba(128,128,128,.35);padding:3px 9px;border-radius:20px">Mine</span>
|
|
|
<span style="border:1px solid rgba(128,128,128,.35);padding:3px 9px;border-radius:20px">Overdue</span>
|
|
|
<span style="border:1px solid rgba(128,128,128,.35);padding:3px 9px;border-radius:20px">Owner ▾</span>
|
|
|
</div>
|
|
|
<table style="width:100%;border-collapse:collapse;font-size:12px">
|
|
|
<thead>
|
|
|
<tr style="text-align:left;opacity:.6;font-size:10px;text-transform:uppercase;letter-spacing:.5px">
|
|
|
<th style="padding:4px 4px">Client</th><th>Stage</th><th>Amount</th><th>Owner</th><th>Next action</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr style="border-top:1px solid rgba(128,128,128,.25)">
|
|
|
<td style="padding:6px 4px;font-weight:600">Deccan Mercantile</td><td>Quoted</td><td>₹2,40,000</td><td>Priya</td>
|
|
|
<td style="color:#e5484d;font-weight:600">Final nudge · 15d</td>
|
|
|
</tr>
|
|
|
<tr style="border-top:1px solid rgba(128,128,128,.25)">
|
|
|
<td style="padding:6px 4px;font-weight:600">Sahakari Bank Pune</td><td>Quoted</td><td>₹1,20,000</td><td>Priya</td>
|
|
|
<td style="color:#e5484d;font-weight:600">Chase overdue · 9d</td>
|
|
|
</tr>
|
|
|
<tr style="border-top:1px solid rgba(128,128,128,.25)">
|
|
|
<td style="padding:6px 4px;font-weight:600">Janata Credit Society</td><td>Quoted</td><td>₹85,000</td><td>Rahul</td>
|
|
|
<td style="color:#f5a623;font-weight:600">Nudge in 2d</td>
|
|
|
</tr>
|
|
|
<tr style="border-top:1px solid rgba(128,128,128,.25)">
|
|
|
<td style="padding:6px 4px;font-weight:600">Kolhapur Urban Coop</td><td>Enquiry</td><td>—</td><td>Anil</td>
|
|
|
<td style="opacity:.8">Send quote</td>
|
|
|
</tr>
|
|
|
<tr style="border-top:1px solid rgba(128,128,128,.25)">
|
|
|
<td style="padding:6px 4px;font-weight:600">Shivneri Sahakari</td><td>Won</td><td>₹60,000</td><td>Rahul</td>
|
|
|
<td style="color:#30a46c;font-weight:600">Convert to invoice</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="options">
|
|
|
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
|
|
<div class="letter">A</div>
|
|
|
<div class="content">
|
|
|
<h3>Pipeline board</h3>
|
|
|
<p>See every quote by stage, drag a card as it moves Enquiry → Quoted → Won. Best for seeing the whole funnel’s shape.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
|
|
<div class="letter">B</div>
|
|
|
<div class="content">
|
|
|
<h3>Chase-list</h3>
|
|
|
<p>One ranked list — most overdue on top, colour-coded, “next action” spelled out. Less clicking, more doing. Fewer things to mess up.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="option" data-choice="both" onclick="toggleSelect(this)">
|
|
|
<div class="letter">A+B</div>
|
|
|
<div class="content">
|
|
|
<h3>Board + a “needs chasing” strip</h3>
|
|
|
<p>The board as the main view, with the overdue chase-list pinned at the top as a to-do strip. Slightly more to build.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|