scoutiq/resources/views/admin/dashboard.php

<div class="dashboard-header">
    <h1>Welcome, <?= $this->escape($user['name']) ?></h1>
    <p>Here is your daily intelligence summary for ScoutIQ.</p>
</div>

<!-- Metrics Row -->
<div class="metrics-grid">
    <div class="glass-panel metric-card">
        <span class="metric-title">Total Investors</span>
        <span class="metric-value">142</span>
        <span class="metric-footer">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
            <span>+12% vs last month</span>
        </span>
    </div>
    
    <div class="glass-panel metric-card">
        <span class="metric-title">Total Accelerators</span>
        <span class="metric-value">38</span>
        <span class="metric-footer">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
            <span>+5% vs last month</span>
        </span>
    </div>

    <div class="glass-panel metric-card">
        <span class="metric-title">Open Opportunities</span>
        <span class="metric-value">29</span>
        <span class="metric-footer" style="color: var(--warning);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            <span>4 closing this week</span>
        </span>
    </div>

    <div class="glass-panel metric-card">
        <span class="metric-title">Contacts Added Today</span>
        <span class="metric-value">7</span>
        <span class="metric-footer">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
            <span>+3 new organizations</span>
        </span>
    </div>
</div>

<!-- Charts Row -->
<div class="charts-grid">
    <div class="glass-panel chart-card">
        <span class="chart-title">Opportunities by Category</span>
        <div style="flex: 1; position: relative;">
            <canvas id="categoryChart"></canvas>
        </div>
    </div>
    
    <div class="glass-panel chart-card">
        <span class="chart-title">Monthly Growth & Ingestion</span>
        <div style="flex: 1; position: relative;">
            <canvas id="growthChart"></canvas>
        </div>
    </div>
</div>

<script>
    // Category Chart (Doughnut)
    const ctxCategory = document.getElementById('categoryChart').getContext('2d');
    new Chart(ctxCategory, {
        type: 'doughnut',
        data: {
            labels: ['Mobility & Logistics', 'AI & Automation', 'SaaS', 'Fintech', 'Marketplaces'],
            datasets: [{
                data: [35, 25, 20, 12, 8],
                backgroundColor: [
                    'hsl(263, 90%, 60%)',
                    'hsl(220, 95%, 50%)',
                    'hsl(180, 100%, 40%)',
                    'hsl(142, 70%, 45%)',
                    'hsl(38, 92%, 50%)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        color: 'hsl(215, 20%, 75%)',
                        font: { family: 'Inter', size: 12 }
                    }
                }
            }
        }
    });

    // Growth Chart (Line)
    const ctxGrowth = document.getElementById('growthChart').getContext('2d');
    new Chart(ctxGrowth, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Ingested Opportunities',
                data: [12, 19, 32, 45, 68, 96],
                borderColor: 'hsl(180, 100%, 50%)',
                backgroundColor: 'rgba(0, 242, 254, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4
            }, {
                label: 'Interactions Logged',
                data: [5, 12, 18, 25, 30, 48],
                borderColor: 'hsl(263, 90%, 60%)',
                backgroundColor: 'transparent',
                borderWidth: 3,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        color: 'hsl(215, 20%, 75%)',
                        font: { family: 'Inter', size: 12 }
                    }
                }
            },
            scales: {
                x: {
                    grid: { color: 'rgba(255, 255, 255, 0.05)' },
                    ticks: { color: 'hsl(215, 20%, 70%)' }
                },
                y: {
                    grid: { color: 'rgba(255, 255, 255, 0.05)' },
                    ticks: { color: 'hsl(215, 20%, 70%)' }
                }
            }
        }
    });
</script>