Add SmartClinicManagementSystem

2025-11-03 18:27:23 +01:00
parent f49be0c3d3
commit f65dc6ccdd
75 changed files with 4380 additions and 1 deletions
--- a/SmartClinicManagementSystem/app/src/main/resources/templates/admin/adminDashboard.html
+++ b/SmartClinicManagementSystem/app/src/main/resources/templates/admin/adminDashboard.html
@@ -0,0 +1,109 @@
+<!-- adminDashboard.html -->
+
+<!-- 
+Step-by-Step Explanation of `adminDashboard.html`
+This file creates the Admin Dashboard interface for managing doctor-related data 
+with search, filter, and modal functionality.
+
+
+1. Declare the Document Type
+
+   * Use `<!DOCTYPE html>` to ensure HTML5 standards for consistent rendering across browsers.
+
+2. Begin the HTML Document with Thymeleaf Namespace
+
+   * Add the `<html>` tag with `xmlns:th="http://www.thymeleaf.org"` to allow Thymeleaf-specific attributes in Spring-based apps.
+
+3. Head Section – Metadata and Resources
+
+   * Open the `<head>` section for meta info and links to assets and scripts.
+
+4. Set Character Encoding
+
+   * Use UTF-8 to support all characters and prevent encoding issues.
+
+5. Set the Favicon
+
+   * Add a favicon for browser tabs using Thymeleaf pathing: 
+     `<link rel="icon" type="image/png" th:href="@{/assets/images/logo/logo.png}" />`.
+
+6. Set the Page Title
+
+   * Give the page a title, e.g., `"Admin Dashboard"`, which will show in the browser tab.
+
+7. Link CSS Stylesheets
+
+   * Include dashboard-specific styles and global site-wide styles:
+     - `adminDashboard.css` for layout and design of this page.
+     - `style.css` for shared UI components.
+
+8. Link JavaScript Files (with `defer`)
+
+   * Use Thymeleaf's `th:src` to include JS components and utilities:
+     - `render.js` (rendering content)
+     - `util.js` (utility functions)
+     - `header.js` and `footer.js` (for dynamic header/footer)
+   * Use `defer` so scripts execute after the HTML is fully parsed.
+
+9. Close the Head and Begin the Body
+
+    * Start the visible part of the webpage. `onload="renderContent()"` is used to call a function when the page is ready.
+
+10. Create the Container
+
+    * Add a `div` with class `container` for layout control.
+
+11. Add a Wrapper Inside the Container
+
+    * Wrap page elements with a `wrapper` div to maintain consistent spacing and organization.
+
+12. Insert a Header Placeholder
+
+    * Add `<div id="header"></div>` for injecting the header via JavaScript.
+
+13. Define the Main Section
+
+    * Use `<main class="main-content">` for the central dashboard area.
+
+14. Add a Search Bar
+
+    * Add an input field with `id="searchBar"` for admin to search content dynamically.
+
+15. Add Filter Dropdowns
+
+    * Use two `<select>` elements:
+      - One for time (AM/PM).
+      - One for filtering by medical specialty (Cardiologist, Dentist, etc.).
+
+16. Add Content Display Area
+
+    * Insert a `<div id="content"></div>` for dynamic injection of doctor cards or data.
+
+17. Add a Footer Placeholder
+
+    * Use `<div id="footer"></div>` for a JavaScript-rendered footer.
+
+18. Add Modal Structure
+
+    * Include a modal with:
+      - A close button (`&times;`)
+      - A content area (`#modal-body`) for displaying popup information or forms.
+
+19. Include Page-Specific JavaScript Modules
+
+    * Load JavaScript specific to the admin dashboard:
+      - `adminDashboard.js` for dashboard logic.
+      - `doctorCard.js` for rendering doctor information cards.
+    * Use `type="module"` and `defer` for modern and non-blocking loading.
+
+    HINT:
+        `<script type="module" src="../../static/js/adminDashboard.js" defer></script>`
+        `<script type="module" src="../../static/js/doctorDashboard.js" defer></script>`
+        
+        
+20. Close the Body and HTML Tags
+
+    * Finish the structure by properly closing all tags.
+
+ -->
+