You are an expert AI coding assistant specializing in building single-page applications (SPAs) with modern web technologies. Your task is to generate the complete code for a SaaS platform called 'AB Dijital Yasa Denetim Platformu' (EU Digital Law Oversight Platform). This platform aims to provide transparency and analysis regarding the European Union's digital legislation, focusing on potential external pressures, particularly from the US, and the lobbying activities of major tech companies.
**1. PROJECT OVERVIEW:**
- **Purpose:** To create a comprehensive SaaS platform that monitors and analyzes the EU's digital legislative processes, specifically addressing concerns about external influence (e.g., US pressure) and corporate lobbying on key regulations like the Digital Services Act (DSA) and Digital Markets Act (DMA).
- **Problem Solved:** The EU faces challenges in maintaining its legislative sovereignty in the digital space due to geopolitical pressures and intense lobbying from international tech giants. This platform provides crucial data, analysis, and transparency tools to EU policymakers, legal experts, and stakeholders to safeguard European digital autonomy and democratic principles.
- **Value Proposition:** Empowering EU lawmakers and stakeholders with actionable intelligence to make informed decisions, ensure fair competition, protect user data, and uphold the integrity of EU digital laws against undue influence.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development and build times)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **State Management:** Zustand (lightweight and efficient global state management)
- **Routing:** React Router DOM (for client-side navigation)
- **Data Fetching:** Axios (for making HTTP requests to a hypothetical backend API)
- **UI Components:** Radix UI (for accessible and unstyled UI primitives), Headless UI (for advanced components like Popovers, Transitions)
- **Charting:** Recharts (for data visualization)
- **Form Handling:** React Hook Form (for efficient form validation)
- **Deployment:** Static site generation optimized for platforms like Vercel or Netlify.
**3. CORE FEATURES:**
- **Lobbying Activity Tracker:**
- **User Flow:** Users can navigate to the 'Lobbying' section. They can filter activities by company (e.g., Google, Meta, Apple, Amazon), date range, and type of engagement (meetings, financial disclosures, official statements). A detailed view shows specific information about each logged activity.
- **Functionality:** Displays a list of lobbying events, financial contributions, and official meetings reported by tech companies towards EU institutions. Includes search and filtering capabilities.
- **Digital Law Comparison Tool:**
- **User Flow:** Users select two legislative frameworks (e.g., EU's DSA vs. proposed US regulations or a previous EU law). The tool visually compares key articles, definitions, and enforcement mechanisms side-by-side.
- **Functionality:** Allows users to compare specific articles or entire sections of the DSA, DMA, and other relevant legislation against US counterparts or policy proposals. Highlights discrepancies and potential conflicts.
- **Policy Dashboard:**
- **User Flow:** Upon login, users are presented with a central dashboard summarizing the current state of key digital regulations, recent policy developments, upcoming review dates, and high-level statistics on lobbying trends and external pressure indicators.
- **Functionality:** Provides an at-a-glance overview of critical data points, including legislative status, recent news related to EU digital policy and US relations, key performance indicators (KPIs) for digital sovereignty, and alerts for significant policy shifts.
- **Risk Assessment & Alert System:**
- **User Flow:** The system automatically analyzes data from the lobbying tracker and comparison tool. If certain thresholds are met (e.g., high lobbying spend on a critical vote, significant divergence in proposed laws), automated alerts are triggered and displayed on the dashboard and sent via email (simulated).
- **Functionality:** Employs predefined rules and potentially simple AI models to assess the risk level of legislative processes being compromised. Generates summary reports on identified risks.
- **Transparency Report Generator:**
- **User Flow:** Users can select a date range and specify the regulations of interest. The platform generates a downloadable PDF report summarizing relevant lobbying activities, legislative progress, and risk assessments for that period.
- **Functionality:** Compiles data from various modules into a structured, professional-looking report suitable for internal review or public disclosure.
**4. UI/UX DESIGN:**
- **Layout:** Clean, professional, and data-driven. A persistent sidebar navigation for core sections (Dashboard, Lobbying, Laws, Reports, Settings). Main content area displays data, charts, and forms. Responsive design is crucial, adapting seamlessly from desktop to tablet and mobile views.
- **Color Palette:** Primarily blues and grays for a professional and trustworthy feel. Accent colors (e.g., a subtle orange or green) for alerts, positive indicators, and calls to action. Avoid overly bright or distracting colors.
- **Typography:** Use a readable sans-serif font family like Inter or Poppins for body text and headings. Ensure good contrast ratios for accessibility.
- **Responsive Rules:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Tables should allow horizontal scrolling or collapse into cards. Charts should resize appropriately.
- **Overall Feel:** Trustworthy, informative, and efficient. Minimize clutter, prioritize data clarity.
**5. DATA MODEL (State Management - Zustand):**
- **`authStore`:** `{ isLoggedIn: boolean, user: object | null, isLoading: boolean }`
- **`lobbyingStore`:** `{ activities: [], filters: { company: string, dateRange: [Date, Date], type: string }, isLoading: boolean, error: string | null }`
- **`lawsStore`:** `{ regulations: [], comparison: { selectedLaws: [string, string], comparisonData: object }, isLoading: boolean, error: string | null }`
- **`policyStore`:** `{ dashboardData: object, latestNews: [], alerts: [] }`
- **`reportStore`:** `{ generatedReports: [], isGenerating: boolean, error: string | null }`
- **Mock Data:** Will be defined within components or fetched from mock API endpoints (simulated).
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing.
- **`Layout.jsx`:** Wrapper component including `Sidebar.jsx` and main content area.
- **`Sidebar.jsx`:** Navigation menu component. Props: `navItems` (array of objects).
- **`DashboardPage.jsx`:** Main dashboard view. Components: `StatCard.jsx`, `ChartComponent.jsx`, `AlertFeed.jsx`, `RecentNews.jsx`.
- **`LobbyingPage.jsx`:** Displays lobbying activities. Components: `FilterControls.jsx`, `ActivityTable.jsx`, `ActivityDetailModal.jsx`.
- **`LawsPage.jsx`:** Handles law comparison. Components: `LawSelector.jsx`, `ComparisonViewer.jsx`, `LawArticle.jsx`.
- **`ReportsPage.jsx`:** Interface for generating reports. Components: `ReportForm.jsx`, `ReportViewer.jsx`.
- **`StatCard.jsx`:** Displays a single statistical value. Props: `title`, `value`, `icon`, `trend`.
- **`ChartComponent.jsx`:** Generic chart component. Props: `data`, `config`, `type` (bar, line, pie).
- **`FilterControls.jsx`:** Contains dropdowns, date pickers for filtering data. Props: `onFilterChange`.
- **`ActivityTable.jsx`:** Renders lobbying activities in a table. Props: `data`.
- **`LawSelector.jsx`:** Dropdown/multi-select for choosing laws to compare. Props: `laws`, `onChange`.
- **`ComparisonViewer.jsx`:** Renders the side-by-side comparison. Props: `comparisonData`.
- **`ReportForm.jsx`:** Form for selecting report parameters. Props: `onSubmit`.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/out transitions between routes using `Framer Motion` or CSS transitions.
- **Hover Effects:** Slight scale or background color change on interactive elements like buttons and table rows.
- **Loading States:** Use spinners (`react-loader-spinner`) or skeleton loaders within components while data is being fetched. Indicate loading state clearly.
- **Micro-interactions:** Smooth expansion/collapse of dropdowns, subtle animations on chart data points when hovered.
- **Form Feedback:** Visual cues for input validation (e.g., red borders for errors, green for success).
**8. EDGE CASES:**
- **Empty States:** Design specific UI states for when no data is available (e.g., 'No lobbying activities found for this period.'). Provide guidance on how to add data or broaden search.
- **Error Handling:** Display user-friendly error messages for API failures or validation errors. Use a global error notification system.
- **Validation:** Implement robust client-side validation using `React Hook Form` for all user inputs (forms, filters).
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes, keyboard navigation support, focus management, and sufficient color contrast. Use libraries like Radix UI for accessibility primitives.
- **Data Integrity:** Implement checks to ensure data consistency, especially during comparisons and report generation.
**9. SAMPLE DATA (Mock Data Format):**
**Lobbying Activity:**
```json
{
"id": "lob_123",
"company": "Meta Platforms",
"date": "2023-10-26T10:00:00Z",
"type": "Meeting",
"description": "Meeting with Commissioner for Competition regarding DMA compliance.",
"attendees": ["John Doe (Meta)", "Margrethe Vestager (Commission)"],
"location": "Berlaymont Building, Brussels"
}
```
**Digital Law:**
```json
{
"id": "dsa_eu_v1",
"name": "Digital Services Act (DSA) - EU",
"version": "1.0",
"effectiveDate": "2024-02-17",
"summary": "Establishes rules for intermediary liability, content moderation, and transparency."
}
```
```json
{
"id": "dma_eu_v1",
"name": "Digital Markets Act (DMA) - EU",
"version": "1.0",
"effectiveDate": "2023-11-01",
"summary": "Designates large online platforms ('gatekeepers') and imposes a set of obligations and prohibitions."
}
```
**Policy Alert:**
```json
{
"id": "alert_001",
"timestamp": "2023-10-25T15:30:00Z",
"level": "HIGH", // LOW, MEDIUM, HIGH
"message": "US pressure mounts on Commission regarding DSA enforcement. Potential dialogue could impact legislative independence.",
"relatedLaws": ["dsa_eu_v1"]
}
```
**Risk Assessment:**
```json
{
"lawId": "dsa_eu_v1",
"riskScore": 7.5, // 1-10
"factors": ["High lobbying spend", "US diplomatic pressure", "Ambiguity in draft amendments"],
"recommendation": "Strengthen internal review process and seek cross-party consensus."
}
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite (`vite build`).
- **Environment Variables:** Use `.env` files for API base URLs (`VITE_API_BASE_URL`), feature flags, etc. Ensure sensitive keys are not committed to version control.
- **Performance:** Optimize bundle sizes using code-splitting (`React.lazy`). Ensure efficient state management to avoid unnecessary re-renders. Optimize images and assets.
- **CI/CD:** Configure pipelines for automated testing, building, and deployment to platforms like Vercel/Netlify.
- **HTTPS:** Ensure the deployed application uses HTTPS.
- **SEO:** Implement basic SEO practices for the landing page if applicable (e.g., meta tags, title tags).