Skip to content

Commit 239c1ba

Browse files
Riyad-MuradRiyad-Murad
authored
Merge pull request #158 from Riyad-Murad/provider_profile_and_users_dev
Provider profile and users dev
2 parents 434978f + 7e00c3a commit 239c1ba

File tree

20 files changed

+1550
-380
lines changed

20 files changed

+1550
-380
lines changed

‎README.md‎

Lines changed: 34 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,6 @@
99
>
1010
> The website will display the data that the arduino will send to the database and the users will be able to generate AI reports for their needs.
1111
12-
#### To test the website, here are some initial default data stored in the database:
13-
14-
#### Admin Users:
15-
> <u><b>Email:</b></u> riyad@gmail.com, <u><b>Password:</b></u> password
16-
17-
> <u><b>Email:</b></u> nabiha@gmail.com, <u><b>Password:</b></u> password
18-
19-
#### Provider Users:
20-
> <u><b>Email:</b></u> cdaoud@gmail.com, <u><b>Password:</b></u> password
21-
22-
> <u><b>Email:</b></u> nour@gmail.com, <u><b>Password:</b></u> password
23-
24-
> <u><b>Email:</b></u> taha@gmail.com, <u><b>Password:</b></u> password
25-
26-
#### Client Users:
27-
> <u><b>Email:</b></u> gheeda@gmail.com, <u><b>Password:</b></u> password
28-
29-
> <u><b>Email:</b></u> joe@gmail.com, <u><b>Password:</b></u> password
30-
31-
> <u><b>Email:</b></u> sara@gmail.com, <u><b>Password:</b></u> password
32-
3312
<br>
3413

3514
<!-- System Design -->
@@ -38,63 +17,33 @@
3817
### ER Diagram
3918

4019
<center>
41-
<img src="./readme/demo/Amp_Intelligence.png"/>
20+
<img src="./readme/demo/ERD.png"/>
4221
</center>
4322

44-
<br />
45-
46-
## System Design - Database Schema Overview
47-
The Amp Intelligence platform utilizes a relational database schema designed to support a scalable, secure, and modular architecture for intelligent energy monitoring and user management. The schema is optimized for clarity in data ownership, role-based access, and historical data collection, ensuring robust data integrity and efficient query performance.
48-
49-
### Core Entities & Relationships
50-
### 1) Users
51-
52-
- Centralized user management is facilitated through the Users table, which supports multiple user roles: Clients, Providers, and Admins. This enables clear segregation of access rights and responsibilities.
53-
54-
- The schema supports optional direct mapping between Users and Slaves, ensuring traceability of device ownership per client.
55-
56-
- The design ensures flexibility to support role-based data visualization and management in both the platform’s dashboard and APIs.
57-
58-
### 2) Masters & Slaves
59-
60-
- The Masters table represents the core energy monitoring controllers, typically installed and managed by provider entities (linked via user_id).
61-
62-
- Each Master can manage multiple Slaves, which represent individual monitored assets or devices. The Slaves are associated back to the Masters and can also link directly to Users (clients) via the slave_id field in the Users table, ensuring traceability of monitored assets.
63-
64-
### 3) Metrics & Lines
65-
66-
- The Metrics table serves as the historical data ledger, storing essential telemetry such as voltage, current, power, and energy per Slave and Master device, organized on a monthly basis for performance optimization.
67-
68-
- The Lines table provides additional granularity by storing per-phase measurements (L1, L2, L3) and is directly linked to the Masters. This supports detailed line-level diagnostics, crucial for industrial-grade energy analytics.
23+
### Component Diagram
6924

70-
### 4) Contact Forms
71-
72-
- User-generated communication is handled by the Contact_Forms table, ensuring that feedback, support requests, and queries are traceable to specific users.
73-
74-
- This supports seamless user support workflows and ensures accountability.
75-
76-
### 5) Design Principles
77-
- Scalability & Modularity: The schema supports multi-tenant architecture, where Providers can manage multiple Masters and Clients can own specific Slaves. This allows the platform to scale horizontally by simply extending these relationships.
78-
79-
- Data Integrity & Traceability: All critical records are timestamped (created_at, updated_at), supporting full audit trails. Foreign key relationships ensure data consistency across all levels.
25+
<center>
26+
<img src="./readme/demo/Component Diagram 2.0.png"/>
27+
</center>
8028

81-
- Performance Considerations: Metrics are decoupled into Metrics and Lines, optimizing for both high-frequency telemetry capture and in-depth line-level analysis without query performance degradation.
29+
### Flow Diagram
8230

