feat: ✨ ip address history

templates/subnet.html

@@ -50,7 +50,11 @@
                     <tbody class="divide-y divide-gray-700">
                         {% for ip in ip_addresses %}
                         <tr id="ip-{{ ip[0] }}">
-                            <td class="font-bold text-center">{{ ip[1] }}</td>
+                            <td class="font-bold text-center">
+                                <button type="button" class="ip-history-btn hover:text-blue-400 cursor-pointer" data-ip="{{ ip[1] }}" title="View IP history">
+                                    {{ ip[1] }}
+                                </button>
+                            </td>
                             <td class="text-center">
                                 {% if ip[2] == 'DHCP' %}
                                     <span class="font-semibold">DHCP</span>
@@ -72,7 +76,22 @@
             </form>
         </div>
     </div>
+    
+    <!-- IP History Modal -->
+    <div id="ip-history-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50">
+        <div class="bg-gray-200 dark:bg-zinc-800 rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto shadow-2xl border border-gray-300 dark:border-zinc-700">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-2xl font-bold">IP History: <span id="modal-ip-address" class="font-mono"></span></h2>
+                <button type="button" id="close-ip-history-modal" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:cursor-pointer text-2xl">&times;</button>
+            </div>
+            <div id="ip-history-content" class="space-y-3">
+                <div class="text-center text-gray-600 dark:text-gray-400">Loading...</div>
+            </div>
+        </div>
+    </div>
+    
     <script src="/static/js/export_csv.js"></script>
     <script src="/static/js/subnet.js"></script>
+    <script src="/static/js/ip_history.js"></script>
 </body>
 </html>