musaliac/nsp-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>Database Management | NSP Tracker Pro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9</head>10<body class="bg-gray-50">11 <div class="min-h-screen">12 <!-- Top Navigation -->13 <nav class="bg-white shadow-sm">14 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">15 <div class="flex justify-between h-16">16 <div class="flex items-center">17 <div class="flex-shrink-0 flex items-center">18 <i data-feather="database" class="text-indigo-600 h-8 w-8"></i>19 <span class="ml-2 text-xl font-bold text-indigo-600">NSP Tracker Pro - Database</span>20 </div>21 </div>22 </div>23 </div>24 </nav>25 <!-- Main Content -->26 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">27 <div id="loading" class="fixed inset-0 flex items-center justify-center bg-white bg-opacity-90 z-50">28 <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-indigo-500"></div>29 </div>30<div class="bg-white rounded-lg shadow-sm p-6">31 <h2 class="text-2xl font-bold text-gray-800 mb-6">MySQL Database Management</h2>32 33 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">34 <div class="border border-gray-200 rounded-lg p-4">35 <h3 class="text-lg font-medium text-gray-900 mb-4">Database Connection</h3>36 <div class="space-y-4">37 <div>38 <label class="block text-sm font-medium text-gray-700">Host</label>39 <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" value="localhost">40 </div>41 <div>42 <label class="block text-sm font-medium text-gray-700">Database</label>43 <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" value="nsp_tracker">44 </div>45 <div>46 <label class="block text-sm font-medium text-gray-700">Username</label>47 <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" value="nsp_admin">48 </div>49 <div>50 <label class="block text-sm font-medium text-gray-700">Password</label>51 <input type="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" value="********">52 </div>53 <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700">54 Test Connection55 </button>56 </div>57 </div>58 59 <div class="border border-gray-200 rounded-lg p-4">60 <h3 class="text-lg font-medium text-gray-900 mb-4">Database Tables</h3>61 <div class="overflow-x-auto">62 <table class="min-w-full divide-y divide-gray-200">63 <thead>64 <tr>65 <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Table Name</th>66 <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Records</th>67 </tr>68 </thead>69 <tbody class="divide-y divide-gray-200">70 <tr>71 <td class="px-4 py-2 text-sm text-gray-900">projects</td>72 <td class="px-4 py-2 text-sm text-gray-500">142</td>73 </tr>74 <tr>75 <td class="px-4 py-2 text-sm text-gray-900">sectors</td>76 <td class="px-4 py-2 text-sm text-gray-500">8</td>77 </tr>78 <tr>79 <td class="px-4 py-2 text-sm text-gray-900">officers</td>80 <td class="px-4 py-2 text-sm text-gray-500">24</td>81 </tr>82 <tr>83 <td class="px-4 py-2 text-sm text-gray-900">recommendations</td>84 <td class="px-4 py-2 text-sm text-gray-500">5</td>85 </tr>86 </tbody>87 </table>88 </div>89 </div>90 </div>91 92 <div class="border border-gray-200 rounded-lg p-4 mb-6">93 <h3 class="text-lg font-medium text-gray-900 mb-4">SQL Query Editor</h3>94 <div class="mb-4">95 <textarea class="w-full h-32 p-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="SELECT * FROM projects WHERE status = 'completed';"></textarea>96 </div>97 <div class="flex space-x-4">98 <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700">99 Execute Query100 </button>101 <button class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300">102 Clear103 </button>104 </div>105 </div>106 107 <div class="border border-gray-200 rounded-lg p-4">108 <h3 class="text-lg font-medium text-gray-900 mb-4">Query Results</h3>109 <div class="overflow-x-auto">110 <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">111 <p class="text-gray-500">Query results will appear here</p>112 </div>113 </div>114 </div>115 </div>116 </div>117 <script>118 document.addEventListener('DOMContentLoaded', function() {119 // Hide loading spinner when page is fully loaded120 setTimeout(() => {121 document.getElementById('loading').style.display = 'none';122 }, 1500);123if (typeof feather !== 'undefined') {124 feather.replace();125 }126 });127 </script>128</div>129</body>130</html>