Redesigned Material Dashboard React for Climate Wall Monitoring #257
Description
Requested UI Overhaul
Convert the existing repository to match the following design specifications:
Login Screen
- Implement a React login page using AWS Amplify Auth UI or a custom form.
- Integrate Cognito authentication for secure user management.
Main Dashboard Overview
- Top navigation bar featuring the Climate Wall logo.
- Dashboard cards displaying current system status and key metrics.
- Real-time data visualization using Recharts graphs.
Individual Climate Wall Metrics
- Add a route
/wall/:id. - Show detailed environmental metrics (e.g., temperature, humidity, etc.) with line/bar charts.
System Analytics
- Present historical trends and performance summaries.
Additional UI Features
- Include a user settings modal for profile adjustments.
- Add a report generation dialog that triggers an API to create and download reports (PDF/CSV).
Please implement the above UI changes, focusing on React best practices and seamless integration with modern libraries (Amplify, Recharts, etc.).