buddyplease/proptech-connect-hub
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>Investor Dashboard - PropTech Connect</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 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');14 body { font-family: 'Inter', sans-serif; }15 .sidebar { transition: all 0.3s ease; }16 .dashboard-card { transition: all 0.3s ease; }17 .dashboard-card:hover { transform: translateY(-2px); }18 .royal-blue-bg { background-color: #1e3a8a; }19 .royal-blue-text { color: #1e3a8a; }20</style>21</head>22<body class="bg-gray-100">23 <div class="flex h-screen">24 <!-- Sidebar -->25 <div class="sidebar bg-white w-64 shadow-lg">26 <div class="p-6 border-b border-gray-200">27 <div class="flex items-center">28 <i data-feather="home" class="h-6 w-6 text-blue-700"></i>29 <span class="ml-2 text-xl font-bold">PropTech Connect</span>30 </div>31 </div>32<nav class="p-4">33 <ul class="space-y-2">34 <li><a href="dashboard.html" class="flex items-center p-3 bg-blue-50 text-blue-700 rounded-lg">35 <i data-feather="grid" class="w-5 h-5 mr-3"></i>36 Dashboard37 </a></li>38 <li><a href="my-properties.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">39 <i data-feather="home" class="w-5 h-5 mr-3"></i>40 My Properties41 </a></li>42 <li><a href="investments.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">43 <i data-feather="trending-up" class="w-5 h-5 mr-3"></i>44 Investments45 </a></li>46 <li><a href="market.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">47 <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>48 Market Analysis49 </a></li>50 <li><a href="documents.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">51 <i data-feather="file-text" class="w-5 h-5 mr-3"></i>52 Documents53 </a></li>54 <li><a href="settings.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">55 <i data-feather="settings" class="w-5 h-5 mr-3"></i>56 Settings57 </a></li>58 <li><a href="index.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">59 <i data-feather="arrow-left" class="w-5 h-5 mr-3"></i>60 Back to Home61 </a></li>62 </ul>63</nav>64 </div>65 66 <!-- Main Content -->67 <div class="flex-1 flex flex-col overflow-hidden">68 <!-- Header -->69 <header class="bg-white shadow-sm z-10">70 <div class="flex items-center justify-between px-6 py-4">71 <div class="flex items-center">72 <h1 class="text-2xl font-semibold text-gray-900">Investor Dashboard</h1>73 </div>74 <div class="flex items-center space-x-4">75 <div class="relative">76 <i data-feather="bell" class="w-6 h-6 text-gray-500"></i>77 </div>78 <div class="flex items-center">79 <img src="http://static.photos/people/40x40/10" alt="Profile" class="w-8 h-8 rounded-full">80 <span class="ml-2 text-sm font-medium text-gray-700">Ahmed Al-Mansoori</span>81 </div>82 </div>83 </div>84 </header>85 86 <!-- Dashboard Content -->87 <main class="flex-1 overflow-y-auto p-6">88 <!-- Portfolio Overview -->89 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">90 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">91 <div class="flex items-center justify-between">92 <div>93 <p class="text-sm font-medium text-gray-600">Total Portfolio Value</p>94 <p class="text-2xl font-bold text-gray-900">$4,750,000</p>95 <p class="text-sm text-green-600 mt-1">+12.5% this quarter</p>96 </div>97 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">98 <i data-feather="dollar-sign" class="w-6 h-6 text-blue-700"></i>99 </div>100 </div>101</div>102 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">103 <div class="flex items-center justify-between">104 <div>105 <p class="text-sm font-medium text-gray-600">Active Investments</p>106 <p class="text-2xl font-bold text-gray-900">8</div>107 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">108 <i data-feather="briefcase" class="w-6 h-6 text-blue-700"></i>109</div>110 </div>111 </div>112 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">113 <div class="flex items-center justify-between">114 <div>115 <p class="text-sm font-medium text-gray-600">ROI Average</p>116 <p class="text-2xl font-bold text-gray-900">18.2%</p>117 <p class="text-sm text-green-600 mt-1">+2.3% vs last period</p>118 </div>119 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">120 <i data-feather="trending-up" class="w-6 h-6 text-blue-700"></i>121</div>122 </div>123 </div>124 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">125 <div class="flex items-center justify-between">126 <div>127 <p class="text-sm font-medium text-gray-600">Properties Owned</p>128 <p class="text-2xl font-bold text-gray-900">12</p>129 <p class="text-sm text-gray-600 mt-1">Across 3 countries</p>130 </div>131 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">132 <i data-feather="map-pin" class="w-6 h-6 text-blue-700"></i>133</div>134 </div>135 </div>136 </div>137 138 <!-- Charts and Analytics -->139 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">140 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">141 <h3 class="text-lg font-semibold text-gray-900 mb-4">Portfolio Performance</h3>142 <canvas id="performanceChart" class="w-full h-64"></canvas>143 </div>144 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">145 <h3 class="text-lg font-semibold text-gray-900 mb-4">Market Trends</h3>146 <canvas id="marketTrendsChart" class="w-full h-64"></canvas>147 </div>148 </div>149 150 <!-- Recent Activity -->151 <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">152 <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>153 <div class="space-y-4">154 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">155 <div class="flex items-center">156 <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">157 <i data-feather="home" class="w-4 h-4 text-blue-700"></i>158</div>159 <div class="ml-4">160 <p class="text-sm font-medium text-gray-900">Property Purchase Completed</p>161 <p class="text-xs text-gray-600">Luxury Apartment - Dubai Marina</div>162 <div class="text-right">163 <p class="text-sm font-medium text-green-600">+$850,000</p>164 <p class="text-xs text-gray-600">2 hours ago</p>165 </div>166 </div>167 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">168 <div class="flex items-center">169 <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">170 <i data-feather="trending-up" class="w-4 h-4 text-blue-700"></i>171</div>172 <div class="ml-4">173 <p class="text-sm font-medium text-gray-900">Rental Income Received</p>174 <p class="text-xs text-gray-600">Commercial Office - Doha</div>175 <div class="text-right">176 <p class="text-sm font-medium text-green-600">+$25,000</p>177 <p class="text-xs text-gray-600">1 day ago</p>178 </div>179 </div>180 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">181 <div class="flex items-center">182 <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">183 <i data-feather="file-text" class="w-4 h-4 text-blue-700"></i>184</div>185 <div class="ml-4">186 <p class="text-sm font-medium text-gray-900">Document Verification</p>187 <p class="text-xs text-gray-600">Property in Riyadh</div>188 <div class="text-right">189 <p class="text-sm font-medium text-yellow-600">Pending</p>190 <p class="text-xs text-gray-600">3 days ago</p>191 </div>192 </div>193 </div>194 </div>195 196 <!-- Quick Actions -->197 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">198 <a href="properties.html" class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300 block">199 <i data-feather="plus" class="w-8 h-8 text-blue-700 mb-3"></i>200 <h4 class="font-semibold text-gray-900 mb-2">Add New Investment</h4>201 <p class="text-sm text-gray-600">Explore new property opportunities</p>202 </a>203 <a href="market.html" class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300 block">204 <i data-feather="search" class="w-8 h-8 text-blue-700 mb-3"></i>205 <h4 class="font-semibold text-gray-900 mb-2">Market Analysis</h4>206 <p class="text-sm text-gray-600">Get detailed market insights</p>207 </a>208 <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300" onclick="generateReport()">209 <i data-feather="download" class="w-8 h-8 text-blue-700 mb-3"></i>210 <h4 class="font-semibold text-gray-900 mb-2">Generate Reports</h4>211 <p class="text-sm text-gray-600">Download portfolio performance</p>212 </button>213</div>214 </main>215 </div>216 </div>217 218 <script>219 document.addEventListener('DOMContentLoaded', function() {220 // Performance Chart221 const performanceCtx = document.getElementById('performanceChart').getContext('2d');222 // Check if user is logged in223 if (!localStorage.getItem('userLoggedIn')) {224 window.location.href = 'login.html';225 }226 227 function generateReport() {228 alert('Portfolio report will be generated and downloaded shortly...');229 // Simulate report generation230 setTimeout(() => {231 const link = document.createElement('a');232 link.download = 'portfolio-report.pdf';233 link.href = '#';234 link.click();235 }, 1000);236 }237 238 document.addEventListener('DOMContentLoaded', function() {239 // Performance Chart240 const performanceCtx = document.getElementById('performanceChart');241 if (performanceCtx) {242 new Chart(performanceCtx, {243 type: 'line',244 data: {245 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],246 datasets: [{247 label: 'Portfolio Value ($)',248 data: [4200000, 4350000, 4500000, 4600000, 4700000, 4750000],249 borderColor: '#1e3a8a',250 backgroundColor: 'rgba(30, 58, 138, 0.1)',251 tension: 0.4,252 fill: true253 }]254 },255 options: {256 responsive: true,257 maintainAspectRatio: false,258 plugins: {259 legend: {260 display: false261 }262 },263 scales: {264 y: {265 beginAtZero: false,266 ticks: {267 callback: function(value) {268 return '</script>269</body>270</html>271 + (value / 1000000).toFixed(1) + 'M'272 }273 }274 }275 });276 277 // Market Trends Chart278 const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');279 new Chart(marketTrendsCtx, {280 type: 'bar',281 data: {282 labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],283 datasets: [{284 label: 'Market Growth %',285 data: [12.5, 15.2, 8.7, 11.3, 9.8],286 backgroundColor: [287 'rgba(79, 70, 229, 0.8)',288 'rgba(79, 70, 229, 0.6)',289 'rgba(79, 70, 229, 0.4)',290 'rgba(79, 70, 229, 0.6)',291 'rgba(79, 70, 229, 0.8)'292 ],293 borderColor: '#4f46e5',294 borderWidth: 1295 }]296 },297 options: {298 responsive: true,299 maintainAspectRatio: false,300 plugins: {301 legend: {302 display: false303 }304 },305 scales: {306 y: {307 beginAtZero: true,308 max: 20,309 ticks: {310 callback: function(value) {311 return value + '%';312 }313 }314 }315 }316 }317 });318// Initialize Feather Icons319 feather.replace();320 });321 </script>322</body>323</html>324 + (value / 1000000).toFixed(1) + 'M';325 }326 }327 }328 }329 }330 });331 }332 333 // Market Trends Chart334 const marketTrendsCtx = document.getElementById('marketTrendsChart');335 if (marketTrendsCtx) {336 new Chart(marketTrendsCtx, {337 type: 'bar',338 data: {339 labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],340 datasets: [{341 label: 'Market Growth %',342 data: [12.5, 15.2, 8.7, 11.3, 9.8],343 backgroundColor: [344 'rgba(30, 58, 138, 0.8)',345 'rgba(30, 58, 138, 0.6)',346 'rgba(30, 58, 138, 0.4)',347 'rgba(30, 58, 138, 0.6)',348 'rgba(30, 58, 138, 0.8)'349 ],350 borderColor: '#1e3a8a',351 borderWidth: 1352 }]353 },354 options: {355 responsive: true,356 maintainAspectRatio: false,357 plugins: {358 legend: {359 display: false360 }361 },362 scales: {363 y: {364 beginAtZero: true,365 max: 20,366 ticks: {367 callback: function(value) {368 return value + '%';369 }370 }371 }372 }373 }374 });375 }376 377 // Initialize Feather Icons378 feather.replace();379 });380</script>381</body>382</html>383 + (value / 1000000).toFixed(1) + 'M'384 }385 }386 }387 });388 389 // Market Trends Chart390 const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');391 new Chart(marketTrendsCtx, {392 type: 'bar',393 data: {394 labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],395 datasets: [{396 label: 'Market Growth %',397 data: [12.5, 15.2, 8.7, 11.3, 9.8],398 backgroundColor: [399 'rgba(79, 70, 229, 0.8)',400 'rgba(79, 70, 229, 0.6)',401 'rgba(79, 70, 229, 0.4)',402 'rgba(79, 70, 229, 0.6)',403 'rgba(79, 70, 229, 0.8)'404 ],405 borderColor: '#4f46e5',406 borderWidth: 1407 }]408 },409 options: {410 responsive: true,411 maintainAspectRatio: false,412 plugins: {413 legend: {414 display: false415 }416 },417 scales: {418 y: {419 beginAtZero: true,420 max: 20,421 ticks: {422 callback: function(value) {423 return value + '%';424 }425 }426 }427 }428 }429 });430// Initialize Feather Icons431 feather.replace();432 });433 </script>434</body>435</html>436