83-
### Summary
84-
This ERD lays the foundation for Amp Intelligence’s core platform services by enabling structured, efficient, and secure energy data management while providing flexibility for future expansion, including integrations with third-party platforms, advanced reporting engines, and AI-driven anomaly detection systems.
31+
<center>
32+
<img src="./readme/demo/Flow Diagram.png"/>
33+
</center>
8534

86-
<br>
35+
<br><br>
8736

8837
<!-- Project Highlights -->
8938
<img src="./readme/title4.svg"/>
9039

9140
### The Most Remarkable Features
9241

93-
- <b>Seamless IoT Data Ingestion:</b> The system integrates with ESP32 microcontrollers to capture real-time energy consumption data from client devices. This data is securely transmitted and stored in the platform's centralized database, ensuring accurate and continuous monitoring of power usage.
42+
- <b>Seamless IoT Data Ingestion:</b> The system captures and securely stores real-time energy consumption data from client devices using ESP32 microcontrollers.
9443

95-
- <b>AI-Powered Consumption Forecasting for Providers:</b> Leveraging advanced AI models, the platform provides energy providers with predictive analytics based on historical consumption patterns. These insights enable providers to anticipate client power demand, enhance load management, and optimize resource allocation.
44+
- <b>AI-Powered Consumption Forecasting:</b> Advanced AI models analyze historical patterns to help energy providers anticipate demand and optimize resource allocation.
9645

97-
- <b>Personalized AI Optimization Plans for Clients:</b> The system offers clients intelligent, data-driven power usage plans. By analyzing past consumption behaviors, the AI recommends actionable strategies to optimize energy usage, reduce costs, and promote sustainable consumption habits.
46+
- <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.
9847

9948
<br><br>
10049

@@ -143,3 +92,24 @@ This ERD lays the foundation for Amp Intelligence’s core platform services by
14392
| ![Landing](./readme/demo/1440x1024.png) | ![fsdaf](./readme/demo/1440x1024.png) | ![fsdaf](./readme/demo/1440x1024.png) |
14493

14594
<br><br>
95+
96+
#### To test the website, here are some initial default data stored in the database:
97+
98+
#### Admin Users:
99+
> <u><b>Email:</b></u> riyad@gmail.com, <u><b>Password:</b></u> password
100+
101+
> <u><b>Email:</b></u> nabiha@gmail.com, <u><b>Password:</b></u> password
102+
103+
#### Provider Users:
104+
> <u><b>Email:</b></u> cdaoud@gmail.com, <u><b>Password:</b></u> password
105+
106+
> <u><b>Email:</b></u> nour@gmail.com, <u><b>Password:</b></u> password
107+
108+
> <u><b>Email:</b></u> taha@gmail.com, <u><b>Password:</b></u> password
109+
110+
#### Client Users:
111+
> <u><b>Email:</b></u> gheeda@gmail.com, <u><b>Password:</b></u> password
112+
113+
> <u><b>Email:</b></u> joe@gmail.com, <u><b>Password:</b></u> password
114+
115+
> <u><b>Email:</b></u> sara@gmail.com, <u><b>Password:</b></u> password

‎amp-client/src/Components/CommonComponents/ActionButton/ActionButton.jsx‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
import "./styles.css";
22

