diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/adminDashboard.css b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/adminDashboard.css index 1a2b3c1..b9f5d1c 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/adminDashboard.css +++ b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/adminDashboard.css @@ -1,94 +1,65 @@ -/*this is the style sheet for the adminDashboard. */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} -/* -Global Reset (`*`) +html, body { + height: 100%; + font-family: Arial, sans-serif; + } -* Purpose: Ensure consistent layout across all browsers. -* Properties: +.wrapper { + display:flex; + flex-direction:column; + min-height: 100vh; +} - * `margin: 0` — removes default outer spacing from all elements. - * `padding: 0` — removes default inner spacing. - * `box-sizing: border-box` — ensures padding and borders are included within the total width/height of elements. +h2 { + font-size: 32px; + font-weight: bold; + margin-bottom: 50px; + color: #003e3e; +} -Base HTML & Body (`html, body`) +.main-content { + flex-grow: 1; + padding: 40px; + display: flex; + text-align: center; + background-image: url("index.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; +} -* Purpose: Establish a full-height layout and apply a standard font across the page. -* Properties: +button { + background-color: #A62B1F; + color: white; + border: none; + border-radius: 12px; + padding: 10px 20px; + margin-top: 20px; + width: 200px; + cursor: pointer; + font-size: 16px; +} - * `height: 100%` — allows containers to stretch to the full viewport height. - * `font-family: Arial, sans-serif` — applies a clean, readable sans-serif font. +button::hover { + background-color: #A62B1F; +} -Main Layout Wrapper (`.wrapper`) +.adminBtn { + background-color: #f4f4f4; + color: #333; + font-weight: bold; + width: 110px; + padding: 10px 0; + border: none; + cursor: pointer; +} -* Purpose: Create a flexible, vertical layout that fills the entire screen. -* Properties: - - * `display: flex` — enables flexbox for layout control. - * `flex-direction: column` — stacks children vertically. - * `min-height: 100vh` — ensures the wrapper always covers full screen height. - -Section Heading (`h2`) - -* Purpose: Style the headings prominently for section separation. -* Properties: - - * `font-size: 32px` — makes the heading large and noticeable. - * `font-weight: bold` — emphasizes text. - * `margin-bottom: 50px` — creates space below the heading. - * `color: #003e3e` — uses a strong teal for visual anchoring. - -Main Content Section (`.main-content`) - -* Purpose: Layout the main content with padding and a background image. -* Properties: - - * `flex-grow: 1` — lets the content fill the available vertical space. - * `padding: 40px` — adds internal spacing around content. - * `display: flex` and `flex-direction: column` — organizes content in a vertical stack. - * `text-align: center` — centers the text. - * `background-image: url("index.png")` — sets a full-screen dashboard background. - * `background-size: cover` — ensures the image covers the whole section. - * `background-position: center` — centers the image. - * `background-repeat: no-repeat` — avoids tiling the image. - * `background-attachment: fixed` — fixes the image while scrolling. - -Primary Button (`button`) - -* Purpose: Design prominent, interactive buttons for main actions. - -* Properties: - - * `background-color: #A62B1F` — sets a bold red color. - * `color: white` — makes text stand out. - * `border: none` — removes any outline/border. - * `border-radius: 12px` — creates rounded corners. - * `padding: 10px 20px` — gives space inside the button. - * `margin-top: 20px` — adds spacing above the button. - * `width: 200px` — ensures consistent button width. - * `cursor: pointer` — shows a hand icon on hover. - * `font-size: 16px` — makes the text readable. - -* On Hover: - - * Retains the same red background to maintain branding. - -Admin Button (`.adminBtn`) - -* Purpose: Provide a secondary button style for admin-specific actions. - -* Properties: - - * `background-color: #f4f4f4` — uses a light grey background. - * `color: #333` — uses dark text for contrast. - * `font-weight: bold` — emphasizes text. - * `width: 110px` — smaller, compact width. - * `padding: 10px 0` — vertical padding only. - * `border: none` — clean look. - * `cursor: pointer` — indicates it's clickable. - -* On Hover**: - - Changes text color to `#A62B1F` for brand consistency while keeping the background same. - - -*/ \ No newline at end of file +.adminBtn::hover { + color: #A62B1F; +} \ No newline at end of file diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/doctorDashboard.css b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/doctorDashboard.css index a7366f9..7aeb761 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/doctorDashboard.css +++ b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/doctorDashboard.css @@ -1,65 +1,100 @@ -/* This is the style sheet for the doctorDashboard.html */ -/* -**Table Header (`.table-header`)** +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} -* Set font size to `24px` for clear emphasis. -* Use a dark teal color (`#015c5d`) for consistency with the theme. -* Add `30px` bottom margin and remove right margin. +html, body { + height: 100%; + font-family: Arial, sans-serif; + } -**Table Styling (`table`)** +.wrapper { + display:flex; + flex-direction:column; + min-height: 100vh; +} -* Make the table full width (`100%`). -* Collapse borders for clean lines. -* Use a `sans-serif` font. -* Add `20px` top margin for spacing. +.main-content { + flex-grow: 1; + padding: 40px; + display: flex; + text-align: center; + background-image: url("index.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; +} -**Table Head (`thead`)** +.table-header { + font-size: 24px; + color: #015c5d; + margin-bottom: 30px; + margin-right: 0; +} -* Set a very light dark background (`#33333310`) for header row. -* Use white text color (`#fff`). +table { + width: 100%; + border-collapse: collapse; + font-family: sans-serif; + margin-top: 20px; +} -**Table Cells (`td, th`)** +thead { + background-color: #33333310; + color: #fff; +} -* Apply padding of `12px 16px` for spacing. -* Center-align the text. -* Add a subtle bottom border (`1px solid #ddd`). +td,th { + padding: 12px 16px; + text-align: center; + border-bottom: 1px solid #ddd; +} -**Table Row Styling** +tr:nth-child(even) { + background-color: #f9f9f959; +} -* Alternate row colors for better readability: +tr:nth-child(odd) { + background-color: #ffffffc0; +} - * Even rows: semi-transparent light grey (`#f9f9f959`). - * Odd rows: soft white background (`#ffffffc0`). -* On hover: highlight row with a light teal overlay (`#015c5d39`). +tr::hover { + background-color: #015c5d39; +} -**Prescription Button (`.prescription-btn`)** +.prescription-btn { + width: 30px; + height: 30px; + cursor: pointer; +} -* Set size to `30px x 30px`. -* Make it interactive with a pointer cursor. -* Add transition effects for scale and brightness on hover. -* On hover: +.prescription-btn:hover { + transform: scale(1.1); + background-color: lighten(0.1); +} - * Slightly enlarge (`scale(1.1)`) - * Brighten appearance -* On click: slightly shrink (`scale(0.95)`). +.prescription-btn:active { + transform: scale(0.95); +} -**No Record Message (`.noPatientRecord`)** +.noPatientRecord { + font-size: 16px; + color: grey; + font-style: italic; +} -* Use a `16px` italic grey font to indicate no data gently. +.today-btn { + margin-right: 10px; + padding: 10px; + background-color: #015c5d; +} -**Today Button (`.today-btn`)** - -* Add right margin (`10px`). -* Add padding (`10px`). -* Set background color to teal green (`#015c5d`). - -**Date Picker (`.date-picker`)** - -* Add left margin (`10px`) and top margin (`13px`). -* Round corners with `8px` radius. -* Add padding (`10px`) and set fixed height (`30px`). - ---- - -Let me know if you'd like a consolidated style guide for the entire HospitalCRM frontend. - */ \ No newline at end of file +.date-picker { + margin-left: 10px; + margin-top: 13px; + corner-radius: 8px; + padding: 10px; + height: 30px; +} \ No newline at end of file diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/index.css b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/index.css index 3c35671..06d8550 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/index.css +++ b/SmartClinicManagementSystem/app/src/main/resources/static/assets/css/index.css @@ -1,53 +1,60 @@ -/* this is the style sheet file for index.htlm */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} -/* -**Global Reset (`*`)** +html, body { + height: 100%; + font-family: 'Roboto' sans-serif; +} -* Remove all default margin and padding. -* Use `border-box` for sizing to include padding and border in element size. +.wrapper { + display: flex; + flex-direction:column; + min-height: 100vh; +} -**Base (`html, body`)** +h2 { + font-size: 48px; + margin-bottom: 50px; + color: #003e3e; + font-family: 'Alegreya', 'Roboto', sans-serif; + font-weight: bold; +} -* Set height to 100% for full viewport layout. -* Use the `'Roboto'` sans-serif font for modern, clean typography. +.main-content { + flex-grow: 1; + padding: 40px; + display: flex; + text-align: center; + background-image: url("index.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; +} -**Layout Wrapper (`.wrapper`)** +button { + background-color: #015c5d; + color: white; + border-radius: 12px; + padding: 10px 20px; + width: 200px; + margin: 10px; + pointer:cursor; + font-size: 16px; +} -* Use a vertical flexbox layout. -* Ensure the wrapper covers at least the full height of the screen (`min-height: 100vh`). +button::hover { + background-color: #A62B1F; +} -**Heading (`h2`)** +.dashboard-btn { + background-color: #015c5d; +} -* Set a large font size (`48px`) for prominence. -* Add a bottom margin of `50px` for spacing. -* Use a dark teal color (`#003e3e`). -* Make the font bold and use a blended font stack (`'Alegreya', 'Roboto', sans-serif`) for elegant styling. -**Main Section (`.main-content`)** - -* Allow the section to grow to fill space with `flex-grow: 1`. -* Add `40px` of internal padding. -* Center content both horizontally and vertically using `justify-content` and `align-items`. -* Display items in a column direction. -* Center all text. -* Apply a full-screen background image with: - - * `cover` size - * `center` positioning - * no repeat - * `fixed` attachment to keep image still during scroll - -**Buttons (`button`)** - -* Style with a teal green background (`#015c5d`) and white text. -* Remove borders and round the corners (`12px`). -* Use `10px 20px` padding and set width to `200px`. -* Add a top margin of `10px` for spacing. -* Enable pointer cursor and readable font size (`16px`). -* On hover, change background color to bold red (`#A62B1F`). - -**Dashboard Buttons (`.dashboard-btn`)** - -* Use the same base green background (`#015c5d`) as the default button. -* On hover, darken the background to deep teal (`#003e3e`) for visual feedback. - */ +.dashboard-btn::hover { + background: #003e3e; +} \ No newline at end of file diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/index.html b/SmartClinicManagementSystem/app/src/main/resources/static/index.html index db9bef4..6a54d75 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/index.html +++ b/SmartClinicManagementSystem/app/src/main/resources/static/index.html @@ -1,115 +1,34 @@ + - + + + Smart Clinic Management System + + + + + + + + +
+
+ +
+

Select Your Role:

+ + + +
+ +
+
+ - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/js/components/doctorCard.js b/SmartClinicManagementSystem/app/src/main/resources/static/js/components/doctorCard.js index f32d36c..7083840 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/js/components/doctorCard.js +++ b/SmartClinicManagementSystem/app/src/main/resources/static/js/components/doctorCard.js @@ -1,41 +1,71 @@ -/* -Import the overlay function for booking appointments from loggedPatient.js +import deleteDoctor from "../services/doctorService.js"; +import getPatientData from "../services/patientServices.js"; +import showBookingOverlay from "../loggedPatient.js"; - Import the deleteDoctor API function to remove doctors (admin role) from docotrServices.js +export function createDoctorCard(doctor) { + const card = document.createElement("div"); + card.classList.add("doctor-card"); - Import function to fetch patient details (used during booking) from patientServices.js + const role = localStorage.getItem("userRole"); - Function to create and return a DOM element for a single doctor card - Create the main container for the doctor card - Retrieve the current user role from localStorage - Create a div to hold doctor information - Create and set the doctor’s name - Create and set the doctor's specialization - Create and set the doctor's email - Create and list available appointment times - Append all info elements to the doctor info container - Create a container for card action buttons - === ADMIN ROLE ACTIONS === - Create a delete button - Add click handler for delete button - Get the admin token from localStorage - Call API to delete the doctor - Show result and remove card if successful - Add delete button to actions container - - === PATIENT (NOT LOGGED-IN) ROLE ACTIONS === - Create a book now button - Alert patient to log in before booking - Add button to actions container - - === LOGGED-IN PATIENT ROLE ACTIONS === - Create a book now button - Handle booking logic for logged-in patient - Redirect if token not available - Fetch patient data with token - Show booking overlay UI with doctor and patient info - Add button to actions container - - Append doctor info and action buttons to the car - Return the complete doctor card element -*/ + const infoDiv = document.createElement("div"); + infoDiv.classList.add("doctor-info"); + + const name = document.createElement("h3"); + name.textContent = doctor.name; + + const specialization = document.createElement("h3"); + specialization.textContent = doctor.specialization; + + const email = document.createElement("h3"); + email.textContent = doctor.email; + + const availability = document.createElement("h3"); + availability.textContent = doctor.availability.join(", "); + + infoDiv.appendChild(name); + infoDiv.appendChild(specialization); + infoDiv.appendChild(email); + infoDiv.appendChild(availability); + + const actionsDiv = document.createElement("div"); + actionsDiv.classList.add("card-actions"); + + if (role === "admin") { + const removeBtn = document.createElement("button"); + removeBtn.textContent = "Delete"; + removeBtn.addEventListener("click", async () => { + if (confirm("Arey you sure?") == true) { + const token = localStorage.getItem("TOKEN"); + const result = await deleteDoctor(doctor.id, token); + if (result.success) { + card.remove(); + } + } + }); + actionsDiv.appendChild(removeBtn); + + } else if (role === "patient") { + const bookNow = document.createElement("button"); + bookNow.textContent = "Book Now"; + bookNow.addEventListener("click", () => { + alert("Patient needs to login first."); + }); + actionsDiv.appendChild(bookNow); + + } else if (role === "loggedPatient") { + const bookNow = document.createElement("button"); + bookNow.textContent = "Book Now"; + bookNow.addEventListener("click", async (e) => { + const token = localStorage.getItem("TOKEN"); + const patientData = await getPatientData(token); + showBookingOverlay(e, doctor, patientData); + }); + actionsDiv.appendChild(bookNow); + } + + card.appendChild(infoDiv); + card.appendChild(actionsDiv); + + return card; +} \ No newline at end of file diff --git a/SmartClinicManagementSystem/app/src/main/resources/static/js/components/footer.js b/SmartClinicManagementSystem/app/src/main/resources/static/js/components/footer.js index 4739856..f46d71a 100644 --- a/SmartClinicManagementSystem/app/src/main/resources/static/js/components/footer.js +++ b/SmartClinicManagementSystem/app/src/main/resources/static/js/components/footer.js @@ -1,104 +1,34 @@ -/* - Function to render the footer content into the page - Select the footer element from the DOM - Set the inner HTML of the footer element to include the footer content - This section dynamically generates the footer content for the web page, including the hospital's logo, copyright information, and various helpful links. +export function renderFooter() { + const footer = document.getElementById("footer"); + footer.innerHTML = ` + ` +} - 1. Insert Footer HTML Content - - * The content is inserted into the `footer` element with the ID "footer" using `footer.innerHTML`. - * This is done dynamically via JavaScript to ensure that the footer is properly rendered across different pages. - - 2. Create the Footer Wrapper - - * The `