backtechnoweb/admin.html at main · Yanis232/backtechnoweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administration</title>
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="admin.css">
</head>

<body>
    <!-- Header -->
    <header class="top-bar">
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <nav class="nav-menu">
            <a href="manage-products.html" class="nav-link">
                <i class="bx bxs-box"></i>
                <span>Manage Products</span>
            </a>
            <a href="manage-clients.html" class="nav-link">
                <i class="bx bxs-user"></i>
                <span>Manage Clients</span>
            </a>
            <a href="manage-orders.html" class="nav-link">
                <i class="bx bxs-cart"></i>
                <span>Manage Orders</span>
            </a>
            <!-- Logout Button -->
            <a class="logout-btn" href="javascript:void(0);" onclick="logout()">
                <i class="bx bx-log-out"></i>
                Logout
            </a>
        </nav>
    </header>

    <!-- Dashboard -->
    <main class="dashboard">
        <!-- Statistics Section -->
        <section class="stats-section">
            <h2>Statistics</h2>
            <div class="stats-grid">
                <div class="stats-card">
                    <h3>Average Cart Price</h3>
                    <p id="avg-cart-price">Loading...</p>
                </div>
                <div class="stats-card">
                    <h3>Clients</h3>
                    <p id="clients-count">Loading...</p>
                </div>
                <div class="stats-card">
                    <h3>Completed Orders</h3>
                    <p id="orders-count">Loading...</p>
                </div>
            </div>
        </section>

        <!-- Recent Orders Section -->
        <section class="orders-section">
            <h2>Recent Orders</h2>
            <table class="orders-table">
                <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Client Name</th>
                        <th>Date</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="orders-tbody">
                    <!-- Orders will be dynamically added here -->
                </tbody>
            </table>
            <a href="manage-orders.html" class="view-all">View All Orders</a>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 L'Arbre En Vie - All rights reserved</p>
    </footer>

    <script>
        function logout() {
            localStorage.removeItem("isLoggedIn");
            localStorage.removeItem("username");
            localStorage.removeItem("userId");

            window.location.href = "index.html"; // Redirect to the homepage after logout
        }
    </script>
    <script>
        // Function to fetch and display recent orders
        function loadRecentOrders() {
            fetch('http://localhost:3000/api/orders?sort=created_at_desc') // API URL for recent orders
                .then(response => response.json())
                .then(orders => {
                    const ordersTbody = document.getElementById('orders-tbody');
                    ordersTbody.innerHTML = ''; // Clear previous orders

                    // Limit to the 4 most recent orders
                    const recentOrders = orders.slice(0, 4);

                    // Loop through recent orders and display them
                    recentOrders.forEach(order => {
                        const row = document.createElement('tr');

                        // Add cells for each order
                        row.innerHTML = `
                            <td>#${order.order_id}</td>
                            <td>${order.username}</td> <!-- Display client name -->
                            <td>${new Date(order.created_at).toLocaleDateString('en-US')}</td>
                            <td>${order.total_price.toFixed(2)}€</td>
                        `;

                        // Add the row to the table
                        ordersTbody.appendChild(row);
                    });
                })
                .catch(error => {
                    console.error('Error fetching recent orders:', error);
                });
        }

        // Function to get the average cart price
        function getAverageCartPrice() {
            fetch('http://localhost:3000/api/average-cart-price') // API URL
                .then(response => response.json())
                .then(data => {
                    const avgCartPrice = data.avgCartPrice;
                    // Update the stat on the admin.html page
                    document.getElementById('avg-cart-price').textContent = avgCartPrice.toFixed(2) + '€';
                })
                .catch(error => {
                    console.error('Error fetching average cart price:', error);
                });
        }

        // Function to get the number of clients
        function getClientsCount() {
            fetch('http://localhost:3000/api/clients-count') // API URL
                .then(response => response.json())
                .then(data => {
                    const clientCount = data.clientCount;
                    // Update the stat on the admin.html page
                    document.getElementById('clients-count').textContent = clientCount;
                })
                .catch(error => {
                    console.error('Error fetching clients count:', error);
                });
        }

        // Function to get the number of orders
        function getOrdersCount() {
            fetch('http://localhost:3000/api/orders-count') // API URL
                .then(response => response.json())
                .then(data => {
                    const orderCount = data.orderCount;
                    // Update the stat on the admin.html page
                    document.getElementById('orders-count').textContent = orderCount;
                })
                .catch(error => {
                    console.error('Error fetching orders count:', error);
                });
        }

        // Call functions when the page loads
        window.onload = function() {
            loadRecentOrders();
            getClientsCount();
            getOrdersCount();
            getAverageCartPrice();
        };
    </script>

    <script src="theme.js"></script>
    <!-- Theme Toggle Button -->
    <div id="theme-toggle">
        <button id="theme-toggle-btn" title="Change Theme">
            <i class="bx bx-sun"></i>
        </button>
    </div>
</body>

</html>