add sqlite for its database

index.html

@@ -7,7 +7,8 @@
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/sql-wasm.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
     <style>
         .wave-bg {
@@ -119,16 +120,16 @@
                         <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
                             <i data-feather="mic" class="h-10 w-10 text-gray-400 mb-3"></i>
                             <p class="text-sm text-gray-500 mb-4">Record directly or upload an audio file</p>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
+                            <button onclick="startRecording()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                                 Start Recording
                             </button>
-                        </div>
+</div>
                         <div class="text-center">
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center w-full">
+                            <button onclick="uploadAudio()" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center w-full">
                                 <i data-feather="upload" class="h-4 w-4 mr-2"></i>
                                 Upload Audio File
                             </button>
-                        </div>
+</div>
                     </div>
                 </div>
 
@@ -274,9 +275,58 @@
             </div>
         </div>
     </main>
+    <!-- Transcription Modal -->
+    <div id="transcriptionModal" class="fixed inset-0 overflow-y-auto hidden z-50">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6">
+                <div>
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
+                        <i data-feather="mic" class="h-6 w-6 text-blue-600"></i>
+                    </div>
+                    <div class="mt-3 text-center sm:mt-5">
+                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">New Transcription</h3>
+                        <div class="mt-2">
+                            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+                                <div class="sm:col-span-3">
+                                    <label for="doctor-name" class="block text-sm font-medium text-gray-700">Doctor Name</label>
+                                    <input type="text" name="doctor-name" id="doctor-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                </div>
+                                <div class="sm:col-span-3">
+                                    <label for="patient-name" class="block text-sm font-medium text-gray-700">Patient Name</label>
+                                    <input type="text" name="patient-name" id="patient-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                </div>
+                                <div class="sm:col-span-6">
+                                    <label for="specialty" class="block text-sm font-medium text-gray-700">Specialty</label>
+                                    <select id="specialty" name="specialty" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
+                                        <option>Cardiology</option>
+                                        <option>Pediatrics</option>
+                                        <option>Orthopedics</option>
+                                        <option>Neurology</option>
+                                        <option>Dermatology</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+                    <button type="button" onclick="document.getElementById('transcriptionModal').classList.add('hidden');" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-1 sm:text-sm">
+                        Cancel
+                    </button>
+                    <button type="button" onclick="saveNewTranscription()" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:col-start-2 sm:text-sm">
+                        Save Transcription
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <!-- Footer -->
-    <footer class="bg-white border-t border-gray-200 mt-12">
+<footer class="bg-white border-t border-gray-200 mt-12">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
             <div class="md:flex md:items-center md:justify-between">
                 <div class="flex justify-center md:order-2 space-x-6">
@@ -298,10 +348,64 @@
             </div>
         </div>
     </footer>
-
     <script>
+        // Initialize SQLite database
+        let db;
+        async function initDB() {
+            const SQL = await initSqlJs({
+                locateFile: file => `https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/${file}`
+            });
+            db = new SQL.Database();
+            
+            // Create tables if they don't exist
+            db.run(`
+                CREATE TABLE IF NOT EXISTS transcriptions (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    doctor_name TEXT NOT NULL,
+                    patient_name TEXT NOT NULL,
+                    specialty TEXT NOT NULL,
+                    recording_date TEXT NOT NULL,
+                    duration INTEGER NOT NULL,
+                    status TEXT NOT NULL,
+                    due_date TEXT NOT NULL,
+                    audio_file BLOB,
+                    transcription_text TEXT
+                );
+            `);
+            
+            db.run(`
+                CREATE TABLE IF NOT EXISTS patients (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    name TEXT NOT NULL,
+                    last_visit TEXT NOT NULL,
+                    department TEXT NOT NULL
+                );
+            `);
+            
+            // Insert sample data if empty
+            const transcriptionsCount = db.exec("SELECT COUNT(*) FROM transcriptions")[0].values[0][0];
+            if (transcriptionsCount === 0) {
+                db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date)
+                    VALUES ('Dr. Michael Chen', 'John Peterson', 'Cardiology', '2023-02-15 08:42:00', 12, 'Completed', '2023-02-15 17:00:00')`);
+                db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date)
+                    VALUES ('Dr. Lisa Rodriguez', 'Sarah Williams', 'Pediatrics', '2023-02-14 15:15:00', 18, 'In Progress', '2023-02-16 10:00:00')`);
+                db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date)
+                    VALUES ('Dr. James Wilson', 'Robert Johnson', 'Orthopedics', '2023-02-14 11:30:00', 22, 'Pending', '2023-02-15 12:00:00')`);
+            }
+            
+            const patientsCount = db.exec("SELECT COUNT(*) FROM patients")[0].values[0][0];
+            if (patientsCount === 0) {
+                db.run(`INSERT INTO patients (name, last_visit, department)
+                    VALUES ('John D. Peterson', '2023-02-10', 'Cardiology')`);
+                db.run(`INSERT INTO patients (name, last_visit, department)
+                    VALUES ('Sarah M. Williams', '2023-02-08', 'Pediatrics')`);
+                db.run(`INSERT INTO patients (name, last_visit, department)
+                    VALUES ('Robert T. Johnson', '2023-02-12', 'Orthopedics')`);
+            }
+        }
+
         // Initialize Vanta.js waves background
-        VANTA.WAVES({
+VANTA.WAVES({
             el: "#wave-bg",
             color: 0x0066cc,
             waveHeight: 20,
@@ -309,9 +413,11 @@
             waveSpeed: 0.5,
             zoom: 0.8
         });
-
         // Initialize Feather Icons
         feather.replace();
-    </script>
+        
+        // Initialize database when page loads
+        document.addEventListener('DOMContentLoaded', initDB);
+</script>
 </body>
 </html>