Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.3.30

User:

u231988116

Directory:

/home/u231988116/domains/ominteriorstudio.in/public_html/crm

Free Space:

7.42 TB

🔧 Quick Actions

✏️ Editing: crmdashboard.php

<?php
session_start();
require_once 'db.php';

// Handle logout
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: signin');
    exit();
}

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: signin');
    exit();
}

// Verify role-based access
checkAccess();

$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'] ?? 'User';

// Dashboard stats queries - all filtered by user_id for security
$stats = [];

// Total Projects
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM projects");
$stmt->execute();
$stats['total_projects'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Total Vendors
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM vendors");
$stmt->execute();
$stats['total_vendors'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Active Vendors
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM vendors WHERE status = 'Active'");
$stmt->execute();
$stats['active_vendors'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Pending
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM vendors WHERE status = 'Pending'");
$stmt->execute();
$stats['pending_vendors'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// On Hold Vendors (specific)
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM vendors WHERE status = 'On Hold'");
$stmt->execute();
$stats['onhold_vendors'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Pending Tasks
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM tasks WHERE status = 'Pending'");
$stmt->execute();
$stats['pending_tasks'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Completed Projects
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM projects WHERE status = 'Completed'");
$stmt->execute();
$stats['completed_projects'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Project status breakdown for chart
$project_status_counts = ['Planning' => 0, 'Active' => 0, 'Completed' => 0, 'On Hold' => 0, 'Cancelled' => 0];

$status_query = $conn->prepare("
    SELECT status, COUNT(*) as count 
    FROM projects
    GROUP BY status
");
$status_query->execute();
$result = $status_query->get_result();
while ($row = $result->fetch_assoc()) {
    if (array_key_exists($row['status'], $project_status_counts)) {
        $project_status_counts[$row['status']] = $row['count'];
    }
}
$status_query->close();

// Chart data
$chart_labels = json_encode(array_keys($project_status_counts));
$chart_data = json_encode(array_values($project_status_counts));
$chart_colors = json_encode([
    '#1976d2', '#388e3c', '#7b1fa2', '#f57c00', '#d32f2f'
]);

// Total Clients
$stmt = $conn->prepare("SELECT COUNT(*) as count FROM clients");
$stmt->execute();
$stats['total_clients'] = $stmt->get_result()->fetch_assoc()['count'];
$stmt->close();

// Recent Projects (TOP 5)
$stmt = $conn->prepare("
    SELECT p.id, p.project_name, c.client_name, p.status, p.created_date, p.start_date 
    FROM projects p 
    JOIN clients c ON p.client_id = c.id
    ORDER BY p.created_date DESC 
    LIMIT 5
");
$stmt->execute();
$result = $stmt->get_result();
$recent_projects = [];
while ($row = $result->fetch_assoc()) {
    $row['created_time'] = date('M j, Y', strtotime($row['created_date']));

$recent_projects[] = $row;
}
$stmt->close();

// User avatar initial
$user_initial = strtoupper(substr($user_name, 0, 1));
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - ConstructCRM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
:root {
        --primary-color: #977C49;
        --primary-dark: #7a633a;
        --primary-light: #f8f5ef;
        --secondary-color: #343a40;
        --secondary-light: #f8f9fa;
        --success-color: #28a745;
        --info-color: #17a2b8;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --sidebar-width: 320px;
        --nav-width: 260px;
        --header-height: 70px;
        --footer-height: 40px;
        --border-radius: 12px;
        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light-color);
            color: var(--dark-color);
            font-size: 14px;
            line-height: 1.4;
            overflow-x: hidden;
        }

/* Header */
    .header {
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        z-index: 1000;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

.logo {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 20px;
        color: var(--primary-color);
        text-decoration: none;
    }

.logo i {
        font-size: 24px;
        margin-right: 10px;
    }

.header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

.mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--primary-color);
        margin-right: 15px;
        cursor: pointer;
    }

/* User Dropdown */
    .user-dropdown {
        position: relative;
    }

.user-profile {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: var(--border-radius);
        transition: var(--transition);
    }

.user-profile:hover {
        background-color: #f8f9fa;
    }

.user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 10px;
    }

.user-name {
        font-weight: 500;
        margin-right: 5px;
    }

.dropdown-arrow {
        font-size: 12px;
        color: #666;
        transition: var(--transition);
    }

.user-dropdown.show .dropdown-arrow {
        transform: rotate(180deg);
    }

.user-dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        min-width: 180px;
        padding: 8px 0;
        margin-top: 5px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition);
        z-index: 1001;
    }

.user-dropdown.show .user-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-item {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        color: #555;
        text-decoration: none;
        transition: var(--transition);
    }

.dropdown-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color);
    }

.dropdown-item i {
        margin-right: 10px;
        font-size: 16px;
    }

.dropdown-divider {
        height: 1px;
        background-color: #eee;
        margin: 8px 0;
    }

/* Main Container */
        .main-container {
            display: flex;
            min-height: 100vh;
            padding-top: var(--header-height);
        }

/* Sidebar */
        /* Sidebar Navigation */
    .sidebar-nav {
        width: var(--nav-width);
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 999;
        overflow-y: auto;
        transition: var(--transition);
    }

.nav-section {
        padding: 15px 0;
    }

.nav-section:last-child {
        padding-bottom: 20px;
    }

.nav-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase; /* This is fine */
        letter-spacing: 0.5px;
        color: #999;
        padding: 0 20px;
        margin-bottom: 10px;
    }

.nav-list {
        list-style: none;
    }

.nav-item {
        margin-bottom: 5px;
    }

.nav-link {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        color: #555;
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
        position: relative;
    }

.nav-link i {
        font-size: 18px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }

.nav-link:hover {
        background-color: rgba(151, 124, 73, 0.05);
        color: var(--primary-color);
    } /* This is fine */

.nav-link.active {
        background-color: rgba(151, 124, 73, 0.1);
        color: var(--primary-color);
    } /* This is fine */

.nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--primary-color);
    }