3-
const ActionButton = ({ backgroundColor, color, text, width, onClick, margin }) => {
4-
const buttonStyle = {
5-
backgroundColor: backgroundColor || "#000000",
6-
color: color || "#FFFFFF",
7-
borderRadius: "6px",
8-
padding: "10px 20px",
9-
fontWeight: 500,
10-
fontSize: "20px",
11-
border: "none",
12-
cursor: "pointer",
13-
width: width || "auto",
14-
margin: margin || "0px",
15-
};
3+
const ActionButton = ({
4+
backgroundColor,
5+
color,
6+
text,
7+
width,
8+
onClick,
9+
margin,
10+
className = "",
11+
}) => {
12+
const useInlineStyles = !className;
1613

17-
return <button style={buttonStyle} onClick={onClick}>{text}</button>;
14+
const buttonStyle = useInlineStyles
15+
? {
16+
backgroundColor: backgroundColor || "#000000",
17+
color: color || "#FFFFFF",
18+
borderRadius: "6px",
19+
padding: "10px 20px",
20+
fontWeight: 500,
21+
fontSize: "20px",
22+
border: "none",
23+
cursor: "pointer",
24+
width: width || "auto",
25+
margin: margin || "0px",
26+
}
27+
: { width, margin };
28+
29+
return (
30+
<button className={`${className}`} style={buttonStyle} onClick={onClick}>
31+
{text}
32+
</button>
33+
);
1834
};
1935

2036
export default ActionButton;

‎amp-client/src/Pages/ClientPages/ClientPowerPlan/ClientPowerPlan.jsx‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import "./styles.css";
22
import { useState } from "react";
33
import { useSelector } from "react-redux";
4+
import ActionButton from "../../../Components/CommonComponents/ActionButton/ActionButton";
45
import ClientPowerPlanService from "../Services/ClientPowerPlanService/ClientPowerPlanService";
56

67
const ClientPowerPlan = () => {
@@ -11,60 +12,80 @@ const ClientPowerPlan = () => {
1112
const { fetchPowerPlanReport } = ClientPowerPlanService();
1213

1314
return (
14-
<div className="client-power-plan-container">
15-
<h2>Power Plan</h2>
15+
<div className="client-container">
16+
<header className="client-header">
17+
<h1 className="client-title">Monthly Energy Report</h1>
18+
<p className="client-subtitle">
19+
Personalized power optimization plan for your devices
20+
</p>
21+
</header>
22+
23+
{reportData && !loading && (
24+
<div className="client-download-top">
25+
<ActionButton
26+
text="Download Report"
27+
className="client-download-action-button"
28+
color="#FFFFFF"
29+
onClick={() => console.log("Download triggered")}
30+
width="250px"
31+
margin="20px auto"
32+
/>
33+
</div>
34+
)}
1635

1736
{!reportData && !loading && (
18-
<div className="generate-report-section">
19-
<p>Click On the Button to generate the power plan for this month</p>
20-
<button
37+
<div className="client-generate-card">
38+
<p>
39+
Click below to analyze your past 10 months of usage and receive a
40+
detailed power plan.
41+
</p>
42+
<ActionButton
43+
text="Generate My Plan"
44+
className="client-generate-action-button"
45+
color="#FFFFFF"
2146
onClick={() => fetchPowerPlanReport(userId, setReportData)}
22-
className="generate-button"
23-
>
24-
Generate Power Plan
25-
</button>
47+
width="250px"
48+
margin="20px auto 0"
49+
/>
2650
</div>
2751
)}
2852

2953
{loading ? (
30-
<div className="spinner-container">
31-
<div className="spinner"></div>
54+
<div className="client-loading-overlay">
55+
<div className="client-spinner" />
56+
<p>Generating your plan...</p>
3257
</div>
3358
) : (
3459
reportData && (
35-
<div className="report-display">
36-
<h3>Report Summary</h3>
37-
<p>{reportData.summary}</p>
60+
<div className="client-report-card">
61+
<section className="client-summary-section">
62+
<h3>Summary</h3>
63+
<p>{reportData.summary}</p>
64+
</section>
3865

39-
<div className="insight-section">
40-
<h4>Voltage Insights</h4>
41-
<p>{reportData.voltageInsights}</p>
42-
</div>
66+
<section className="client-insight-grid">
67+
<div className="client-insight-box">
68+
<h4>Voltage Insights</h4>
69+
<p>{reportData.voltageInsights}</p>
70+
</div>
71+
<div className="client-insight-box">
72+
<h4>Power Insights</h4>
73+
<p>{reportData.powerInsights}</p>
74+
</div>
75+
<div className="client-insight-box">
76+
<h4>Energy Insights</h4>
77+
<p>{reportData.energyInsights}</p>
78+
</div>
79+
</section>
4380

44-
<div className="insight-section">
45-
<h4>Power Insights</h4>
46-
<p>{reportData.powerInsights}</p>
47-
</div>
48-
49-
<div className="insight-section">
50-
<h4>Energy Insights</h4>
51-
<p>{reportData.energyInsights}</p>
52-
</div>
53-
54-
<div className="recommendations-section">
81+
<section className="client-recommendation-section">
5582
<h4>Recommendations</h4>
5683
<ul>
57-
{reportData.recommendations
58-
.split("\n")
59-
.map((recommendation, index) => (
60-
<li key={index}>{recommendation}</li>
61-
))}
84+
{reportData.recommendations.split("\n").map((rec, index) => (
85+
<li key={index}>{rec}</li>
86+
))}
6287
</ul>
63-
</div>
64-
65-
<div className="centering-button">
66-
<button className="download-button">Download Plan Report</button>
67-
</div>
88+
</section>
6889
</div>
6990
)
7091
)}

0 commit comments

Comments
 (0)