gcoder824/subdocflow-smooth-document-request-system
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>Dashboard - SubDocFlow</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://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Poppins', sans-serif;15 }16 .sidebar {17 transition: all 0.3s ease;18 }19 .sidebar.collapsed {20 width: 80px;21 }22 .sidebar.collapsed .sidebar-text {23 display: none;24 }25 .sidebar.collapsed .sidebar-icon {26 margin-right: 0;27 }28 .main-content {29 transition: margin-left 0.3s ease;30 }31 .notification-dot {32 position: absolute;33 top: -2px;34 right: -2px;35 width: 12px;36 height: 12px;37 background-color: #ef4444;38 border-radius: 50%;39 border: 2px solid #fff;40 }41 </style>42</head>43<body class="bg-gray-50">44 <div class="flex h-screen">45 <!-- Sidebar -->46 <div class="sidebar bg-white shadow-md w-64 flex-shrink-0">47 <div class="p-4 border-b border-gray-200">48 <div class="flex items-center">49 <i data-feather="file-text" class="text-indigo-600 h-8 w-8"></i>50 <span class="sidebar-text ml-2 text-xl font-bold text-gray-900">SubDocFlow</span>51 </div>52 </div>53 <nav class="p-4">54 <ul class="space-y-2">55 <li>56 <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-50 text-indigo-700">57 <i data-feather="home" class="sidebar-icon h-5 w-5"></i>58 <span class="sidebar-text ml-3">Dashboard</span>59 </a>60 </li>61 <li>62 <a href="request_form.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">63 <i data-feather="file-plus" class="sidebar-icon h-5 w-5"></i>64 <span class="sidebar-text ml-3">New Request</span>65 </a>66 </li>67 <li>68 <a href="requests.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">69 <i data-feather="list" class="sidebar-icon h-5 w-5"></i>70 <span class="sidebar-text ml-3">My Requests</span>71 </a>72 </li>73 <li>74 <a href="notifications.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100 relative">75 <i data-feather="bell" class="sidebar-icon h-5 w-5"></i>76 <span class="sidebar-text ml-3">Notifications</span>77 <span class="notification-dot"></span>78 </a>79 </li>80 <li>81 <a href="profile.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">82 <i data-feather="user" class="sidebar-icon h-5 w-5"></i>83 <span class="sidebar-text ml-3">Profile</span>84 </a>85 </li>86 <li>87 <a href="settings.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">88 <i data-feather="settings" class="sidebar-icon h-5 w-5"></i>89 <span class="sidebar-text ml-3">Settings</span>90 </a>91 </li>92 </ul>93 <div class="mt-8 pt-4 border-t border-gray-200">94 <a href="login.html" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">95 <i data-feather="log-out" class="sidebar-icon h-5 w-5"></i>96 <span class="sidebar-text ml-3">Logout</span>97 </a>98 </div>99 </nav>100 </div>101 102 <!-- Main Content -->103 <div class="main-content flex-1 flex flex-col overflow-hidden">104 <!-- Header -->105 <header class="bg-white shadow-sm">106 <div class="flex items-center justify-between px-6 py-4">107 <div class="flex items-center">108 <button id="sidebar-toggle" class="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none">109 <i data-feather="menu"></i>110 </button>111 <h1 class="ml-4 text-xl font-semibold text-gray-900">Dashboard</h1>112 </div>113 <div class="flex items-center space-x-4">114 <button class="p-2 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none relative">115 <i data-feather="bell"></i>116 <span class="notification-dot"></span>117 </button>118 <div class="flex items-center">119 <img src="http://static.photos/people/200x200/1" alt="User" class="h-8 w-8 rounded-full">120 <span class="ml-2 text-sm font-medium text-gray-700">John Doe</span>121 </div>122 </div>123 </div>124 </header>125 126 <!-- Content -->127 <main class="flex-1 overflow-y-auto p-6 bg-gray-50">128 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">129 <!-- Stats Cards -->130 <div class="bg-white shadow rounded-lg p-6">131 <div class="flex items-center">132 <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">133 <i data-feather="file-text"></i>134 </div>135 <div class="ml-4">136 <h2 class="text-lg font-medium text-gray-900">Total Requests</h2>137 <p class="text-2xl font-bold text-gray-900">24</p>138 </div>139 </div>140 </div>141 <div class="bg-white shadow rounded-lg p-6">142 <div class="flex items-center">143 <div class="p-3 rounded-full bg-green-100 text-green-600">144 <i data-feather="check-circle"></i>145 </div>146 <div class="ml-4">147 <h2 class="text-lg font-medium text-gray-900">Completed</h2>148 <p class="text-2xl font-bold text-gray-900">18</p>149 </div>150 </div>151 </div>152 <div class="bg-white shadow rounded-lg p-6">153 <div class="flex items-center">154 <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">155 <i data-feather="clock"></i>156 </div>157 <div class="ml-4">158 <h2 class="text-lg font-medium text-gray-900">In Progress</h2>159 <p class="text-2xl font-bold text-gray-900">4</p>160 </div>161 </div>162 </div>163 <div class="bg-white shadow rounded-lg p-6">164 <div class="flex items-center">165 <div class="p-3 rounded-full bg-red-100 text-red-600">166 <i data-feather="alert-circle"></i>167 </div>168 <div class="ml-4">169 <h2 class="text-lg font-medium text-gray-900">Pending</h2>170 <p class="text-2xl font-bold text-gray-900">2</p>171 </div>172 </div>173 </div>174 </div>175 176 <!-- Recent Requests -->177 <div class="bg-white shadow rounded-lg p-6">178 <div class="flex items-center justify-between mb-6">179 <h2 class="text-lg font-medium text-gray-900">Recent Requests</h2>180 <a href="requests.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>181 </div>182 <div class="overflow-x-auto">183 <table class="min-w-full divide-y divide-gray-200">184 <thead class="bg-gray-50">185 <tr>186 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document</th>187 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Requested</th>188 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>189 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>190 </tr>191 </thead>192 <tbody class="bg-white divide-y divide-gray-200">193 <tr>194 <td class="px-6 py-4 whitespace-nowrap">195 <div class="text-sm font-medium text-gray-900">Business Permit</div>196 </td>197 <td class="px-6 py-4 whitespace-nowrap">198 <div class="text-sm text-gray-500">May 15, 2023</div>199 </td>200 <td class="px-6 py-4 whitespace-nowrap">201 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>202 </td>203 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">204 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>205 <a href="#" class="text-indigo-600 hover:text-indigo-900">Download</a>206 </td>207 </tr>208 <tr>209 <td class="px-6 py-4 whitespace-nowrap">210 <div class="text-sm font-medium text-gray-900">Amenities Permit</div>211 </td>212 <td class="px-6 py-4 whitespace-nowrap">213 <div class="text-sm text-gray-500">May 12, 2023</div>214 </td>215 <td class="px-6 py-4 whitespace-nowrap">216 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span>217 </td>218 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">219 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>220 </td>221 </tr>222 <tr>223 <td class="px-6 py-4 whitespace-nowrap">224 <div class="text-sm font-medium text-gray-900">Lot Title</div>225 </td>226 <td class="px-6 py-4 whitespace-nowrap">227 <div class="text-sm text-gray-500">May 10, 2023</div>228 </td>229 <td class="px-6 py-4 whitespace-nowrap">230 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>231 </td>232 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">233 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>234 <a href="#" class="text-indigo-600 hover:text-indigo-900">Download</a>235 </td>236 </tr>237 <tr>238 <td class="px-6 py-4 whitespace-nowrap">239 <div class="text-sm font-medium text-gray-900">Vehicle Ticket</div>240 </td>241 <td class="px-6 py-4 whitespace-nowrap">242 <div class="text-sm text-gray-500">May 8, 2023</div>243 </td>244 <td class="px-6 py-4 whitespace-nowrap">245 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Pending</span>246 </td>247 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">248 <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>249 </td>250 </tr>251 </tbody>252 </table>253 </div>254 </div>255 256 <!-- Quick Actions -->257 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">258 <div class="bg-white shadow rounded-lg p-6">259 <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>260 <div class="grid grid-cols-2 gap-4">261 <a href="request_form.html?document=business_permit" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 text-center">262 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600">263 <i data-feather="briefcase"></i>264 </div>265 <div class="mt-2 text-sm font-medium text-gray-900">Business Permit</div>266 </a>267 <a href="request_form.html?document=amenities_permit" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 text-center">268 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600">269 <i data-feather="home"></i>270 </div>271 <div class="mt-2 text-sm font-medium text-gray-900">Amenities Permit</div>272 </a>273 <a href="request_form.html?document=lot_title" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 text-center">274 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600">275 <i data-feather="map-pin"></i>276 </div>277 <div class="mt-2 text-sm font-medium text-gray-900">Lot Title</div>278 </a>279 <a href="request_form.html?document=vehicle_ticket" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 text-center">280 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600">281 <i data-feather="truck"></i>282 </div>283 <div class="mt-2 text-sm font-medium text-gray-900">Vehicle Ticket</div>284 </a>285 </div>286 </div>287 <div class="bg-white shadow rounded-lg p-6">288 <h2 class="text-lg font-medium text-gray-900 mb-4">Recent Notifications</h2>289 <div class="space-y-4">290 <div class="flex items-start">291 <div class="flex-shrink-0">292 <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">293 <i data-feather="check-circle" class="h-5 w-5"></i>294 </div>295 </div>296 <div class="ml-3">297 <p class="text-sm font-medium text-gray-900">Your Business Permit request has been approved</p>298 <p class="text-sm text-gray-500">Today, 10:30 AM</p>299 </div>300 </div>301 <div class="flex items-start">302 <div class="flex-shrink-0">303 <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">304 <i data-feather="info" class="h-5 w-5"></i>305 </div>306 </div>307 <div class="ml-3">308 <p class="text-sm font-medium text-gray-900">New document requirement added for Amenities Permit</p>309 <p class="text-sm text-gray-500">Yesterday, 3:45 PM</p>310 </div>311 </div>312 <div class="flex items-start">313 <div class="flex-shrink-0">314 <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">315 <i data-feather="clock" class="h-5 w-5"></i>316 </div>317 </div>318 <div class="ml-3">319 <p class="text-sm font-medium text-gray-900">Your Lot Title request is being processed</p>320 <p class="text-sm text-gray-500">May 10, 2023</p>321 </div>322 </div>323 </div>324 <div class="mt-4 text-center">325 <a href="notifications.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all notifications</a>326 </div>327 </div>328 </div>329 </main>330 </div>331 </div>332 333 <script>334 // Toggle sidebar335 document.getElementById('sidebar-toggle').addEventListener('click', function() {336 const sidebar = document.querySelector('.sidebar');337 sidebar.classList.toggle('collapsed');338 });339 340 // Initialize feather icons341 feather.replace();342 </script>343</body>344</html>345