Team Ai
Apppublic

msb-android/orderflow

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
admin-dashboard.html413 linesDownload Raw Back to root
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