shricodev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRM Dashboard - Customers List</title>
    <link rel="stylesheet" href="styles.css">
    <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">
</head>
<body>
    <div class="dashboard-container">
        <!-- Sidebar Menu -->
        <div class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <span class="logo-text">Dashboard</span>
                    <span class="version">v.01</span>
                </div>
            </div>

            <nav class="sidebar-nav">
                <a href="#" class="nav-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="2" fill="none"/>
                        <polyline points="9,22 9,12 15,12 15,22" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>Dashboard</span>
                </a>

                <a href="#" class="nav-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" fill="none"/>
                        <rect x="8" y="2" width="8" height="4" rx="1" ry="1" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>Product</span>
                </a>

                <a href="#" class="nav-item active">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
                        <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>Customers</span>
                </a>

                <a href="#" class="nav-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>Analytics</span>
                </a>

                <a href="#" class="nav-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
                        <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2"/>
                        <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span>Reports</span>
                </a>

                <a href="#" class="nav-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" fill="none"/>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <span>Settings</span>
                </a>
            </nav>

            <div class="sidebar-promo">
                <div class="promo-card">
                    <div class="promo-content">
                        <h3>Upgrade to PRO</h3>
                        <p>to get access to all features</p>
                        <button class="upgrade-btn">Get Pro Now!</button>
                    </div>
                </div>
            </div>

            <div class="sidebar-footer">
                <div class="user-profile">
                    <img src="https://via.placeholder.com/42x42" alt="Profile" class="profile-img">
                    <div class="user-info">
                        <div class="user-name">Evano</div>
                        <div class="user-role">Project Manager</div>
                    </div>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <div class="main-header">
                <div class="greeting">
                    <h1>Hello Evano 👋🏼,</h1>
                </div>
                <div class="header-actions">
                    <div class="search-bar">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
                            <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" fill="none"/>
                        </svg>
                        <input type="text" placeholder="Search">
                    </div>
                </div>
            </div>

            <!-- Earnings Cards -->
            <div class="earnings-section">
                <div class="earnings-card">
                    <div class="earnings-item">
                        <div class="earnings-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.46 9-11V7l-10-5z" stroke="currentColor" stroke-width="2" fill="none"/>
                            </svg>
                        </div>
                        <div class="earnings-content">
                            <div class="earnings-label">Total Customers</div>
                            <div class="earnings-value">5,423</div>
                            <div class="earnings-change positive">+16% this month</div>
                        </div>
                    </div>

                    <div class="earnings-item">
                        <div class="earnings-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
                                <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
                            </svg>
                        </div>
                        <div class="earnings-content">
                            <div class="earnings-label">Members</div>
                            <div class="earnings-value">1,893</div>
                            <div class="earnings-change negative">-1% this month</div>
                        </div>
                    </div>

                    <div class="earnings-item">
                        <div class="earnings-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
                                <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
                            </svg>
                        </div>
                        <div class="earnings-content">
                            <div class="earnings-label">Active Now</div>
                            <div class="earnings-value">189</div>
                            <div class="earnings-avatars">
                                <img src="https://via.placeholder.com/26x26" alt="User 1">
                                <img src="https://via.placeholder.com/26x26" alt="User 2">
                                <img src="https://via.placeholder.com/26x26" alt="User 3">
                                <img src="https://via.placeholder.com/26x26" alt="User 4">
                                <img src="https://via.placeholder.com/26x26" alt="User 5">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customers Table -->
            <div class="customers-section">
                <div class="customers-header">
                    <div class="customers-title">
                        <h2>All Customers</h2>
                        <p class="customers-subtitle">Active Members</p>
                    </div>
                    <div class="customers-actions">
                        <button class="filter-btn">Sort</button>
                        <button class="export-btn">Export</button>
                    </div>
                </div>

                <div class="customers-table">
                    <table>
                        <thead>
                            <tr>
                                <th>Customer Name</th>
                                <th>Company</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <th>Country</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Jane Cooper</td>
                                <td>Microsoft</td>
                                <td>(225) 555-0118</td>
                                <td>jane@microsoft.com</td>
                                <td>United States</td>
                                <td><span class="status active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Floyd Miles</td>
                                <td>Yahoo</td>
                                <td>(205) 555-0100</td>
                                <td>floyd@yahoo.com</td>
                                <td>Kiribati</td>
                                <td><span class="status inactive">Inactive</span></td>
                            </tr>
                            <tr>
                                <td>Ronald Richards</td>
                                <td>Adobe</td>
                                <td>(302) 555-0107</td>
                                <td>ronald@adobe.com</td>
                                <td>Israel</td>
                                <td><span class="status inactive">Inactive</span></td>
                            </tr>
                            <tr>
                                <td>Marvin McKinney</td>
                                <td>Tesla</td>
                                <td>(252) 555-0126</td>
                                <td>marvin@tesla.com</td>
                                <td>Iran</td>
                                <td><span class="status active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Jerome Bell</td>
                                <td>Google</td>
                                <td>(629) 555-0129</td>
                                <td>jerome@google.com</td>
                                <td>Réunion</td>
                                <td><span class="status active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Kathryn Murphy</td>
                                <td>Microsoft</td>
                                <td>(406) 555-0120</td>
                                <td>kathryn@microsoft.com</td>
                                <td>Curaçao</td>
                                <td><span class="status active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Jacob Jones</td>
                                <td>Yahoo</td>
                                <td>(208) 555-0112</td>
                                <td>jacob@yahoo.com</td>
                                <td>Brazil</td>
                                <td><span class="status active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Kristin Watson</td>
                                <td>Facebook</td>
                                <td>(704) 555-0127</td>
                                <td>kristin@facebook.com</td>
                                <td>Åland Islands</td>
                                <td><span class="status inactive">Inactive</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="table-footer">
                    <div class="table-info">
                        <p>Showing data 1 to 8 of 256K entries</p>
                    </div>
                    <div class="pagination">
                        <button class="page-btn">‹</button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <button class="page-btn">4</button>
                        <span>...</span>
                        <button class="page-btn">40</button>
                        <button class="page-btn">›</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