/* Content Wrapper */
        .content-wrapper {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: 30px;
            transition: var(--transition);
        }

/* Content Header */
        .content-header {
            margin-bottom: 30px;
        }

.page-title {
            font-size: 28px;
            font-weight: 700;
            font-weight: var(--font-weight-semibold); /* Consistent with other pages */
            margin-bottom: 10px;
        }

.breadcrumb {
            background: none;
            padding: 0;
            margin: 0;
        }

.breadcrumb-item {
            color: #999;
            font-size: 14px;
        }

.breadcrumb-item.active {
            color: var(--primary-color);
        }

.breadcrumb-item a {
            color: #666;
            text-decoration: none;
            transition: var(--transition);
        }

.breadcrumb-item a:hover {
            color: var(--primary-color);
        }

/* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

.stat-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
        }

.stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

.stat-title {
            font-size: 14px;
            color: #635e5e;
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            
        }

.stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

.stat-icon.primary {
            background-color: rgba(151, 124, 73, 0.1);
            color: var(--primary-color);
        }

.stat-icon.success {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
        }

.stat-icon.info {
            background-color: rgba(23, 162, 184, 0.1);
            color: var(--info-color);
        }

.stat-icon.warning {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
        }

.stat-icon.danger {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger-color);
        }

.stat-value {
            font-size: 32px;
            font-weight: var(--font-weight-bold);
            color: var(--dark-color);
            margin-bottom: 10px;
        }

.stat-change {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
        }

.stat-change.positive {
            color: var(--success-color);
        }

.stat-change.negative {
            color: var(--danger-color);
        }

.stat-change.neutral {
            color: var(--secondary-color);
        }

/* Charts Section */
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

.chart-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--box-shadow);
        }

.chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

.chart-title {
            font-size: 18px;
            font-weight: var(--font-weight-semibold);
            color: var(--dark-color);
        }

.chart-options {
            display: flex;
            gap: 10px;
        }

.chart-option {
            padding: 6px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            background: white;
            color: var(--secondary-color); /* Use variable for color */
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
        }

.chart-option:hover,
        .chart-option.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

.chart-container {
            position: relative;
            height: 300px;
        }

/* Vendor Status Overview */
        .vendor-status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

.vendor-status-item {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            text-align: center;
            transition: var(--transition);
        }

.vendor-status-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

.vendor-status-value {
            font-size: 28px;
            font-weight: var(--font-weight-bold);
            margin-bottom: 8px;
        }

