294 lines
15 KiB
PHP
294 lines
15 KiB
PHP
<style>
|
|
.dash-container { padding: 25px; background: #f8f9fa; font-family: 'Segoe UI', sans-serif; }
|
|
.top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
|
|
|
|
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
|
|
.card { background: white; padding: 25px; border-radius: 12px; border: 1px solid #edf2f7; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
|
|
.stat-val { font-size: 28px; font-weight: 700; color: #1a202c; }
|
|
.stat-label { color: #718096; font-size: 14px; margin-top: 4px; font-weight: 500; }
|
|
.stat-change { font-size: 11px; margin-top: 8px; font-weight: 600; }
|
|
.text-success { color: #48bb78; }
|
|
|
|
.card-hero {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
border: 1px solid #edf2f7;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* The Gradient Overlay Effect */
|
|
.card-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px; /* Thin line at the top */
|
|
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.card-hero:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Optional: Subtle Background Gradient */
|
|
.card-hero.gradient-bg {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
|
}
|
|
|
|
.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 30px; }
|
|
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
|
|
|
.team-member { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #f1f5f9; }
|
|
.member-img { width: 40px; height: 40px; border-radius: 50%; background: #ff6b35; color: white; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; }
|
|
.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; }
|
|
|
|
.breakdown-card { margin-top: 20px; }
|
|
.breakdown-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th { text-align: left; padding: 12px; color: #718096; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #edf2f7; }
|
|
td { padding: 15px 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px; vertical-align: middle; }
|
|
|
|
.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; }
|
|
|
|
.empty-state { text-align: center; padding: 60px 20px; color: #999; }
|
|
.empty-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; }
|
|
|
|
</style>
|
|
|
|
<div class="dash-container">
|
|
<!-- <div class="top-header">
|
|
<div>
|
|
<h2 style="font-weight: 800; color: #1a202c; font-size: 24px;">Dashboard</h2>
|
|
<p style="color: #718096; font-size: 14px; margin-top: 4px;">Overview of your branch</p>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<input type="text" placeholder="Search leads, activities....." style="background:white; padding:12px 20px; border-radius:10px; border:1px solid #e2e8f0; width: 350px; font-size: 13px;">
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="stat-cards">
|
|
<div class="card-hero">
|
|
<div class="stat-val"><?php echo $total_leads; ?></div>
|
|
<div class="stat-label">Total Leads</div>
|
|
<!-- <div class="stat-change text-success">↑ 12% this month</div> -->
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-val"><?php echo $total_acts ?></div>
|
|
<div class="stat-label">Total Activities</div>
|
|
<!-- <div class="stat-change text-success">↑ 5% this month</div> -->
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-val"><?php echo $total_pending_acts ?></div>
|
|
<div class="stat-label">Pending Activities</div>
|
|
<!-- <div class="stat-change text-success">↑ 15% this month</div> -->
|
|
</div>
|
|
<div class="card-hero">
|
|
<div class="stat-val"><?php echo $total_completed_acts ?></div>
|
|
<div class="stat-label">Completed Activities</div>
|
|
<!-- <div class="stat-change text-success">↑ 15% this month</div> -->
|
|
</div>
|
|
<!-- <div class="card">
|
|
<div class="stat-val">₹15.0L</div>
|
|
<div class="stat-label">Pipeline Value</div>
|
|
<div class="stat-change text-success">↑ 18% this month</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="main-grid">
|
|
<div class="card">
|
|
<div class="table-header">
|
|
<h3 style="font-size: 16px; font-weight: 700;">Pending Activities - All Team</h3>
|
|
<span style="color: #718096; font-size: 12px; font-weight: 600;"><?= count($pending_acts) . ' ' . (count($pending_acts) == 1 ? 'activity' : 'activities') ?></span>
|
|
</div>
|
|
<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: #718096;">
|
|
<?= esc($a['assigned_to_name'] ?? 'ID: ' . $a['assigned_to']) ?>
|
|
</div>
|
|
<!-- <div style="font-size: 12px; color: #718096;">
|
|
<?= esc($a['notes'] ?? 'ID: ' . $a['assigned_to']) ?>
|
|
</div> -->
|
|
</td>
|
|
<td style="color: #4a5568; font-weight: 500;"><?= $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 activities found
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="card">
|
|
|
|
<h3 style="font-size: 16px; font-weight: 700; margin-bottom: 15px;">Sales Team Performance</h3>
|
|
<?php 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'];
|
|
$role = $member['role']; // fix your DB first
|
|
|
|
// Random or consistent color based on name
|
|
$colors = ['#ff6b35', '#667eea', '#48bb78', '#ed8936', '#9f7aea'];
|
|
$colorIndex = abs(crc32($member['first_name'])) % count($colors);
|
|
$color = $colors[$colorIndex];
|
|
|
|
echo "
|
|
<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;'>{$fullName}</div>
|
|
<div style='font-size: 11px; color: #718096;'>{$role}</div>
|
|
</div>
|
|
<div class='act-stats'>
|
|
<div class='total'>{$totalActs} acts</div>
|
|
<div class='done'>{$doneActs} done</div>
|
|
</div>
|
|
</div>";
|
|
} ?>
|
|
|
|
|
|
<div class="card breakdown-card">
|
|
<h3 style="font-size: 15px; font-weight: 700; margin-bottom: 20px;">Activity Breakdown</h3>
|
|
<!-- <div class="breakdown-item"><span><span class="dot" style="background: #ff6b35;"></span> Call</span><strong>42%</strong></div>
|
|
<div class="breakdown-item"><span><span class="dot" style="background: #48bb78;"></span> Email</span><strong>25%</strong></div>
|
|
<div class="breakdown-item"><span><span class="dot" style="background: #4299e1;"></span> Meeting</span><strong>18%</strong></div>
|
|
<div class="breakdown-item"><span><span class="dot" style="background: #ecc94b;"></span> Visit</span><strong>10%</strong></div>
|
|
<div class="breakdown-item"><span><span class="dot" style="background: #9f7aea;"></span> Demo</span><strong>5%</strong></div> -->
|
|
<?php
|
|
$activityConfig = [
|
|
'Call' => ['color' => '#ff6b35', '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
|
|
$type = $item['activity_type'];
|
|
$color = $activityConfig[$type]['color'] ?? '#718096';
|
|
$icon = $activityConfig[$type]['icon'] ?? '📌';
|
|
?>
|
|
<div class="breakdown-item">
|
|
<span>
|
|
<span style="background: <?= $color ?>;"></span>
|
|
<?= $icon ?> <?= esc($type) ?>
|
|
</span>
|
|
<strong><?= $item['percentage'] ?>%</strong>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<div class="empty-state">
|
|
<div class="empty-icon">✓</div> No activities found
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="grid-column: 1 / -1; width: 100%; box-sizing: border-box;">
|
|
<div class="table-header">
|
|
<h3 style="font-size: 16px; font-weight: 700;">All Leads Overview </h3>
|
|
<!-- <span style="color: #718096; font-size: 12px; font-weight: 600;">Click a lead to see details</span>
|
|
<a href="<?= base_url('sales') ?>"
|
|
style="color: #718096; font-size: 12px; font-weight: 600; text-decoration: none; padding: 4px 8px; transition: color 0.2s ease; display: inline-block; cursor: pointer;"
|
|
onmouseover="this.style.color='#ff6b35';"
|
|
onmouseout="this.style.color='#718096';">
|
|
Click a lead to see details
|
|
</a> -->
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Company</th>
|
|
<th>Status</th>
|
|
<th>Assigned To</th>
|
|
<th style="text-align: center !important;">Activities</th>
|
|
<th style="text-align: center !important;">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>
|