<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zapper Dashboard</title>
    <!-- Подключаем Font Awesome для иконок -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <!-- Подключаем конкретную версию Chart.js 2.9.4 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <!-- Обеспечиваем адаптивность страницы -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Ваш CSS код остается без изменений */
        /* ... ваш существующий CSS код ... */
        
        /* Я вставлю ваш CSS код сюда для полноты */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f6fa;
            color: #333;
        }

        .dashboard {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
        }

        @media(min-width: 768px) {
            .dashboard {
                flex-direction: row;
            }
        }

        .sidebar {
            width: 100%;
            background-color: #fff;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        @media(min-width: 768px) {
            .sidebar {
                width: 240px;
                border-right: 1px solid #eee;
                border-bottom: none;
            }
        }

        .logo {
            color: #7c5cfc;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar li {
            padding: 10px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .sidebar li i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
            color: #7c5cfc;
        }

        .sidebar li a {
            text-decoration: none;
            color: inherit;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .sidebar li:hover {
            color: #7c5cfc;
        }

        .main-content {
            flex-grow: 1;
            padding: 20px;
            background-color: #f5f6fa;
        }

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

        .search-bar {
            flex-grow: 1;
            margin-right: 20px;
        }

        .search-bar input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .currency-selector, .user-profile {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .currency-selector img, .user-profile img {
            width: 32px;
            height: 32px;
            margin-right: 5px;
            border-radius: 50%;
        }

        .chart-container {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

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

        .chart-header select {
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }

        .chart-header select:focus {
            outline: none;
            border-color: #7c5cfc;
        }

        .button {
            background-color: #7c5cfc;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        .transactions {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .transaction-list {
            display: flex;
            flex-direction: column;
        }

        .transaction-item {
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            transition: background-color 0.3s, box-shadow 0.3s;
            border: 1px solid #e0e0e0;
            margin-bottom: 15px;
        }

        .transaction-item:hover {
            background-color: #f9f9f9;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .transaction-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .transaction-details .user,
        .transaction-details .amount {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .transaction-details .user i,
        .transaction-details .amount i {
            margin-right: 8px;
            color: #7c5cfc;
            font-size: 18px;
        }

        .transaction-details .user {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .transaction-details .amount {
            font-size: 18px;
            font-weight: 600;
            color: #7c5cfc;
        }

        .transaction-meta {
            color: #888;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .transaction-meta .date {
            display: flex;
            align-items: center;
        }

        .transaction-meta .date i {
            margin-right: 6px;
            color: #888;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .page-link {
            background-color: #fff;
            color: #7c5cfc;
            border: 1px solid #7c5cfc;
            border-radius: 4px;
            padding: 8px 12px;
            margin: 5px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        .page-link:hover {
            background-color: #7c5cfc;
            color: #fff;
        }

        .logout {
            margin-top: auto;
            padding: 10px;
            color: #f44336;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .logout i {
            margin-right: 8px;
        }

        @media(max-width: 767px) {
            .transaction-details {
                flex-direction: column;
                align-items: flex-start;
            }

            .transaction-details .amount {
                justify-content: space-between;
                width: 100%;
            }
        }

    </style>
</head>
<body>
    <div class="dashboard">
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
                    <li><a href="index.html"><i class="fas fa-home"></i> Dashboard</a></li>
                    <li><a href="portfolio-performance.html"><i class="fas fa-chart-line"></i> Portfolio Performance</a></li>
                    <li><a href="transactions.html"><i class="fas fa-wallet"></i> Transactions</a></li>
                    <li><a href="/upload.html"><i class="fas fa-upload"></i> Upload</a></li>
                    <li><a href="#"><i class="fas fa-seedling"></i> Farm</a></li>
                    <li><a href="#"><i class="fas fa-exchange-alt"></i> Bridge</a></li>
                    <li><a href="#"><i class="fas fa-history"></i> History</a></li>
                    <li><a href="#"><i class="fas fa-cogs"></i> Settings</a></li>
                </ul>
            </nav>
            <div class="logout"><i class="fas fa-sign-out-alt"></i> Logout</div>
        </aside>
        <main class="main-content">
            <header class="header">
                <div class="search-bar">
                    <input type="text" placeholder="Search token, wallet">
                </div>
                <div class="currency-selector">
                    <img src="us-flag.png" alt="USD"> USD
                </div>
                <div class="user-profile">
                    <img src="user-avatar.png" alt="User">
                </div>
            </header>
            <!-- График Portfolio Performance -->
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Portfolio Performance</h3>
                    <select>
                        <option>Monthly</option>
                        <option>Yearly</option>
                    </select>
                </div>
                <canvas id="portfolioChart"></canvas>
            </section>
            <!-- График Weekly Performance -->
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Weekly Performance</h3>
                    <select>
                        <option>This Week</option>
                        <option>Last Week</option>
                    </select>
                </div>
                <canvas id="weeklyChart"></canvas>
            </section>
            <div class="transactions">
                <h3>Transactions</h3>
                <div id="transactionsList" class="transaction-list"></div>
                <div id="pagination" class="pagination"></div>
            </div>
        </main>
    </div>

    <script>
        async function loadWeeklyData() {
            try {
                const response = await fetch('getWeeklyData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                // Проверка полученных данных
                console.log('Weekly Data:', data);

                const labels = data.map(item => item.day);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('weeklyChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Weekly Value',
                            data: values,
                            backgroundColor: '#4caf50',
                            borderColor: '#4caf50',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{ // Используем yAxes для совместимости с Chart.js 2.x
                                ticks: {
                                    beginAtZero: true,
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }],
                            xAxes: [{ // Также используем xAxes
                                gridLines: {
                                    display: false
                                }
                            }]
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading weekly data:', error);
            }
        }

        loadWeeklyData();

        async function loadPortfolioData() {
            try {
                const response = await fetch('getPortfolioData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                // Проверка полученных данных
                console.log('Portfolio Data:', data);

                const labels = data.map(item => item.month);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('portfolioChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Portfolio Value',
                            data: values,
                            backgroundColor: 'rgba(124, 92, 252, 0.2)',
                            borderColor: '#7c5cfc',
                            borderWidth: 1,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{ // Используем yAxes для совместимости с Chart.js 2.x
                                ticks: {
                                    beginAtZero: true,
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }]
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading portfolio data:', error);
            }
        }

        loadPortfolioData();

        // Функция для загрузки и отображения транзакций
        let currentPage = 1;
        const transactionsPerPage = 5;

        async function loadTransactions(page = 1) {
            try {
                const response = await fetch(`getTransactions.php?page=${page}&limit=${transactionsPerPage}`);
                if (!response.ok) throw new Error('Failed to fetch transactions');
                const transactions = await response.json();

                const transactionsList = document.getElementById('transactionsList');
                transactionsList.innerHTML = ''; // Очистить существующие транзакции

                transactions.data.forEach(transaction => {
                    const div = document.createElement('div');
                    div.className = 'transaction-item';
                    div.innerHTML = `
                        <div class="transaction-details">
                            <div class="user">
                                <i class="fas fa-user"></i> ${transaction.user}
                            </div>
                            <div class="amount">
                                <i class="fas fa-dollar-sign"></i> ${transaction.amount}
                            </div>
                        </div>
                        <div class="transaction-meta">
                            <div class="date">
                                <i class="fas fa-calendar-alt"></i> ${transaction.date}
                            </div>
                        </div>
                    `;
                    transactionsList.appendChild(div);
                });

                setPagination(transactions.totalPages);
            } catch (error) {
                console.error('Error loading transactions:', error);
            }
        }

        function setPagination(totalPages) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = ''; // Очистить пагинацию

            for (let i = 1; i <= totalPages; i++) {
                const pageLink = document.createElement('button');
                pageLink.className = 'page-link';
                pageLink.innerText = i;
                pageLink.onclick = () => {
                    currentPage = i;
                    loadTransactions(currentPage);
                };
                pagination.appendChild(pageLink);
            }
        }

        loadTransactions(currentPage);
    </script>
</body>
</html>

Сможешь улучшить код и применить интересный дизайн отображения меню и графиков ?