Nagadder/field-force-tracker-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>Field Force Tracker Pro</title>7 <link rel="stylesheet" href="style.css">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="components/navbar.js"></script>12 <script src="components/footer.js"></script>13 <script src="components/status-card.js"></script>14</head>15<body class="bg-gray-100">16 <custom-navbar></custom-navbar>17 18 <main class="container mx-auto px-4 py-8">19 <h1 class="text-3xl font-bold text-gray-800 mb-8">Field Force Dashboard</h1>20 21 <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">22 <status-card 23 title="Valid IDs" 24 value="11/11" 25 icon="id" 26 color="green"27 ></status-card>28 <status-card 29 title="Valid Passports" 30 value="3/11" 31 icon="globe" 32 color="yellow"33 ></status-card>34 <status-card 35 title="Valid Licenses" 36 value="7/11" 37 icon="car" 38 color="blue"39 ></status-card>40 <status-card 41 title="Valid Medicals" 42 value="8/11" 43 icon="heart" 44 color="purple"45 ></status-card>46 </section>47 48 <section class="mb-12">49 <h2 class="text-2xl font-semibold text-gray-700 mb-4">Employee Documents</h2>50 <div class="bg-white rounded-lg shadow overflow-hidden">51 <div class="overflow-x-auto">52 <table class="min-w-full divide-y divide-gray-200">53 <thead class="bg-gray-50">54 <tr>55 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>56 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>57 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Passport</th>58 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">License</th>59 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Medical</th>60 </tr>61 </thead>62 <tbody class="bg-white divide-y divide-gray-200" id="employeeTable">63 <!-- Filled by JavaScript -->64 </tbody>65 </table>66 </div>67 </div>68 </section>69 70 <section>71 <h2 class="text-2xl font-semibold text-gray-700 mb-4">Vehicle Status</h2>72 <div class="bg-white rounded-lg shadow overflow-hidden">73 <div class="overflow-x-auto">74 <table class="min-w-full divide-y divide-gray-200">75 <thead class="bg-gray-50">76 <tr>77 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reg Nr</th>78 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Make</th>79 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Driver</th>80 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Disk</th>81 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Service</th>82 </tr>83 </thead>84 <tbody class="bg-white divide-y divide-gray-200" id="vehicleTable">85 <!-- Filled by JavaScript -->86 </tbody>87 </table>88 </div>89 </div>90 </section>91 </main>92 93 <custom-footer></custom-footer>94 95 <script src="script.js"></script>96 <script>97 feather.replace();98 </script>99<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>100</body>101</html>