Now let me check the existing shadcn components I'll need:
Now let me install recharts and then build the SmartFlow application:
Now let me update the layout with the proper metadata and add the Toaster, then create the SmartFlow application:
Now let me create the SmartFlow application:
I've built the complete SmartFlow electricity management platform with two fully functional views:
Facility Manager Dashboard (Dark Theme):
Resident Portal (Light Theme):
This is absolutely perfect. Now, I need to complete the full project ecosystem by adding a third tab to the top navigation called "ESG Report (Investor View)".
When the user clicks this third tab, the screen should simulate a formal corporate PDF document sitting on a gray background.
Design for the ESG Report Tab:
Top Action Bar: A button that says "Generate Investor PDF". When clicked, show a downloading spinner and then a toast saying "Report sent to Emaar & Gulf Investors".
Document Header: "EDECS Katameya - Monthly ESG Sustainability & Impact Report". Make it look like a formal, clean white document.
Top Summary Cards: Three prominent data blocks with icons:
"Energy Shifted Off-Peak: 14,200 kWh" (Lightning icon)
"Carbon Emissions Mitigated: 6,500 kg CO₂" (Leaf icon)
"Operational Cost Avoided: 32,100 EGP" (Dollar/Money icon)
Middle Section: Add a beautiful Recharts Pie Chart titled "Carbon Footprint Reduction by Source" (e.g., Pool Pumps, Lighting, HVAC) and a simple Area Chart showing "Month-over-Month Emissions Trend" going down.
Ensure this new tab looks incredibly clean, white, and formal, contrasting perfectly with the dark mode dashboard. Keep the first two tabs exactly as they are!
Now I have the full context. Let me add the ESG Report tab by:
Now let me add the ESG Report TabsContent right before the closing </Tabs>:
I've added the third "ESG Report (Investor View)" tab to the SmartFlow application. The new tab features a formal corporate PDF document design sitting on a gray background with:
Top Action Bar: A "Generate Investor PDF" button that shows a downloading spinner animation and displays a toast notification "Report sent to Emaar & Gulf Investors" when clicked.
Document Header: A clean white document with "EDECS Katameya - Monthly ESG Sustainability & Impact Report" featuring an emerald-colored bottom border and an ESG Certified badge.
Executive Summary Cards: Three prominent data blocks with icons - Energy Shifted Off-Peak (14,200 kWh with lightning icon), Carbon Emissions Mitigated (6,500 kg CO2 with leaf icon), and Operational Cost Avoided (32,100 EGP with dollar icon), each showing positive month-over-month comparisons.
Charts Section: A beautiful donut-style Pie Chart showing "Carbon Footprint Reduction by Source" (Pool Pumps, HVAC, Lighting, Elevators) and an Area Chart displaying "Month-over-Month Emissions Trend" with a downward trend from 12,500 to 6,500 kg CO2 over 6 months.