rstmcanada/undefined
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 - SignaSphere AI</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/chart.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');14 15 * {16 font-family: 'Inter', sans-serif;17 }18 19 .sidebar {20 width: 280px;21 transition: all 0.3s ease;22 }23 24 .main-content {25 margin-left: 280px;26 transition: all 0.3s ease;27 }28 29 .stat-card {30 transition: transform 0.2s ease;31 }32 33 .stat-card:hover {34 transform: translateY(-2px);35 }36 37 .document-item:hover {38 background-color: #f9fafb;39 }40 41 @media (max-width: 768px) {42 .sidebar {43 transform: translateX(-100%);44 position: fixed;45 z-index: 50;46 height: 100vh;47 }48 49 .sidebar.active {50 transform: translateX(0);51 }52 53 .main-content {54 margin-left: 0;55 }56 }57 </style>58</head>59<body class="bg-gray-50 min-h-screen">60 <!-- Mobile Menu Button -->61 <div class="md:hidden fixed top-4 left-4 z-50">62 <button id="mobile-menu-btn" class="p-2 bg-white rounded-lg shadow-md">63 <i data-feather="menu" class="h-6 w-6 text-gray-700"></i>64 </button>65 </div>66 67 <!-- Sidebar -->68 <div class="sidebar bg-white shadow-lg fixed h-screen overflow-y-auto">69 <div class="p-6 border-b border-gray-200">70 <div class="flex items-center">71 <i data-feather="edit-3" class="h-8 w-8 text-primary-600"></i>72 <span class="ml-2 text-xl font-bold text-gray-900">SignaSphere AI</span>73 </div>74 </div>75 76 <nav class="p-4 space-y-2">77 <a href="/dashboard.html" class="flex items-center px-4 py-3 bg-primary-50 text-primary-600 rounded-lg font-medium">78 <i data-feather="home" class="h-5 w-5 mr-3"></i>79 Dashboard80 </a>81 <a href="/documents.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">82 <i data-feather="file-text" class="h-5 w-5 mr-3"></i>83 Documents84 </a>85 <a href="/templates.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">86 <i data-feather="layers" class="h-5 w-5 mr-3"></i>87 Templates88 </a>89 <a href="/signatures.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">90 <i data-feather="edit" class="h-5 w-5 mr-3"></i>91 My Signature92 </a>93 <a href="/contacts.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">94 <i data-feather="users" class="h-5 w-5 mr-3"></i>95 Contacts96 </a>97 <a href="/settings.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">98 <i data-feather="settings" class="h-5 w-5 mr-3"></i>99 Settings100 </a>101 </nav>102 103 <div class="p-4 mt-8 border-t border-gray-200">104 <div class="flex items-center p-4 bg-gray-50 rounded-lg">105 <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">106 <span class="text-white font-semibold">JD</span>107 </div>108 <div class="ml-3">109 <p class="text-sm font-medium text-gray-900">John Doe</p>110 <p class="text-xs text-gray-500">john@example.com</p>111 </div>112 </div>113 <a href="/index.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mt-2">114 <i data-feather="log-out" class="h-5 w-5 mr-3"></i>115 Sign Out116 </a>117 </div>118 </div>119 120 <!-- Main Content -->121 <div class="main-content min-h-screen">122 <div class="p-6 md:p-8">123 <!-- Header -->124 <div class="flex justify-between items-center mb-8">125 <div>126 <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Welcome back, John!</h1>127 <p class="text-gray-600">Here's your document signing activity overview</p>128 </div>129 <a href="/upload.html" class="bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition duration-200 font-semibold flex items-center">130 <i data-feather="plus" class="h-5 w-5 mr-2"></i>131 New Document132 </a>133 </div>134 135 <!-- Stats Cards -->136 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">137 <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">138 <div class="flex items-center">139 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">140 <i data-feather="file-text" class="h-6 w-6 text-blue-600"></i>141 </div>142 <div>143 <p class="text-2xl font-bold text-gray-900">24</p>144 <p class="text-sm text-gray-600">Total Documents</p>145 </div>146 </div>147 </div>148 149 <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">150 <div class="flex items-center">151 <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">152 <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i>153 </div>154 <div>155 <p class="text-2xl font-bold text-gray-900">18</p>156 <p class="text-sm text-gray-600">Completed</p>157 </div>158 </div>159 </div>160 161 <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">162 <div class="flex items-center">163 <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">164 <i data-feather="clock" class="h-6 w-6 text-yellow-600"></i>165 </div>166 <div>167 <p class="text-2xl font-bold text-gray-900">4</p>168 <p class="text-sm text-gray-600">Pending</p>169 </div>170 </div>171 </div>172 173 <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">174 <div class="flex items-center">175 <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">176 <i data-feather="x-circle" class="h-6 w-6 text-red-600"></i>177 </div>178 <div>179 <p class="text-2xl font-bold text-gray-900">2</p>180 <p class="text-sm text-gray-600">Declined</p>181 </div>182 </div>183 </div>184 </div>185 186 <!-- Charts & Recent Activity -->187 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">188 <!-- Activity Chart -->189 <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">190 <h3 class="text-lg font-semibold text-gray-900 mb-4">Signing Activity</h3>191 <canvas id="activityChart" height="300"></canvas>192 </div>193 194 <!-- Status Distribution -->195 <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">196 <h3 class="text-lg font-semibold text-gray-900 mb-4">Document Status</h3>197 <canvas id="statusChart" height="300"></canvas>198 </div>199 </div>200 201 <!-- Recent Documents -->202 <div class="bg-white rounded-xl shadow-sm border border-gray-200">203 <div class="p-6 border-b border-gray-200">204 <h3 class="text-lg font-semibold text-gray-900">Recent Documents</h3>205 </div>206 207 <div class="divide-y divide-gray-200">208 <!-- Document 1 -->209 <div class="document-item p-6 hover:bg-gray-50 cursor-pointer">210 <div class="flex items-center justify-between">211 <div class="flex items-center">212 <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4">213 <i data-feather="file-text" class="h-5 w-5 text-blue-600"></i>214 </div>215 <div>216 <h4 class="font-medium text-gray-900">Employment Contract - Sarah Johnson</h4>217 <p class="text-sm text-gray-600">Created 2 hours ago</p>218 </div>219 </div>220 <div class="flex items-center space-x-4">221 <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Completed</span>222 <button class="p-2 text-gray-400 hover:text-gray-600">223 <i data-feather="more-vertical" class="h-4 w-4"></i>224 </button>225 </div>226 </div>227 </div>228 229 <!-- Document 2 -->230 <div class="document-item p-6 hover:bg-gray-50 cursor-pointer">231 <div class="flex items-center justify-between">232 <div class="flex items-center">233 <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">234 <i data-feather="file-text" class="h-5 w-5 text-yellow-600"></i>235 </div>236 <div>237 <h4 class="font-medium text-gray-900">NDA Agreement - TechCorp Inc.</h4>238 <p class="text-sm text-gray-600">Created 1 day ago</p>239 </div>240 </div>241 <div class="flex items-center space-x-4">242 <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Pending</span>243 <button class="p-2 text-gray-400 hover:text-gray-600">244 <i data-feather="more-vertical" class="h-4 w-4"></i>245 </button>246 </div>247 </div>248 </div>249 250 <!-- Document 3 -->251 <div class="document-item p-6 hover:bg-gray-50 cursor-pointer">252 <div class="flex items-center justify-between">253 <div class="flex items-center">254 <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4">255 <i data-feather="file-text" class="h-5 w-5 text-blue-600"></i>256 </div>257 <div>258 <h4 class="font-medium text-gray-900">Real Estate Purchase Agreement</h4>259 <p class="text-sm text-gray-600">Created 3 days ago</p>260 </div>261 </div>262 <div class="flex items-center space-x-4">263 <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">In Progress</span>264 <button class="p-2 text-gray-400 hover:text-gray-600">265 <i data-feather="more-vertical" class="h-4 w-4"></i>266 </button>267 </div>268 </div>269 </div>270 </div>271 272 <div class="p-6 border-t border-gray-200">273 <a href="/documents.html" class="text-primary-600 hover:text-primary-700 font-medium flex items-center justify-center">274 View All Documents275 <i data-feather="arrow-right" class="h-4 w-4 ml-2"></i>276 </a>277 </div>278 </div>279 </div>280 </div>281 282 <script>283 // Mobile menu toggle284 document.getElementById('mobile-menu-btn').addEventListener('click', function() {285 document.querySelector('.sidebar').classList.toggle('active');286 });287 288 // Initialize charts289 feather.replace();290 291 // Activity Chart292 const activityCtx = document.getElementById('activityChart').getContext('2d');293 new Chart(activityCtx, {294 type: 'line',295 data: {296 labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],297 datasets: [{298 label: 'Documents Signed',299 data: [12, 19, 8, 15, 22, 18, 14],300 borderColor: '#3b82f6',301 backgroundColor: 'rgba(59, 130, 246, 0.1)',302 tension: 0.4,303 fill: true304 }]305 },306 options: {307 responsive: true,308 plugins: {309 legend: {310 display: false311 }312 },313 scales: {314 y: {315 beginAtZero: true316 }317 }318 }319 });320 321 // Status Chart322 const statusCtx = document.getElementById('statusChart').getContext('2d');323 new Chart(statusCtx, {324 type: 'doughnut',325 data: {326 labels: ['Completed', 'Pending', 'In Progress', 'Declined'],327 datasets: [{328 data: [18, 4, 2, 2],329 backgroundColor: [330 '#10b981',331 '#f59e0b',332 '#3b82f6',333 '#ef4444'334 ]335 }]336 },337 options: {338 responsive: true,339 plugins: {340 legend: {341 position: 'bottom'342 }343 }344 }345 });346 </script>347</body>348</html>