i have this project im working on afya chain and need help revamping the outlook, i need you to help me make it better and more fields expected of the doctors dashboard where he can request for a patients medical history and on approval he gets access to the medical history and can add new history for the patient, lets see your creative juices flowing to add functionality to my site and improve the design:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AfyaChain - Revolutionizing Healthcare Management</title>
    <link rel="stylesheet" href="/static/css/dash.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <i class="fa-solid fa-stethoscope"></i>
                <h3>AfyaChain</h3>
            </div>
            <nav>
                <ul>
                    <li><a href="/"><i class="fa-solid fa-house"></i></a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="dashboard">
        <div class="sidebar" id="sidebar">
          <h2>Patient History</h2>
          <div id="patientHistory"></div>
          <a href="#" class="view-all-btn" onclick="showAllHistory()">View All History</a>
        </div>
        <div class="main-content">
          <div class="header">
            <h1>Doctor's Dashboard</h1>
            <button class="logout-btn" onclick="logout()">Log Out</button>
          </div>
          <div class="search-form">
            <input type="text" id="patientSearch" placeholder="Enter patient name or ID">
            <button onclick="searchPatient()">Search</button>
          </div>
          <div class="patient-info">
            <h2>Patient Information</h2>
            <table id="patientInfoTable"></table>
          </div>
          <div class="medical-records">
            <h2>Medical Records</h2>
            <div id="medicalRecords"></div>
            <div class="otp-verification" id="otpVerification" style="display:none;">
              <p>An OTP has been sent to the patient's registered contact.</p>
              <input type="text" id="otpInput" class="otp-input" placeholder="Enter OTP">
              <button onclick="verifyOTP()">Verify OTP</button>
            </div>
          </div>
          <div class="new-record-form" id="newRecordForm" style="display:none;">
            <h2>Add New Medical Record</h2>
            <form id="medicalRecordForm">
              <div class="form-group">
                <label for="visitDate">Visit Date:</label>
                <input type="date" id="visitDate" required>
              </div>
              <div class="form-group">
                <label for="visitType">Visit Type:</label>
                <select id="visitType" required>
                  <option value="">Select visit type</option>
                  <option value="Routine Checkup">Routine Checkup</option>
                  <option value="Emergency">Emergency</option>
                  <option value="Follow-up">Follow-up</option>
                  <option value="Specialist Consultation">Specialist Consultation</option>
                </select>
              </div>
              <div class="form-group">
                <label for="symptoms">Symptoms:</label>
                <textarea id="symptoms" placeholder="Describe the symptoms"></textarea>
              </div>
              <div class="form-group">
                <label for="diagnosis">Diagnosis:</label>
                <textarea id="diagnosis" placeholder="Enter diagnosis"></textarea>
              </div>
              <div class="form-group">
                <label for="treatment">Treatment:</label>
                <textarea id="treatment" placeholder="Describe the treatment plan"></textarea>
              </div>
              <div class="form-group">
                <label for="prescription">Prescription:</label>
                <textarea id="prescription" placeholder="Enter prescription details"></textarea>
              </div>
              <div class="form-group">
                <label for="notes">Additional Notes:</label>
                <textarea id="notes" placeholder="Any additional notes"></textarea>
              </div>
              <div class="form-group">
                <label for="cost">Cost ($):</label>
                <input type="number" id="cost" min="0" step="0.01" required>
              </div>
              <div class="form-group">
                <label for="fileUpload" class="file-upload">
                  <input type="file" id="fileUpload" multiple>
                  Upload Files/Images
                </label>
                <span id="fileList"></span>
              </div>
              <button type="button" class="submit-btn" onclick="submitNewRecord()">Submit New Record</button>
            </form>
          </div>
        </div>
      </div>
      
      <div id="historyModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <h2>Full Medical Record</h2>
          <div id="fullHistoryContent"></div>
        </div>
      </div>

    <footer>
        <div class="container">
            <div class="logo">
                <i class="fa-solid fa-stethoscope"></i>
                <h3>AfyaChain</h3>
            </div>
            <p>&copy; 2024 AfyaChain. All rights reserved.</p>
            <nav>
                <ul>
                    <li><a href="/"><i class="fa-solid fa-house"></i></a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </footer>
    <script src="/static/js/scripts.js"></script>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@400..700&family=Pacifico&family=Playwrite+HR:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f4f8;
}
.dashboard {
display: flex;
height: 100vh;
}

.dashboard h2 {
    color: #003366;
    font-family: 'Roboto', sans-serif;
}

.dashboard .sidebar h2 {
    color: #fff;
}

