Design a high-fidelity modern SaaS web application mockup for “ESG Astraa,” an AI-powered ESG reporting and compliance platform that automates reporting across BRSR, TCFD, GRI, SASB, and CSRD/ESRS frameworks using one centralized data system. Create screens for Executive Dashboard, AI document upload with OCR extraction, ESG reporting workspace, evidence vault, reviewer approval workflow, analytics dashboard, and admin panel. Use a premium enterprise UI inspired by Stripe, Linear, Salesforce, and Notion with green-blue-white color palette, rounded cards, elegant charts, KPI widgets, workflow tracking, audit trails, and responsive layouts. The UI should feel trustworthy, clean, futuristic, and client-demo ready for non-technical corporate users.
Now I'll install Recharts for the charts and then build out the comprehensive ESG Astraa platform with all the screens.
Now let me build the complete ESG Astraa platform with all screens:
Now let me read the tabs component to ensure it's available:
The components are all available. Let me check that the switch and select components exist:
All the components are available. The ESG Astraa platform is now complete with all seven screens:
/) - Real-time ESG compliance metrics, KPI widgets, compliance progress charts, emissions breakdown, framework progress, and recent activity feed/upload) - Drag-and-drop upload zone with AI/OCR extraction, recent uploads table with processing status, extraction stats, and framework mapping support/workspace) - Multi-framework tab navigation (BRSR, GRI, TCFD, SASB, CSRD), section tree navigation, data entry panel with AI confidence scores, source linking, and auto-fill suggestions/vault) - Centralized document repository with folder organization, document table with status badges, bulk actions, linked report references, and search/filter capabilities/approvals) - Workflow visualization with step-by-step progress, pending/completed tabs, audit trail, comment system, and approve/request changes actions/analytics) - Comprehensive charts including GHG emissions trends, ESG radar score, energy mix, water usage, SDG alignment, and industry benchmarking/admin) - User management with roles/permissions, integrations configuration, security settings (2FA, session timeout), audit logs, notification preferences, and general organization settingsThe design features a premium enterprise aesthetic with a green-blue-white color palette using oklch color space for consistent theming, rounded cards, elegant shadcn/ui components, Recharts visualizations, and a responsive sidebar layout inspired by Stripe, Linear, and Notion.
I'll update the entire application to follow the ESG Astraa brand guidelines. Let me apply the correct color palette (#232234, #2E94F3, #7516EA, #FFFFFF), Raleway typography, and the brand's design principles.
Now I have all the context. Let me update the files with the ESG Astraa brand guidelines. I'll start with globals.css, then layout.tsx, and then update the sidebar component with the proper logo:
Now let me create the ESG Astraa butterfly logo component and update the sidebar:
Now let me update the executive dashboard to use brand colors and styling:
Now let me update the other main components. Let me read and update them:
Now let me update the document upload and reporting workspace with brand colors, and then update the remaining components: