msb-android/orderflow
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Admin Dashboard - OrderFlow</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>12 <style>13 :root {14 --undefined-primary: #6366f1;15 --undefined-secondary: #8b5cf6;16 }17 .dark-mode {18 background-color: #0f172a;19 color: #e2e8f0;20 }21 .bg-undefined-500 {22 background-color: var(--undefined-primary);23 }24 .sidebar {25 transition: all 0.3s ease;26 }27 .vendor-card {28 transition: transform 0.3s ease;29 }30 .vendor-card:hover {31 transform: translateY(-3px);32 }33 </style>34</head>35<body class="dark-mode">36 <div class="flex min-h-screen">37 <!-- Sidebar -->38 <div class="sidebar w-64 bg-slate-900 border-r border-slate-700 flex flex-col fixed h-screen">39 <div class="p-4 border-b border-slate-700">40 <div class="flex items-center space-x-2">41 <i data-feather="package" class="text-undefined-500"></i>42 <h1 class="text-xl font-bold">OrderFlow</h1>43 </div>44 </div>45 <nav class="flex-1 p-4 overflow-y-auto">46 <ul class="space-y-2">47 <li>48 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800">49 <i data-feather="home"></i>50 <span>Dashboard</span>51 </a>52 </li>53 <li>54 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-undefined-500 text-white">55 <i data-feather="users"></i>56 <span>Vendors</span>57 </a>58 </li>59 <li>60 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800">61 <i data-feather="shopping-cart"></i>62 <span>Orders</span>63 </a>64 </li>65 <li>66 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800">67 <i data-feather="bar-chart-2"></i>68 <span>Analytics</span>69 </a>70 </li>71 <li>72 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800">73 <i data-feather="settings"></i>74 <span>System Settings</span>75 </a>76 </li>77 </ul>78 </nav>79 <div class="p-4 border-t border-slate-700">80 <div class="flex items-center space-x-3">81 <div class="w-10 h-10 rounded-full bg-undefined-500 flex items-center justify-center">82 <i data-feather="user" class="text-white"></i>83 </div>84 <div>85 <div class="font-medium">Admin User</div>86 <div class="text-sm text-slate-400">admin@example.com</div>87 </div>88 </div>89 </div>90 </div>91 <!-- Main Content -->92 <div class="flex-1 flex flex-col ml-64">93<!-- Top Bar -->94 <header class="bg-slate-900 border-b border-slate-700 p-4 flex justify-between items-center">95 <h2 class="text-xl font-bold">Vendor Management</h2>96 <div class="flex items-center space-x-4">97 <button class="p-2 rounded-full hover:bg-slate-800 relative">98 <i data-feather="bell"></i>99 <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>100 </button>101 <button class="p-2 rounded-full hover:bg-slate-800">102 <i data-feather="search"></i>103 </button>104 </div>105 </header>106 107 <!-- Stats Overview -->108 <main class="flex-1 p-6 overflow-y-auto">109 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">110 <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">111 <div class="flex justify-between items-start">112 <div>113 <div class="text-slate-400">Total Vendors</div>114 <div class="text-3xl font-bold mt-2">156</div>115 </div>116 <div class="p-3 rounded-lg bg-indigo-500/20">117 <i data-feather="users" class="text-undefined-500"></i>118 </div>119 </div>120 <div class="mt-4 text-green-500 flex items-center">121 <i data-feather="trending-up" class="mr-1"></i>122 <span>5 new this month</span>123 </div>124 </div>125 <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">126 <div class="flex justify-between items-start">127 <div>128 <div class="text-slate-400">Active Vendors</div>129 <div class="text-3xl font-bold mt-2">142</div>130 </div>131 <div class="p-3 rounded-lg bg-green-500/20">132 <i data-feather="activity" class="text-green-500"></i>133 </div>134 </div>135 <div class="mt-4 text-green-500 flex items-center">136 <i data-feather="trending-up" class="mr-1"></i>137 <span>3% from last month</span>138 </div>139 </div>140 <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">141 <div class="flex justify-between items-start">142 <div>143 <div class="text-slate-400">Pending Applications</div>144 <div class="text-3xl font-bold mt-2">14</div>145 </div>146 <div class="p-3 rounded-lg bg-amber-500/20">147 <i data-feather="clock" class="text-amber-500"></i>148 </div>149 </div>150 <div class="mt-4 text-amber-500 flex items-center">151 <i data-feather="trending-down" class="mr-1"></i>152 <span>2 less than last week</span>153 </div>154 </div>155 </div>156 157 <!-- Vendor Management -->158 <div class="bg-slate-800 rounded-xl border border-slate-700 mb-8">159 <div class="p-6 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">160 <h3 class="text-lg font-bold">Vendor List</h3>161 <div class="flex space-x-3 w-full md:w-auto">162 <div class="relative flex-1 md:flex-none">163 <input type="text" placeholder="Search vendors..." class="bg-slate-700 border border-slate-600 rounded-lg pl-10 pr-4 py-2 w-full md:w-64 focus:outline-none focus:ring-2 focus:ring-undefined-500">164 <i data-feather="search" class="absolute left-3 top-2.5 text-slate-400"></i>165 </div>166 <button class="bg-undefined-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg flex items-center">167 <i data-feather="plus" class="mr-2"></i>168 <span>Add Vendor</span>169 </button>170 </div>171 </div>172 <div class="overflow-x-auto">173 <table class="w-full">174 <thead>175 <tr class="text-left text-slate-400 border-b border-slate-700">176 <th class="p-4">Vendor</th>177 <th class="p-4">Email</th>178 <th class="p-4">Products</th>179 <th class="p-4">Orders</th>180 <th class="p-4">Status</th>181 <th class="p-4">Actions</th>182 </tr>183 </thead>184 <tbody>185 <tr class="vendor-card border-b border-slate-700 hover:bg-slate-750">186 <td class="p-4">187 <div class="flex items-center space-x-3">188 <div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center">189 <span class="font-bold text-undefined-500">T</span>190 </div>191 <div>192 <div class="font-medium">TechGadgets Inc.</div>193 <div class="text-slate-400 text-sm">ID: VG-00124</div>194 </div>195 </div>196 </td>197 <td class="p-4">contact@techgadgets.com</td>198 <td class="p-4">42</td>199 <td class="p-4">1,248</td>200 <td class="p-4">201 <span class="px-2 py-1 rounded-full text-xs bg-green-500/20 text-green-500">Active</span>202 </td>203 <td class="p-4">204 <div class="flex space-x-2">205 <button class="p-2 rounded-lg hover:bg-slate-700">206 <i data-feather="eye"></i>207 </button>208 <button class="p-2 rounded-lg hover:bg-slate-700">209 <i data-feather="edit"></i>210 </button>211 <button class="p-2 rounded-lg hover:bg-slate-700 text-red-500">212 <i data-feather="trash-2"></i>213 </button>214 </div>215 </td>216 </tr>217 <tr class="vendor-card border-b border-slate-700 hover:bg-slate-750">218 <td class="p-4">219 <div class="flex items-center space-x-3">220 <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">221 <span class="font-bold text-purple-500">F</span>222 </div>223 <div>224 <div class="font-medium">FashionHub</div>225 <div class="text-slate-400 text-sm">ID: VG-00357</div>226 </div>227 </div>228 </td>229 <td class="p-4">info@fashionhub.com</td>230 <td class="p-4">86</td>231 <td class="p-4">2,105</td>232 <td class="p-4">233 <span class="px-2 py-1 rounded-full text-xs bg-green-500/20 text-green-500">Active</span>234 </td>235 <td class="p-4">236 <div class="flex space-x-2">237 <button class="p-2 rounded-lg hover:bg-slate-700">238 <i data-feather="eye"></i>239 </button>240 <button class="p-2 rounded-lg hover:bg-slate-700">241 <i data-feather="edit"></i>242 </button>243 <button class="p-2 rounded-lg hover:bg-slate-700 text-red-500">244 <i data-feather="trash-2"></i>245 </button>246 </div>247 </td>248 </tr>249 <tr class="vendor-card border-b border-slate-700 hover:bg-slate-750">250 <td class="p-4">251 <div class="flex items-center space-x-3">252 <div class="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">253 <span class="font-bold text-amber-500">H</span>254 </div>255 <div>256 <div class="font-medium">HomeEssentials</div>257 <div class="text-slate-400 text-sm">ID: VG-00489</div>258 </div>259 </div>260 </td>261 <td class="p-4">support@homeessentials.com</td>262 <td class="p-4">32</td>263 <td class="p-4">876</td>264 <td class="p-4">265 <span class="px-2 py-1 rounded-full text-xs bg-amber-500/20 text-amber-500">Pending</span>266 </td>267 <td class="p-4">268 <div class="flex space-x-2">269 <button class="p-2 rounded-lg hover:bg-slate-700">270 <i data-feather="eye"></i>271 </button>272 <button class="p-2 rounded-lg hover:bg-slate-700">273 <i data-feather="edit"></i>274 </button>275 <button class="p-2 rounded-lg hover:bg-slate-700 text-red-500">276 <i data-feather="trash-2"></i>277 </button>278 </div>279 </td>280 </tr>281 </tbody>282 </table>283 </div>284 <div class="p-4 flex justify-between items-center">285 <div class="text-slate-400">Showing 1 to 3 of 156 vendors</div>286 <div class="flex space-x-2">287 <button class="p-2 rounded-lg bg-slate-700 hover:bg-slate-600">288 <i data-feather="chevron-left"></i>289 </button>290 <button class="p-2 rounded-lg bg-slate-700 hover:bg-slate-600">291 <i data-feather="chevron-right"></i>292 </button>293 </div>294 </div>295 </div>296 297 <!-- System Performance -->298 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">299 <div class="bg-slate-800 rounded-xl border border-slate-700">300 <div class="p-6 border-b border-slate-700">301 <h3 class="text-lg font-bold">System Performance</h3>302 </div>303 <div class="p-6">304 <canvas id="performanceChart" height="300"></canvas>305 </div>306 </div>307 <div class="bg-slate-800 rounded-xl border border-slate-700">308 <div class="p-6 border-b border-slate-700">309 <h3 class="text-lg font-bold">Recent Activity</h3>310 </div>311 <div class="p-6">312 <div class="space-y-4">313 <div class="flex items-start space-x-3">314 <div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center flex-shrink-0 mt-1">315 <i data-feather="check-circle" class="text-green-500 w-4 h-4"></i>316 </div>317 <div>318 <div class="font-medium">New vendor registered</div>319 <div class="text-slate-400 text-sm">TechGadgets Inc. has been approved</div>320 <div class="text-slate-500 text-xs mt-1">2 hours ago</div>321 </div>322 </div>323 <div class="flex items-start space-x-3">324 <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center flex-shrink-0 mt-1">325 <i data-feather="package" class="text-blue-500 w-4 h-4"></i>326 </div>327 <div>328 <div class="font-medium">Order completed</div>329 <div class="text-slate-400 text-sm">Order #ORD-7841 was completed by vendor</div>330 <div class="text-slate-500 text-xs mt-1">5 hours ago</div>331 </div>332 </div>333 <div class="flex items-start space-x-3">334 <div class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center flex-shrink-0 mt-1">335 <i data-feather="alert-triangle" class="text-amber-500 w-4 h-4"></i>336 </div>337 <div>338 <div class="font-medium">Inventory alert</div>339 <div class="text-slate-400 text-sm">Wireless Headphones stock is low</div>340 <div class="text-slate-500 text-xs mt-1">1 day ago</div>341 </div>342 </div>343 </div>344 </div>345 </div>346 </div>347 </main>348 </div>349 </div>350 351 <script>352 // Initialize Feather Icons353 feather.replace();354 355 // Initialize Chart.js356 const ctx = document.getElementById('performanceChart').getContext('2d');357 const performanceChart = new Chart(ctx, {358 type: 'line',359 data: {360 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],361 datasets: [{362 label: 'Orders Processed',363 data: [1200, 1900, 1500, 2200, 1800, 2500],364 borderColor: '#6366f1',365 backgroundColor: 'rgba(99, 102, 241, 0.1)',366 borderWidth: 2,367 fill: true,368 tension: 0.4369 }, {370 label: 'Vendors Active',371 data: [80, 95, 110, 125, 140, 156],372 borderColor: '#8b5cf6',373 backgroundColor: 'rgba(139, 92, 246, 0.1)',374 borderWidth: 2,375 fill: true,376 tension: 0.4377 }]378 },379 options: {380 responsive: true,381 maintainAspectRatio: false,382 plugins: {383 legend: {384 labels: {385 color: '#e2e8f0'386 }387 }388 },389 scales: {390 y: {391 beginAtZero: true,392 grid: {393 color: 'rgba(255, 255, 255, 0.1)'394 },395 ticks: {396 color: '#94a3b8'397 }398 },399 x: {400 grid: {401 color: 'rgba(255, 255, 255, 0.1)'402 },403 ticks: {404 color: '#94a3b8'405 }406 }407 }408 }409 });410 </script>411</body>412</html>413 