.vendor-status-label {
            font-size: 13px;
            color: var(--secondary-color); /* Adjusted to make it more visible */
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.vendor-status-item.total .vendor-status-value {
            color: var(--dark-color); /* Use dark color for total */
        }

.vendor-status-item.active .vendor-status-value {
            color: var(--success-color);
        }

.vendor-status-item.pending .vendor-status-value {
            color: var(--warning-color);
        }

.vendor-status-item.onhold .vendor-status-value {
            color: var(--info-color);
        }

/* Recent Activities */
        .activity-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--box-shadow);
            margin-top:30px;
            margin-bottom:30px;
        }

.activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

.activity-title {
            font-size: 18px;
            font-weight: var(--font-weight-semibold);
            color: var(--dark-color);
        }

.activity-list {
            list-style: none;
        }

.activity-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: var(--transition);
        }

.activity-item:hover {
            background-color: rgba(151, 124, 73, 0.02);
            margin: 0 -10px;
            padding: 15px 10px;
            border-radius: 8px;
        }

.activity-item:last-child {
            border-bottom: none;
        }

.activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

.activity-icon.project {
            background-color: rgba(151, 124, 73, 0.1);
            color: var(--primary-color);
        }

.activity-icon.vendor {
            background-color: rgba(23, 162, 184, 0.1);
            color: var(--info-color);
        }

.activity-icon.task {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
        }

.activity-icon.payment {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
        }

.activity-content {
            flex: 1;
        }

