← back to Ventura Corridor
linkedin-tracker-dashboard.html
296 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkedIn Sales Navigator Outreach Tracker</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 20px;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
color: #666;
font-size: 14px;
margin-bottom: 30px;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.metric-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.metric-number {
font-size: 36px;
font-weight: bold;
margin: 10px 0;
}
.metric-label {
font-size: 13px;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
.metric-subtext {
font-size: 12px;
margin-top: 8px;
opacity: 0.8;
}
.section {
margin-bottom: 40px;
}
.section-title {
color: #333;
font-size: 18px;
font-weight: 600;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 13px;
}
th {
background: #f5f5f5;
padding: 12px;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
tr:hover {
background: #f9f9f9;
}
.status-pending { color: #f59e0b; font-weight: 600; }
.status-opened { color: #10b981; font-weight: 600; }
.status-replied { color: #667eea; font-weight: 600; }
.status-called { color: #8b5cf6; font-weight: 600; }
.list-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.list-badge.kravet { background: #dbeafe; color: #1e40af; }
.list-badge.independent { background: #ddd6fe; color: #5b21b6; }
.list-badge.hospitality { background: #fcdab7; color: #92400e; }
.list-badge.ventura { background: #dcfce7; color: #166534; }
.weekly-summary {
background: #f0f9ff;
border-left: 4px solid #667eea;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
}
.weekly-summary h3 {
margin-top: 0;
color: #333;
}
.action-list {
list-style: none;
padding: 0;
}
.action-list li {
padding: 8px 0;
color: #666;
border-bottom: 1px solid #e0e0e0;
}
.action-list li:last-child {
border-bottom: none;
}
.action-list li:before {
content: "→ ";
color: #667eea;
font-weight: bold;
margin-right: 8px;
}
.progress-bar {
background: #e0e0e0;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-top: 8px;
}
.progress-fill {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
height: 100%;
border-radius: 4px;
}
.footer {
color: #999;
font-size: 12px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 LinkedIn Sales Navigator Outreach Tracker</h1>
<p class="subtitle">Designer Wallcoverings + Ventura Corridor Pipeline</p>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-label">InMails Sent (This Month)</div>
<div class="metric-number" id="sent-count">0</div>
<div class="progress-bar"><div class="progress-fill" style="width: 0%"></div></div>
<div class="metric-subtext">Target: 20/month</div>
</div>
<div class="metric-card">
<div class="metric-label">Open Rate</div>
<div class="metric-number" id="open-rate">0%</div>
<div class="progress-bar"><div class="progress-fill" style="width: 0%"></div></div>
<div class="metric-subtext">Target: 15–20%</div>
</div>
<div class="metric-card">
<div class="metric-label">Reply Rate</div>
<div class="metric-number" id="reply-rate">0%</div>
<div class="progress-bar"><div class="progress-fill" style="width: 0%"></div></div>
<div class="metric-subtext">Target: 3–5%</div>
</div>
<div class="metric-card">
<div class="metric-label">Calls Scheduled</div>
<div class="metric-number" id="calls-scheduled">0</div>
<div class="progress-bar"><div class="progress-fill" style="width: 0%"></div></div>
<div class="metric-subtext">Target: 1–2/week</div>
</div>
</div>
<div class="section">
<div class="section-title">📋 This Week's Outreach Plan</div>
<div class="weekly-summary">
<h3>Week 1: June 24–30</h3>
<ul class="action-list">
<li><strong>Build Lists (Sales Navigator):</strong> Search & add 15 people from List 1 (Kravet umbrella VPs)</li>
<li><strong>Send InMails (Week 1):</strong> 5 InMails to Kravet decision-makers (use template provided)</li>
<li><strong>Daily Engagement:</strong> Follow 7 vendors/day from your 28-vendor list (Mon–Thu)</li>
<li><strong>Comment:</strong> 1 warm comment on Kravet, Cole & Son, or Schumacher post (M/W/F, 4 PM)</li>
<li><strong>Tracking:</strong> Update tracker as InMails open/reply</li>
</ul>
</div>
</div>
<div class="section">
<div class="section-title">📧 Active Outreach</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Company</th>
<th>Title</th>
<th>List</th>
<th>Sent</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody id="outreach-table">
<tr>
<td colspan="7" class="empty-state">
📌 Update LINKEDIN_OUTREACH_TRACKER.csv with names & send dates. Reload dashboard to see data.
</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<div class="section-title">🎯 Monthly Cadence</div>
<table>
<thead>
<tr>
<th>Week</th>
<th>InMails to Send</th>
<th>Target Lists</th>
<th>Engagement Goal</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Week 1</strong></td>
<td>5</td>
<td><span class="list-badge kravet">Kravet</span></td>
<td>Follow 28 vendors + 3 daily likes</td>
</tr>
<tr>
<td><strong>Week 2</strong></td>
<td>7</td>
<td><span class="list-badge independent">Independents</span> <span class="list-badge hospitality">Hospitality</span></td>
<td>Comment on 3 vendor posts</td>
</tr>
<tr>
<td><strong>Week 3</strong></td>
<td>5</td>
<td><span class="list-badge ventura">Ventura</span></td>
<td>Warm up discovery targets</td>
</tr>
<tr>
<td><strong>Week 4</strong></td>
<td>3</td>
<td>Follow-ups to warm replies</td>
<td>Schedule calls from Week 1/2 replies</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<div class="section-title">📍 Next Actions</div>
<ul class="action-list">
<li>Open LinkedIn Sales Navigator</li>
<li>Create "Kravet Umbrella VPs" list + add 15 people (search string provided in docs)</li>
<li>Draft 5 personalized InMails (template ready in LINKEDIN_STRATEGY_ACTIONPLAN.md)</li>
<li>Send first InMail today or tomorrow (Monday best, 9 AM ET for read-through)</li>
<li>Update LINKEDIN_OUTREACH_TRACKER.csv as InMails open/reply</li>
<li>Set calendar reminders: Daily 7:30 AM (engagement), M/W/F 4 PM (comments), Friday 5 PM (metric review)</li>
</ul>
</div>
<div class="footer">
<p>💡 <strong>Pro tip:</strong> Update the CSV tracker weekly. Reload this dashboard to see metrics update automatically.</p>
<p>🔄 <strong>Success metrics:</strong> Open rate 15–20%, Reply rate 3–5%, Calls scheduled 1–2/week.</p>
</div>
</div>
<script>
// Placeholder for future CSV parsing (when tracker data is added)
console.log("Dashboard ready. Add data to LINKEDIN_OUTREACH_TRACKER.csv and refresh.");
</script>
</body>
</html>