## script.js
// DOM Content Loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize the dashboard
    initializeDashboard();
});

function initializeDashboard() {
    // Initialize search functionality
    initializeSearch();

    // Initialize sidebar navigation
    initializeSidebar();

    // Initialize table functionality
    initializeTable();

    // Initialize pagination
    initializePagination();

    // Initialize responsive behavior
    initializeResponsive();

    // Add smooth animations
    addSmoothAnimations();
}

// Search functionality
function initializeSearch() {
    const searchInput = document.querySelector('.search-bar input');
    const tableRows = document.querySelectorAll('.customers-table tbody tr');

    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();

            tableRows.forEach(row => {
                const rowText = row.textContent.toLowerCase();
                if (rowText.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });

            // Update table info
            updateTableInfo();
        });
    }
}

// Sidebar navigation
function initializeSidebar() {
    const navItems = document.querySelectorAll('.nav-item');

    navItems.forEach(item => {
        item.addEventListener('click', function(e) {
            // Remove active class from all items
            navItems.forEach(nav => nav.classList.remove('active'));

            // Add active class to clicked item
            this.classList.add('active');

            // Update main content based on selection
            updateMainContent(this.textContent.trim());
        });
    });

    // User profile dropdown (simulate)
    const userProfile = document.querySelector('.user-profile');
    if (userProfile) {
        userProfile.addEventListener('click', function() {
            // Toggle dropdown menu (you can implement actual dropdown here)
            console.log('User profile clicked');
        });
    }
}

// Table functionality
function initializeTable() {
    const tableHeaders = document.querySelectorAll('th');
    const tableRows = document.querySelectorAll('.customers-table tbody tr');

    // Add sorting functionality to headers
    tableHeaders.forEach((header, index) => {
        header.style.cursor = 'pointer';
        header.addEventListener('click', function() {
            sortTable(index);
        });
    });

    // Add hover effects to table rows
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f8f9fa';
        });

        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
}

// Sort table function
function sortTable(columnIndex) {
    const table = document.querySelector('.customers-table table');
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));

    // Get current sort direction
    const header = table.querySelectorAll('th')[columnIndex];
    const currentSort = header.dataset.sort || 'asc';
    const newSort = currentSort === 'asc' ? 'desc' : 'asc';

    // Clear all sort indicators
    table.querySelectorAll('th').forEach(th => {
        th.dataset.sort = '';
        th.style.position = 'relative';
    });

    // Set new sort direction
    header.dataset.sort = newSort;

    // Sort rows
    rows.sort((a, b) => {
        const aValue = a.cells[columnIndex].textContent.trim();
        const bValue = b.cells[columnIndex].textContent.trim();

        if (newSort === 'asc') {
            return aValue.localeCompare(bValue);
        } else {
            return bValue.localeCompare(aValue);
        }
    });

    // Reorder rows in table
    rows.forEach(row => tbody.appendChild(row));

    // Add sort indicator
    const indicator = document.createElement('span');
    indicator.innerHTML = newSort === 'asc' ? ' ↑' : ' ↓';
    indicator.style.position = 'absolute';
    indicator.style.right = '0';
    header.appendChild(indicator);
}

