Profshab/salesforce-sync-pro
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>User Dashboard | SalesForce Sync Pro</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 .sidebar {14 transition: all 0.3s ease;15 }16 .sidebar.collapsed {17 width: 80px;18 }19 .sidebar.collapsed .sidebar-text {20 display: none;21 }22 .sidebar.collapsed .menu-item {23 justify-content: center;24 }25 .content {26 transition: all 0.3s ease;27 }28 .content.expanded {29 margin-left: 80px;30 }31 .notification-badge {32 position: absolute;33 top: -5px;34 right: -5px;35 background-color: #ef4444;36 color: white;37 border-radius: 50%;38 width: 18px;39 height: 18px;40 display: flex;41 align-items: center;42 justify-content: center;43 font-size: 10px;44 font-weight: bold;45 }46 .customer-row.attended {47 background-color: #10b981;48 color: white;49 }50 .customer-row.not-reachable {51 background-color: #3b82f6;52 color: white;53 }54 </style>55</head>56<body class="bg-gray-100">57 <div class="flex h-screen">58 <!-- Sidebar -->59 <div class="sidebar bg-primary-600 text-white w-64 fixed h-full overflow-y-auto z-10">60 <div class="p-4 flex items-center justify-between border-b border-primary-500">61 <div class="flex items-center space-x-2">62 <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full object-cover">63 <span class="sidebar-text font-semibold">John Doe</span>64 </div>65 <button id="toggleSidebar" class="text-white hover:text-primary-200">66 <i data-feather="chevron-left"></i>67 </button>68 </div>69 70 <nav class="mt-6">71 <div class="px-4 py-2 text-xs uppercase font-semibold text-primary-200 tracking-wider sidebar-text">72 Main Navigation73 </div>74 75 <a href="Dashboard.php" class="flex items-center px-4 py-3 text-white bg-primary-700 menu-item">76 <i data-feather="home" class="w-5 h-5"></i>77 <span class="ml-3 sidebar-text">Dashboard</span>78 </a>79 80 <a href="Customer.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">81 <i data-feather="user-plus" class="w-5 h-5"></i>82 <span class="ml-3 sidebar-text">Register New Customer</span>83 </a>84 85 <a href="plan.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">86 <i data-feather="calendar" class="w-5 h-5"></i>87 <span class="ml-3 sidebar-text">Plan for Call</span>88 </a>89 90 <a href="Call_report.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">91 <i data-feather="phone-call" class="w-5 h-5"></i>92 <span class="ml-3 sidebar-text">Call Report</span>93 </a>94 95 <a href="Sales.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">96 <i data-feather="dollar-sign" class="w-5 h-5"></i>97 <span class="ml-3 sidebar-text">Sales</span>98 </a>99 100 <a href="Follow_up.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">101 <i data-feather="refresh-cw" class="w-5 h-5"></i>102 <span class="ml-3 sidebar-text">Follow Up</span>103 </a>104 105 <div class="px-4 py-2 mt-6 text-xs uppercase font-semibold text-primary-200 tracking-wider sidebar-text">106 Account107 </div>108 109 <a href="Profile.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">110 <i data-feather="user" class="w-5 h-5"></i>111 <span class="ml-3 sidebar-text">Profile</span>112 </a>113 114 <a href="../logout.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">115 <i data-feather="log-out" class="w-5 h-5"></i>116 <span class="ml-3 sidebar-text">Logout</span>117 </a>118 </nav>119 </div>120 121 <!-- Main Content -->122 <div class="content flex-1 ml-64 overflow-y-auto">123 <!-- Top Navigation -->124 <header class="bg-white shadow-sm">125 <div class="flex justify-between items-center px-6 py-4">126 <h1 class="text-2xl font-bold text-gray-800">SOLUTION PLUS SALES FORCE MANAGEMENT SYSTEM</h1>127 128 <div class="flex items-center space-x-4">129 <div class="relative">130 <button id="notificationBtn" class="text-gray-600 hover:text-primary-600 relative">131 <i data-feather="bell"></i>132 <span class="notification-badge">1</span>133 </button>134 <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-20">135 <div class="p-3 border-b">136 <h3 class="font-medium text-gray-800">Notifications</h3>137 </div>138 <div class="divide-y divide-gray-100 max-h-60 overflow-y-auto">139 <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50">140 <div class="bg-primary-100 p-2 rounded-full">141 <i data-feather="calendar" class="text-primary-600 w-4 h-4"></i>142 </div>143 <div class="ml-3">144 <p class="text-sm font-medium text-gray-800">You have 15 customers to call today</p>145 <p class="text-xs text-gray-500">Click to view</p>146 </div>147 </a>148 </div>149 <div class="p-2 text-center bg-gray-50">150 <a href="#" class="text-xs font-medium text-primary-600 hover:text-primary-500">View All</a>151 </div>152 </div>153 </div>154 155 <div class="relative">156 <button id="profileBtn" class="flex items-center space-x-2">157 <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full object-cover">158 <span class="text-sm font-medium text-gray-700 hidden md:inline">John Doe</span>159 <i data-feather="chevron-down" class="w-4 h-4 text-gray-500 hidden md:inline"></i>160 </button>161 <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20">162 <a href="Profile.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">163 <i data-feather="user" class="w-4 h-4 inline mr-2"></i> Profile164 </a>165 <a href="../logout.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">166 <i data-feather="log-out" class="w-4 h-4 inline mr-2"></i> Logout167 </a>168 </div>169 </div>170 </div>171 </div>172 </header>173 174 <!-- Dashboard Content -->175 <main class="p-6">176 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">177 <div class="bg-white rounded-xl shadow-sm p-6">178 <div class="flex items-center justify-between">179 <div>180 <p class="text-gray-500 text-sm font-medium">Total Customer Registered</p>181 <h3 class="text-2xl font-bold text-gray-800 mt-1">42</h3>182 </div>183 <div class="bg-primary-100 p-3 rounded-lg">184 <i data-feather="users" class="text-primary-600 w-6 h-6"></i>185 </div>186 </div>187 <div class="mt-4">188 <span class="text-sm text-secondary-600 font-medium">+2 this week</span>189 </div>190 </div>191 192 <div class="bg-white rounded-xl shadow-sm p-6">193 <div class="flex items-center justify-between">194 <div>195 <p class="text-gray-500 text-sm font-medium">Total Customer Attended</p>196 <h3 class="text-2xl font-bold text-gray-800 mt-1">126</h3>197 </div>198 <div class="bg-secondary-100 p-3 rounded-lg">199 <i data-feather="phone-call" class="text-secondary-600 w-6 h-6"></i>200 </div>201 </div>202 <div class="mt-4">203 <span class="text-sm text-green-500 font-medium">15 today</span>204 </div>205 </div>206 207 <div class="bg-white rounded-xl shadow-sm p-6">208 <div class="flex items-center justify-between">209 <div>210 <p class="text-gray-500 text-sm font-medium">Total Quotation</p>211 <h3 class="text-2xl font-bold text-gray-800 mt-1">24</h3>212 </div>213 <div class="bg-green-100 p-3 rounded-lg">214 <i data-feather="file-text" class="text-green-600 w-6 h-6"></i>215 </div>216 </div>217 <div class="mt-4">218 <span class="text-sm text-secondary-600 font-medium">+2 this week</span>219 </div>220 </div>221 222 <div class="bg-white rounded-xl shadow-sm p-6">223 <div class="flex items-center justify-between">224 <div>225 <p class="text-gray-500 text-sm font-medium">Total Invoice</p>226 <h3 class="text-2xl font-bold text-gray-800 mt-1">18</h3>227 </div>228 <div class="bg-yellow-100 p-3 rounded-lg">229 <i data-feather="dollar-sign" class="text-yellow-600 w-6 h-6"></i>230 </div>231 </div>232 <div class="mt-4">233 <span class="text-sm text-green-500 font-medium">+1 today</span>234 </div>235 </div>236 </div>237 238 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">239 <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">240 <div class="flex items-center justify-between mb-6">241 <h2 class="text-lg font-semibold text-gray-800">Your Performance This Week</h2>242 <div class="flex space-x-2">243 <button class="px-3 py-1 text-xs bg-primary-100 text-primary-600 rounded-lg">Week</button>244 <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Month</button>245 <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Year</button>246 </div>247 </div>248 <canvas id="performanceChart" height="300"></canvas>249 </div>250 251 <div class="bg-white rounded-xl shadow-sm p-6">252 <div class="flex items-center justify-between mb-6">253 <h2 class="text-lg font-semibold text-gray-800">Today's Calls</h2>254 <a href="plan.php" class="text-sm text-primary-600">View All</a>255 </div>256 <div class="space-y-4 max-h-96 overflow-y-auto">257 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">258 <div class="flex items-center space-x-3">259 <div class="bg-primary-100 p-2 rounded-full">260 <i data-feather="user" class="text-primary-600 w-4 h-4"></i>261 </div>262 <div>263 <p class="text-sm font-medium text-gray-800">ABC Company</p>264 <p class="text-xs text-gray-500">+255 712 345 678</p>265 </div>266 </div>267 <div class="flex space-x-2">268 <button class="px-2 py-1 text-xs bg-secondary-100 text-secondary-600 rounded-lg attended-btn">269 Attended270 </button>271 <button class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-lg not-reachable-btn">272 Not Reachable273 </button>274 </div>275 </div>276 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">277 <div class="flex items-center space-x-3">278 <div class="bg-primary-100 p-2 rounded-full">279 <i data-feather="user" class="text-primary-600 w-4 h-4"></i>280 </div>281 <div>282 <p class="text-sm font-medium text-gray-800">XYZ Organization</p>283 <p class="text-xs text-gray-500">+255 713 456 789</p>284 </div>285 </div>286 <div class="flex space-x-2">287 <button class="px-2 py-1 text-xs bg-secondary-100 text-secondary-600 rounded-lg attended-btn">288 Attended289 </button>290 <button class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-lg not-reachable-btn">291 Not Reachable292 </button>293 </div>294 </div>295 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">296 <div class="flex items-center space-x-3">297 <div class="bg-primary-100 p-2 rounded-full">298 <i data-feather="user" class="text-primary-600 w-4 h-4"></i>299 </div>300 <div>301 <p class="text-sm font-medium text-gray-800">John Smith</p>302 <p class="text-xs text-gray-500">+255 714 567 890</p>303 </div>304 </div>305 <div class="flex space-x-2">306 <button class="px-2 py-1 text-xs bg-secondary-100 text-secondary-600 rounded-lg attended-btn">307 Attended308 </button>309 <button class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-lg not-reachable-btn">310 Not Reachable311 </button>312 </div>313 </div>314 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">315 <div class="flex items-center space-x-3">316 <div class="bg-primary-100 p-2 rounded-full">317 <i data-feather="user" class="text-primary-600 w-4 h-4"></i>318 </div>319 <div>320 <p class="text-sm font-medium text-gray-800">Tech Solutions Ltd</p>321 <p class="text-xs text-gray-500">+255 715 678 901</p>322 </div>323 </div>324 <div class="flex space-x-2">325 <button class="px-2 py-1 text-xs bg-secondary-100 text-secondary-600 rounded-lg attended-btn">326 Attended327 </button>328 <button class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-lg not-reachable-btn">329 Not Reachable330 </button>331 </div>332 </div>333 <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">334 <div class="flex items-center space-x-3">335 <div class="bg-primary-100 p-2 rounded-full">336 <i data-feather="user" class="text-primary-600 w-4 h-4"></i>337 </div>338 <div>339 <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>340 <p class="text-xs text-gray-500">+255 716 789 012</p>341 </div>342 </div>343 <div class="flex space-x-2">344 <button class="px-2 py-1 text-xs bg-secondary-100 text-secondary-600 rounded-lg attended-btn">345 Attended346 </button>347 <button class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-lg not-reachable-btn">348 Not Reachable349 </button>350 </div>351 </div>352 </div>353 </div>354 </div>355 356 <div class="bg-white rounded-xl shadow-sm p-6">357 <div class="flex items-center justify-between mb-6">358 <h2 class="text-lg font-semibold text-gray-800">Recent Follow-ups</h2>359 <a href="Follow_up.php" class="text-sm text-primary-600">View All</a>360 </div>361 <div class="overflow-x-auto">362 <table class="min-w-full divide-y divide-gray-200">363 <thead class="bg-gray-50">364 <tr>365 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>366 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Follow-up Type</th>367 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Initial Date</th>368 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deadline</th>369 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>370 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Remarks</th>371 </tr>372 </thead>373 <tbody class="bg-white divide-y divide-gray-200">374 <tr>375 <td class="px-6 py-4 whitespace-nowrap">376 <div class="flex items-center">377 <div class="ml-4">378 <div class="text-sm font-medium text-gray-900">ABC Company</div>379 <div class="text-sm text-gray-500">+255 712 345 678</div>380 </div>381 </div>382 </td>383 <td class="px-6 py-4 whitespace-nowrap">384 <div class="text-sm text-gray-900">Quotation</div>385 </td>386 <td class="px-6 py-4 whitespace-nowrap">387 <div class="text-sm text-gray-900">Jun 12, 2023</div>388 </td>389 <td class="px-6 py-4 whitespace-nowrap">390 <div class="text-sm text-gray-900">Jul 10, 2023</div>391 </td>392 <td class="px-6 py-4 whitespace-nowrap">393 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>394 </td>395 <td class="px-6 py-4 whitespace-nowrap">396 <div class="text-sm text-gray-900">New</div>397 </td>398 </tr>399 <tr>400 <td class="px-6 py-4 whitespace-nowrap">401 <div class="flex items-center">402 <div class="ml-4">403 <div class="text-sm font-medium text-gray-900">XYZ Organization</div>404 <div class="text-sm text-gray-500">+255 713 456 789</div>405 </div>406 </div>407 </td>408 <td class="px-6 py-4 whitespace-nowrap">409 <div class="text-sm text-gray-900">Proforma Invoice</div>410 </td>411 <td class="px-6 py-4 whitespace-nowrap">412 <div class="text-sm text-gray-900">Jun 5, 2023</div>413 </td>414 <td class="px-6 py-4 whitespace-nowrap">415 <div class="text-sm text-gray-900">Jul 3, 2023</div>416 </td>417 <td class="px-6 py-4 whitespace-nowrap">418 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Middle</span>419 </td>420 <td class="px-6 py-4 whitespace-nowrap">421 <div class="text-sm text-gray-900">Needs follow-up</div>422 </td>423 </tr>424 <tr>425 <td class="px-6 py-4 whitespace-nowrap">426 <div class="flex items-center">427 <div class="ml-4">428 <div class="text-sm font-medium text-gray-900">Tech Solutions Ltd</div>429 <div class="text-sm text-gray-500">+255 715 678 901</div>430 </div>431 </div>432 </td>433 <td class="px-6 py-4 whitespace-nowrap">434 <div class="text-sm text-gray-900">Commit</div>435 </td>436 <td class="px-6 py-4 whitespace-nowrap">437 <div class="text-sm text-gray-900">May 28, 2023</div>438 </td>439 <td class="px-6 py-4 whitespace-nowrap">440 <div class="text-sm text-gray-900">Jun 25, 2023</div>441 </td>442 <td class="px-6 py-4 whitespace-nowrap">443 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Deadline</span>444 </td>445 <td class="px-6 py-4 whitespace-nowrap">446 <div class="text-sm text-gray-900">Call the customer</div>447 </td>448 </tr>449 </tbody>450 </table>451 </div>452 </div>453 </main>454 </div>455 </div>456 457 <!-- Attended Customer Modal -->458 <div id="attendedModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">459 <div class="bg-white rounded-xl w-full max-w-2xl animate-fade-in">460 <div class="flex justify-between items-center px-6 py-4 border-b">461 <h3 class="text-lg font-bold text-gray-900">Customer Attended Form</h3>462 <button onclick="closeModal('attendedModal')" class="text-gray-400 hover:text-gray-600">463 <i data-feather="x"></i>464 </button>465 </div>466 467 <form id="attendedForm" class="p-6 space-y-4">468 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">469 <div class="md:col-span-2">470 <label for="customerName" class="block text-sm font-medium text-gray-700 mb-1">Customer Full Name</label>471 <input type="text" id="customerName" name="customerName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>472 </div>473 474 <div>475 <label for="customerPhone" class="block text-sm font-medium text-gray-700 mb-1">Customer Phone Number</label>476 <div class="flex">477 <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">+255</span>478 <input type="tel" id="customerPhone" name="customerPhone" pattern="[0-9]{9}" class="w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:ring-primary-500 focus:border-primary-500" placeholder="712345678" required>479 </div>480 </div>481 482 <div>483 <label for="callDate" class="block text-sm font-medium text-gray-700 mb-1">Date Attended</label>484 <input type="date" id="callDate" name="callDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>485 </div>486 487 <div class="md:col-span-2">488 <label for="reasonForCall" class="block text-sm font-medium text-gray-700 mb-1">Reason for Call</label>489 <textarea id="reasonForCall" name="reasonForCall" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"></textarea>490 </div>491 492 <div>493 <label for="ongoingProject" class="block text-sm font-medium text-gray-700 mb-1">On Going Project</label>494 <input type="text" id="ongoingProject" name="ongoingProject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">495 </div>496 497 <div>498 <label for="projectNeeds" class="block text-sm font-medium text-gray-700 mb-1">Project Needs</label>499 <input type="text" id="projectNeeds" name="projectNeeds" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">500 </div>501 502 <div>503 <label for="urgentNeeds" class="block text-sm font-medium text-gray-700 mb-1">Urgent Needs</label>504 <input type="text" id="urgentNeeds" name="urgentNeeds" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">505 </div>506 507 <div>508 <label for="expectedOrderTime" class="block text-sm font-medium text-gray-700 mb-1">Expected Time to Order</label>509 <select id="expectedOrderTime" name="expectedOrderTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">510 <option value="Immediately">Immediately</option>511 <option value="1 Week">1 Week</option>512 <option value="2 Weeks">2 Weeks</option>513 <option value="1 Month">1 Month</option>514 <option value="3 Months">3 Months</option>515 <option value="6 Months">6 Months</option>516 <option value="Not Sure">Not Sure</option>517 </select>518 </div>519 520 <div class="md:col-span-2">521 <label for="customerQuestions" class="block text-sm font-medium text-gray-700 mb-1">Customer Questions</label>522 <div class="flex space-x-2">523 <input type="text" id="newQuestion" name="newQuestion" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Add a question">524 <button type="button" id="addQuestion" class="px-3 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">525 Add526 </button>527 </div>528 <div id="questionsList" class="mt-2 space-y-2"></div>529 </div>530 531 <div class="md:col-span-2">532 <label for="remarks" class="block text-sm font-medium text-gray-700 mb-1">Remarks</label>533 <textarea id="remarks" name="remarks" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"></textarea>534 </div>535 536 <div>537 <label for="followUpOpportunity" class="block text-sm font-medium text-gray-700 mb-1">Follow-up Opportunity</label>538 <select id="followUpOpportunity" name="followUpOpportunity" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">539 <option value="">Select Option</option>540 <option value="Quotation">Quotation</option>541 <option value="Profoma Invoice">Profoma Invoice</option>542 <option value="Commit">Commit</option>543 <option value="Customer">Customer</option>544 </select>545 </div>546 547 <div>548 <label for="nextCallDate" class="block text-sm font-medium text-gray-700 mb-1">Next Call Date</label>549 <input type="date" id="nextCallDate" name="nextCallDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">550 </div>551 </div>552 553 <div class="flex items-center justify-between pt-4 border-t">554 <div class="flex items-center">555 <input id="notToday" name="notToday" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">556 <label for="notToday" class="ml-2 block text-sm text-gray-700">Not Today</label>557 </div>558 <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">559 Save Customer Attended Form560 </button>561 </div>562 </form>563 </div>564 </div>565 566 <script>567 // Initialize feather icons568 feather.replace();569 570 // Toggle sidebar571 const toggleSidebar = document.getElementById('toggleSidebar');572 const sidebar = document.querySelector('.sidebar');573 const content = document.querySelector('.content');574 575 toggleSidebar.addEventListener('click', function() {576 sidebar.classList.toggle('collapsed');577 content.classList.toggle('expanded');578 579 if (sidebar.classList.contains('collapsed')) {580 toggleSidebar.innerHTML = '<i data-feather="chevron-right"></i>';581 } else {582 toggleSidebar.innerHTML = '<i data-feather="chevron-left"></i>';583 }584 feather.replace();585 });586 587 // Toggle dropdowns588 const notificationBtn = document.getElementById('notificationBtn');589 const notificationDropdown = document.getElementById('notificationDropdown');590 const profileBtn = document.getElementById('profileBtn');591 const profileDropdown = document.getElementById('profileDropdown');592 593 notificationBtn.addEventListener('click', function(e) {594 e.stopPropagation();595 notificationDropdown.classList.toggle('hidden');596 profileDropdown.classList.add('hidden');597 });598 599 profileBtn.addEventListener('click', function(e) {600 e.stopPropagation();601 profileDropdown.classList.toggle('hidden');602 notificationDropdown.classList.add('hidden');603 });604 605 // Close dropdowns when clicking outside606 document.addEventListener('click', function() {607 notificationDropdown.classList.add('hidden');608 profileDropdown.classList.add('hidden');609 });610 611 // Performance chart612 const ctx = document.getElementById('performanceChart').getContext('2d');613 const performanceChart = new Chart(ctx, {614 type: 'bar',615 data: {616 labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],617 datasets: [618 {619 label: 'Calls Made',620 data: [5, 7, 8, 6, 9, 3, 1],621 backgroundColor: '#3b82f6',622 borderRadius: 4623 },624 {625 label: 'Customers Registered',626 data: [2, 3, 1, 4, 5, 1, 0],627 backgroundColor: '#10b981',628 borderRadius: 4629 }630 ]631 },632 options: {633 responsive: true,634 plugins: {635 legend: {636 position: 'top',637 },638 tooltip: {639 mode: 'index',640 intersect: false,641 }642 },643 scales: {644 x: {645 stacked: false,646 },647 y: {648 stacked: false,649 beginAtZero: true650 }651 }652 }653 });654 655 // Attended customer modal656 const attendedButtons = document.querySelectorAll('.attended-btn');657 const notReachableButtons = document.querySelectorAll('.not-reachable-btn');658 const attendedModal = document.getElementById('attendedModal');659 const attendedForm = document.getElementById('attendedForm');660 const questionsList = document.getElementById('questionsList');661 const addQuestionBtn = document.getElementById('addQuestion');662 const newQuestionInput = document.getElementById('newQuestion');663 664 // Modal functions665 function openModal(modalId) {666 document.getElementById(modalId).classList.remove('hidden');667 document.getElementById(modalId).classList.add('flex');668 }669 670 function closeModal(modalId) {671 document.getElementById(modalId).classList.add('hidden');672 document.getElementById(modalId).classList.remove('flex');673 }674 675 // Set today's date as default676 document.getElementById('callDate').valueAsDate = new Date();677 678 // Add question to list679 addQuestionBtn.addEventListener('click', function() {680 const questionText = newQuestionInput.value.trim();681 if (questionText) {682 const questionId = 'question_' + Date.now();683 const questionItem = document.createElement('div');684 questionItem.className = 'flex items-center justify-between bg-gray-50 p-2 rounded';685 questionItem.innerHTML = `686 <span>${questionText}</span>687 <input type="hidden" name="customerQuestions[]" value="${questionText}">688 <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700">689 <i data-feather="x" class="w-4 h-4"></i>690 </button>691 `;692 questionsList.appendChild(questionItem);693 newQuestionInput.value = '';694 feather.replace();695 }696 });697 698 // Handle attended button clicks699 attendedButtons.forEach(button => {700 button.addEventListener('click', function() {701 const customerCard = this.closest('.flex.items-center.justify-between');702 const customerName = customerCard.querySelector('p.text-sm.font-medium').textContent;703 const customerPhone = customerCard.querySelector('p.text-xs').textContent.trim();704 705 // Fill the form with customer details706 document.getElementById('customerName').value = customerName;707 document.getElementById('customerPhone').value = customerPhone.replace('+255 ', '');708 709 openModal('attendedModal');710 711 // Mark as attended712 customerCard.classList.add('bg-secondary-100');713 this.classList.add('bg-secondary-600', 'text-white');714 this.textContent = 'Attended';715 });716 });717 718 // Handle not reachable button clicks719 notReachableButtons.forEach(button => {720 button.addEventListener('click', function() {721 const customerCard = this.closest('.flex.items-center.justify-between');722 723 // Mark as not reachable724 customerCard.classList.add('bg-blue-100');725 this.classList.add('bg-blue-600', 'text-white');726 this.textContent = 'Not Reachable';727 728 // In a real app, you would send this to the server729 console.log('Marked as not reachable');730 });731 });732 733 // Form submission734 attendedForm.addEventListener('submit', function(e) {735 e.preventDefault();736 737 // Here you would typically make an AJAX call to your PHP backend738 console.log('Form submitted', new FormData(attendedForm));739 740 // Close modal741 closeModal('attendedModal');742 743 // Show success message744 alert('Customer attended information saved successfully!');745 });746 </script>747</body>748</html>749