You are an AI assistant tasked with generating the codebase for a single-page web application (SPA) called 'SecureHaven' using React and Tailwind CSS. SecureHaven aims to solve the problem of unexpected account suspensions and data loss by providing users with a centralized platform to monitor their critical online accounts, receive proactive security alerts, and initiate automated recovery processes.
**1. PROJECT OVERVIEW:**
SecureHaven provides peace of mind to users by acting as a digital guardian for their online accounts. The core problem it addresses is the vulnerability of users to sudden account suspensions (like the VeraCrypt incident on Hacker News) or data loss due to platform changes or security issues. SecureHaven's value proposition lies in its ability to offer proactive monitoring, immediate alerts, and streamlined recovery pathways, ensuring users maintain control over their digital lives even in adverse situations.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development setup)
- **Styling:** Tailwind CSS (with Headless UI for accessible, unstyled components)
- **State Management:** Zustand (for simplicity and performance in a SPA context)
- **Routing:** React Router DOM (for potential future expansion, though initially a single page)
- **API Calls:** Axios (for making HTTP requests to a hypothetical backend or mock API)
- **Form Handling:** React Hook Form (for efficient and clean form management)
- **Icons:** React Icons
**3. CORE FEATURES:**
* **Dashboard (Main View):**
* **User Flow:** Upon login/access, the user sees a consolidated view of all connected accounts. Each account tile displays its name, status (e.g., 'Active', 'Suspended', 'Warning'), last check time, and quick action buttons (e.g., 'View Details', 'Manual Check'). An overview 'Security Health Score' is prominently displayed.
* **Details:** Clicking 'View Details' navigates to a modal or dedicated section showing account-specific information, recent alerts, and recovery history.
* **Account Connection:**
* **User Flow:** User clicks 'Connect New Account'. A modal appears with a list of supported service types (e.g., Email, Cloud Storage, Encryption Tools, Social Media). User selects a service, is prompted for necessary credentials or API keys (handled securely via backend or browser local storage with encryption), and confirms. The new account appears on the dashboard.
* **Security:** Emphasize secure credential handling (e.g., using OAuth where possible, or encrypted storage for API keys).
* **Alerting System:**
* **User Flow:** When the system detects a potential issue (e.g., account login anomaly detected by the service, policy change announcement, suspension notice), a notification appears on the dashboard and a push notification (if implemented) is sent. The affected account's status changes to 'Warning' or 'Suspended'.
* **Details:** Alerts are logged and visible in the account details view.
* **Recovery Initiation:**
* **User Flow:** If an account is marked 'Suspended', the 'Initiate Recovery' button becomes active. Clicking it triggers a pre-defined workflow. This might involve:
1. Displaying a checklist of recovery steps (e.g., 'Check Email for Verification Link', 'Contact Support').
2. If the user has provided recovery email/phone, sending automated messages to those channels.
3. Providing direct links to the service's support or recovery pages.
* **MVP Scope:** Initially, this might guide the user through manual steps, with future versions automating more actions.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application structure. A persistent sidebar/navigation menu (collapsible) on the left for main sections (Dashboard, Connected Accounts, Settings, Help). The main content area displays the dashboard or selected section. Minimalist and clean aesthetic.
* **Color Palette:** Primary: Dark Blue (#1A202C), Secondary: Teal (#4FD1C5), Accent: Yellow (#FFDA63) for alerts/warnings. Neutral grays for text and backgrounds (#F7FAFC, #E2E8F0, #A0AEC0). White for primary backgrounds in content areas.
* **Typography:** Sans-serif font like Inter or Roboto for readability. Clear hierarchy using font weights and sizes.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content reflows and scales appropriately. Use Tailwind's responsive prefixes (sm:, md:, lg:).
* **Components:** Use Headless UI for accessibility. Focus on clear visual feedback for states (loading, success, error).
**5. DATA MODEL (Zustand Store / Mock API):**
* `accounts`: Array of account objects.
* `id`: string (UUID)
* `serviceName`: string (e.g., 'Google Drive', 'VeraCrypt', 'Outlook')
* `accountIdentifier`: string (e.g., email address, username)
* `status`: 'Active' | 'Warning' | 'Suspended' | 'Checking'
* `lastChecked`: string (ISO timestamp)
* `connectionMethod`: 'OAuth' | 'API_Key' | 'Manual'
* `alerts`: Array of alert objects
* `id`: string
* `timestamp`: string (ISO timestamp)
* `message`: string
* `severity`: 'Info' | 'Warning' | 'Critical'
* `recoveryInfo`: Object (optional)
* `recoveryEmail`: string
* `recoveryPhone`: string
* `recoverySteps`: Array of strings
* `userProfile`: Object
* `name`: string
* `email`: string
* `securityScore`: number (0-100)
* **Mock API Endpoints (Conceptual):**
* `GET /api/accounts`: Fetch all connected accounts.
* `POST /api/accounts`: Connect a new account.
* `GET /api/accounts/{id}`: Fetch details for a specific account.
* `POST /api/accounts/{id}/check`: Manually trigger a status check.
* `POST /api/accounts/{id}/recover`: Initiate recovery process.
* `GET /api/user/profile`: Fetch user profile data.
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component. Sets up routing, global layout.
* **`Layout.jsx`:** Contains the persistent sidebar and main content area structure.
* **`Sidebar.jsx`:** Navigation menu component. Receives user info and navigation links.
* **`Dashboard.jsx`:** Main content view. Displays `AccountList` and `SecurityScoreCard`.
* **`AccountList.jsx`:** Renders the `AccountCard` components based on the `accounts` state.
* **`AccountCard.jsx`:** Displays individual account information (name, status, etc.). Receives account object as prop. Handles click events for details/actions.
* **`SecurityScoreCard.jsx`:** Displays the overall security health score.
* **`ConnectAccountModal.jsx`:** Modal for adding new accounts. Contains form for service selection and credentials.
* **`AccountDetailModal.jsx`:** Modal showing detailed information, alerts, and recovery options for a specific account.
* **`AlertNotification.jsx`:** Component to display system alerts (can be toasts or inline messages).
* **`RecoveryWorkflow.jsx`:** Component guiding the user through the recovery steps.
* **`useZustandStore.js`:** Zustand store definition for managing global state.
* **`apiService.js`:** Module for handling API calls using Axios.
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out transitions between main sections (using `Framer Motion` or CSS transitions).
* **Hover Effects:** Slight scaling or background color changes on interactive elements like buttons and account cards.
* **Loading States:** Use spinners (e.g., from `react-icons`) or skeleton loaders when fetching data. Buttons should show a loading state when an action is in progress.
* **Status Changes:** Animate the status indicators (e.g., color transitions, subtle pulse for 'Warning').
* **Micro-interactions:** Smooth opening/closing of modals and collapsible elements.
**8. EDGE CASES:**
* **Empty State:** When no accounts are connected, display a friendly message and a clear call-to-action to connect the first account.
* **Error Handling:** Gracefully handle API errors (e.g., failed connection, server issues). Display user-friendly error messages. Use `try...catch` blocks for all async operations.
* **Validation:** Implement form validation for account connection (e.g., ensuring required fields are filled, potentially basic format checks for emails/keys).
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure all interactive elements are keyboard-navigable. Use ARIA attributes where necessary, especially for modals and custom form elements. Leverage Headless UI components for built-in accessibility.
* **Security:** Never store sensitive credentials directly in frontend state or local storage without robust encryption. Use environment variables for API base URLs. If handling sensitive data, consider server-side processing or secure backend storage.
**9. SAMPLE DATA (Mock):**
```json
// Mock data for Zustand store
{
"accounts": [
{
"id": "acc-uuid-1234",
"serviceName": "Google Workspace",
"accountIdentifier": "user@example.com",
"status": "Active",
"lastChecked": "2023-10-27T10:00:00Z",
"connectionMethod": "OAuth",
"alerts": [],
"recoveryInfo": {
"recoveryEmail": "backup@mail.com",
"recoverySteps": ["Verify login via recovery email link", "Update security questions"]
}
},
{
"id": "acc-uuid-5678",
"serviceName": "Dropbox",
"accountIdentifier": "user.dropbox@example.com",
"status": "Warning",
"lastChecked": "2023-10-27T09:30:00Z",
"connectionMethod": "API_Key",
"alerts": [
{
"id": "alert-abc",
"timestamp": "2023-10-27T09:25:00Z",
"message": "Unusual login activity detected. Please review your security settings.",
"severity": "Warning"
}
],
"recoveryInfo": null
},
{
"id": "acc-uuid-9101",
"serviceName": "GitHub",
"accountIdentifier": "techuser",
"status": "Checking",
"lastChecked": "2023-10-27T10:05:00Z",
"connectionMethod": "OAuth",
"alerts": [],
"recoveryInfo": null
}
],
"userProfile": {
"name": "Alex Johnson",
"email": "alex.j@example.com",
"securityScore": 85
}
}
```
**10. DEPLOYMENT NOTES:**
* **Build Tool:** Vite (`npm run build`).
* **Environment Variables:** Use `.env` files for `VITE_API_BASE_URL` and any other sensitive keys (though sensitive keys should ideally be handled server-side if a backend exists).
* **Performance:** Ensure efficient state management. Code-split if necessary (though less critical for an initial SPA). Optimize images. Use `React.memo` or `useCallback` where appropriate to prevent unnecessary re-renders.
* **Deployment Platform:** Suitable for platforms like Vercel, Netlify, or traditional hosting with a static file server.
* **HTTPS:** Always deploy over HTTPS.