File size: 20,104 Bytes
b0fd2a3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings - Arogya Mitra</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .sidebar {
            transition: all 0.3s;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .setting-tab {
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
        }
        .setting-tab.active {
            border-bottom-color: #3b82f6;
            color: #3b82f6;
        }
        .toggle-checkbox:checked {
            right: 0;
            border-color: #3b82f6;
            background-color: #3b82f6;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #bfdbfe;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0">
            <div class="p-4 border-b border-blue-700">
                <h1 class="text-xl font-bold">Arogya Mitra</h1>
                <p class="text-blue-200 text-sm">Hospital Command Dashboard</p>
            </div>
            <nav class="p-4">
                <ul>
                    <li class="mb-2">
                        <a href="dashboard.html" class="flex items-center p-2 rounded hover:bg-blue-700">
                            <i class="fas fa-tachometer-alt mr-3"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="patientflow.html" class="flex items-center p-2 rounded hover:bg-blue-700">
                            <i class="fas fa-procedures mr-3"></i>
                            <span>Patient Flow</span>
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="staffmanagement.html" class="flex items-center p-2 rounded hover:bg-blue-700">
                            <i class="fas fa-user-md mr-3"></i>
                            <span>Staff Management</span>
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="analytics.html" class="flex items-center p-2 rounded hover:bg-blue-700">
                            <i class="fas fa-chart-line mr-3"></i>
                            <span>Analytics</span>
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="settings.html" class="flex items-center p-2 rounded bg-blue-700">
                            <i class="fas fa-cog mr-3"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-auto">
            <!-- Top Navigation -->
            <header class="bg-white shadow-sm p-4 flex justify-between items-center">
                <div class="flex items-center">
                    <button class="mr-4 text-gray-500">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="text-xl font-semibold">System Settings</h2>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="Search settings..." class="pl-8 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
            </header>

            <!-- Settings Content -->
            <main class="p-6">
                <!-- Settings Tabs -->
                <div class="flex border-b border-gray-200 mb-6">
                    <button class="setting-tab active px-4 py-2 font-medium text-sm">General</button>
                    <button class="setting-tab px-4 py-2 font-medium text-sm">Notifications</button>
                    <button class="setting-tab px-4 py-2 font-medium text-sm">Security</button>
                    <button class="setting-tab px-4 py-2 font-medium text-sm">Integration</button>
                    <button class="setting-tab px-4 py-2 font-medium text-sm">Backup</button>
                </div>

                <!-- General Settings -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- System Preferences -->
                    <div class="card bg-white rounded-lg p-6">
                        <h3 class="font-semibold text-lg mb-4">System Preferences</h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="font-medium">Dark Mode</p>
                                    <p class="text-sm text-gray-500">Switch between light and dark theme</p>
                                </div>
                                <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                    <input type="checkbox" name="darkMode" id="darkMode" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                    <label for="darkMode" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                </div>
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="font-medium">Time Format</p>
                                    <p class="text-sm text-gray-500">12-hour or 24-hour clock</p>
                                </div>
                                <select class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm">
                                    <option>12-hour (AM/PM)</option>
                                    <option>24-hour</option>
                                </select>
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="font-medium">Language</p>
                                    <p class="text-sm text-gray-500">System language preference</p>
                                </div>
                                <select class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm">
                                    <option>English</option>
                                    <option>Hindi</option>
                                    <option>Marathi</option>
                                    <option>Bengali</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Hospital Information -->
                    <div class="card bg-white rounded-lg p-6">
                        <h3 class="font-semibold text-lg mb-4">Hospital Information</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Hospital Name</label>
                                <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="Arogya Mitra General Hospital">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                                <textarea class="w-full border border-gray-300 rounded-md px-3 py-2">123 Medical Street, Health City, MH 400001</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
                                <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="+91 9876543210">
                            </div>
                            <div class="pt-2">
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Save Changes</button>
                            </div>
                        </div>
                    </div>

                    <!-- Notification Settings -->
                    <div class="card bg-white rounded-lg p-6 lg:col-span-2">
                        <h3 class="font-semibold text-lg mb-4">Alert Thresholds</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">ED Wait Time (min)</label>
                                <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="30">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">ICU Bed Occupancy (%)</label>
                                <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="85">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Staff Ratio Alert</label>
                                <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="8">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Critical Lab Results (hr)</label>
                                <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Medication Delay (min)</label>
                                <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="15">
                            </div>
                            <div class="flex items-end">
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Update Thresholds</button>
                            </div>
                        </div>
                    </div>

                    <!-- User Management -->
                    <div class="card bg-white rounded-lg p-6 lg:col-span-2">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-semibold text-lg">User Accounts</h3>
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
                                <i class="fas fa-plus mr-2"></i> Add User
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-semibold">AD</div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">Admin User</div>
                                                    <div class="text-sm text-gray-500">admin@arogyamitra.com</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Administrator</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
                                            <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 text-white flex items-center justify-center font-semibold">MD</div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">Medical Director</div>
                                                    <div class="text-sm text-gray-500">director@arogyamitra.com</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Medical Staff</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 4:30 PM</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
                                            <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 text-white flex items-center justify-center font-semibold">NS</div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">Nurse Supervisor</div>
                                                    <div class="text-sm text-gray-500">nurse@arogyamitra.com</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Nursing</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Inactive</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
                                            <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- System Maintenance -->
                    <div class="card bg-white rounded-lg p-6">
                        <h3 class="font-semibold text-lg mb-4">System Maintenance</h3>
                        <div class="space-y-4">
                            <div>
                                <p class="font-medium">Database Backup</p>
                                <p class="text-sm text-gray-500 mb-2">Last backup: Today, 2:00 AM</p>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Run Backup Now</button>
                            </div>
                            <div class="pt-4 border-t border-gray-200">
                                <p class="font-medium">System Updates</p>
                                <p class="text-sm text-gray-500 mb-2">Current version: v2.3.1 (Latest)</p>
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm font-medium" disabled>Check for Updates</button>
                            </div>
                        </div>
                    </div>

                    <!-- API Integration -->
                    <div class="card bg-white rounded-lg p-6">
                        <h3 class="font-semibold text-lg mb-4">API Integration</h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <div>