// Pagination functionality
function initializePagination() {
    const pageButtons = document.querySelectorAll('.page-btn');
    const rowsPerPage = 8;
    const allRows = document.querySelectorAll('.customers-table tbody tr');

    pageButtons.forEach(button => {
        button.addEventListener('click', function() {
            if (this.textContent === '‹' || this.textContent === '›') {
                handlePaginationArrows(this);
            } else if (!isNaN(this.textContent)) {
                const pageNum = parseInt(this.textContent);
                showPage(pageNum);
                updateActivePage(this);
            }
        });
    });

    function showPage(pageNum) {
        const startIndex = (pageNum - 1) * rowsPerPage;
        const endIndex = startIndex + rowsPerPage;

        allRows.forEach((row, index) => {
            if (index >= startIndex && index < endIndex) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    function updateActivePage(activeButton) {
        pageButtons.forEach(btn => btn.classList.remove('active'));
        activeButton.classList.add('active');
    }

    function handlePaginationArrows(button) {
        const currentActive = document.querySelector('.page-btn.active');
        const currentPage = parseInt(currentActive.textContent);

        if (button.textContent === '‹' && currentPage > 1) {
            const prevButton = document.querySelector(`[data-page="${currentPage - 1}"]`);
            if (prevButton) {
                prevButton.click();
            }
        } else if (button.textContent === '›' && currentPage < 40) {
            const nextButton = document.querySelector(`[data-page="${currentPage + 1}"]`);
            if (nextButton) {
                nextButton.click();
            }
        }
    }
}

// Update table info
function updateTableInfo() {
    const visibleRows = document.querySelectorAll('.customers-table tbody tr:not([style*="display: none"])');
    const totalRows = document.querySelectorAll('.customers-table tbody tr');
    const tableInfo = document.querySelector('.table-info p');

    if (tableInfo) {
        tableInfo.textContent = `Showing data 1 to ${visibleRows.length} of ${totalRows.length} entries`;
    }
}

// Update main content based on navigation
function updateMainContent(section) {
    const greeting = document.querySelector('.greeting h1');
    const customersTitle = document.querySelector('.customers-title h2');

    switch(section.toLowerCase()) {
        case 'dashboard':
            greeting.textContent = 'Hello Evano 👋🏼,';
            customersTitle.textContent = 'Dashboard Overview';
            break;
        case 'product':
            greeting.textContent = 'Product Management';
            customersTitle.textContent = 'All Products';
            break;
        case 'customers':
            greeting.textContent = 'Hello Evano 👋🏼,';
            customersTitle.textContent = 'All Customers';
            break;
        case 'analytics':
            greeting.textContent = 'Analytics Dashboard';
            customersTitle.textContent = 'Analytics Overview';
            break;
        case 'reports':
            greeting.textContent = 'Reports Center';
            customersTitle.textContent = 'All Reports';
            break;
        case 'settings':
            greeting.textContent = 'Settings';
            customersTitle.textContent = 'System Settings';
            break;
    }
}

// Responsive behavior
function initializeResponsive() {
    const sidebar = document.querySelector('.sidebar');
    const mainContent = document.querySelector('.main-content');

    // Handle window resize
    window.addEventListener('resize', function() {
        if (window.innerWidth <= 768) {
            sidebar.classList.add('mobile');
            mainContent.classList.add('mobile');
        } else {
            sidebar.classList.remove('mobile');
            mainContent.classList.remove('mobile');
        }
    });

    // Initialize on load
    if (window.innerWidth <= 768) {
        sidebar.classList.add('mobile');
        mainContent.classList.add('mobile');
    }
}

// Add smooth animations
function addSmoothAnimations() {
    // Fade in animation for elements
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe elements for animation
    const animateElements = document.querySelectorAll('.earnings-card, .customers-section');
    animateElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
}

// Filter and export functionality
document.addEventListener('DOMContentLoaded', function() {
    // Filter button functionality
    const filterBtn = document.querySelector('.filter-btn');
    if (filterBtn) {
        filterBtn.addEventListener('click', function() {
            // Create a simple filter dropdown
            const filterOptions = ['All', 'Active', 'Inactive'];
            const currentFilter = this.textContent;

            // Toggle between filter options
            const currentIndex = filterOptions.indexOf(currentFilter);
            const nextIndex = (currentIndex + 1) % filterOptions.length;
            const nextFilter = filterOptions[nextIndex];

            this.textContent = nextFilter;

            // Apply filter
            applyStatusFilter(nextFilter);
        });
    }

    // Export button functionality
    const exportBtn = document.querySelector('.export-btn');
    if (exportBtn) {
        exportBtn.addEventListener('click', function() {
            exportTableData();
        });
    }
});

// Apply status filter
function applyStatusFilter(filter) {
    const tableRows = document.querySelectorAll('.customers-table tbody tr');

    tableRows.forEach(row => {
        const statusCell = row.querySelector('.status');
        if (filter === 'All' || statusCell.textContent.toLowerCase() === filter.toLowerCase()) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });

    updateTableInfo();
}

// Export table data
function exportTableData() {
    const table = document.querySelector('.customers-table table');
    const rows = table.querySelectorAll('tr');
    let csvContent = '';

    rows.forEach(row => {
        const cells = row.querySelectorAll('th, td');
        const rowData = Array.from(cells).map(cell => {
            return '"' + cell.textContent.trim().replace(/"/g, '""') + '"';
        }).join(',');
        csvContent += rowData + '\n';
    });

    // Create and download CSV file
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'customers_data.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// Smooth scrolling for internal links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Add loading states
function showLoadingState(element) {
    element.style.opacity = '0.6';
    element.style.pointerEvents = 'none';
}

function hideLoadingState(element) {
    element.style.opacity = '1';
    element.style.pointerEvents = 'auto';
}

// Error handling
window.addEventListener('error', function(e) {
    console.error('Dashboard error:', e.error);
});

// Performance monitoring
if ('performance' in window) {
    window.addEventListener('load', function() {
        const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
        console.log('Dashboard loaded in:', loadTime, 'ms');
    });
}

## styles.css
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fafbff;
    color: #000;
    line-height: 1.5;
}

/* Dashboard Container */
.dashboard-container {
    display: flex;
    height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 306px;
    background-color: #ffffff;
    box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
    display: flex;
    flex-direction: column;
    position: relative;
}

.sidebar-header {
    padding: 36px 28px 24px 28px;
    border-bottom: 1px solid #f0f0f0;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-text {
    font-size: 26px;
    font-weight: 600;
    color: #000;
}

.version {
    font-size: 10px;
    color: #828282;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-nav {
    padding: 18px 28px;
    flex-grow: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 8px;
    margin-bottom: 18px;
    text-decoration: none;
    color: #9197b3;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-item:hover {
    background-color: #f8f9fa;
}

.nav-item.active {
    background-color: #5932ea;
    color: #ffffff;
}

.nav-item svg {
    width: 24px;
    height: 24px;
}

.sidebar-promo {
    padding: 0 28px 24px 28px;
}

.promo-card {
    background: linear-gradient(135deg, #5932ea 0%, #8b5cf6 100%);
    border-radius: 20px;
    padding: 24px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.promo-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.promo-content p {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.upgrade-btn {
    background-color: #ffffff;
    color: #5932ea;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
}

.sidebar-footer {
    padding: 24px 28px;
    border-top: 1px solid #f0f0f0;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    flex-grow: 1;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.user-role {
    font-size: 12px;
    color: #757575;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 40px 71px 40px 95px;
    overflow-y: auto;
}

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

.greeting h1 {
    font-size: 24px;
    font-weight: 500;
    color: #000;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 7px 8px 7px 14px;
    box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
    width: 216px;
}

.search-bar svg {
    width: 24px;
    height: 24px;
    color: #b5b7c0;
}

.search-bar input {
    border: none;
    outline: none;
    background: none;
    font-size: 12px;
    color: #b5b7c0;
    width: 100%;
}

.search-bar input::placeholder {
    color: #b5b7c0;
}

/* Earnings Section */
.earnings-section {
    margin-bottom: 51px;
}

.earnings-card {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.earnings-item {
    display: flex;
    align-items: center;
    gap: 24px;
}

.earnings-icon {
    width: 60px;
    height: 60px;
    background-color: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.earnings-icon svg {
    width: 24px;
    height: 24px;
    color: #5932ea;
}

.earnings-content {
    display: flex;
    flex-direction: column;
}

.earnings-label {
    font-size: 14px;
    color: #b5b7c0;
    margin-bottom: 4px;
}

.earnings-value {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.earnings-change {
    font-size: 14px;
    font-weight: 500;
}

.earnings-change.positive {
    color: #00ac4f;
}

.earnings-change.negative {
    color: #d0004b;
}

.earnings-avatars {
    display: flex;
    gap: -8px;
    margin-top: 8px;
}

.earnings-avatars img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.3px solid #ffffff;
    margin-left: -8px;
}

.earnings-avatars img:first-child {
    margin-left: 0;
}

/* Customers Section */
.customers-section {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
}

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

.customers-title h2 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 7px;
}

.customers-subtitle {
    font-size: 14px;
    color: #16c098;
    font-weight: 400;
}

.customers-actions {
    display: flex;
    gap: 12px;
}

.filter-btn, .export-btn {
    padding: 9px 16px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover, .export-btn:hover {
    background-color: #f8f9fa;
}

/* Table Styles */
.customers-table {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 20px 0;
    border-bottom: 1px solid #eeeeee;
}

th {
    font-size: 14px;
    font-weight: 500;
    color: #b5b7c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    font-size: 14px;
    color: #292d32;
    font-weight: 500;
}

.status {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

.status.active {
    background-color: rgba(22, 192, 152, 0.38);
    color: #008767;
    border: 1px solid #00ac4f;
}

.status.inactive {
    background-color: #ffc5c5;
    color: #df0404;
    border: 1px solid #df0404;
}

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.table-info p {
    font-size: 14px;
    color: #b5b7c0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-btn {
    width: 25px;
    height: 24px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.page-btn:hover {
    background-color: #f8f9fa;
}

.page-btn.active {
    background-color: #5932ea;
    color: #ffffff;
    border-color: #5932ea;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-content {
        padding: 20px 40px;
    }

    .earnings-card {
        flex-direction: column;
        gap: 24px;
    }

    .earnings-item {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
    }

    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .nav-item {
        flex-shrink: 0;
    }

    .main-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .customers-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .table-footer {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 16px;
    }

    .earnings-card {
        padding: 16px;
    }

    .customers-section {
        padding: 16px;
    }

    .customers-table {
        font-size: 12px;
    }

    th, td {
        padding: 12px 8px;
    }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CRM Dashboard - Customers List</title>
	<link rel="stylesheet" href="styles.css">
	<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">
	</head>
	<body>
	<div class="dashboard-container">
	<!-- Sidebar Menu -->
	<div class="sidebar">
	<div class="sidebar-header">
	<div class="logo">
	<span class="logo-text">Dashboard</span>
	<span class="version">v.01</span>
	</div>
	</div>

	<nav class="sidebar-nav">
	<a href="#" class="nav-item">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="2" fill="none"/>
	<polyline points="9,22 9,12 15,12 15,22" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<span>Dashboard</span>
	</a>

	<a href="#" class="nav-item">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" fill="none"/>
	<rect x="8" y="2" width="8" height="4" rx="1" ry="1" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<span>Product</span>
	</a>

	<a href="#" class="nav-item active">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
	<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<span>Customers</span>
	</a>

	<a href="#" class="nav-item">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<span>Analytics</span>
	</a>

	<a href="#" class="nav-item">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
	<line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2"/>
	<line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
	</svg>
	<span>Reports</span>
	</a>

	<a href="#" class="nav-item">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<span>Settings</span>
	</a>
	</nav>

	<div class="sidebar-promo">
	<div class="promo-card">
	<div class="promo-content">
	<h3>Upgrade to PRO</h3>
	<p>to get access to all features</p>
	<button class="upgrade-btn">Get Pro Now!</button>
	</div>
	</div>
	</div>

	<div class="sidebar-footer">
	<div class="user-profile">
	<img src="https://via.placeholder.com/42x42" alt="Profile" class="profile-img">
	<div class="user-info">
	<div class="user-name">Evano</div>
	<div class="user-role">Project Manager</div>
	</div>
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="main-content">
	<div class="main-header">
	<div class="greeting">
	<h1>Hello Evano 👋🏼,</h1>
	</div>
	<div class="header-actions">
	<div class="search-bar">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	<input type="text" placeholder="Search">
	</div>
	</div>
	</div>

	<!-- Earnings Cards -->
	<div class="earnings-section">
	<div class="earnings-card">
	<div class="earnings-item">
	<div class="earnings-icon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.46 9-11V7l-10-5z" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	</div>
	<div class="earnings-content">
	<div class="earnings-label">Total Customers</div>
	<div class="earnings-value">5,423</div>
	<div class="earnings-change positive">+16% this month</div>
	</div>
	</div>

	<div class="earnings-item">
	<div class="earnings-icon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
	<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	</div>
	<div class="earnings-content">
	<div class="earnings-label">Members</div>
	<div class="earnings-value">1,893</div>
	<div class="earnings-change negative">-1% this month</div>
	</div>
	</div>

	<div class="earnings-item">
	<div class="earnings-icon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
	<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none"/>
	<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2" fill="none"/>
	<path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none"/>
	</svg>
	</div>
	<div class="earnings-content">
	<div class="earnings-label">Active Now</div>
	<div class="earnings-value">189</div>
	<div class="earnings-avatars">
	<img src="https://via.placeholder.com/26x26" alt="User 1">
	<img src="https://via.placeholder.com/26x26" alt="User 2">
	<img src="https://via.placeholder.com/26x26" alt="User 3">
	<img src="https://via.placeholder.com/26x26" alt="User 4">
	<img src="https://via.placeholder.com/26x26" alt="User 5">
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Customers Table -->
	<div class="customers-section">
	<div class="customers-header">
	<div class="customers-title">
	<h2>All Customers</h2>
	<p class="customers-subtitle">Active Members</p>
	</div>
	<div class="customers-actions">
	<button class="filter-btn">Sort</button>
	<button class="export-btn">Export</button>
	</div>
	</div>

	<div class="customers-table">
	<table>
	<thead>
	<tr>
	<th>Customer Name</th>
	<th>Company</th>
	<th>Phone Number</th>
	<th>Email</th>
	<th>Country</th>
	<th>Status</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Jane Cooper</td>
	<td>Microsoft</td>
	<td>(225) 555-0118</td>
	<td>jane@microsoft.com</td>
	<td>United States</td>
	<td><span class="status active">Active</span></td>
	</tr>
	<tr>
	<td>Floyd Miles</td>
	<td>Yahoo</td>
	<td>(205) 555-0100</td>
	<td>floyd@yahoo.com</td>
	<td>Kiribati</td>
	<td><span class="status inactive">Inactive</span></td>
	</tr>
	<tr>
	<td>Ronald Richards</td>
	<td>Adobe</td>
	<td>(302) 555-0107</td>
	<td>ronald@adobe.com</td>
	<td>Israel</td>
	<td><span class="status inactive">Inactive</span></td>
	</tr>
	<tr>
	<td>Marvin McKinney</td>
	<td>Tesla</td>
	<td>(252) 555-0126</td>
	<td>marvin@tesla.com</td>
	<td>Iran</td>
	<td><span class="status active">Active</span></td>
	</tr>
	<tr>
	<td>Jerome Bell</td>
	<td>Google</td>
	<td>(629) 555-0129</td>
	<td>jerome@google.com</td>
	<td>Réunion</td>
	<td><span class="status active">Active</span></td>
	</tr>
	<tr>
	<td>Kathryn Murphy</td>
	<td>Microsoft</td>
	<td>(406) 555-0120</td>
	<td>kathryn@microsoft.com</td>
	<td>Curaçao</td>
	<td><span class="status active">Active</span></td>
	</tr>
	<tr>
	<td>Jacob Jones</td>
	<td>Yahoo</td>
	<td>(208) 555-0112</td>
	<td>jacob@yahoo.com</td>
	<td>Brazil</td>
	<td><span class="status active">Active</span></td>
	</tr>
	<tr>
	<td>Kristin Watson</td>
	<td>Facebook</td>
	<td>(704) 555-0127</td>
	<td>kristin@facebook.com</td>
	<td>Åland Islands</td>
	<td><span class="status inactive">Inactive</span></td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="table-footer">
	<div class="table-info">
	<p>Showing data 1 to 8 of 256K entries</p>
	</div>
	<div class="pagination">
	<button class="page-btn">‹</button>
	<button class="page-btn active">1</button>
	<button class="page-btn">2</button>
	<button class="page-btn">3</button>
	<button class="page-btn">4</button>
	<span>...</span>
	<button class="page-btn">40</button>
	<button class="page-btn">›</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	// DOM Content Loaded
	document.addEventListener('DOMContentLoaded', function() {
	// Initialize the dashboard
	initializeDashboard();
	});

	function initializeDashboard() {
	// Initialize search functionality
	initializeSearch();

	// Initialize sidebar navigation
	initializeSidebar();

	// Initialize table functionality
	initializeTable();

	// Initialize pagination
	initializePagination();

	// Initialize responsive behavior
	initializeResponsive();

	// Add smooth animations
	addSmoothAnimations();
	}

	// Search functionality
	function initializeSearch() {
	const searchInput = document.querySelector('.search-bar input');
	const tableRows = document.querySelectorAll('.customers-table tbody tr');

	if (searchInput) {
	searchInput.addEventListener('input', function(e) {
	const searchTerm = e.target.value.toLowerCase();

	tableRows.forEach(row => {
	const rowText = row.textContent.toLowerCase();
	if (rowText.includes(searchTerm)) {
	row.style.display = '';
	} else {
	row.style.display = 'none';
	}
	});

	// Update table info
	updateTableInfo();
	});
	}
	}

	// Sidebar navigation
	function initializeSidebar() {
	const navItems = document.querySelectorAll('.nav-item');

	navItems.forEach(item => {
	item.addEventListener('click', function(e) {
	// Remove active class from all items
	navItems.forEach(nav => nav.classList.remove('active'));

	// Add active class to clicked item
	this.classList.add('active');

	// Update main content based on selection
	updateMainContent(this.textContent.trim());
	});
	});

	// User profile dropdown (simulate)
	const userProfile = document.querySelector('.user-profile');
	if (userProfile) {
	userProfile.addEventListener('click', function() {
	// Toggle dropdown menu (you can implement actual dropdown here)
	console.log('User profile clicked');
	});
	}
	}

	// Table functionality
	function initializeTable() {
	const tableHeaders = document.querySelectorAll('th');
	const tableRows = document.querySelectorAll('.customers-table tbody tr');

	// Add sorting functionality to headers
	tableHeaders.forEach((header, index) => {
	header.style.cursor = 'pointer';
	header.addEventListener('click', function() {
	sortTable(index);
	});
	});

	// Add hover effects to table rows
	tableRows.forEach(row => {
	row.addEventListener('mouseenter', function() {
	this.style.backgroundColor = '#f8f9fa';
	});

	row.addEventListener('mouseleave', function() {
	this.style.backgroundColor = '';
	});
	});
	}

	// Sort table function
	function sortTable(columnIndex) {
	const table = document.querySelector('.customers-table table');
	const tbody = table.querySelector('tbody');
	const rows = Array.from(tbody.querySelectorAll('tr'));

	// Get current sort direction
	const header = table.querySelectorAll('th')[columnIndex];
	const currentSort = header.dataset.sort \|\| 'asc';
	const newSort = currentSort === 'asc' ? 'desc' : 'asc';

	// Clear all sort indicators
	table.querySelectorAll('th').forEach(th => {
	th.dataset.sort = '';
	th.style.position = 'relative';
	});

	// Set new sort direction
	header.dataset.sort = newSort;

	// Sort rows
	rows.sort((a, b) => {
	const aValue = a.cells[columnIndex].textContent.trim();
	const bValue = b.cells[columnIndex].textContent.trim();

	if (newSort === 'asc') {
	return aValue.localeCompare(bValue);
	} else {
	return bValue.localeCompare(aValue);
	}
	});

	// Reorder rows in table
	rows.forEach(row => tbody.appendChild(row));

	// Add sort indicator
	const indicator = document.createElement('span');
	indicator.innerHTML = newSort === 'asc' ? ' ↑' : ' ↓';
	indicator.style.position = 'absolute';
	indicator.style.right = '0';
	header.appendChild(indicator);
	}

	// Pagination functionality
	function initializePagination() {
	const pageButtons = document.querySelectorAll('.page-btn');
	const rowsPerPage = 8;
	const allRows = document.querySelectorAll('.customers-table tbody tr');

	pageButtons.forEach(button => {
	button.addEventListener('click', function() {
	if (this.textContent === '‹' \|\| this.textContent === '›') {
	handlePaginationArrows(this);
	} else if (!isNaN(this.textContent)) {
	const pageNum = parseInt(this.textContent);
	showPage(pageNum);
	updateActivePage(this);
	}
	});
	});

	function showPage(pageNum) {
	const startIndex = (pageNum - 1) * rowsPerPage;
	const endIndex = startIndex + rowsPerPage;

	allRows.forEach((row, index) => {
	if (index >= startIndex && index < endIndex) {
	row.style.display = '';
	} else {
	row.style.display = 'none';
	}
	});
	}

	function updateActivePage(activeButton) {
	pageButtons.forEach(btn => btn.classList.remove('active'));
	activeButton.classList.add('active');
	}

	function handlePaginationArrows(button) {
	const currentActive = document.querySelector('.page-btn.active');
	const currentPage = parseInt(currentActive.textContent);

	if (button.textContent === '‹' && currentPage > 1) {
	const prevButton = document.querySelector(`[data-page="${currentPage - 1}"]`);
	if (prevButton) {
	prevButton.click();
	}
	} else if (button.textContent === '›' && currentPage < 40) {
	const nextButton = document.querySelector(`[data-page="${currentPage + 1}"]`);
	if (nextButton) {
	nextButton.click();
	}
	}
	}
	}

	// Update table info
	function updateTableInfo() {
	const visibleRows = document.querySelectorAll('.customers-table tbody tr:not([style*="display: none"])');
	const totalRows = document.querySelectorAll('.customers-table tbody tr');
	const tableInfo = document.querySelector('.table-info p');

	if (tableInfo) {
	tableInfo.textContent = `Showing data 1 to ${visibleRows.length} of ${totalRows.length} entries`;
	}
	}

	// Update main content based on navigation
	function updateMainContent(section) {
	const greeting = document.querySelector('.greeting h1');
	const customersTitle = document.querySelector('.customers-title h2');

	switch(section.toLowerCase()) {
	case 'dashboard':
	greeting.textContent = 'Hello Evano 👋🏼,';
	customersTitle.textContent = 'Dashboard Overview';
	break;
	case 'product':
	greeting.textContent = 'Product Management';
	customersTitle.textContent = 'All Products';
	break;
	case 'customers':
	greeting.textContent = 'Hello Evano 👋🏼,';
	customersTitle.textContent = 'All Customers';
	break;
	case 'analytics':
	greeting.textContent = 'Analytics Dashboard';
	customersTitle.textContent = 'Analytics Overview';
	break;
	case 'reports':
	greeting.textContent = 'Reports Center';
	customersTitle.textContent = 'All Reports';
	break;
	case 'settings':
	greeting.textContent = 'Settings';
	customersTitle.textContent = 'System Settings';
	break;
	}
	}

	// Responsive behavior
	function initializeResponsive() {
	const sidebar = document.querySelector('.sidebar');
	const mainContent = document.querySelector('.main-content');

	// Handle window resize
	window.addEventListener('resize', function() {
	if (window.innerWidth <= 768) {
	sidebar.classList.add('mobile');
	mainContent.classList.add('mobile');
	} else {
	sidebar.classList.remove('mobile');
	mainContent.classList.remove('mobile');
	}
	});

	// Initialize on load
	if (window.innerWidth <= 768) {
	sidebar.classList.add('mobile');
	mainContent.classList.add('mobile');
	}
	}

	// Add smooth animations
	function addSmoothAnimations() {
	// Fade in animation for elements
	const observerOptions = {
	threshold: 0.1,
	rootMargin: '0px 0px -50px 0px'
	};

	const observer = new IntersectionObserver(function(entries) {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.style.opacity = '1';
	entry.target.style.transform = 'translateY(0)';
	}
	});
	}, observerOptions);

	// Observe elements for animation
	const animateElements = document.querySelectorAll('.earnings-card, .customers-section');
	animateElements.forEach(el => {
	el.style.opacity = '0';
	el.style.transform = 'translateY(20px)';
	el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
	observer.observe(el);
	});
	}

	// Filter and export functionality
	document.addEventListener('DOMContentLoaded', function() {
	// Filter button functionality
	const filterBtn = document.querySelector('.filter-btn');
	if (filterBtn) {
	filterBtn.addEventListener('click', function() {
	// Create a simple filter dropdown
	const filterOptions = ['All', 'Active', 'Inactive'];
	const currentFilter = this.textContent;

	// Toggle between filter options
	const currentIndex = filterOptions.indexOf(currentFilter);
	const nextIndex = (currentIndex + 1) % filterOptions.length;
	const nextFilter = filterOptions[nextIndex];

	this.textContent = nextFilter;

	// Apply filter
	applyStatusFilter(nextFilter);
	});
	}

	// Export button functionality
	const exportBtn = document.querySelector('.export-btn');
	if (exportBtn) {
	exportBtn.addEventListener('click', function() {
	exportTableData();
	});
	}
	});

	// Apply status filter
	function applyStatusFilter(filter) {
	const tableRows = document.querySelectorAll('.customers-table tbody tr');

	tableRows.forEach(row => {
	const statusCell = row.querySelector('.status');
	if (filter === 'All' \|\| statusCell.textContent.toLowerCase() === filter.toLowerCase()) {
	row.style.display = '';
	} else {
	row.style.display = 'none';
	}
	});

	updateTableInfo();
	}

	// Export table data
	function exportTableData() {
	const table = document.querySelector('.customers-table table');
	const rows = table.querySelectorAll('tr');
	let csvContent = '';

	rows.forEach(row => {
	const cells = row.querySelectorAll('th, td');
	const rowData = Array.from(cells).map(cell => {
	return '"' + cell.textContent.trim().replace(/"/g, '""') + '"';
	}).join(',');
	csvContent += rowData + '\n';
	});

	// Create and download CSV file
	const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
	const link = document.createElement('a');
	const url = URL.createObjectURL(blob);
	link.setAttribute('href', url);
	link.setAttribute('download', 'customers_data.csv');
	link.style.visibility = 'hidden';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	}

	// Smooth scrolling for internal links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	const target = document.querySelector(this.getAttribute('href'));
	if (target) {
	target.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	}
	});
	});

	// Add loading states
	function showLoadingState(element) {
	element.style.opacity = '0.6';
	element.style.pointerEvents = 'none';
	}

	function hideLoadingState(element) {
	element.style.opacity = '1';
	element.style.pointerEvents = 'auto';
	}

	// Error handling
	window.addEventListener('error', function(e) {
	console.error('Dashboard error:', e.error);
	});

	// Performance monitoring
	if ('performance' in window) {
	window.addEventListener('load', function() {
	const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
	console.log('Dashboard loaded in:', loadTime, 'ms');
	});
	}
	/* Reset and Base Styles */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', sans-serif;
	background-color: #fafbff;
	color: #000;
	line-height: 1.5;
	}

	/* Dashboard Container */
	.dashboard-container {
	display: flex;
	height: 100vh;
	}

	/* Sidebar Styles */
	.sidebar {
	width: 306px;
	background-color: #ffffff;
	box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
	display: flex;
	flex-direction: column;
	position: relative;
	}

	.sidebar-header {
	padding: 36px 28px 24px 28px;
	border-bottom: 1px solid #f0f0f0;
	}

	.logo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.logo-text {
	font-size: 26px;
	font-weight: 600;
	color: #000;
	}

	.version {
	font-size: 10px;
	color: #828282;
	background-color: #f0f0f0;
	padding: 2px 6px;
	border-radius: 4px;
	}

	.sidebar-nav {
	padding: 18px 28px;
	flex-grow: 1;
	}

	.nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 8px;
	margin-bottom: 18px;
	text-decoration: none;
	color: #9197b3;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	transition: all 0.3s ease;
	}

	.nav-item:hover {
	background-color: #f8f9fa;
	}

	.nav-item.active {
	background-color: #5932ea;
	color: #ffffff;
	}

	.nav-item svg {
	width: 24px;
	height: 24px;
	}

	.sidebar-promo {
	padding: 0 28px 24px 28px;
	}

	.promo-card {
	background: linear-gradient(135deg, #5932ea 0%, #8b5cf6 100%);
	border-radius: 20px;
	padding: 24px;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	}

	.promo-content h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	}

	.promo-content p {
	font-size: 12px;
	opacity: 0.9;
	margin-bottom: 16px;
	}

	.upgrade-btn {
	background-color: #ffffff;
	color: #5932ea;
	border: none;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.upgrade-btn:hover {
	transform: translateY(-2px);
	}

	.sidebar-footer {
	padding: 24px 28px;
	border-top: 1px solid #f0f0f0;
	}

	.user-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.profile-img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	}

	.user-info {
	flex-grow: 1;
	}

	.user-name {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	}

	.user-role {
	font-size: 12px;
	color: #757575;
	}

	/* Main Content */
	.main-content {
	flex: 1;
	padding: 40px 71px 40px 95px;
	overflow-y: auto;
	}

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

	.greeting h1 {
	font-size: 24px;
	font-weight: 500;
	color: #000;
	}

	.search-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 7px 8px 7px 14px;
	box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
	width: 216px;
	}

	.search-bar svg {
	width: 24px;
	height: 24px;
	color: #b5b7c0;
	}

	.search-bar input {
	border: none;
	outline: none;
	background: none;
	font-size: 12px;
	color: #b5b7c0;
	width: 100%;
	}

	.search-bar input::placeholder {
	color: #b5b7c0;
	}

	/* Earnings Section */
	.earnings-section {
	margin-bottom: 51px;
	}

	.earnings-card {
	background-color: #ffffff;
	border-radius: 30px;
	padding: 32px;
	box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.earnings-item {
	display: flex;
	align-items: center;
	gap: 24px;
	}

	.earnings-icon {
	width: 60px;
	height: 60px;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.earnings-icon svg {
	width: 24px;
	height: 24px;
	color: #5932ea;
	}

	.earnings-content {
	display: flex;
	flex-direction: column;
	}

	.earnings-label {
	font-size: 14px;
	color: #b5b7c0;
	margin-bottom: 4px;
	}

	.earnings-value {
	font-size: 32px;
	font-weight: 700;
	color: #000;
	margin-bottom: 8px;
	}

	.earnings-change {
	font-size: 14px;
	font-weight: 500;
	}

	.earnings-change.positive {
	color: #00ac4f;
	}

	.earnings-change.negative {
	color: #d0004b;
	}

	.earnings-avatars {
	display: flex;
	gap: -8px;
	margin-top: 8px;
	}

	.earnings-avatars img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.3px solid #ffffff;
	margin-left: -8px;
	}

	.earnings-avatars img:first-child {
	margin-left: 0;
	}

	/* Customers Section */
	.customers-section {
	background-color: #ffffff;
	border-radius: 30px;
	padding: 30px;
	box-shadow: 0 10px 60px rgba(225, 236, 248, 0.50);
	}

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

	.customers-title h2 {
	font-size: 22px;
	font-weight: 600;
	color: #000;
	margin-bottom: 7px;
	}

	.customers-subtitle {
	font-size: 14px;
	color: #16c098;
	font-weight: 400;
	}

	.customers-actions {
	display: flex;
	gap: 12px;
	}

	.filter-btn, .export-btn {
	padding: 9px 16px;
	border: 1px solid #e0e0e0;
	background-color: #ffffff;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.filter-btn:hover, .export-btn:hover {
	background-color: #f8f9fa;
	}

	/* Table Styles */
	.customers-table {
	overflow-x: auto;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	th, td {
	text-align: left;
	padding: 20px 0;
	border-bottom: 1px solid #eeeeee;
	}

	th {
	font-size: 14px;
	font-weight: 500;
	color: #b5b7c0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	}

	td {
	font-size: 14px;
	color: #292d32;
	font-weight: 500;
	}

	.status {
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	}

	.status.active {
	background-color: rgba(22, 192, 152, 0.38);
	color: #008767;
	border: 1px solid #00ac4f;
	}

	.status.inactive {
	background-color: #ffc5c5;
	color: #df0404;
	border: 1px solid #df0404;
	}

	/* Table Footer */
	.table-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #eeeeee;
	}

	.table-info p {
	font-size: 14px;
	color: #b5b7c0;
	}

	.pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.page-btn {
	width: 25px;
	height: 24px;
	border: 1px solid #e0e0e0;
	background-color: #ffffff;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	}

	.page-btn:hover {
	background-color: #f8f9fa;
	}

	.page-btn.active {
	background-color: #5932ea;
	color: #ffffff;
	border-color: #5932ea;
	}

	/* Responsive Design */
	@media (max-width: 1200px) {
	.main-content {
	padding: 20px 40px;
	}

	.earnings-card {
	flex-direction: column;
	gap: 24px;
	}

	.earnings-item {
	justify-content: center;
	}
	}

	@media (max-width: 768px) {
	.dashboard-container {
	flex-direction: column;
	}

	.sidebar {
	width: 100%;
	height: auto;
	}

	.sidebar-nav {
	flex-direction: row;
	overflow-x: auto;
	}

	.nav-item {
	flex-shrink: 0;
	}

	.main-header {
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	}

	.customers-header {
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	}

	.table-footer {
	flex-direction: column;
	gap: 16px;
	}
	}

	@media (max-width: 480px) {
	.main-content {
	padding: 16px;
	}

	.earnings-card {
	padding: 16px;
	}

	.customers-section {
	padding: 16px;
	}

	.customers-table {
	font-size: 12px;
	}

	th, td {
	padding: 12px 8px;
	}
	}