.activity-text {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

.activity-text strong {
            font-weight: var(--font-weight-semibold); /* Use variable for strong */
        }

.activity-time {
            font-size: 12px;
            color: #999;
        }

/* Quick Actions */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

.quick-action {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: var(--border-radius);
            text-decoration: none;
            color: #333;
            transition: var(--transition);
        }

.quick-action:hover {
            border-color: var(--primary-color);
            background-color: rgba(151, 124, 73, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

.quick-action-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            background-color: rgba(151, 124, 73, 0.1);
            color: var(--primary-color);
        }

.quick-action-text {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
        }

/* Buttons */
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: var(--font-weight-medium);
            font-size: 14px;
            transition: var(--transition);
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

.btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

.btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(151, 124, 73, 0.3);
        }

.btn-outline-primary {
            background: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

.btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

/* Responsive */
        @media (max-width: 1200px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 992px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }

.sidebar-nav {
                transform: translateX(-100%);
                width: 280px;
                z-index: 1001;
            }

.sidebar-nav.show {
                transform: translateX(0);
            }

.content-wrapper {
                margin-left: 0;
                padding: 20px;
            }

.overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 998;
            }

.overlay.show {
                display: block;
            }

.stats-grid {
                grid-template-columns: 1fr;
            }

.charts-grid {
                grid-template-columns: 1fr;
            }

.header {
                padding: 0 15px;
            }

.logo {
                font-size: 18px;
            }

.logo i {
                font-size: 20px;
            }

.user-name {
                display: none;
            }

.user-avatar {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
        }

/* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(151, 124, 73, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 4px;
        }

::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }
    </style>
</head>
<body>
    
    <header class="header">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="bi bi-list"></i>
        </button>
        <a href="crmdashboard" class="logo">
            <img src="./assets/logo.png" alt="ConstructCRM Logo" style="height: 60px; width: 85px;">
        </a>
         <div class="header-actions">
            
            <div class="user-dropdown" id="userDropdown">
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar"><?php echo strtoupper(substr($user_name, 0, 1)); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($user_name); ?></span>
                    <i class="bi bi-chevron-down dropdown-arrow"></i>
                </div>
                <div class="user-dropdown-menu">
                    <a href="profile" class="dropdown-item">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                    <a href="settings" class="dropdown-item">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="signin?logout=true" class="dropdown-item">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

<nav class="sidebar-nav" id="sidebarNav">
            <div class="nav-section">
                <div class="nav-title">Main</div>
                <ul class="nav-list">
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="crmdashboard" class="nav-link active">
                            <i class="bi bi-speedometer2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link">
                            <i class="bi bi-grid-1x2-fill"></i>
                            <span>Client</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="projectlist" class="nav-link">
                            <i class="bi bi-list-ul"></i>
                            <span>Project List</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designimages" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Design images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="assignmentcalendar" class="nav-link">
                            <i class="bi bi-calendar-event-fill"></i>
                            <span>Assignment Calendar</span>
                        </a>
                    </li>                    
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="<?= BASE_URL ?>place_order" class="nav-link">
                            <i class="bi bi-cart-check"></i> 
                            <span>Place Order</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="financetracker" class="nav-link">
                            <i class="bi bi-cash-stack"></i>
                            <span>Finance Tracker</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="imagepin" class="nav-link">
                            <i class="bi bi-pin-map-fill"></i>
                            <span>Image Pin & Comment</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="designcost" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Designs Cost</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="taskmanager" class="nav-link">
                            <i class="bi bi-check2-square"></i>
                            <span>Task Manager</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="users" class="nav-link">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>   
            
            <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
            <div class="nav-section">
                <div class="nav-title">Vendor Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="addvendors" class="nav-link">
                            <i class="bi bi-person-plus-fill"></i>
                            <span>Add New Vendor</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="viewvendors" class="nav-link">
                            <i class="bi bi-card-list"></i>
                            <span>View All Vendors</span>
                        </a>
                    </li>
                </ul>
            </div>
            <?php endif; ?>
        </nav>

<div class="content-wrapper">
            
            <div class="content-header">
                <h1 class="page-title">Dashboard Overview</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
            </div>

<div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Total Projects</div>
                        <div class="stat-icon primary">
                            <i class="bi bi-building"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['total_projects'] ?: '0'; ?></div>
                    <div class="stat-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>from last month</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Total Vendors</div>
                        <div class="stat-icon info">
                            <i class="bi bi-truck"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['total_vendors'] ?: '0'; ?></div>
                    <div class="stat-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>from last month</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Active Vendors</div>
                        <div class="stat-icon success">
                            <i class="bi bi-check-circle"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['active_vendors'] ?: '0'; ?></div>
                    <div class="stat-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>from last month</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Pending Vendors</div>
                        <div class="stat-icon warning">
                            <i class="bi bi-clock"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['pending_vendors'] ?: '0'; ?></div>
                    <div class="stat-change negative">
                        <i class="bi bi-arrow-down"></i>
                        <span>from last week</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">On Hold Vendors</div>
                        <div class="stat-icon info">
                            <i class="bi bi-pause-circle"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['onhold_vendors'] ?: '0'; ?></div>
                    <div class="stat-change neutral">
                        <i class="bi bi-dash"></i>
                        <span>No change</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Total Clients</div>
                        <div class="stat-icon info">
                            <i class="bi bi-people"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['total_clients'] ?: '0'; ?></div>
                    <div class="stat-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>from last month</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Pending Tasks</div>
                        <div class="stat-icon warning">
                            <i class="bi bi-clipboard-check"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['pending_tasks'] ?: '0'; ?></div>
                    <div class="stat-change negative">
                        <i class="bi bi-arrow-down"></i>
                        <span>5% from last week</span>
                    </div>
                </div>

<div class="stat-card">
                    <div class="stat-card-header">
                        <div class="stat-title">Completed Projects</div>
                        <div class="stat-icon primary">
                            <i class="bi bi-check-circle"></i>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['completed_projects'] ?: '0'; ?></div>
                    <div class="stat-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>10% from last month</span>
                    </div>
                </div>

</div>

<div class="chart-card">
                <div class="chart-header">
                    <h5 class="chart-title">Vendor Status Distribution</h5>
                    <a href="viewvendors" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye"></i> View All Vendors
                    </a>
                </div>
                <div class="vendor-status-grid">
                    <div class="vendor-status-item total">
        <div class="vendor-status-value"><?php echo $stats['total_vendors'] ?: '0'; ?></div>
                        <div class="vendor-status-label">Total Vendors</div>
                    </div>
                    <div class="vendor-status-item active">
        <div class="vendor-status-value"><?php echo $stats['active_vendors'] ?: '0'; ?></div>
                        <div class="vendor-status-label">Active</div>
                    </div>
                    <div class="vendor-status-item pending">
        <div class="vendor-status-value"><?php echo $stats['pending_vendors'] ?: '0'; ?></div>
                        <div class="vendor-status-label">Pending</div>
                    </div>
                    <div class="vendor-status-item onhold">
                        <div class="vendor-status-value"><?php echo $stats['onhold_vendors'] ?: '0'; ?></div>
                        <div class="vendor-status-label">On Hold</div>
                    </div>
                </div>
            </div>

<div class="charts-grid">
                <div class="chart-card">
                    <div class="chart-header">
                        <h5 class="chart-title">Project Status Overview</h5>
                        <div class="chart-options">
                            <button class="chart-option active">Month</button>
                           
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="projectStatusChart"></canvas>
                    </div>
                </div>

</div>

<div class="activity-card">
                <div class="activity-header">
                    <h5 class="activity-title">Recent Projects</h5>
                    <a href="projectlist" class="btn btn-outline-primary btn-sm">View All</a>
                </div>
                <ul class="activity-list">
<?php foreach ($recent_projects as $project): ?>
                    <li class="activity-item">
                        <div class="activity-icon project">
                            <i class="bi bi-building"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">
                                New project <strong><?= htmlspecialchars($project['project_name']) ?></strong> for client <strong><?= htmlspecialchars($project['client_name']) ?></strong>
                                <span class="badge bg-<?= $project['status'] == 'Active' ? 'success' : ($project['status'] == 'Completed' ? 'primary' : 'warning') ?> ms-2"><?= htmlspecialchars($project['status']) ?></span>
                            </div>
                            <div class="activity-time"><?= $project['created_time'] ?></div>
                        </div>
                    </li>
                    <?php endforeach; ?>
                    <?php if (empty($recent_projects)): ?>
                    <li class="activity-item text-muted">
                        <div class="activity-icon project">
                            <i class="bi bi-building"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">No recent projects</div>
                            <div class="activity-time">Get started by adding your first project</div>
                        </div>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>

<div class="chart-card">
                <div class="chart-header">
                    <h5 class="chart-title">Quick Actions</h5>
                </div>
                <div class="quick-actions">
                    <a href="dashboard" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-plus-circle"></i>
                        </div>
                        <span class="quick-action-text">Add New Project</span>
                    </a>
                    <a href="projectlist" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-list-ul"></i>
                        </div>
                        <span class="quick-action-text">Project List</span>
                    </a>
                    <a href="addvendors" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-person-plus"></i>
                        </div>
                        <span class="quick-action-text">Add Vendor</span>
                    </a>
                    <a href="taskmanager" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-clipboard-plus"></i>
                        </div>
                        <span class="quick-action-text">Create Task</span>
                    </a>
                    <a href="financetracker" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-receipt"></i>
                        </div>
                        <span class="quick-action-text">Add Expense</span>
                    </a>
                    <a href="designimages" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-image"></i>
                        </div>
                        <span class="quick-action-text">Upload Design</span>
                    </a>
                    <a href="assignmentcalendar" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="bi bi-calendar-plus"></i>
                        </div>
                        <span class="quick-action-text">Schedule Event</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

if (mobileMenuToggle && sidebarNav && overlay) {
                mobileMenuToggle.addEventListener('click', () => {
                    sidebarNav.classList.toggle('show');
                    overlay.classList.toggle('show');
                });

overlay.addEventListener('click', () => {
                    sidebarNav.classList.remove('show');
                    overlay.classList.remove('show');
                });

// Close sidebar when clicking a nav link on mobile
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.addEventListener('click', () => {
                        if (window.innerWidth <= 768) {
                            sidebarNav.classList.remove('show');
                            overlay.classList.remove('show');
                        }
                    });
                });
            }

// User dropdown toggle
            if (userDropdown && userProfile) {
                userProfile.addEventListener('click', (e) => {
                    e.stopPropagation();
                    userDropdown.classList.toggle('show');
                });

// Close dropdown when clicking outside
                document.addEventListener('click', () => {
                    userDropdown.classList.remove('show');
                });
            }

// Chart options toggle
            document.querySelectorAll('.chart-option').forEach(option => {
                option.addEventListener('click', function() {
                    const parent = this.parentElement;
                    parent.querySelectorAll('.chart-option').forEach(opt => {
                        opt.classList.remove('active');
                    });
                    this.classList.add('active');
                });
            });

// Initialize Charts
            const projectStatusCtx = document.getElementById('projectStatusChart').getContext('2d');
            const chartLabels = <?= $chart_labels ?>;
            const chartData = <?= $chart_data ?>;
            const chartColors = <?= $chart_colors ?>;

new Chart(projectStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: chartLabels,
                    datasets: [{
                        data: chartData,
                        backgroundColor: [
                            '#1976d2',
                            '#388e3c',
                            '#7b1fa2',
                            '#f57c00',
                            '#d32f2f'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: crmdashboard.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation