can you do better with my ui so as to have a better dashboard:
<html><head><title>AfyaChain: Doctor's Dashboard</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"><style>
    :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --background-color: #f8f9fa;
        --text-color: #333;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
        font-family: 'Roboto', sans-serif;
        line-height: 1.6;
        color: var(--text-color);
        background-color: var(--background-color);
    }
    .container {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }
    header, footer {
        background-color: var(--primary-color);
        color: white;
        padding: 1rem;
    }
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .logo i {
        margin-right: 0.5rem;
    }
    nav ul {
        display: flex;
        list-style-type: none;
    }
    nav ul li {
        margin-left: 1rem;
    }
    nav ul li a {
        color: white;
        text-decoration: none;
    }
    main {
        display: flex;
        flex: 1;
    }
    .sidebar {
        width: 250px;
        background-color: #e9ecef;
        padding: 1rem;
    }
    .content {
        flex: 1;
        padding: 1rem;
    }
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .search-bar {
        display: flex;
        margin-bottom: 1rem;
    }
    .search-bar select {
        flex: 1;
        padding: 0.5rem;
        border: 1px solid var(--secondary-color);
        border-radius: 4px;
    }
    .btn {
        padding: 0.5rem 1rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .btn-secondary {
        background-color: var(--secondary-color);
    }
    .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;
        cursor: pointer;
    }
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .hidden {
        display: none;
    }
    .patient-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }
    .patient-photo {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
    }
    .patient-info {
        flex: 1;
    }
    .medical-info-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .medical-info-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        flex: 1 1 calc(33.333% - 1rem);
        min-width: 200px;
    }
    .medical-history {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 1rem;
    }
    .modal-content form {
        display: flex;
        flex-direction: column;
    }
    .modal-content form label {
        margin-top: 10px;
    }
    .modal-content form input,
    .modal-content form textarea {
        margin-bottom: 10px;
        padding: 5px;
    }
    .modal-content form button[type="submit"] {
        margin-top: 10px;
    }
    @media (max-width: 768px) {
        main {
            flex-direction: column;
        }
        .sidebar {
            width: 100%;
        }
    }
