Merge pull request #171 from Riyad-Murad/staging

Staging

Author: Riyad-Murad

README.md

@@ -20,22 +20,12 @@
 <img src="./readme/demo/Diagrams/ERD.png"/>
 </center>
 
-### System Architect Diagram
+### Component Diagram
 
 <center>
-<img src="./readme/demo/Diagrams/System Architect Diagram.png"/>
+<img src="./readme/demo/Diagrams/Component Diagram Light.png"/>
 </center>
 
-### Project Box Design
-
-This box is a demostration of a power room that contain elecrical wire lines and the microcontroller is connected to the circuit.
-
-I used for this project ESP32 DevKit V1. It is based on the ESP32 microcontroller that boasts Wifi, Bluetooth, Ethernet and Low Power support all in a single chip.
-
-| Power Box 1                             | Power Box 2                       | Power Box 3                        |
-| --------------------------------------- | ------------------------------------- | ------------------------------------- |
-| ![PowerBox](./readme/demo/Project_Box/Power_Room_1.jpg) | ![PowerBox](./readme/demo/Project_Box/Power_Room_2.jpg) | ![PowerBox](./readme/demo/Project_Box/Power_Room_3.jpg) |
-
 <br><br>
 
 <!-- Project Highlights -->
@@ -49,7 +39,7 @@ I used for this project ESP32 DevKit V1. It is based on the ESP32 microcontrolle
 
 - <b>Personalized AI Optimization Plans:</b> Clients receive intelligent, data-driven strategies to optimize energy usage, reduce costs, and promote sustainability based on their consumption behaviors.
 
-### Remarkable Features
+### Features Highlight
 
 <center>
 <img src="./readme/demo/Highlights/Highlight Section.png"/>
@@ -60,34 +50,49 @@ I used for this project ESP32 DevKit V1. It is based on the ESP32 microcontrolle
 <!-- Demo -->
 <img src="./readme/title5.svg"/>
 
-### Client Screens (Web)
+### Landing Screens
 
-| Login screen                            | Register screen                       |
+| Landing Screen                            | Login screen                       |
 | --------------------------------------- | ------------------------------------- |
-| ![Landing](./readme/demo/1440x1024.png) | ![fsdaf](./readme/demo/1440x1024.png) |
+| ![Landing](./readme/demo/Landing/Landing%20Page.gif) | ![Login](./readme/demo/Landing/Login.gif) |
 
+### Client Screens
 
-
-### Provider Screens (Web)
-
-| Login screen                            | Register screen                       |
+| Client Dashboard screen                            | Client Report screen                       |
 | --------------------------------------- | ------------------------------------- |
-| ![Landing](./readme/demo/1440x1024.png) | ![fsdaf](./readme/demo/1440x1024.png) |
+| ![ClientDashboard](./readme/demo/Client/Client%20Dashboard.gif) | ![ClientReport](./readme/demo/Client/Client%20Report.gif) |
 
+| Client Profile screen                            |
+| --------------------------------------- |
+| ![ClientProfile](./readme/demo/Client/Client_Profile.png) |
 
 
-### Admin Screens (Web)
+### Provider Screens (Web)
 
-| Login screen                            | Register screen                       |
+| Provider Dashboard screen                            | Provider Report screen                       |
 | --------------------------------------- | ------------------------------------- |
-| ![Landing](./readme/demo/1440x1024.png) | ![fsdaf](./readme/demo/1440x1024.png) |
+| ![ProviderDashboard](./readme/demo/Provider/Provider%20Dashboard.gif) | ![ProviderReport](./readme/demo/Provider/Provider%20Report.gif) |
+
+| Provider Show Users screen                            | Provider Edit Profile screen                       |
+| --------------------------------------- | ------------------------------------- |
+| ![ProviderUsers](./readme/demo/Provider/Provider_Users.png) | ![ProviderProfile](./readme/demo/Provider/Provider_Profile.png) |
 
 
 <br><br>
 
 <!-- Development & Testing -->
 <img src="./readme/title6.svg"/>
 
+### Project Box Design
+
+This box is a demostration of a power room that contain elecrical wire lines and the microcontroller is connected to the circuit.
+
+I used for this project ESP32 DevKit V1. It is based on the ESP32 microcontroller that boasts Wifi, Bluetooth, Ethernet and Low Power support all in a single chip.
+
+| Power Box 1                             | Power Box 2                       | Power Box 3                        |
+| --------------------------------------- | ------------------------------------- | ------------------------------------- |
+| ![PowerBox](./readme/demo/Project_Box/Power_Room_1.jpg) | ![PowerBox](./readme/demo/Project_Box/Power_Room_2.jpg) | ![PowerBox](./readme/demo/Project_Box/Power_Room_3.jpg) |
+
 #### Postman API Documentation
 
 - You can check the full API documentation using this [link](https://documenter.getpostman.com/view/42830816/2sB2qXji4H).
@@ -154,6 +159,11 @@ I used for this project ESP32 DevKit V1. It is based on the ESP32 microcontrolle
 | --------------------------------------- | ------------------------------------- | ------------------------------------- |
 | ![PipelineSample](./readme/demo/Deployment/Deployment%20Pipeline%201.png) | ![PipelineSuccess](./readme/demo/Deployment/GitHub_Deploy_Staging_Pipeline.png) | ![EC2Deployed](./readme/demo/Deployment/Node_Server_Docker_Deployed.png) |
 
+
+| AWS S3 Bucket React files                            | S3 bucket public IP website                       |
+| --------------------------------------- | ------------------------------------- |
+| ![Landing](./readme/demo/Deployment/S3_React_Deployed.png) | ![fsdaf](./readme/demo/Deployment/S3_Website_Deployed.png) |
+
 <br>
 
 #### To test the website, here are some initial default data stored in the database:

amp-client/src/Components/AdminComponents/AdminSidebar/AdminSidebar.jsx

@@ -22,18 +22,14 @@ const AdminSidebar = () => {
         </Link>
       </div>
       <nav className="sidebar-nav">
-        <Link to="/admin/navigation-page" className="sidebar-link">
-          <FontAwesomeIcon icon={faFileAlt} className="sidebar-icon" />
-          <span className="link-text">Navigation Page</span>
+        <Link to="/admin/view-providers" className="sidebar-link">
+          <FontAwesomeIcon icon={faEye} className="sidebar-icon" />
+          <span className="link-text">View Providers</span>
         </Link>
         <Link to="/admin/edit-provider" className="sidebar-link">
           <FontAwesomeIcon icon={faUserEdit} className="sidebar-icon" />
           <span className="link-text">Edit Provider</span>
         </Link>
-        <Link to="/admin/view-providers" className="sidebar-link">
-          <FontAwesomeIcon icon={faEye} className="sidebar-icon" />
-          <span className="link-text">View Providers</span>
-        </Link>
         <Link to="/admin/contact-messages" className="sidebar-link">
           <FontAwesomeIcon icon={faEnvelope} className="sidebar-icon" />
           <span className="link-text">Contact Messages</span>

amp-client/src/Pages/ProviderPages/ProviderPowerPrediction/styles.css

@@ -5,7 +5,7 @@
   margin: auto;
   border-radius: 12px;
   margin-top: 30px;
-  margin-left: 300px;
+  margin-left: 400px;
 }
 
 .provider-header {