You are an expert AI coding assistant tasked with building a single-page, fully responsive React application using Tailwind CSS. The application is a SaaS tool designed to analyze organizational dynamics based on 'The Gervais Principle'. The goal is to provide managers and HR professionals with insights into their company's internal structure and employee sentiment.
**PROJECT OVERVIEW:**
The application, tentatively named 'Organizational Compass', aims to demystify and analyze corporate hierarchies using Venkatesh Rao's interpretation of 'The Gervais Principle'. The core problem it addresses is the lack of objective tools for understanding employee distribution across the organizational 'levels' (Loser, Mediator, Ultimate) and the resulting impact on motivation, productivity, and overall company health. The value proposition is to provide actionable insights through data analysis of employee feedback, enabling better management decisions, improved employee retention, and a healthier organizational culture. The application will be a single-page application (SPA) for a seamless user experience.
**TECH STACK:**
* **Frontend Framework:** React (using Create React App or Vite for setup)
* **Styling:** Tailwind CSS for rapid and utility-first styling.
* **State Management:** React Context API for global state and `useState`/`useReducer` for local component state. For simplicity in MVP, complex state management libraries like Redux or Zustand might be overkill, but can be considered if complexity increases.
* **Routing:** React Router DOM for navigation within the SPA.
* **Form Handling:** React Hook Form for efficient and performant form management.
* **Charting Library:** Chart.js or Recharts for data visualization on the dashboard.
* **Icons:** Heroicons or Font Awesome for UI elements.
* **Deployment:** Netlify or Vercel for easy SPA deployment.
**CORE FEATURES:**
1. **Anonymous Feedback Submission:**
* **User Flow:** A logged-in user (or an anonymous user with a unique session ID) navigates to the 'Submit Feedback' page. They are presented with a form asking structured questions about their perception of the company hierarchy, their role, their manager's role, and general workplace sentiment. Questions should be carefully designed to elicit responses relevant to The Gervais Principle.
* **Details:** Forms should include fields for role perception, manager perception, team dynamics, overall satisfaction, and suggestions. Input validation will be crucial. The submission process must ensure anonymity. After submission, a success message is displayed, and the user is redirected to a dashboard or back to the homepage.
2. **Gervais Principle Analysis Engine:**
* **User Flow:** This is a backend/logic component, but the UI will trigger it. When feedback is submitted, or when a user views their dashboard, the analysis engine processes the collected feedback data. It applies an algorithm (initially rule-based, potentially ML-enhanced later) to categorize respondents and infer the distribution across the Loser, Mediator, and Ultimate levels.
* **Details:** The engine will process text input (sentiment analysis, keyword extraction) and structured responses. It will output a statistical distribution of employees across the three tiers. This analysis will run server-side or within a serverless function in a production environment, but for the SPA, we'll simulate this with mock data processing.
3. **Dashboard & Visualization:**
* **User Flow:** Upon logging in or returning to the app, users see a personalized dashboard. This dashboard displays key insights derived from the analysis engine.
* **Details:** The dashboard will feature:
* A prominent visualization (e.g., a pie chart or bar chart) showing the current distribution of employees across the Gervais Principle tiers.
* Key performance indicators (KPIs) like overall employee sentiment score, perceived managerial effectiveness score, and potential retention risk score.
* A section highlighting potential organizational issues or strengths based on the analysis (e.g., 'High concentration in Mediator tier suggests potential stagnation', 'Low scores in manager perception may indicate leadership issues').
* A prompt to submit more feedback to refine insights.
**UI/UX DESIGN:**
* **Layout:** A clean, modern, single-page application layout. A persistent sidebar navigation for key sections (Dashboard, Submit Feedback, Reports, Settings). The main content area will dynamically change based on the selected navigation item.
* **Color Palette:** Professional and calming. Primary colors: a deep blue (#1E3A8A) for headers and primary actions, a muted grey (#F3F4F6) for backgrounds, white (#FFFFFF) for content cards, and an accent color like a teal (#06B6D4) or green (#10B981) for positive indicators and calls to action. Error states should use red (#EF4444).
* **Typography:** A clean, readable sans-serif font family like Inter or Lato. Use varied weights and sizes to establish a clear visual hierarchy.
* **Responsive Design:** Mobile-first approach. The layout should fluidly adapt to various screen sizes (smartphones, tablets, desktops). Navigation might collapse into a hamburger menu on smaller screens. Components should stack vertically where appropriate.
* **Interactivity:** Subtle hover effects on buttons and links. Smooth transitions between page states. Loading indicators (spinners, skeleton screens) for data fetching or processing.
**COMPONENT BREAKDOWN:**
* **`App.js`:** Main application component, sets up routing and global layout.
* **`Navigation.js`:** Sidebar or header navigation component. Receives `navItems` array as props. Handles active link highlighting.
* **`FeedbackForm.js`:** Form component for submitting feedback. Uses `react-hook-form`. Contains input fields for various feedback aspects.
* Props: `onSubmit` (function), `validationSchema` (object).
* **`Dashboard.js`:** Main dashboard view. Fetches and displays analysis results.
* State: `analysisData` (object).
* Components used: `ChartComponent`, `KpiCard`, `InsightsPanel`.
* **`ChartComponent.js`:** Wrapper for the charting library. Renders different chart types based on props.
* Props: `chartType` (string), `chartData` (object), `options` (object).
* **`KpiCard.js`:** Displays a single Key Performance Indicator.
* Props: `title` (string), `value` (string/number), `trend` (string - optional).
* **`InsightsPanel.js`:** Displays textual insights and recommendations.
* Props: `insights` (array of strings).
* **`LoadingSpinner.js`:** Reusable loading indicator component.
* **`ErrorMessage.js`:** Component to display error messages.
**DATA MODEL:**
* **`Feedback` Object:**
```json
{
"id": "uuid",
"userId": "uuid_or_null", // null for anonymous
"submittedAt": "timestamp",
"rolePerception": "string", // e.g., 'Loser', 'Mediator', 'Ultimate', 'Unsure'
"managerPerception": "string", // e.g., 'Loser', 'Mediator', 'Ultimate', 'N/A'
"teamDynamics": "string", // e.g., 'Cooperative', 'Competitive', 'Strained', 'Neutral'
"overallSatisfaction": "number", // 1-5
"suggestions": "string"
}
```
* **`AnalysisResult` Object:**
```json
{
"distribution": {
"loser": "number", // percentage
"mediator": "number", // percentage
"ultimate": "number" // percentage
},
"sentimentScore": "number", // 0-100
"managerEffectivenessScore": "number", // 0-100
"retentionRiskScore": "number", // 0-100
"keyInsights": ["string", "string", ...]
}
```
* **State Management:** Global state will hold user authentication status (if applicable) and fetched analysis data. Local state within components will manage form inputs, loading states, and UI toggles.
**ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Use `framer-motion` or simple CSS transitions for smooth fades or slides when navigating between sections.
* **Button Hovers:** Subtle scale or background color changes on interactive elements.
* **Form Submissions:** Visual feedback (e.g., button disabling, spinner) during submission.
* **Chart Interactions:** Tooltips appearing on hover over chart segments.
* **Loading States:** Skeleton loaders or spinners displayed while data is being fetched or processed to indicate activity.
**EDGE CASES:**
* **No Feedback Submitted:** The dashboard should display a clear message encouraging feedback submission, perhaps with a simplified initial state or a call to action.
* **Error Handling:** Gracefully handle API errors (e.g., network issues, server errors) during data fetching or submission. Display user-friendly error messages.
* **Validation:** Implement robust client-side and server-side validation for the feedback form to ensure data integrity.
* **Accessibility (a11y):** Use semantic HTML elements, ensure sufficient color contrast, provide keyboard navigation support, and use ARIA attributes where necessary.
* **Anonymity Assurance:** Clearly communicate the measures taken to ensure anonymity. Avoid collecting PII. The system should be designed to prevent deanonymization.
**SAMPLE DATA:**
* **Mock Feedback Submissions (Array of `Feedback` objects):**
1. ```json
{
"id": "fdbk-001",
"userId": null,
"submittedAt": "2023-10-27T10:00:00Z",
"rolePerception": "Mediator",
"managerPerception": "Ultimate",
"teamDynamics": "Cooperative",
"overallSatisfaction": 4,
"suggestions": "More clear goal setting from management."
}
```
2. ```json
{
"id": "fdbk-002",
"userId": null,
"submittedAt": "2023-10-27T10:05:00Z",
"rolePerception": "Loser",
"managerPerception": "Mediator",
"teamDynamics": "Strained",
"overallSatisfaction": 2,
"suggestions": "Lack of recognition for work done."
}
```
3. ```json
{
"id": "fdbk-003",
"userId": null,
"submittedAt": "2023-10-27T10:15:00Z",
"rolePerception": "Ultimate",
"managerPerception": "Ultimate",
"teamDynamics": "Cooperative",
"overallSatisfaction": 5,
"suggestions": "Keep up the great work!"
}
```
4. ```json
{
"id": "fdbk-004",
"userId": null,
"submittedAt": "2023-10-27T10:20:00Z",
"rolePerception": "Mediator",
"managerPerception": "Mediator",
"teamDynamics": "Neutral",
"overallSatisfaction": 3,
"suggestions": "Better communication between departments."
}
```
5. ```json
{
"id": "fdbk-005",
"userId": null,
"submittedAt": "2023-10-27T10:30:00Z",
"rolePerception": "Loser",
"managerPerception": "Mediator",
"teamDynamics": "Competitive",
"overallSatisfaction": 1,
"suggestions": "Need more training and clearer career paths."
}
```
* **Mock Analysis Result (Single `AnalysisResult` object):**
```json
{
"distribution": {
"loser": 30,
"mediator": 50,
"ultimate": 20
},
"sentimentScore": 65,
"managerEffectivenessScore": 70,
"retentionRiskScore": 45,
"keyInsights": [
"Potential stagnation due to a large 'Mediator' group. Consider clear pathways for advancement.",
"Manager perception is generally positive, but opportunities exist for improvement in direct leadership.",
"Sentiment is moderate; focus on recognition and clear goal-setting could boost morale."
]
}
```
**DEPLOYMENT NOTES:**
* **Build:** Use `npm run build` or `yarn build`. Ensure environment variables are configured correctly for the build process (e.g., API endpoints).
* **Environment Variables:** Use `.env` files (e.g., `.env.development`, `.env.production`). Key variables might include `REACT_APP_API_URL` for backend communication.
* **Performance Optimizations:** Code splitting using React.lazy and Suspense. Image optimization. Memoization of components (`React.memo`) where appropriate. Minimize bundle size. Use production builds for deployment.
* **HTTPS:** Ensure the application is served over HTTPS in production.
* **CORS:** Configure CORS appropriately on the backend if the frontend and backend are on different domains.