.sidebar {
width: 250px;
background-color: #023e8a;
color: white;
padding: 20px;
overflow-y: auto;
}
.main-content {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
}
.dashboard .header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
margin-bottom: 20px;
position: relative;
}
.search-form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.search-form input {
width: 70%;
padding: 10px;
margin-right: 10px;
}
.search-form button {
padding: 10px 20px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.patient-info, .medical-records {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.otp-verification {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
.auth-button {
background-color: #e74c3c;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.otp-input {
width: 100px;
padding: 5px;
margin-right: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.new-record-form {
background-color: #e8f5e9;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.new-record-form textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.new-record-form input[type="number"] {
width: 100px;
}
.logout-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.history-link {
color: #3498db;
text-decoration: none;
cursor: pointer;
}
.history-link:hover {
text-decoration: underline;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-group textarea {
height: 100px;
}
.file-upload {
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #3498db;
color: white;
border-radius: 4px;
}
.file-upload input[type="file"] {
display: none;
}
.submit-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.view-all-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
text-align: center;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
text-decoration: none;
}
.view-all-btn:hover {
background-color: #2980b9;
}

.btn {
display: inline-block;
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
font-size: 14px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #2980b9;
}
.email-form {
margin-top: 20px;
}
.email-form input[type="email"] {
width: 70%;
padding: 8px;
margin-right: 10px;
}
/* Header section */
header .container, footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 150px;
    background-color: #003366;
    color: #fff;
}

header .container .logo, footer .container .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .container .logo h3, footer .container .logo h3 {
    color: var(--soft-white);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

header .container nav ul, footer .container nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    text-decoration: none;
}

header .container nav ul li, footer .container nav ul li {
    padding-inline: 10px;
}

header .container nav ul a, footer .container nav ul a {
    color: var(--soft-white);
    text-decoration: none;
}

.logo i {
    font-size: 28px;
    margin-right: 10px;
}
js:
document.addEventListener('DOMContentLoaded', function() {
    const features = document.querySelectorAll('.feature');
    let currentFeatureIndex = 0;

    function showFeature(index) {
        features.forEach((feature, i) => {
            feature.classList.toggle('active', i === index);
        });
    }

    function nextFeature() {
        currentFeatureIndex = (currentFeatureIndex + 1) % features.length;
        showFeature(currentFeatureIndex);
    }

    showFeature(currentFeatureIndex);
    setInterval(nextFeature, 5000);
});


// dashboard facility

let currentPatient = null;
let generatedOTP = null;

function searchPatient() {
  // Simulating a patient search
  currentPatient = {
    name: "John Doe",
    id: "12345",
    age: 35,
    gender: "Male",
    contact: "+1234567890",
    bloodGroup: "A+",
    allergies: ["Penicillin", "Peanuts"],
    vaccines: ["COVID-19", "Flu", "Tetanus"],
    hivStatus: "Negative",
    medications: ["Lisinopril", "Metformin"],
    bloodPressure: "120/80",
    height: "180 cm",
    weight: "75 kg",
    records: [
      { date: "2023-05-15", visitType: "Routine Checkup", details: "All vitals normal", cost: 100 },
      { date: "2022-11-03", visitType: "Vaccination", details: "Flu vaccination administered", cost: 50 },
      { date: "2022-03-20", visitType: "Emergency", details: "Sprained ankle - Prescribed rest and ice", cost: 150 },
      { date: "2021-09-10", visitType: "Specialist Consultation", details: "Cardiology follow-up - EKG performed", cost: 200 },
      { date: "2021-06-05", visitType: "Routine Checkup", details: "Annual physical - All tests within normal range", cost: 120 }
    ]
  };
  updatePatientInfo();
  document.getElementById("otpVerification").style.display = "block";
  generatedOTP = Math.floor(100000 + Math.random() * 900000).toString();
  alert(`OTP sent to patient's contact: ${generatedOTP}`);
}

function updatePatientInfo() {
  const infoTable = document.getElementById("patientInfoTable");
  infoTable.innerHTML = `
    <tr><th>Name</th><td>${currentPatient.name}</td></tr>
    <tr><th>ID</th><td>${currentPatient.id}</td></tr>
    <tr><th>Age</th><td>${currentPatient.age}</td></tr>
    <tr><th>Gender</th><td>${currentPatient.gender}</td></tr>
    <tr><th>Contact</th><td>${currentPatient.contact}</td></tr>
  `;
  document.getElementById("medicalRecords").innerHTML = "<p>Verify OTP to view full medical records.</p>";
}

function verifyOTP() {
  const enteredOTP = document.getElementById("otpInput").value;
  if (enteredOTP === generatedOTP) {
    alert("OTP verified. Access granted to full medical records.");
    displayFullMedicalRecords();
    document.getElementById("otpVerification").style.display = "none";
    document.getElementById("newRecordForm").style.display = "block";
  } else {
    alert("Invalid OTP. Please try again.");
  }
}

function displayFullMedicalRecords() {
  const recordsHTML = `
    <h3>Full Medical Records</h3>
    <table>
      <tr><th>Blood Group</th><td>${currentPatient.bloodGroup}</td></tr>
      <tr><th>Allergies</th><td>${currentPatient.allergies.join(", ")}</td></tr>
      <tr><th>Vaccines</th><td>${currentPatient.vaccines.join(", ")}</td></tr>
      <tr><th>HIV Status</th><td>${currentPatient.hivStatus}</td></tr>
      <tr><th>Medications</th><td>${currentPatient.medications.join(", ")}</td></tr>
      <tr><th>Blood Pressure</th><td>${currentPatient.bloodPressure}</td></tr>
      <tr><th>Height</th><td>${currentPatient.height}</td></tr>
      <tr><th>Weight</th><td>${currentPatient.weight}</td></tr>
    </table>
  `;
  document.getElementById("medicalRecords").innerHTML = recordsHTML;
  updateSidebar();
}

function updateSidebar() {
  const sidebar = document.getElementById("patientHistory");
  sidebar.innerHTML = "<h3>Recent Medical History</h3>";
  const historyList = document.createElement("ul");
  currentPatient.records.slice(0, 3).forEach((record, index) => {
    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.textContent = `${record.date}: ${record.visitType}`;
    link.href = "#";
    link.className = "history-link";
    link.onclick = (e) => {
      e.preventDefault();
      showFullHistory(index);
    };
    listItem.appendChild(link);
    historyList.appendChild(listItem);
  });
  sidebar.appendChild(historyList);
}

function showFullHistory(index) {
  const record = currentPatient.records[index];
  const modal = document.getElementById("historyModal");
  const content = document.getElementById("fullHistoryContent");
  content.innerHTML = `
    <h3>Date: ${record.date}</h3>
    <p><strong>Visit Type:</strong> ${record.visitType}</p>
    <p><strong>Details:</strong> ${record.details}</p>
    <p><strong>Cost:</strong> $${record.cost}</p>
  `;
  modal.style.display = "block";
}

function showAllHistory() {
  const modal = document.getElementById("historyModal");
  const content = document.getElementById("fullHistoryContent");
  content.innerHTML = "<h2>All Medical History</h2>";
  const table = document.createElement("table");
  table.innerHTML = `
    <tr>
      <th>Date</th>
      <th>Visit Type</th>
      <th>Details</th>
      <th>Cost</th>
    </tr>
  `;
  currentPatient.records.forEach(record => {
    const row = table.insertRow();
    row.innerHTML = `
      <td>${record.date}</td>
      <td>${record.visitType}</td>
      <td>${record.details}</td>
      <td>$${record.cost}</td>
    `;
  });
  content.appendChild(table);
  modal.style.display = "block";
}

function submitNewRecord() {
  const visitDate = document.getElementById("visitDate").value;
  const visitType = document.getElementById("visitType").value;
  const symptoms = document.getElementById("symptoms").value;
  const diagnosis = document.getElementById("diagnosis").value;
  const treatment = document.getElementById("treatment").value;
  const prescription = document.getElementById("prescription").value;
  const notes = document.getElementById("notes").value;
  const cost = document.getElementById("cost").value;
  const files = document.getElementById("fileUpload").files;

  if (!visitDate || !visitType || !cost) {
    alert("Please fill in all required fields (Visit Date, Visit Type, and Cost).");
    return;
  }

  const newRecord = {
    date: visitDate,
    visitType: visitType,
    details: `Symptoms: ${symptoms}\nDiagnosis: ${diagnosis}\nTreatment: ${treatment}\nPrescription: ${prescription}\nNotes: ${notes}`,
    cost: parseFloat(cost),
    files: Array.from(files).map(file => file.name)
  };

  currentPatient.records.unshift(newRecord);
  alert("New medical record added successfully!");
  updateSidebar();
  document.getElementById("medicalRecordForm").reset();
  document.getElementById("fileList").textContent = "";
}

function logout() {
    if (confirm("Are you sure you want to log out?")) {
  
      alert("You have been logged out successfully.");
      // Redirect to the login page
      window.location.href = '/login'; // Update with your actual login page URL
    }
  }
  

// Modal close functionality
const modal = document.getElementById("historyModal");
const span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// File upload handling
document.getElementById("fileUpload").addEventListener("change", function(event) {
  const fileList = event.target.files;
  let fileNames = "";
  for (let i = 0; i < fileList.length; i++) {
    fileNames += fileList[i].name + ", ";
  }
  document.getElementById("fileList").textContent = fileNames.slice(0, -2);
});

// Initialize the dashboard
searchPatient();
// Function to generate a random authentication number
function generateAuthNumber() {
  // Generate a random number between 100000 and 999999
  return Math.floor(100000 + Math.random() * 900000);
}

// Function to display the authentication number
function showAuthNumber(authNumber) {
  // Create a message element
  const messageDiv = document.createElement("div");
  messageDiv.className = "auth-message"; // You can style this class in CSS
  messageDiv.innerHTML = `Your authentication number is: <strong>${authNumber}</strong>`;
  
  // Append the message to the body or any specific container
  document.body.appendChild(messageDiv);
}

// Example function to be called on successful signup
function onSignupSuccess() {
  const authNumber = generateAuthNumber(); // Generate the authentication number
  showAuthNumber(authNumber); // Show the authentication number to the user
}

// Call the onSignupSuccess function for demonstration (replace this with your actual signup success callback)
onSignupSuccess();