</style></head><body><div class="container"><header><div class="logo"><i class="fas fa-heartbeat"></i> AfyaChain</div><nav><ul><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul></nav></header><main><aside class="sidebar"><h2>Patient History Overview</h2><p>Recent medical history summary will appear here.</p><button id="viewAllHistory" class="btn">View All History</button></aside><section class="content"><div class="dashboard-header"><h1>Doctor's Dashboard</h1><p>Welcome, Dr. James</p><button id="logout" class="btn btn-secondary">Logout</button></div><div class="search-bar"><select id="patientSelect"><option value="">Select a patient</option><option value="seth">Seth</option><option value="vin">Vin</option><option value="ray">Ray</option></select></div><div id="patientInfo" class="hidden"></div><div id="otpVerification" class="hidden"><button id="sendOTP" class="btn">Send OTP</button><div id="otpInputArea" class="hidden"><input type="text" id="otpInput" placeholder="Enter OTP"><button id="verifyOTP" class="btn">Verify OTP</button></div></div><div id="medicalInfo" class="hidden"></div></section></main><footer><div class="logo"><i class="fas fa-heartbeat"></i> AfyaChain</div><p>&copy; 2023 AfyaChain. All rights reserved.</p><nav><ul><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul></nav></footer></div><div id="historyModal" class="modal"><div class="modal-content"><span class="close">&times;</span><h2>Full Medical History</h2><div id="fullHistory"></div></div></div><div id="diagnosisModal" class="modal"><div class="modal-content"><span class="close">&times;</span><h2>New Diagnosis</h2><form id="diagnosisForm"><label for="diagnosisDate">Date:</label><input type="date" id="diagnosisDate" name="diagnosisDate" required><label for="chiefComplaint">Chief Complaint:</label><input type="text" id="chiefComplaint" name="chiefComplaint" required><label for="symptoms">Symptoms:</label><textarea id="symptoms" name="symptoms" rows="3" required></textarea><label for="diagnosis">Diagnosis:</label><input type="text" id="diagnosis" name="diagnosis" required><label for="treatment">Treatment Plan:</label><textarea id="treatment" name="treatment" rows="3" required></textarea><label for="medications">Medications:</label><textarea id="medications" name="medications" rows="3"></textarea><label for="labTests">Lab Tests:</label><input type="text" id="labTests" name="labTests"><label for="followUp">Follow-up Date:</label><input type="date" id="followUp" name="followUp"><button type="submit" class="btn">Submit Diagnosis</button></form></div></div><script>
    const patients = {
        seth: {
            name: "Seth Johnson",
            photo: "https://randomuser.me/api/portraits/men/1.jpg",
            age: 35,
            height: 180,
            weight: 75,
            bloodType: "A+",
            allergies: ["Peanuts", "Penicillin"],
            medicalHistory: [
                { date: "2023-05-01", diagnosis: "Common Cold", treatment: "Rest and fluids" },
                { date: "2023-03-15", diagnosis: "Sprained Ankle", treatment: "RICE method" },
                { date: "2022-11-20", diagnosis: "Bronchitis", treatment: "Antibiotics and inhaler" }
            ]
        },
        vin: {
            name: "Vin Diesel",
            photo: "https://randomuser.me/api/portraits/men/2.jpg",
            age: 45,
            height: 182,
            weight: 85,
            bloodType: "O-",
            allergies: ["Shellfish"],
            medicalHistory: [
                { date: "2023-04-10", diagnosis: "Hypertension", treatment: "Prescribed ACE inhibitors" },
                { date: "2022-09-05", diagnosis: "Lower back pain", treatment: "Physical therapy" }
            ]
        },
        ray: {
            name: "Ray Charles",
            photo: "https://randomuser.me/api/portraits/men/3.jpg",
            age: 55,
            height: 175,
            weight: 70,
            bloodType: "B+",
            allergies: ["Latex"],
            medicalHistory: [
                { date: "2023-02-20", diagnosis: "Type 2 Diabetes", treatment: "Metformin and lifestyle changes" },
                { date: "2022-07-15", diagnosis: "Cataracts", treatment: "Scheduled for surgery" }
            ]
        }
    };

    const patientSelect = document.getElementById("patientSelect");
    const patientInfo = document.getElementById("patientInfo");
    const otpVerification = document.getElementById("otpVerification");
    const sendOTPBtn = document.getElementById("sendOTP");
    const otpInputArea = document.getElementById("otpInputArea");
    const verifyOTPBtn = document.getElementById("verifyOTP");
    const medicalInfo = document.getElementById("medicalInfo");
    const viewAllHistory = document.getElementById("viewAllHistory");
    const historyModal = document.getElementById("historyModal");
    const closeModal = document.querySelector(".close");
    const fullHistory = document.getElementById("fullHistory");
    const logoutBtn = document.getElementById("logout");
    const diagnosisModal = document.getElementById("diagnosisModal");
    const diagnosisForm = document.getElementById("diagnosisForm");
    const closeDiagnosisModal = diagnosisModal.querySelector(".close");

    let currentPatient = null;
    let otpSent = false;

    patientSelect.addEventListener("change", () => {
        const selectedPatient = patientSelect.value;
        if (selectedPatient) {
            currentPatient = patients[selectedPatient];
            displayPatientInfo(currentPatient);
        } else {
            resetView();
        }
    });

    function displayPatientInfo(patient) {
        patientInfo.innerHTML = `
            <div class="patient-card">
                <img src="${patient.photo}" alt="${patient.name}" class="patient-photo">
                <div class="patient-info">
                    <h2>${patient.name}</h2>
                    <p>Age: ${patient.age}</p>
                    <button id="addDiagnosisBtn" class="btn">Add New Diagnosis</button>
                </div>
            </div>
        `;
        patientInfo.classList.remove("hidden");
        otpVerification.classList.remove("hidden");
        medicalInfo.classList.add("hidden");
        otpInputArea.classList.add("hidden");
        otpSent = false;

        const addDiagnosisBtn = document.getElementById("addDiagnosisBtn");
        addDiagnosisBtn.addEventListener("click", () => {
            if (otpSent) {
                diagnosisModal.style.display = "block";
            } else {
                alert("Please verify OTP to add a new diagnosis.");
            }
        });
    }

    function resetView() {
        patientInfo.classList.add("hidden");
        otpVerification.classList.add("hidden");
        medicalInfo.classList.add("hidden");
        currentPatient = null;
    }

    sendOTPBtn.addEventListener("click", () => {
        const otp = Math.floor(1000 + Math.random() * 9000);
        alert(`OTP sent to patient: ${otp}`);
        otpInputArea.classList.remove("hidden");
        otpSent = true;
    });

    verifyOTPBtn.addEventListener("click", () => {
        if (otpSent) {
            displayMedicalInfo(currentPatient);
        } else {
            alert("Please send OTP first.");
        }
    });

    function displayMedicalInfo(patient) {
        medicalInfo.innerHTML = `
            <div class="medical-info-cards">
                <div class="medical-info-card">
                    <h3>Height</h3>
                    <p>${patient.height} cm</p>
                </div>
                <div class="medical-info-card">
                    <h3>Weight</h3>
                    <p>${patient.weight} kg</p>
                </div>
                <div class="medical-info-card">
                    <h3>Blood Type</h3>
                    <p>${patient.bloodType}</p>
                </div>
                <div class="medical-info-card">
                    <h3>Allergies</h3>
                    <p>${patient.allergies.join(", ")}</p>
                </div>
            </div>
            <div class="medical-history">
                <h3>Recent Medical History</h3>
                ${patient.medicalHistory.slice(0, 2).map(record => `
                    <div>
                        <h4>${record.date}</h4>
                        <p>Diagnosis: ${record.diagnosis}</p>
                        <p>Treatment: ${record.treatment}</p>
                    </div>
                `).join("")}
            </div>
        `;
        medicalInfo.classList.remove("hidden");
        otpVerification.classList.add("hidden");
    }

    viewAllHistory.addEventListener("click", () => {
        if (currentPatient && otpSent) {
            fullHistory.innerHTML = currentPatient.medicalHistory.map(record => `
                <div>
                    <h3>Date: ${record.date}</h3>
                    <p>Diagnosis: ${record.diagnosis}</p>
                    <p>Treatment: ${record.treatment}</p>
                </div>
            `).join("");
            historyModal.style.display = "block";
        } else if (!currentPatient) {
            alert("Please select a patient first.");
        } else {
            alert("Please verify OTP to access full medical records.");
        }
    });

    closeModal.addEventListener("click", () => {
        historyModal.style.display = "none";
    });

    window.addEventListener("click", (event) => {
        if (event.target === historyModal) {
            historyModal.style.display = "none";
        }
    });

    logoutBtn.addEventListener("click", () => {
        alert("Logged out successfully.");
        window.location.href = "login.html";
    });

    closeDiagnosisModal.addEventListener("click", () => {
        diagnosisModal.style.display = "none";
    });

    window.addEventListener("click", (event) => {
        if (event.target === diagnosisModal) {
            diagnosisModal.style.display = "none";
        }
    });

    diagnosisForm.addEventListener("submit", (e) => {
        e.preventDefault();
        const formData = new FormData(diagnosisForm);
        const newDiagnosis = {
            date: formData.get("diagnosisDate"),
            diagnosis: formData.get("diagnosis"),
            treatment: formData.get("treatment")
        };
        currentPatient.medicalHistory.unshift(newDiagnosis);
        alert("New diagnosis added successfully!");
        diagnosisModal.style.display = "none";
        displayMedicalInfo(currentPatient);
    });
</script></body></html>