Hugging Face's logo

Spaces:
thors1
/
deepsite-project-rnub4
Running

App Files Community
thors1 commited on
Commit
263b86c
·
verified ·
1 Parent(s): b6e4f3a

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +1007 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Rnub4
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
- pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: DeepSite Project
3
+ colorFrom: gray
4
+ colorTo: yellow
 
5
  sdk: static
6
+ emoji: 📱
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,1007 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>MedFlow - Add Patient</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Inter Font -->
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
15
+
16
+ <!-- Lucide Icons -->
17
+ <script src="https://unpkg.com/lucide@latest"></script>
18
+
19
+ <!-- Custom Config -->
20
+ <script>
21
+ tailwind.config = {
22
+ theme: {
23
+ extend: {
24
+ fontFamily: {
25
+ sans: ['Inter', 'sans-serif'],
26
+ },
27
+ colors: {
28
+ primary: '#2563eb',
29
+ background: '#f8fafc',
30
+ border: '#e5e7eb',
31
+ },
32
+ maxWidth: {
33
+ 'content': '1280px',
34
+ }
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+
40
+ <style>
41
+ /* Custom scrollbar */
42
+ ::-webkit-scrollbar {
43
+ width: 8px;
44
+ height: 8px;
45
+ }
46
+ ::-webkit-scrollbar-track {
47
+ background: #f8fafc;
48
+ }
49
+ ::-webkit-scrollbar-thumb {
50
+ background: #cbd5e1;
51
+ border-radius: 4px;
52
+ }
53
+ ::-webkit-scrollbar-thumb:hover {
54
+ background: #94a3b8;
55
+ }
56
+
57
+ /* Tooltip styles */
58
+ .tooltip {
59
+ position: relative;
60
+ }
61
+ .tooltip::after {
62
+ content: attr(data-tooltip);
63
+ position: absolute;
64
+ left: 100%;
65
+ top: 50%;
66
+ transform: translateY(-50%);
67
+ margin-left: 8px;
68
+ padding: 4px 8px;
69
+ background: #1e293b;
70
+ color: white;
71
+ font-size: 12px;
72
+ border-radius: 4px;
73
+ white-space: nowrap;
74
+ opacity: 0;
75
+ visibility: hidden;
76
+ transition: all 0.2s;
77
+ z-index: 50;
78
+ }
79
+ .tooltip:hover::after {
80
+ opacity: 1;
81
+ visibility: visible;
82
+ }
83
+
84
+ /* Drag and drop styles */
85
+ .drag-active {
86
+ border-color: #2563eb !important;
87
+ background-color: #eff6ff !important;
88
+ }
89
+
90
+ /* Autosave pulse animation */
91
+ @keyframes pulse-dot {
92
+ 0%, 100% { opacity: 1; }
93
+ 50% { opacity: 0.5; }
94
+ }
95
+ .autosave-pulse {
96
+ animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
97
+ }
98
+
99
+ /* Toast animation */
100
+ @keyframes slideIn {
101
+ from { transform: translateX(100%); opacity: 0; }
102
+ to { transform: translateX(0); opacity: 1; }
103
+ }
104
+ .toast-enter {
105
+ animation: slideIn 0.3s ease-out;
106
+ }
107
+ </style>
108
+ </head>
109
+ <body class="bg-background text-slate-900 font-sans antialiased">
110
+
111
+ <!-- Toast Container -->
112
+ <div id="toast-container" class="fixed top-20 right-4 z-50 flex flex-col gap-2"></div>
113
+
114
+ <!-- Duplicate Patient Warning Modal -->
115
+ <div id="duplicate-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
116
+ <div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 p-6 transform scale-95 opacity-0 transition-all duration-200" id="duplicate-modal-content">
117
+ <div class="flex items-start gap-4">
118
+ <div class="p-2 bg-amber-100 rounded-full">
119
+ <i data-lucide="alert-triangle" class="w-6 h-6 text-amber-600"></i>
120
+ </div>
121
+ <div class="flex-1">
122
+ <h3 class="text-lg font-semibold text-slate-900">Potential Duplicate Patient</h3>
123
+ <p class="text-sm text-slate-600 mt-1">We found an existing patient with similar information:</p>
124
+ <div class="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
125
+ <p class="font-medium text-slate-900">Sarah Elizabeth Johnson</p>
126
+ <p class="text-sm text-slate-600">DOB: 03/15/1985 • Phone: (555) 123-4567</p>
127
+ <p class="text-sm text-slate-500 mt-1">Last visit: 12/20/2023</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div class="flex gap-3 mt-6 justify-end">
132
+ <button onclick="closeDuplicateModal()" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900">Continue Anyway</button>
133
+ <button onclick="viewExistingPatient()" class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-700">View Patient</button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Global Sticky Header -->
139
+ <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-[#e5e7eb] z-40 flex items-center px-4 lg:px-6">
140
+ <!-- Logo -->
141
+ <div class="flex items-center gap-2 w-64 flex-shrink-0">
142
+ <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
143
+ <i data-lucide="heart-pulse" class="w-5 h-5 text-white"></i>
144
+ </div>
145
+ <span class="font-bold text-lg text-slate-900">MedFlow</span>
146
+ </div>
147
+
148
+ <!-- Global Search -->
149
+ <div class="flex-1 max-w-2xl mx-auto px-4">
150
+ <div class="relative">
151
+ <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
152
+ <input type="text" placeholder="Search patients, appointments, invoices"
153
+ class="w-full h-10 pl-10 pr-4 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
154
+ <div class="absolute right-2 top-1/2 -translate-y-1/2 hidden sm:flex items-center gap-1">
155
+ <kbd class="px-2 py-0.5 text-xs bg-slate-100 border border-slate-200 rounded font-sans text-slate-500">⌘K</kbd>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Right Actions -->
161
+ <div class="flex items-center gap-3 w-64 justify-end">
162
+ <!-- New Dropdown -->
163
+ <div class="relative" id="new-dropdown">
164
+ <button onclick="toggleNewDropdown()" class="flex items-center gap-1.5 px-3 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
165
+ <i data-lucide="plus" class="w-4 h-4"></i>
166
+ <span>New</span>
167
+ <i data-lucide="chevron-down" class="w-3 h-3 ml-1"></i>
168
+ </button>
169
+ <div id="new-menu" class="hidden absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-lg border border-slate-200 py-1 z-50">
170
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
171
+ <i data-lucide="user-plus" class="w-4 h-4 text-slate-400"></i>
172
+ Add Patient
173
+ </a>
174
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
175
+ <i data-lucide="calendar-plus" class="w-4 h-4 text-slate-400"></i>
176
+ Schedule Appointment
177
+ </a>
178
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
179
+ <i data-lucide="file-plus" class="w-4 h-4 text-slate-400"></i>
180
+ Create Invoice
181
+ </a>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Notifications -->
186
+ <button class="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
187
+ <i data-lucide="bell" class="w-5 h-5"></i>
188
+ <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
189
+ </button>
190
+
191
+ <!-- User Avatar -->
192
+ <div class="relative" id="user-dropdown">
193
+ <button onclick="toggleUserDropdown()" class="flex items-center gap-2 p-1 pr-2 hover:bg-slate-50 rounded-lg transition-colors">
194
+ <img src="http://static.photos/people/200x200/42" alt="Dr. Smith" class="w-8 h-8 rounded-full object-cover">
195
+ <span class="text-sm font-medium text-slate-700 hidden md:block">Dr. Sarah Smith</span>
196
+ <i data-lucide="chevron-down" class="w-3 h-3 text-slate-400 hidden md:block"></i>
197
+ </button>
198
+ <div id="user-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200 py-1 z-50">
199
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50">
200
+ <i data-lucide="user" class="w-4 h-4 text-slate-400"></i>
201
+ Profile
202
+ </a>
203
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50">
204
+ <i data-lucide="settings" class="w-4 h-4 text-slate-400"></i>
205
+ Settings
206
+ </a>
207
+ <div class="border-t border-slate-200 my-1"></div>
208
+ <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50">
209
+ <i data-lucide="log-out" class="w-4 h-4"></i>
210
+ Logout
211
+ </a>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </header>
216
+
217
+ <!-- Layout Container -->
218
+ <div class="pt-16 flex min-h-screen">
219
+
220
+ <!-- Sidebar -->
221
+ <aside class="w-[72px] bg-white border-r border-[#e5e7eb] fixed left-0 top-16 bottom-0 z-30">
222
+ <nav class="p-3 space-y-1">
223
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Dashboard">
224
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
225
+ </a>
226
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-primary bg-blue-50 transition-colors" data-tooltip="Patients">
227
+ <i data-lucide="users" class="w-5 h-5"></i>
228
+ </a>
229
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Appointments">
230
+ <i data-lucide="calendar-days" class="w-5 h-5"></i>
231
+ </a>
232
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Encounters">
233
+ <i data-lucide="clipboard-list" class="w-5 h-5"></i>
234
+ </a>
235
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Messages">
236
+ <i data-lucide="message-square" class="w-5 h-5"></i>
237
+ <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
238
+ </a>
239
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Tasks">
240
+ <i data-lucide="check-square" class="w-5 h-5"></i>
241
+ </a>
242
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Billing">
243
+ <i data-lucide="credit-card" class="w-5 h-5"></i>
244
+ </a>
245
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Reports">
246
+ <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
247
+ </a>
248
+ <a href="#" class="tooltip flex flex-col items-center justify-center w-full py-3 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors" data-tooltip="Settings">
249
+ <i data-lucide="settings" class="w-5 h-5"></i>
250
+ </a>
251
+ </nav>
252
+ </aside>
253
+
254
+ <!-- Main Content -->
255
+ <main class="ml-[72px] flex-1 p-6">
256
+ <div class="max-w-content mx-auto">
257
+
258
+ <!-- Page Sticky Header -->
259
+ <div class="sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-4 -mx-2 px-2">
260
+ <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white border border-[#e5e7eb] rounded-xl p-4 shadow-sm">
261
+ <div>
262
+ <h1 class="text-xl font-semibold text-slate-900">Add Patient</h1>
263
+ <p class="text-sm text-slate-500 mt-0.5">Create a new patient record</p>
264
+ </div>
265
+ <div class="flex items-center gap-3">
266
+ <button onclick="cancelForm()" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
267
+ Cancel
268
+ </button>
269
+ <button onclick="saveAndSchedule()" class="px-4 py-2 text-sm font-medium text-slate-700 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
270
+ Save & Schedule
271
+ </button>
272
+ <button onclick="savePatient()" class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
273
+ <i data-lucide="save" class="w-4 h-4"></i>
274
+ Save Patient
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Autosave Indicator -->
280
+ <div class="flex items-center justify-end mt-2 text-xs text-slate-400 gap-2">
281
+ <span id="autosave-status" class="hidden items-center gap-1.5">
282
+ <span class="w-1.5 h-1.5 bg-green-500 rounded-full autosave-pulse"></span>
283
+ Autosaved
284
+ </span>
285
+ <span id="saving-status" class="hidden items-center gap-1.5">
286
+ <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>
287
+ Saving...
288
+ </span>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Form -->
293
+ <form id="patientForm" class="space-y-6 mt-2" onsubmit="event.preventDefault(); savePatient();">
294
+
295
+ <!-- Duplicate Warning Banner (Hidden by default) -->
296
+ <div id="duplicate-warning" class="hidden bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
297
+ <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5"></i>
298
+ <div class="flex-1">
299
+ <p class="text-sm font-medium text-amber-900">Potential duplicate patient detected</p>
300
+ <p class="text-sm text-amber-700 mt-1">A patient with the same name and date of birth already exists in the system.</p>
301
+ </div>
302
+ <button type="button" onclick="showDuplicateModal()" class="text-sm font-medium text-amber-700 hover:text-amber-900 underline">View details</button>
303
+ </div>
304
+
305
+ <!-- Section: Patient Identity -->
306
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
307
+ <div class="mb-6">
308
+ <h2 class="text-lg font-semibold text-slate-900 flex items-center gap-2">
309
+ Patient Identity
310
+ <span class="text-red-500">*</span>
311
+ </h2>
312
+ <p class="text-sm text-slate-500 mt-1">Basic demographic information and identification details</p>
313
+ </div>
314
+
315
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
316
+ <!-- Name Fields -->
317
+ <div>
318
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">
319
+ First Name <span class="text-red-500">*</span>
320
+ </label>
321
+ <input type="text" id="firstName" required oninput="checkDuplicates(); triggerAutosave();"
322
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
323
+ placeholder="e.g., Jennifer">
324
+ <p class="mt-1 text-xs text-red-500 hidden" id="firstName-error">First name is required</p>
325
+ </div>
326
+
327
+ <div>
328
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Middle Name</label>
329
+ <input type="text" oninput="triggerAutosave()"
330
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
331
+ placeholder="e.g., Marie">
332
+ </div>
333
+
334
+ <div>
335
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">
336
+ Last Name <span class="text-red-500">*</span>
337
+ </label>
338
+ <input type="text" id="lastName" required oninput="checkDuplicates(); triggerAutosave();"
339
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
340
+ placeholder="e.g., Wilson">
341
+ <p class="mt-1 text-xs text-red-500 hidden" id="lastName-error">Last name is required</p>
342
+ </div>
343
+
344
+ <div>
345
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Preferred Name</label>
346
+ <input type="text" oninput="triggerAutosave()"
347
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
348
+ placeholder="e.g., Jenny">
349
+ </div>
350
+
351
+ <!-- DOB -->
352
+ <div>
353
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">
354
+ Date of Birth <span class="text-red-500">*</span>
355
+ </label>
356
+ <input type="date" id="dob" required oninput="checkDuplicates(); triggerAutosave();"
357
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
358
+ <p class="mt-1 text-xs text-red-500 hidden" id="dob-error">Date of birth is required</p>
359
+ </div>
360
+
361
+ <!-- Sex at Birth -->
362
+ <div>
363
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Sex at Birth</label>
364
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
365
+ <option value="">Select...</option>
366
+ <option value="female">Female</option>
367
+ <option value="male">Male</option>
368
+ <option value="intersex">Intersex</option>
369
+ <option value="unknown">Unknown</option>
370
+ </select>
371
+ </div>
372
+
373
+ <!-- Gender Identity -->
374
+ <div>
375
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Gender Identity</label>
376
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
377
+ <option value="">Select...</option>
378
+ <option value="female">Female</option>
379
+ <option value="male">Male</option>
380
+ <option value="trans-female">Transgender Female</option>
381
+ <option value="trans-male">Transgender Male</option>
382
+ <option value="non-binary">Non-Binary</option>
383
+ <option value="other">Other</option>
384
+ <option value="prefer-not">Prefer not to say</option>
385
+ </select>
386
+ </div>
387
+
388
+ <!-- Pronouns -->
389
+ <div>
390
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Pronouns</label>
391
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
392
+ <option value="">Select...</option>
393
+ <option value="she">She/Her</option>
394
+ <option value="he">He/Him</option>
395
+ <option value="they">They/Them</option>
396
+ <option value="ze">Ze/Zir</option>
397
+ <option value="custom">Custom</option>
398
+ </select>
399
+ </div>
400
+
401
+ <!-- Marital Status -->
402
+ <div>
403
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Marital Status</label>
404
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
405
+ <option value="">Select...</option>
406
+ <option value="single">Single</option>
407
+ <option value="married">Married</option>
408
+ <option value="divorced">Divorced</option>
409
+ <option value="widowed">Widowed</option>
410
+ <option value="separated">Separated</option>
411
+ <option value="partner">Domestic Partner</option>
412
+ </select>
413
+ </div>
414
+
415
+ <!-- Patient Status -->
416
+ <div>
417
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Patient Status</label>
418
+ <div class="flex gap-3 mt-2">
419
+ <label class="flex-1 cursor-pointer">
420
+ <input type="radio" name="patientStatus" value="active" checked onchange="triggerAutosave()" class="sr-only peer">
421
+ <div class="text-center py-2 border border-slate-300 rounded-lg text-sm text-slate-600 peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary transition-colors">
422
+ Active
423
+ </div>
424
+ </label>
425
+ <label class="flex-1 cursor-pointer">
426
+ <input type="radio" name="patientStatus" value="inactive" onchange="triggerAutosave()" class="sr-only peer">
427
+ <div class="text-center py-2 border border-slate-300 rounded-lg text-sm text-slate-600 peer-checked:bg-slate-700 peer-checked:text-white peer-checked:border-slate-700 transition-colors">
428
+ Inactive
429
+ </div>
430
+ </label>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Patient Type Chips -->
436
+ <div class="mt-6">
437
+ <label class="block text-sm font-medium text-slate-700 mb-2">Patient Type</label>
438
+ <div class="flex flex-wrap gap-2">
439
+ <label class="cursor-pointer">
440
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
441
+ <span class="inline-flex items-center px-3 py-1.5 rounded-full border border-slate-300 text-sm text-slate-600 peer-checked:bg-blue-50 peer-checked:text-primary peer-checked:border-primary transition-colors">
442
+ New Patient
443
+ </span>
444
+ </label>
445
+ <label class="cursor-pointer">
446
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
447
+ <span class="inline-flex items-center px-3 py-1.5 rounded-full border border-slate-300 text-sm text-slate-600 peer-checked:bg-blue-50 peer-checked:text-primary peer-checked:border-primary transition-colors">
448
+ Returning Patient
449
+ </span>
450
+ </label>
451
+ <label class="cursor-pointer">
452
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
453
+ <span class="inline-flex items-center px-3 py-1.5 rounded-full border border-slate-300 text-sm text-slate-600 peer-checked:bg-amber-50 peer-checked:text-amber-600 peer-checked:border-amber-300 transition-colors">
454
+ VIP
455
+ </span>
456
+ </label>
457
+ <label class="cursor-pointer">
458
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
459
+ <span class="inline-flex items-center px-3 py-1.5 rounded-full border border-slate-300 text-sm text-slate-600 peer-checked:bg-slate-100 peer-checked:text-slate-700 peer-checked:border-slate-400 transition-colors">
460
+ Other
461
+ </span>
462
+ </label>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Language & Interpreter -->
467
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
468
+ <div>
469
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Primary Language</label>
470
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
471
+ <option value="english" selected>English</option>
472
+ <option value="spanish">Spanish</option>
473
+ <option value="french">French</option>
474
+ <option value="chinese">Chinese</option>
475
+ <option value="vietnamese">Vietnamese</option>
476
+ <option value="korean">Korean</option>
477
+ <option value="russian">Russian</option>
478
+ <option value="arabic">Arabic</option>
479
+ <option value="other">Other</option>
480
+ </select>
481
+ </div>
482
+ <div class="flex items-center h-11 mt-6">
483
+ <label class="flex items-center gap-3 cursor-pointer">
484
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors bg-slate-200 peer-checked:bg-primary">
485
+ <input type="checkbox" id="interpreter" onchange="triggerAutosave(); document.getElementById('interpreter-toggle').classList.toggle('bg-primary'); document.getElementById('interpreter-toggle').classList.toggle('bg-slate-200'); interpreterToggle()" class="sr-only peer">
486
+ <span id="interpreter-toggle" class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1 peer-checked:translate-x-6"></span>
487
+ </div>
488
+ <span class="text-sm font-medium text-slate-700">Interpreter Needed</span>
489
+ </label>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Patient Tags -->
494
+ <div class="mt-6">
495
+ <label class="block text-sm font-medium text-slate-700 mb-2">Patient Tags</label>
496
+ <div class="flex flex-wrap gap-2" id="patient-tags">
497
+ <span class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-primary text-sm rounded-full border border-blue-200">
498
+ Chronic Disease
499
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="hover:text-blue-700"><i data-lucide="x" class="w-3 h-3"></i></button>
500
+ </span>
501
+ <span class="inline-flex items-center gap-1 px-3 py-1.5 bg-emerald-50 text-emerald-600 text-sm rounded-full border border-emerald-200">
502
+ Preventive Care
503
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="hover:text-emerald-700"><i data-lucide="x" class="w-3 h-3"></i></button>
504
+ </span>
505
+ <input type="text" placeholder="+ Add tag..."
506
+ class="h-9 px-3 border border-dashed border-slate-300 rounded-full text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 w-32"
507
+ onkeydown="if(event.key==='Enter'){event.preventDefault(); addTag(this.value); this.value='';}">
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Photo Upload -->
512
+ <div class="mt-6 border-t border-slate-200 pt-6">
513
+ <label class="block text-sm font-medium text-slate-700 mb-3">Patient Photo</label>
514
+ <div class="flex items-center gap-4">
515
+ <div class="w-20 h-20 rounded-xl bg-slate-100 flex items-center justify-center overflow-hidden border-2 border-dashed border-slate-300" id="photo-preview">
516
+ <i data-lucide="user" class="w-8 h-8 text-slate-400"></i>
517
+ </div>
518
+ <div class="flex-1">
519
+ <div class="border-2 border-dashed border-slate-300 rounded-xl p-4 text-center hover:border-primary hover:bg-blue-50/30 transition-colors cursor-pointer relative" id="photo-dropzone">
520
+ <input type="file" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handlePhotoUpload(this)">
521
+ <i data-lucide="upload-cloud" class="w-6 h-6 text-slate-400 mx-auto mb-2"></i>
522
+ <p class="text-sm text-slate-600 font-medium">Click or drag photo here</p>
523
+ <p class="text-xs text-slate-400 mt-1">PNG, JPG up to 5MB</p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Government ID -->
530
+ <div class="mt-6">
531
+ <label class="block text-sm font-medium text-slate-700 mb-3">Government ID</label>
532
+ <div class="grid grid-cols-2 gap-4">
533
+ <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-primary hover:bg-blue-50/30 transition-colors cursor-pointer relative" id="id-front-dropzone">
534
+ <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleFileUpload(this, 'id-front-preview')">
535
+ <div id="id-front-preview">
536
+ <i data-lucide="id-card" class="w-8 h-8 text-slate-400 mx-auto mb-2"></i>
537
+ <p class="text-sm text-slate-600 font-medium">Front Side</p>
538
+ </div>
539
+ </div>
540
+ <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-primary hover:bg-blue-50/30 transition-colors cursor-pointer relative" id="id-back-dropzone">
541
+ <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleFileUpload(this, 'id-back-preview')">
542
+ <div id="id-back-preview">
543
+ <i data-lucide="id-card" class="w-8 h-8 text-slate-400 mx-auto mb-2"></i>
544
+ <p class="text-sm text-slate-600 font-medium">Back Side</p>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- Section: Contact Information -->
552
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
553
+ <div class="mb-6">
554
+ <h2 class="text-lg font-semibold text-slate-900">Contact Information</h2>
555
+ <p class="text-sm text-slate-500 mt-1">Phone numbers, email, and address details</p>
556
+ </div>
557
+
558
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
559
+ <div>
560
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">
561
+ Mobile Phone <span class="text-red-500">*</span>
562
+ </label>
563
+ <input type="tel" id="mobilePhone" required oninput="checkDuplicates(); triggerAutosave();"
564
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
565
+ placeholder="(555) 123-4567">
566
+ </div>
567
+
568
+ <div>
569
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Home Phone</label>
570
+ <input type="tel" oninput="triggerAutosave()"
571
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
572
+ placeholder="(555) 987-6543">
573
+ </div>
574
+
575
+ <div class="md:col-span-2">
576
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">
577
+ Email Address <span class="text-red-500">*</span>
578
+ </label>
579
+ <input type="email" id="email" required oninput="checkDuplicates(); triggerAutosave();"
580
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
581
+ placeholder="patient@example.com">
582
+ </div>
583
+ </div>
584
+
585
+ <!-- Preferred Contact -->
586
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
587
+ <div>
588
+ <label class="block text-sm font-medium text-slate-700 mb-2">Preferred Contact Method</label>
589
+ <div class="flex flex-wrap gap-2">
590
+ <label class="cursor-pointer">
591
+ <input type="radio" name="contactMethod" value="call" checked onchange="triggerAutosave()" class="sr-only peer">
592
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary transition-colors">
593
+ <i data-lucide="phone" class="w-4 h-4"></i> Call
594
+ </span>
595
+ </label>
596
+ <label class="cursor-pointer">
597
+ <input type="radio" name="contactMethod" value="text" onchange="triggerAutosave()" class="sr-only peer">
598
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary transition-colors">
599
+ <i data-lucide="message-circle" class="w-4 h-4"></i> Text
600
+ </span>
601
+ </label>
602
+ <label class="cursor-pointer">
603
+ <input type="radio" name="contactMethod" value="email" onchange="triggerAutosave()" class="sr-only peer">
604
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary transition-colors">
605
+ <i data-lucide="mail" class="w-4 h-4"></i> Email
606
+ </span>
607
+ </label>
608
+ </div>
609
+ </div>
610
+
611
+ <div>
612
+ <label class="block text-sm font-medium text-slate-700 mb-2">Preferred Contact Time</label>
613
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
614
+ <option value="morning">Morning (8AM - 12PM)</option>
615
+ <option value="afternoon" selected>Afternoon (12PM - 5PM)</option>
616
+ <option value="evening">Evening (5PM - 8PM)</option>
617
+ <option value="anytime">Anytime</option>
618
+ </select>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Address -->
623
+ <div class="mt-6 border-t border-slate-200 pt-6">
624
+ <label class="block text-sm font-medium text-slate-700 mb-3">Address</label>
625
+ <div class="space-y-4">
626
+ <input type="text" oninput="triggerAutosave()" placeholder="Street Address"
627
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
628
+ <input type="text" oninput="triggerAutosave()" placeholder="Apartment, Suite, etc. (optional)"
629
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
630
+
631
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
632
+ <input type="text" oninput="triggerAutosave()" placeholder="City"
633
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
634
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
635
+ <option value="">State</option>
636
+ <option value="CA">California</option>
637
+ <option value="NY">New York</option>
638
+ <option value="TX">Texas</option>
639
+ <option value="FL">Florida</option>
640
+ <option value="WA">Washington</option>
641
+ </select>
642
+ <input type="text" oninput="triggerAutosave()" placeholder="ZIP Code"
643
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
644
+ </div>
645
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
646
+ <option value="US">United States</option>
647
+ <option value="CA">Canada</option>
648
+ <option value="UK">United Kingdom</option>
649
+ <option value="AU">Australia</option>
650
+ </select>
651
+ </div>
652
+ </div>
653
+ </div>
654
+
655
+ <!-- Section: Emergency Contact -->
656
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
657
+ <div class="mb-6">
658
+ <h2 class="text-lg font-semibold text-slate-900">Emergency Contact</h2>
659
+ <p class="text-sm text-slate-500 mt-1">Primary contact in case of emergency</p>
660
+ </div>
661
+
662
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
663
+ <div>
664
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Name</label>
665
+ <input type="text" oninput="triggerAutosave()"
666
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
667
+ placeholder="Full name">
668
+ </div>
669
+
670
+ <div>
671
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Relationship</label>
672
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
673
+ <option value="">Select...</option>
674
+ <option value="spouse">Spouse</option>
675
+ <option value="parent">Parent</option>
676
+ <option value="child">Child</option>
677
+ <option value="sibling">Sibling</option>
678
+ <option value="friend">Friend</option>
679
+ <option value="other">Other</option>
680
+ </select>
681
+ </div>
682
+
683
+ <div>
684
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Phone</label>
685
+ <input type="tel" oninput="triggerAutosave()"
686
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
687
+ placeholder="(555) 123-4567">
688
+ </div>
689
+
690
+ <div>
691
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
692
+ <input type="email" oninput="triggerAutosave()"
693
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
694
+ placeholder="email@example.com">
695
+ </div>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Section: Insurance Information -->
700
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
701
+ <div class="mb-6">
702
+ <h2 class="text-lg font-semibold text-slate-900">Insurance Information</h2>
703
+ <p class="text-sm text-slate-500 mt-1">Coverage and provider details</p>
704
+ </div>
705
+
706
+ <div class="flex gap-4 mb-6">
707
+ <label class="flex items-center gap-2 cursor-pointer">
708
+ <input type="radio" name="insuranceType" value="selfpay" checked onchange="toggleInsurance(false); triggerAutosave();" class="w-4 h-4 text-primary border-slate-300 focus:ring-primary">
709
+ <span class="text-sm font-medium text-slate-700">Self Pay</span>
710
+ </label>
711
+ <label class="flex items-center gap-2 cursor-pointer">
712
+ <input type="radio" name="insuranceType" value="insurance" onchange="toggleInsurance(true); triggerAutosave();" class="w-4 h-4 text-primary border-slate-300 focus:ring-primary">
713
+ <span class="text-sm font-medium text-slate-700">Insurance</span>
714
+ </label>
715
+ </div>
716
+
717
+ <div id="insurance-fields" class="hidden space-y-4">
718
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
719
+ <div>
720
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Insurance Provider</label>
721
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
722
+ <option value="">Select provider...</option>
723
+ <option value="aetna">Aetna</option>
724
+ <option value="bcbs">Blue Cross Blue Shield</option>
725
+ <option value="cigna">Cigna</option>
726
+ <option value="uhc">UnitedHealthcare</option>
727
+ <option value="medicare">Medicare</option>
728
+ <option value="medicaid">Medicaid</option>
729
+ </select>
730
+ </div>
731
+
732
+ <div>
733
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Plan Name</label>
734
+ <input type="text" oninput="triggerAutosave()"
735
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
736
+ </div>
737
+
738
+ <div>
739
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Member ID</label>
740
+ <input type="text" oninput="triggerAutosave()"
741
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
742
+ </div>
743
+
744
+ <div>
745
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Group Number</label>
746
+ <input type="text" oninput="triggerAutosave()"
747
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
748
+ </div>
749
+
750
+ <div>
751
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Policy Holder Name</label>
752
+ <input type="text" oninput="triggerAutosave()"
753
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
754
+ </div>
755
+
756
+ <div>
757
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Policy Holder DOB</label>
758
+ <input type="date" oninput="triggerAutosave()"
759
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
760
+ </div>
761
+
762
+ <div>
763
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Relationship to Patient</label>
764
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
765
+ <option value="self">Self</option>
766
+ <option value="spouse">Spouse</option>
767
+ <option value="child">Child</option>
768
+ <option value="other">Other</option>
769
+ </select>
770
+ </div>
771
+
772
+ <div>
773
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Effective Date</label>
774
+ <input type="date" oninput="triggerAutosave()"
775
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
776
+ </div>
777
+ </div>
778
+
779
+ <button type="button" onclick="verifyInsurance()" class="mt-4 inline-flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
780
+ <i data-lucide="shield-check" class="w-4 h-4"></i>
781
+ Verify Insurance
782
+ </button>
783
+
784
+ <!-- Insurance Card Uploads -->
785
+ <div class="mt-6 pt-6 border-t border-slate-200">
786
+ <label class="block text-sm font-medium text-slate-700 mb-3">Insurance Card</label>
787
+ <div class="grid grid-cols-2 gap-4">
788
+ <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-primary hover:bg-blue-50/30 transition-colors cursor-pointer relative">
789
+ <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleFileUpload(this, 'insurance-front-preview')">
790
+ <div id="insurance-front-preview">
791
+ <i data-lucide="credit-card" class="w-8 h-8 text-slate-400 mx-auto mb-2"></i>
792
+ <p class="text-sm text-slate-600 font-medium">Front Side</p>
793
+ </div>
794
+ </div>
795
+ <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-primary hover:bg-blue-50/30 transition-colors cursor-pointer relative">
796
+ <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleFileUpload(this, 'insurance-back-preview')">
797
+ <div id="insurance-back-preview">
798
+ <i data-lucide="credit-card" class="w-8 h-8 text-slate-400 mx-auto mb-2"></i>
799
+ <p class="text-sm text-slate-600 font-medium">Back Side</p>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+
805
+ <!-- Secondary Insurance Toggle -->
806
+ <div class="mt-4 pt-4 border-t border-slate-200">
807
+ <button type="button" onclick="toggleSecondaryInsurance()" class="text-sm text-primary hover:text-blue-700 font-medium flex items-center gap-1">
808
+ <i data-lucide="plus" class="w-4 h-4"></i>
809
+ Add Secondary Insurance
810
+ </button>
811
+
812
+ <div id="secondary-insurance" class="hidden mt-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
813
+ <h4 class="text-sm font-semibold text-slate-900 mb-3">Secondary Insurance</h4>
814
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
815
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg bg-white">
816
+ <option value="">Select provider...</option>
817
+ <option value="aetna">Aetna</option>
818
+ <option value="bcbs">Blue Cross Blue Shield</option>
819
+ </select>
820
+ <input type="text" oninput="triggerAutosave()" placeholder="Member ID" class="w-full h-11 px-3 border border-slate-300 rounded-lg">
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ </div>
826
+
827
+ <!-- Section: Billing Settings -->
828
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
829
+ <div class="mb-6">
830
+ <h2 class="text-lg font-semibold text-slate-900">Billing Settings</h2>
831
+ <p class="text-sm text-slate-500 mt-1">Invoice delivery and payment preferences</p>
832
+ </div>
833
+
834
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
835
+ <div>
836
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Billing Email</label>
837
+ <input type="email" oninput="triggerAutosave()"
838
+ class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
839
+ placeholder="billing@example.com">
840
+ </div>
841
+
842
+ <div>
843
+ <label class="block text-sm font-medium text-slate-700 mb-2">Invoice Delivery Preference</label>
844
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
845
+ <option value="email">Email</option>
846
+ <option value="print">Print</option>
847
+ <option value="portal">Patient Portal</option>
848
+ <option value="both">Email + Print</option>
849
+ </select>
850
+ </div>
851
+ </div>
852
+
853
+ <div class="mt-4">
854
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Billing Notes</label>
855
+ <textarea rows="3" oninput="triggerAutosave()"
856
+ class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors resize-none"
857
+ placeholder="Special billing instructions or notes..."></textarea>
858
+ </div>
859
+ </div>
860
+
861
+ <!-- Section: Clinical Summary -->
862
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
863
+ <div class="mb-6">
864
+ <h2 class="text-lg font-semibold text-slate-900">Clinical Summary</h2>
865
+ <p class="text-sm text-slate-500 mt-1">Medical history and care information</p>
866
+ </div>
867
+
868
+ <div class="space-y-6">
869
+ <div>
870
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Primary Care Provider</label>
871
+ <select onchange="triggerAutosave()" class="w-full h-11 px-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors bg-white">
872
+ <option value="">Select provider...</option>
873
+ <option value="dr-smith">Dr. Sarah Smith (Internal Medicine)</option>
874
+ <option value="dr-jones">Dr. Michael Jones (Cardiology)</option>
875
+ <option value="dr-wilson">Dr. Emily Wilson (Family Medicine)</option>
876
+ </select>
877
+ </div>
878
+
879
+ <!-- Allergies -->
880
+ <div>
881
+ <label class="block text-sm font-medium text-slate-700 mb-2">Allergies</label>
882
+ <div class="space-y-2" id="allergies-list">
883
+ <div class="flex gap-2">
884
+ <input type="text" oninput="triggerAutosave()" placeholder="Allergy name" class="flex-1 h-10 px-3 border border-slate-300 rounded-lg text-sm">
885
+ <select onchange="triggerAutosave()" class="h-10 px-3 border border-slate-300 rounded-lg text-sm bg-white w-32">
886
+ <option>Severe</option>
887
+ <option>Moderate</option>
888
+ <option>Mild</option>
889
+ </select>
890
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="p-2 text-slate-400 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
891
+ </div>
892
+ </div>
893
+ <button type="button" onclick="addAllergy()" class="mt-2 text-sm text-primary hover:text-blue-700 font-medium flex items-center gap-1">
894
+ <i data-lucide="plus" class="w-4 h-4"></i> Add Allergy
895
+ </button>
896
+ </div>
897
+
898
+ <!-- Medications -->
899
+ <div>
900
+ <label class="block text-sm font-medium text-slate-700 mb-2">Current Medications</label>
901
+ <div class="space-y-2" id="medications-list">
902
+ <div class="flex gap-2">
903
+ <input type="text" oninput="triggerAutosave()" placeholder="Medication name" class="flex-1 h-10 px-3 border border-slate-300 rounded-lg text-sm">
904
+ <input type="text" oninput="triggerAutosave()" placeholder="Dosage" class="w-24 h-10 px-3 border border-slate-300 rounded-lg text-sm">
905
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="p-2 text-slate-400 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
906
+ </div>
907
+ </div>
908
+ <button type="button" onclick="addMedication()" class="mt-2 text-sm text-primary hover:text-blue-700 font-medium flex items-center gap-1">
909
+ <i data-lucide="plus" class="w-4 h-4"></i> Add Medication
910
+ </button>
911
+ </div>
912
+
913
+ <!-- Medical Conditions -->
914
+ <div>
915
+ <label class="block text-sm font-medium text-slate-700 mb-2">Medical Conditions</label>
916
+ <div id="conditions-tags" class="flex flex-wrap gap-2 mb-2">
917
+ <span class="inline-flex items-center gap-1 px-3 py-1 bg-rose-50 text-rose-600 text-sm rounded-full border border-rose-200">
918
+ Diabetes Type 2
919
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="hover:text-rose-700"><i data-lucide="x" class="w-3 h-3"></i></button>
920
+ </span>
921
+ <span class="inline-flex items-center gap-1 px-3 py-1 bg-amber-50 text-amber-600 text-sm rounded-full border border-amber-200">
922
+ Hypertension
923
+ <button type="button" onclick="this.parentElement.remove(); triggerAutosave()" class="hover:text-amber-700"><i data-lucide="x" class="w-3 h-3"></i></button>
924
+ </span>
925
+ </div>
926
+ <input type="text" placeholder="+ Add condition..."
927
+ class="h-9 px-3 border border-dashed border-slate-300 rounded-full text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 w-full"
928
+ onkeydown="if(event.key==='Enter'){event.preventDefault(); addCondition(this.value); this.value='';}">
929
+ </div>
930
+
931
+ <!-- Risk Flags -->
932
+ <div>
933
+ <label class="block text-sm font-medium text-slate-700 mb-2">Risk Flags</label>
934
+ <div class="flex flex-wrap gap-2">
935
+ <label class="cursor-pointer">
936
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
937
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-red-50 peer-checked:text-red-600 peer-checked:border-red-200 transition-colors">
938
+ <i data-lucide="alert-circle" class="w-4 h-4"></i> High Fall Risk
939
+ </span>
940
+ </label>
941
+ <label class="cursor-pointer">
942
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
943
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-orange-50 peer-checked:text-orange-600 peer-checked:border-orange-200 transition-colors">
944
+ <i data-lucide="alert-circle" class="w-4 h-4"></i> Allergy Alert
945
+ </span>
946
+ </label>
947
+ <label class="cursor-pointer">
948
+ <input type="checkbox" class="sr-only peer" onchange="triggerAutosave()">
949
+ <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-600 peer-checked:bg-amber-50 peer-checked:text-amber-600 peer-checked:border-amber-200 transition-colors">
950
+ <i data-lucide="clock" class="w-4 h-4"></i> Late Arrival History
951
+ </span>
952
+ </label>
953
+ </div>
954
+ </div>
955
+
956
+ <!-- Quick Vitals -->
957
+ <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
958
+ <label class="block text-sm font-medium text-slate-700 mb-3">Optional Quick Vitals</label>
959
+ <div class="grid grid-cols-3 gap-4">
960
+ <div>
961
+ <label class="block text-xs text-slate-500 mb-1">Height</label>
962
+ <div class="flex gap-2">
963
+ <input type="number" oninput="triggerAutosave()" placeholder="ft" class="flex-1 h-10 px-3 border border-slate-300 rounded-lg text-sm">
964
+ <input type="number" oninput="triggerAutosave()" placeholder="in" class="flex-1 h-10 px-3 border border-slate-300 rounded-lg text-sm">
965
+ </div>
966
+ </div>
967
+ <div>
968
+ <label class="block text-xs text-slate-500 mb-1">Weight</label>
969
+ <div class="relative">
970
+ <input type="number" oninput="triggerAutosave()" placeholder="0" class="w-full h-10 px-3 pr-12 border border-slate-300 rounded-lg text-sm">
971
+ <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">lbs</span>
972
+ </div>
973
+ </div>
974
+ <div>
975
+ <label class="block text-xs text-slate-500 mb-1">Blood Pressure</label>
976
+ <input type="text" oninput="triggerAutosave()" placeholder="120/80" class="w-full h-10 px-3 border border-slate-300 rounded-lg text-sm">
977
+ </div>
978
+ </div>
979
+ </div>
980
+
981
+ <div>
982
+ <label class="block text-sm font-medium text-slate-700 mb-1.5">Patient Intake Notes</label>
983
+ <textarea rows="3" oninput="triggerAutosave()"
984
+ class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors resize-none"
985
+ placeholder="Initial observations, concerns, or notes..."></textarea>
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <!-- Section: Consents and Forms -->
991
+ <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 shadow-sm">
992
+ <div class="mb-6">
993
+ <h2 class="text-lg font-semibold text-slate-900">Consents and Forms</h2>
994
+ <p class="text-sm text-slate-500 mt-1">Required agreements and acknowledgments</p>
995
+ </div>
996
+
997
+ <div class="space-y-4" id="consents-list">
998
+ <!-- HIPAA -->
999
+ <div class="flex items-start gap-4 p-4 border border-slate-200 rounded-lg hover:border-primary transition-colors">
1000
+ <input type="checkbox" id="hipaa" onchange="triggerAutosave()" class="mt-0.5 w-5 h-5 text-primary border-slate-300 rounded focus:ring-primary">
1001
+ <div class="flex-1">
1002
+ <label for="hipaa" class="font-medium text-slate-900 cursor-pointer">HIPAA Acknowledgement</label>
1003
+ <p class="text-sm text-slate-500 mt-1">Patient acknowledges receipt of privacy practices notice</p>
1004
+ </div>
1005
+ <div class="flex items-center gap-2">
1006
+ <input type="file" class="hidden" onchange="handleConsentUpload(this, 'hip
1007
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>