VERALA/smartadmin-dashboard
0
1<!DOCTYPE html>2<html lang="id" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SmartApp - Dashboard Admin</title>7 <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/%3E%3C/svg%3E">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/apexcharts"></script>12 <link rel="stylesheet" href="style.css">13</head>14<body class="bg-gray-900 text-gray-100 font-sans antialiased">15 <div id="app" class="flex h-screen overflow-hidden">16 <!-- Sidebar -->17 <admin-sidebar></admin-sidebar>18 19 <!-- Main Content -->20 <div class="flex-1 flex flex-col overflow-hidden">21 <!-- Navbar -->22 <admin-navbar></admin-navbar>23 24 <!-- Content Area -->25 <main class="flex-1 overflow-y-auto bg-gray-900">26 <div class="container mx-auto px-4 py-6 max-w-7xl">27 <!-- Header Section -->28 <div class="mb-6">29 <h1 class="text-3xl font-bold text-white mb-2">Dashboard SmartApp</h1>30 <p class="text-gray-400">Selamat datang kembali, Admin! Berikut adalah ringkasan aktivitas hari ini.</p>31 </div>32 33 <!-- Filters -->34 <div class="mb-6 bg-gray-800 rounded-xl p-4 border border-gray-700">35 <div class="flex flex-col md:flex-row gap-4 items-center">36 <div class="flex-1 flex flex-col sm:flex-row gap-4 w-full">37 <div class="relative flex-1">38 <i data-feather="calendar" class="absolute left-3 top-3 w-4 h-4 text-gray-400"></i>39 <input type="date" id="startDate" class="w-full pl-10 pr-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white">40 </div>41 <div class="relative flex-1">42 <i data-feather="calendar" class="absolute left-3 top-3 w-4 h-4 text-gray-400"></i>43 <input type="date" id="endDate" class="w-full pl-10 pr-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white">44 </div>45 <div class="relative flex-1">46 <i data-feather="briefcase" class="absolute left-3 top-3 w-4 h-4 text-gray-400"></i>47 <select id="opdFilter" class="w-full pl-10 pr-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none">48 <option value="">Semua OPD</option>49 <option value="dinas-komunikasi">Dinas Komunikasi</option>50 <option value="dinas-pekerjaan-umum">Dinas Pekerjaan Umum</option>51 <option value="dinas-kesehatan">Dinas Kesehatan</option>52 <option value="dinas-pendidikan">Dinas Pendidikan</option>53 </select>54 </div>55 </div>56 <button id="applyFilter" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center gap-2">57 <i data-feather="filter" class="w-4 h-4"></i>58 Terapkan Filter59 </button>60 </div>61 </div>62 63 <!-- Summary Cards -->64 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">65 <summary-card 66 icon="alert-circle" 67 title="Pengaduan" 68 value="1,247" 69 change="+12%" 70 change-type="positive"71 color="blue">72 </summary-card>73 <summary-card 74 icon=" newspaper" 75 title="Berita" 76 value="89" 77 change="+5%" 78 change-type="positive"79 color="green">80 </summary-card>81 <summary-card 82 icon="calendar" 83 title="Event" 84 value="23" 85 change="-2%" 86 change-type="negative"87 color="purple">88 </summary-card>89 <summary-card 90 icon="map-pin" 91 title="Wisata" 92 value="156" 93 change="+8%" 94 change-type="positive"95 color="yellow">96 </summary-card>97 <summary-card 98 icon="settings" 99 title="Layanan" 100 value="42" 101 change="0%" 102 change-type="neutral"103 color="indigo">104 </summary-card>105 <summary-card 106 icon="video" 107 title="CCTV" 108 value="18" 109 change="+3%" 110 change-type="positive"111 color="red">112 </summary-card>113 </div>114 115 <!-- Charts and Tables Section -->116 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">117 <!-- Complaint Trend Chart -->118 <div class="lg:col-span-2 bg-gray-800 rounded-xl p-6 border border-gray-700">119 <div class="flex justify-between items-center mb-4">120 <h2 class="text-xl font-semibold text-white">Tren Pengaduan 30 Hari Terakhir</h2>121 <div class="flex gap-2">122 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-xs rounded-lg transition-colors">Harian</button>123 <button class="px-3 py-1 bg-blue-600 text-xs rounded-lg">Mingguan</button>124 </div>125 </div>126 <div id="complaintChart" class="h-80"></div>127 </div>128 129 <!-- Quick Actions -->130 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">131 <h2 class="text-xl font-semibold text-white mb-4">Aksi Cepat</h2>132 <div class="space-y-3">133 <button class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors flex items-center gap-3">134 <i data-feather="plus-circle" class="w-5 h-5"></i>135 <span class="text-left flex-1">Tambah Pengaduan</span>136 </button>137 <button class="w-full px-4 py-3 bg-green-600 hover:bg-green-700 rounded-lg transition-colors flex items-center gap-3">138 <i data-feather="plus-circle" class="w-5 h-5"></i>139 <span class="text-left flex-1">Buat Berita Baru</span>140 </button>141 <button class="w-full px-4 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors flex items-center gap-3">142 <i data-feather="calendar-plus" class="w-5 h-5"></i>143 <span class="text-left flex-1">Tambah Event</span>144 </button>145 <button class="w-full px-4 py-3 bg-yellow-600 hover:bg-yellow-700 rounded-lg transition-colors flex items-center gap-3">146 <i data-feather="map-pin" class="w-5 h-5"></i>147 <span class="text-left flex-1">Tambah Wisata</span>148 </button>149 <button class="w-full px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center gap-3">150 <i data-feather="download" class="w-5 h-5"></i>151 <span class="text-left flex-1">Export Laporan</span>152 </button>153 </div>154 </div>155 </div>156 157 <!-- Complaint Table and Events -->158 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">159 <!-- Pending Complaints Table -->160 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">161 <div class="flex justify-between items-center mb-4">162 <h2 class="text-xl font-semibold text-white">Pengaduan Perlu Tindak Lanjut</h2>163 <span class="px-3 py-1 bg-red-600 text-xs rounded-full">5 pending</span>164 </div>165 <div class="overflow-x-auto">166 <table class="w-full text-sm">167 <thead>168 <tr class="border-b border-gray-700">169 <th class="text-left py-3 px-2 text-gray-400">ID</th>170 <th class="text-left py-3 px-2 text-gray-400">Judul</th>171 <th class="text-left py-3 px-2 text-gray-400">OPD</th>172 <th class="text-left py-3 px-2 text-gray-400">Status</th>173 </tr>174 </thead>175 <tbody id="complaintTable">176 <tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">177 <td class="py-3 px-2">#1234</td>178 <td class="py-3 px-2">Jalan Rusak di Jl. Merdeka</td>179 <td class="py-3 px-2 text-blue-400">Pekerjaan Umum</td>180 <td class="py-3 px-2"><span class="px-2 py-1 bg-yellow-600 text-xs rounded-full">Baru</span></td>181 </tr>182 <tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">183 <td class="py-3 px-2">#1235</td>184 <td class="py-3 px-2">Lampu Jalan Mati</td>185 <td class="py-3 px-2 text-blue-400">Pekerjaan Umum</td>186 <td class="py-3 px-2"><span class="px-2 py-1 bg-red-600 text-xs rounded-full">Urgent</span></td>187 </tr>188 <tr class="border-b border-gray-700 hover:bg-gray-700 transition-colors">189 <td class="py-3 px-2">#1236</td>190 <td class="py-3 px-2">Sampah Menumpuk</td>191 <td class="py-3 px-2 text-green-400">Kebersihan</td>192 <td class="py-3 px-2"><span class="px-2 py-1 bg-yellow-600 text-xs rounded-full">Baru</span></td>193 </tr>194 </tbody>195 </table>196 </div>197 <div class="mt-4 text-center">198 <a href="#" class="text-blue-400 hover:text-blue-300 text-sm">Lihat Semua Pengaduan →</a>199 </div>200 </div>201 202 <!-- Upcoming Events -->203 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">204 <h2 class="text-xl font-semibold text-white mb-4">Event Terdekat</h2>205 <div class="space-y-4" id="eventsList">206 <div class="flex gap-4 p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors cursor-pointer">207 <div class="text-center min-w-fit">208 <div class="text-2xl font-bold text-blue-400">15</div>209 <div class="text-xs text-gray-400">Des</div>210 </div>211 <div class="flex-1">212 <h3 class="font-semibold text-white">Festival Kuliner</h3>213 <p class="text-sm text-gray-400">Alun-Alun Kota</p>214 <div class="flex items-center gap-2 mt-1">215 <i data-feather="clock" class="w-3 h-3 text-gray-400"></i>216 <span class="text-xs text-gray-400">10:00 - 22:00</span>217 </div>218 </div>219 </div>220 <div class="flex gap-4 p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors cursor-pointer">221 <div class="text-center min-w-fit">222 <div class="text-2xl font-bold text-green-400">18</div>223 <div class="text-xs text-gray-400">Des</div>224 </div>225 <div class="flex-1">226 <h3 class="font-semibold text-white">Seminar Digital</h3>227 <p class="text-sm text-gray-400">Gedung Serba Guna</p>228 <div class="flex items-center gap-2 mt-1">229 <i data-feather="clock" class="w-3 h-3 text-gray-400"></i>230 <span class="text-xs text-gray-400">08:00 - 16:00</span>231 </div>232 </div>233 </div>234 <div class="flex gap-4 p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors cursor-pointer">235 <div class="text-center min-w-fit">236 <div class="text-2xl font-bold text-purple-400">22</div>237 <div class="text-xs text-gray-400">Des</div>238 </div>239 <div class="flex-1">240 <h3 class="font-semibold text-white">Konser Amal</h3>241 <p class="text-sm text-gray-400">Taman Kota</p>242 <div class="flex items-center gap-2 mt-1">243 <i data-feather="clock" class="w-3 h-3 text-gray-400"></i>244 <span class="text-xs text-gray-400">19:00 - 23:00</span>245 </div>246 </div>247 </div>248 </div>249 </div>250 </div>251 252 <!-- CCTV Status -->253 <div class="mt-6 bg-gray-800 rounded-xl p-6 border border-gray-700">254 <div class="flex justify-between items-center mb-4">255 <h2 class="text-xl font-semibold text-white">Status CCTV</h2>256 <div class="flex items-center gap-4 text-sm">257 <div class="flex items-center gap-2">258 <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>259 <span class="text-gray-400">Online: 16</span>260 </div>261 <div class="flex items-center gap-2">262 <div class="w-3 h-3 bg-red-500 rounded-full"></div>263 <span class="text-gray-400">Offline: 2</span>264 </div>265 </div>266 </div>267 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4" id="cctvGrid">268 <!-- CCTV items will be generated by JavaScript -->269 </div>270 </div>271 </div>272 </main>273 </div>274 </div>275 276 <!-- Component Scripts -->277 <script src="components/sidebar.js"></script>278 <script src="components/navbar.js"></script>279 <script src="components/card.js"></script>280 <script src="script.js"></script>281 <script>282 // Initialize Feather Icons283 feather.replace();284 </script>285<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>286</body>287</html>