526 lines
25 KiB
PHP
526 lines
25 KiB
PHP
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
|
|
|
|
.dash-container {
|
|
padding: 28px;
|
|
background: #f4f6fb;
|
|
font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Stat Cards ── */
|
|
.stat-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 18px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.card-hero {
|
|
background: white;
|
|
padding: 22px 24px;
|
|
border-radius: 14px;
|
|
border: 1px solid #e8edf5;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.card-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 4px;
|
|
}
|
|
.card-hero:nth-child(1)::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
|
.card-hero:nth-child(2)::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
|
.card-hero:nth-child(3)::before { background: linear-gradient(90deg, #fda085, #f6d365); }
|
|
.card-hero:nth-child(4)::before { background: linear-gradient(90deg, #43e97b, #38f9d7); }
|
|
.card-hero:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.09); }
|
|
|
|
.stat-icon {
|
|
width: 42px; height: 42px;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 18px; margin-bottom: 14px;
|
|
}
|
|
.stat-val { font-size: 30px; font-weight: 800; color: #1a202c; line-height: 1; }
|
|
.stat-label { color: #8896aa; font-size: 13px; margin-top: 6px; font-weight: 600; }
|
|
|
|
/* ── Shared Card ── */
|
|
.card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 14px;
|
|
border: 1px solid #e8edf5;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
/* ── Main Grid ── */
|
|
.main-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
align-items: start;
|
|
}
|
|
.main-grid > .card {
|
|
height: 520px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.table-scroll-area { flex: 1; overflow-y: auto; }
|
|
.table-scroll-area thead th { position: sticky; top: 0; background: white; z-index: 1; }
|
|
|
|
/* ── Right Panel ── */
|
|
.right-panel {
|
|
height: 520px;
|
|
background: white;
|
|
border-radius: 14px;
|
|
border: 1px solid #e8edf5;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
padding: 22px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.team-members-scroll { flex: 1; overflow-y: auto; margin-top: 10px; }
|
|
.team-member {
|
|
display: flex; align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f4f6fb;
|
|
}
|
|
.team-member:last-child { border-bottom: none; }
|
|
.member-img {
|
|
width: 38px; height: 38px; border-radius: 50%;
|
|
color: white; margin-right: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 700; font-size: 15px; flex-shrink: 0;
|
|
}
|
|
.act-stats { text-align: right; }
|
|
.act-stats .total { font-weight: 700; font-size: 13px; color: #1a202c; }
|
|
.act-stats .done { font-size: 11px; color: #38a169; font-weight: 600; margin-top: 2px; }
|
|
|
|
/* ── Activity Breakdown ── */
|
|
.breakdown-section {
|
|
flex-shrink: 0;
|
|
margin-top: 12px;
|
|
border: 1px solid #f0f4fa;
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
background: #fafbfd;
|
|
}
|
|
.breakdown-item {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
margin-bottom: 9px; font-size: 13px;
|
|
}
|
|
.breakdown-item:last-child { margin-bottom: 0; }
|
|
.breakdown-bar-wrap {
|
|
flex: 1; height: 5px; background: #eef0f5;
|
|
border-radius: 99px; margin: 0 10px; overflow: hidden;
|
|
}
|
|
.breakdown-bar { height: 100%; border-radius: 99px; }
|
|
|
|
/* ── Table ── */
|
|
.table-header {
|
|
display: flex; justify-content: space-between;
|
|
align-items: center; margin-bottom: 16px;
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th {
|
|
text-align: left; padding: 10px 12px;
|
|
color: #8896aa; font-size: 11px;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
border-bottom: 1px solid #edf2f7; background: white; font-weight: 700;
|
|
}
|
|
td { padding: 13px 12px; border-bottom: 1px solid #f4f6fb; font-size: 14px; vertical-align: middle; }
|
|
tbody tr:hover { background: #fafbfe; }
|
|
|
|
/* ── Status Pills ── */
|
|
.status-pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
|
|
.status-completed { background: #f0fff4; color: #38a169; }
|
|
.status-pending { background: #fffaf0; color: #dd6b20; }
|
|
.status-new { background: #e3f2fd; color: #1976d2; }
|
|
.status-potential { background: #fff3e0; color: #f57c00; }
|
|
.status-prospects { background: #e8f5e9; color: #388e3c; }
|
|
.status-not-a-prospects { background: #ffebee; color: #d32f2f; }
|
|
|
|
.leads-table-wrap { max-height: 480px; overflow-y: auto; }
|
|
.leads-table-wrap thead th { position: sticky; top: 0; background: white; z-index: 1; }
|
|
|
|
.empty-state { text-align: center; padding: 50px 20px; color: #aaa; }
|
|
.empty-icon { width: 70px; height: 70px; margin: 0 auto 16px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
|
|
|
|
/* ══════════════════════════════════════════
|
|
TEAM ACHIEVEMENT SECTION (NEW)
|
|
══════════════════════════════════════════ */
|
|
.achievement-section { margin-bottom: 24px; }
|
|
|
|
.achievement-header {
|
|
display: flex; justify-content: space-between; align-items: flex-start;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.achievement-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.achieve-card {
|
|
background: white;
|
|
border-radius: 14px;
|
|
border: 1px solid #e8edf5;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
padding: 20px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.achieve-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
|
|
|
|
.achieve-card-top {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.achieve-avatar {
|
|
width: 44px; height: 44px; border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 800; font-size: 17px; color: white; flex-shrink: 0;
|
|
}
|
|
.achieve-name { font-weight: 700; font-size: 15px; color: #1a202c; }
|
|
.achieve-role { font-size: 11px; color: #8896aa; font-weight: 600; margin-top: 2px; }
|
|
|
|
.achieve-pct { font-size: 22px; font-weight: 800; position: absolute; top: 18px; right: 20px; }
|
|
|
|
.achieve-progress-wrap {
|
|
background: #f0f4fa; height: 8px;
|
|
border-radius: 99px; overflow: hidden; margin-bottom: 10px;
|
|
}
|
|
.achieve-progress-bar { height: 100%; border-radius: 99px; }
|
|
|
|
.achieve-stats-row {
|
|
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px; margin-top: 12px;
|
|
}
|
|
.achieve-stat-box { background: #f8fafd; border-radius: 8px; padding: 8px 10px; text-align: center; }
|
|
.achieve-stat-num { font-size: 16px; font-weight: 800; color: #1a202c; }
|
|
.achieve-stat-lbl { font-size: 10px; color: #8896aa; font-weight: 600; margin-top: 2px; }
|
|
|
|
.achieve-badge {
|
|
display: inline-block; padding: 3px 10px;
|
|
border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
|
|
}
|
|
.badge-achieved { background: #f0fff4; color: #38a169; }
|
|
.badge-on-track { background: #e3f2fd; color: #1976d2; }
|
|
.badge-behind { background: #fff3e0; color: #dd6b20; }
|
|
.badge-at-risk { background: #ffebee; color: #d32f2f; }
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 1200px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
|
|
@media (max-width: 992px) {
|
|
.main-grid { grid-template-columns: 1fr; }
|
|
.main-grid > .card, .right-panel { height: 450px; }
|
|
.stat-cards { grid-template-columns: repeat(2, 1fr); }
|
|
.achievement-cards { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 576px) {
|
|
.dash-container { padding: 14px; }
|
|
.stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.stat-val { font-size: 24px; }
|
|
.main-grid > .card, .right-panel { height: 400px; }
|
|
table th, table td { padding: 10px 8px; font-size: 12px; }
|
|
.achievement-cards { grid-template-columns: 1fr; }
|
|
.achievement-header { flex-direction: column; gap: 14px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="dash-container">
|
|
|
|
<!-- ── Stat Cards ── -->
|
|
<div class="stat-cards">
|
|
<div class="card-hero">
|
|
<div class="stat-icon" style="background:#ede9fe;">👥</div>
|
|
<div class="stat-val"><?php echo $total_leads; ?></div>
|
|
<div class="stat-label">Total Leads</div>
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-icon" style="background:#fce7f3;">⚡</div>
|
|
<div class="stat-val"><?php echo $total_acts ?></div>
|
|
<div class="stat-label">Total Activities</div>
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-icon" style="background:#fef3c7;">⏳</div>
|
|
<div class="stat-val"><?php echo $total_pending_acts ?></div>
|
|
<div class="stat-label">Pending Activities</div>
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-icon" style="background:#d1fae5;">✅</div>
|
|
<div class="stat-val"><?php echo $total_completed_acts ?></div>
|
|
<div class="stat-label">Completed Activities</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════
|
|
🏆 TEAM ACHIEVEMENT SECTION (NEW)
|
|
══════════════════════════════════════════ -->
|
|
<div class="achievement-section">
|
|
<div class="achievement-header">
|
|
<div>
|
|
<h3 style="font-size:17px; font-weight:700; color:#1a202c; margin:0;">🏆 Team Achievement Overview</h3>
|
|
<div style="font-size:12px; color:#8896aa; font-weight:600; margin-top:4px;">Individual target vs. actual performance this period</div>
|
|
</div>
|
|
<?php
|
|
$branch_total_target = array_sum(array_column($team, 'target_amt'));
|
|
$branch_total_achiev = array_sum(array_column($team, 'achieved_amt'));
|
|
$branch_pct = $branch_total_target > 0
|
|
? min(100, round($branch_total_achiev / $branch_total_target * 100)) : 0;
|
|
?>
|
|
<div style="text-align:right;">
|
|
<div style="font-size:12px; color:#8896aa; font-weight:600;">Branch Total</div>
|
|
<div style="font-size:22px; font-weight:800; color:#1a202c;">
|
|
₹<?= number_format($branch_total_achiev / 100000, 1) ?>L
|
|
<span style="font-size:13px; color:#8896aa; font-weight:600;">/ ₹<?= number_format($branch_total_target / 100000, 1) ?>L</span>
|
|
</div>
|
|
<div style="margin-top:6px;">
|
|
<div style="background:#f0f4fa; height:6px; border-radius:99px; overflow:hidden; width:200px; margin-left:auto;">
|
|
<div style="background:linear-gradient(90deg,#667eea,#764ba2); height:100%; width:<?= $branch_pct ?>%; border-radius:99px;"></div>
|
|
</div>
|
|
<div style="font-size:12px; color:#667eea; font-weight:700; margin-top:4px;"><?= $branch_pct ?>% of branch target</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="achievement-cards">
|
|
<?php
|
|
if (!empty($team)):
|
|
$gradients = [
|
|
'linear-gradient(135deg,#667eea,#764ba2)',
|
|
'linear-gradient(135deg,#f093fb,#f5576c)',
|
|
'linear-gradient(135deg,#43e97b,#38f9d7)',
|
|
'linear-gradient(135deg,#fda085,#f6d365)',
|
|
'linear-gradient(135deg,#4facfe,#00f2fe)',
|
|
'linear-gradient(135deg,#ff6b35,#fda085)',
|
|
'linear-gradient(135deg,#a18cd1,#fbc2eb)',
|
|
];
|
|
$accent_colors = ['#667eea','#f5576c','#43e97b','#fda085','#4facfe','#ff6b35','#a18cd1'];
|
|
|
|
foreach ($team as $member):
|
|
$firstLetter = strtoupper(substr($member['first_name'], 0, 1));
|
|
$fullName = $member['first_name'] . ' ' . $member['last_name'];
|
|
$totalActs = $member['total_acts'];
|
|
$doneActs = $member['done_acts'];
|
|
$pendingActs = $totalActs - $doneActs;
|
|
$role = $member['role'];
|
|
$idx = abs(crc32($member['first_name'])) % count($gradients);
|
|
$grad = $gradients[$idx];
|
|
$color = $accent_colors[$idx];
|
|
|
|
/* These fields must be added to your $team query */
|
|
$target_amt = $member['target_amt'] ?? 0;
|
|
$achieved_amt = $member['achieved_amt'] ?? 0;
|
|
$remaining = max(0, $target_amt - $achieved_amt);
|
|
$pct = $target_amt > 0 ? min(100, round($achieved_amt / $target_amt * 100)) : 0;
|
|
|
|
if ($pct >= 100) { $badge_class = 'badge-achieved'; $badge_text = '🏆 Achieved'; }
|
|
elseif ($pct >= 75) { $badge_class = 'badge-on-track'; $badge_text = '🎯 On Track'; }
|
|
elseif ($pct >= 50) { $badge_class = 'badge-behind'; $badge_text = '⚡ Behind'; }
|
|
else { $badge_class = 'badge-at-risk'; $badge_text = '⚠️ At Risk'; }
|
|
?>
|
|
<div class="achieve-card">
|
|
<!-- % overlay -->
|
|
<div class="achieve-pct" style="color:<?= $color ?>;"><?= $pct ?>%</div>
|
|
|
|
<div class="achieve-card-top">
|
|
<div class="achieve-avatar" style="background:<?= $grad ?>;"><?= $firstLetter ?></div>
|
|
<div style="flex:1; min-width:0; padding-right:50px;">
|
|
<div class="achieve-name"><?= esc($fullName) ?></div>
|
|
<div class="achieve-role"><?= esc($role) ?></div>
|
|
<span class="achieve-badge <?= $badge_class ?>" style="margin-top:4px; display:inline-block;"><?= $badge_text ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; justify-content:space-between; font-size:12px; color:#8896aa; font-weight:600; margin-bottom:6px;">
|
|
<span>Achieved <strong style="color:#1a202c;">₹<?= number_format($achieved_amt / 100000, 1) ?>L</strong></span>
|
|
<span>Target <strong style="color:#1a202c;">₹<?= number_format($target_amt / 100000, 1) ?>L</strong></span>
|
|
</div>
|
|
|
|
<div class="achieve-progress-wrap">
|
|
<div class="achieve-progress-bar" style="width:<?= $pct ?>%; background:<?= $grad ?>;"></div>
|
|
</div>
|
|
|
|
<div style="font-size:11px; color:#8896aa; font-weight:600; margin-bottom:10px;">
|
|
Remaining: <strong style="color:#dd6b20;">₹<?= number_format($remaining / 100000, 1) ?>L</strong>
|
|
</div>
|
|
|
|
<div class="achieve-stats-row">
|
|
<div class="achieve-stat-box">
|
|
<div class="achieve-stat-num"><?= $totalActs ?></div>
|
|
<div class="achieve-stat-lbl">Activities</div>
|
|
</div>
|
|
<div class="achieve-stat-box">
|
|
<div class="achieve-stat-num" style="color:#38a169;"><?= $doneActs ?></div>
|
|
<div class="achieve-stat-lbl">Completed</div>
|
|
</div>
|
|
<div class="achieve-stat-box">
|
|
<div class="achieve-stat-num" style="color:#dd6b20;"><?= $pendingActs ?></div>
|
|
<div class="achieve-stat-lbl">Pending</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; else: ?>
|
|
<div class="card" style="grid-column:1/-1;">
|
|
<div class="empty-state"><div class="empty-icon">🏆</div>No team data available</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Main Grid ── -->
|
|
<div class="main-grid">
|
|
|
|
<!-- LEFT: Pending Activities -->
|
|
<div class="card">
|
|
<div class="table-header">
|
|
<h3 style="font-size:15px; font-weight:700; margin:0;">Pending Activities — All Team</h3>
|
|
<span style="color:#8896aa; font-size:12px; font-weight:600;">
|
|
<?= count($pending_acts) . ' ' . (count($pending_acts) == 1 ? 'activity' : 'activities') ?>
|
|
</span>
|
|
</div>
|
|
<div class="table-scroll-area">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Company</th>
|
|
<th>Activity & Assigned</th>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (!empty($pending_acts)): ?>
|
|
<?php foreach ($pending_acts as $a): ?>
|
|
<?php
|
|
$activityIcons = ['Call'=>'📞','Email'=>'✉️','Meeting'=>'📅','Visit'=>'🚗','Demo'=>'🖥️','Share Docs'=>'📄','To Do'=>'✓'];
|
|
$icon = $activityIcons[$a['activity_type']] ?? '📌';
|
|
$statusClass = strtolower(str_replace(' ', '-', $a['status']));
|
|
$formattedscheduledDate = date('M d, Y, h:i A', strtotime($a['scheduled_date']));
|
|
?>
|
|
<tr>
|
|
<td><strong><?= esc($a['company_name']) ?></strong></td>
|
|
<td>
|
|
<div style="color:#ff6b35; font-weight:700; font-size:11px;"><?= $icon ?> <?= strtoupper(esc($a['activity_type'])) ?></div>
|
|
<div style="font-size:12px; color:#8896aa;"><?= esc($a['assigned_to_name'] ?? 'ID: ' . $a['assigned_to']) ?></div>
|
|
</td>
|
|
<td style="color:#4a5568; font-weight:500; font-size:13px;"><?= $formattedscheduledDate ?></td>
|
|
<td><span class="status-pill status-<?= $statusClass ?>"><?= ucfirst(esc($a['status'])) ?></span></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<tr><td colspan="4"><div class="empty-state"><div class="empty-icon">✓</div>No pending activities</div></td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Sales Team Performance + Activity Breakdown -->
|
|
<div class="right-panel">
|
|
<div style="font-size:15px; font-weight:700; padding-bottom:10px; border-bottom:1px solid #f0f4fa; flex-shrink:0;">
|
|
Sales Team Performance
|
|
</div>
|
|
|
|
<div class="team-members-scroll">
|
|
<?php
|
|
if (!empty($team)):
|
|
$colors = ['#ff6b35','#667eea','#48bb78','#ed8936','#9f7aea'];
|
|
foreach ($team as $member):
|
|
$firstLetter = strtoupper(substr($member['first_name'], 0, 1));
|
|
$fullName = $member['first_name'] . ' ' . $member['last_name'];
|
|
$color = $colors[abs(crc32($member['first_name'])) % count($colors)];
|
|
?>
|
|
<div class="team-member">
|
|
<div class="member-img" style="background:<?= $color ?>;"><?= $firstLetter ?></div>
|
|
<div style="flex:1;">
|
|
<div style="font-weight:700; font-size:14px;"><?= esc($fullName) ?></div>
|
|
<div style="font-size:11px; color:#8896aa;"><?= esc($member['role']) ?></div>
|
|
</div>
|
|
<div class="act-stats">
|
|
<div class="total"><?= $member['total_acts'] ?> acts</div>
|
|
<div class="done"><?= $member['done_acts'] ?> done</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; else: ?>
|
|
<div class="empty-state">No team data found</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="breakdown-section">
|
|
<h3 style="font-size:13px; font-weight:700; margin:0 0 12px 0; color:#1a202c;">Activity Breakdown</h3>
|
|
<?php
|
|
$activityConfig = [
|
|
'Call' => ['color'=>'#667eea','icon'=>'📞'],
|
|
'Email' => ['color'=>'#48bb78','icon'=>'✉️'],
|
|
'Meeting' => ['color'=>'#4299e1','icon'=>'📅'],
|
|
'Visit' => ['color'=>'#ecc94b','icon'=>'🚗'],
|
|
'Demo' => ['color'=>'#9f7aea','icon'=>'🖥️'],
|
|
'Share Docs' => ['color'=>'#ed8936','icon'=>'📄'],
|
|
'To Do' => ['color'=>'#718096','icon'=>'✓'],
|
|
];
|
|
?>
|
|
<?php if (!empty($activity_breakdown)): ?>
|
|
<?php foreach ($activity_breakdown as $item): ?>
|
|
<?php $cfg = $activityConfig[$item['activity_type']] ?? ['color'=>'#718096','icon'=>'📌']; ?>
|
|
<div class="breakdown-item">
|
|
<span style="min-width:90px;"><?= $cfg['icon'] ?> <?= esc($item['activity_type']) ?></span>
|
|
<div class="breakdown-bar-wrap">
|
|
<div class="breakdown-bar" style="width:<?= $item['percentage'] ?>%; background:<?= $cfg['color'] ?>;"></div>
|
|
</div>
|
|
<strong style="min-width:34px; text-align:right; color:#1a202c;"><?= $item['percentage'] ?>%</strong>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<div style="text-align:center; color:#aaa; font-size:13px;">No activities found</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end .main-grid -->
|
|
|
|
<!-- ── All Leads Overview ── -->
|
|
<div class="card" style="width:100%; box-sizing:border-box;">
|
|
<div class="table-header">
|
|
<h3 style="font-size:15px; font-weight:700; margin:0;">All Leads Overview</h3>
|
|
</div>
|
|
<div class="leads-table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Company</th>
|
|
<th>Status</th>
|
|
<th>Assigned To</th>
|
|
<th style="text-align:center;">Activities</th>
|
|
<th style="text-align:center;">Opportunities</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (!empty($leads_overview)): ?>
|
|
<?php foreach ($leads_overview as $lead): ?>
|
|
<?php $statusClass = strtolower(str_replace(' ', '-', $lead['status'])); ?>
|
|
<tr>
|
|
<td><strong><?= esc($lead['company_name']) ?></strong></td>
|
|
<td><span class="status-pill status-<?= $statusClass ?>"><?= esc($lead['status']) ?></span></td>
|
|
<td><?= esc($lead['assigned_to'] ?? 'Unassigned') ?></td>
|
|
<td><div style="text-align:center; font-weight:700;"><?= $lead['activities'] ?></div></td>
|
|
<td><div style="text-align:center; font-weight:700;"><?= $lead['opportunities'] ?></div></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<tr><td colspan="5"><div class="empty-state"><div class="empty-icon">👤</div>No leads found</div></td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end .dash-container -->
|