You are an expert AI coding assistant tasked with building a single-page application (SPA) for 'Kuantum Kalkanı: Güvenli Gelecek' (Quantum Shield: Secure Future). This application will help organizations prepare for the quantum computing threat by automating and managing their transition to post-quantum cryptography (PQC).
1. PROJECT OVERVIEW:
- **Purpose:** To provide organizations with a platform to assess their vulnerability to quantum attacks, plan and manage their migration to Post-Quantum Cryptography (PQC), and ensure ongoing compliance with emerging security standards.
- **Problem Solved:** The imminent threat of quantum computers breaking current encryption standards (like RSA and ECC) poses a significant risk to data security. Many organizations lack the expertise and resources to proactively transition to PQC.
- **Value Proposition:** 'Kuantum Kalkanı' offers an automated, guided solution for PQC readiness, reducing complexity, minimizing risk, and ensuring future-proof security for sensitive data.
2. TECH STACK:
- **Framework:** React (using Vite for fast development).
- **Styling:** Tailwind CSS for rapid, utility-first styling.
- **State Management:** Zustand for efficient global state management.
- **Routing:** React Router DOM for client-side navigation.
- **UI Components:** Radix UI for accessible and unstyled primitive components, possibly enhanced with custom styles.
- **Charting:** Chart.js or Recharts for data visualization (threat analysis reports).
- **Form Handling:** React Hook Form for efficient and scalable form management.
- **Icons:** Lucide React for a comprehensive icon library.
- **Utilities:** date-fns for date manipulation.
3. CORE FEATURES:
- **Dashboard:** The main landing page after login. Displays a summary of the organization's PQC readiness score, upcoming tasks, recent alerts, and key metrics.
- **User Flow:** User logs in -> Redirected to Dashboard -> Overview of security posture is presented.
- **Vulnerability Assessment (Quantum Threat Analysis):** Allows users to input details about their current cryptographic infrastructure (e.g., types of algorithms used, key lengths, deployed systems). The tool then estimates the organization's vulnerability score against known quantum algorithms.
- **User Flow:** Navigate to 'Assessment' -> Fill out the assessment form (or upload a configuration file) -> Submit -> View detailed vulnerability report with a score and breakdown.
- **PQC Transition Planner:** Based on the assessment results, this module suggests a phased migration plan. It identifies suitable PQC algorithms (e.g., CRYSTALS-Kyber, CRYSTALS-Dilithium) for different use cases and provides a step-by-step guide.
- **User Flow:** Access 'Transition Plan' -> Review suggested PQC algorithms -> Follow the generated roadmap (tasks, timelines) -> Mark tasks as complete.
- **Encryption Management Console:** A central hub to monitor existing encryption keys, certificates, and PQC-related assets. It provides status updates, renewal reminders, and alerts for potential security issues.
- **User Flow:** Go to 'Management Console' -> View list of encryption assets -> Check status and expiry dates -> Receive notifications for upcoming renewals or detected issues.
- **Compliance & Reporting:** Generates reports based on regulatory standards (e.g., NIST, ENISA guidelines) and internal security policies. Tracks progress towards PQC compliance.
- **User Flow:** Select 'Compliance' -> Choose report type (e.g., NIST Gap Analysis, PQC Readiness Report) -> Configure date range -> Generate and download report.
4. UI/UX DESIGN:
- **Layout:** Clean, modern, and professional single-page application layout. A persistent sidebar navigation for core features. Main content area displays dynamic information based on the selected feature. Top header for user profile and notifications.
- **Color Palette:** Primary: Deep Blue (#0A2540), Secondary: Teal (#2DD4BF), Accent: Light Gray (#F3F4F6), Text: Dark Gray (#1F2937), White (#FFFFFF). Use blue for primary actions and data, teal for secondary information and highlights, gray for backgrounds and borders.
- **Typography:** Use a sans-serif font family like Inter or Poppins. Headings: Bold, larger sizes. Body text: Regular, readable size. Ensure good contrast ratios.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adapts fluidly. Ensure usability across desktops, tablets, and smartphones.
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions between sections/pages. Clear loading indicators (spinners, skeleton screens). Micro-interactions for form submissions and status changes.
5. DATA MODEL (State Structure with Zustand):
- `useAuthStore`: { `isAuthenticated`: boolean, `user`: object | null, `login`: (userData) => void, `logout`: () => void }
- `useAssessmentStore`: { `vulnerabilityData`: object | null, `isLoading`: boolean, `error`: string | null, `fetchAssessment`: (formData) => void, `reset`: () => void }
- `useTransitionStore`: { `plan`: object | null, `currentStep`: number, `isLoading`: boolean, `fetchPlan`: () => void, `nextStep`: () => void, `prevStep`: () => void, `updateTaskStatus`: (taskId, status) => void }
- `useEncryptionStore`: { `assets`: array, `isLoading`: boolean, `error`: string | null, `fetchAssets`: () => void, `addAsset`: (assetData) => void, `updateAsset`: (assetId, updateData) => void, `deleteAsset`: (assetId) => void }
- `useComplianceStore`: { `reports`: array, `isLoading`: boolean, `generateReport`: (reportType, params) => void }
- **Mock Data Formats:**
- `VulnerabilityData`: { `overallScore`: number, `categoryBreakdown`: { `symmetric`: number, `asymmetric`: number, `hashing`: number }, `vulnerableAlgorithms`: [{ `name`: string, `impact`: string, `mitigation`: string }] }
- `TransitionPlan`: { `phases`: [{ `id`: number, `title`: string, `description`: string, `tasks`: [{ `id`: string, `name`: string, `status`: 'pending' | 'in-progress' | 'completed', `dueDate`: string }] }] }
- `EncryptionAsset`: { `id`: string, `type`: 'key' | 'certificate', `name`: string, `algorithm`: string, `keyLength`: number, `expiryDate`: string, `status`: 'active' | 'expiring' | 'expired' }
6. COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing and global layout.
- **`Layout.jsx`:** Wrapper component containing the sidebar, header, and main content area.
- **`Sidebar.jsx`:** Navigation menu component. Props: `navItems` (array of objects with `label`, `path`, `icon`).
- **`Header.jsx`:** Top bar with user profile dropdown, notifications icon.
- **`Dashboard.jsx`:** Displays overview widgets (readiness score, alerts, task summary).
- **`ReadinessScoreWidget.jsx`:** Displays the main PQC readiness score (e.g., using a gauge chart).
- **`AlertsWidget.jsx`:** Shows recent security alerts.
- **`UpcomingTasksWidget.jsx`:** Lists tasks from the transition plan.
- **`VulnerabilityAssessment.jsx`:** Main page for the assessment feature.
- **`AssessmentForm.jsx`:** Form for users to input infrastructure details. Props: `onSubmit`, `initialData`.
- **`VulnerabilityReport.jsx`:** Displays the detailed report. Props: `data`.
- **`ThreatGraph.jsx`:** Chart component to visualize algorithm vulnerabilities. Props: `data`.
- **`PqcTransitionPlanner.jsx`:** Main page for the planning feature.
- **`PhaseStepper.jsx`:** Navigates through different phases of the plan. Props: `phases`, `currentStep`, `onStepChange`.
- **`TaskList.jsx`:** Displays tasks for the current phase. Props: `tasks`, `onUpdateStatus`.
- **`EncryptionManagement.jsx`:** Main page for the console.
- **`AssetTable.jsx`:** Displays encryption assets in a sortable, filterable table. Props: `assets`, `columns`.
- **`AssetForm.jsx`:** Modal or form for adding/editing assets. Props: `onSubmit`, `initialData`.
- **`Compliance.jsx`:** Main page for compliance reporting.
- **`ReportGenerator.jsx`:** Form to select report type and parameters. Props: `onSubmit`.
- **`ReportViewer.jsx`:** Displays generated reports (can be a table or link to PDF).
- **`Button.jsx`:** Reusable button component. Props: `onClick`, `children`, `variant`, `size`, `isLoading`.
- **`Input.jsx`:** Reusable input field. Props: `label`, `type`, `register`, `error`.
- **`Modal.jsx`:** Reusable modal component. Props: `isOpen`, `onClose`, `children`, `title`.
7. ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Use `Framer Motion` for smooth fades or slides when navigating between main sections.
- **Button Hover:** Subtle scale-up or background color change on buttons.
- **Loading States:** Implement `Zustand` loading states to show spinners or skeleton loaders while data is being fetched. Prevent user interaction with disabled elements during loading.
- **Form Validation:** Animate error messages appearing below input fields.
- **Chart Interactions:** Tooltips on hover for charts.
- **Sidebar Collapse:** Smooth slide animation for the sidebar.
8. EDGE CASES:
- **Authentication:** Handle expired sessions, redirect to login. Implement robust error handling for login/logout.
- **Empty States:** Display informative messages and clear calls-to-action when no data is available (e.g., "No assets found. Add your first asset.").
- **Error Handling:** Catch API errors or data processing errors. Display user-friendly error messages (e.g., using toasts or inline messages). Log detailed errors for developers.
- **Form Validation:** Implement client-side validation using `React Hook Form` and server-side validation (if applicable). Highlight invalid fields clearly.
- **Accessibility (a11y):** Use semantic HTML, ensure proper ARIA attributes, keyboard navigation support, sufficient color contrast, and focus management.
- **Data Inconsistency:** Implement checks for data integrity, especially when updating assets or plans.
- **Network Failures:** Gracefully handle offline scenarios or network interruptions, possibly with retry mechanisms.
9. SAMPLE DATA:
- **`VulnerabilityData` Mock:**
```json
{
"overallScore": 78,
"categoryBreakdown": {
"symmetric": 65,
"asymmetric": 85,
"hashing": 70
},
"vulnerableAlgorithms": [
{ "name": "RSA-2048", "impact": "High", "mitigation": "Migrate to CRYSTALS-Dilithium or equivalent PQC algorithm." },
{ "name": "P-256 (ECP)", "impact": "Critical", "mitigation": "Migrate to CRYSTALS-Kyber or equivalent PQC Key Encapsulation Mechanism." }
]
}
```
- **`TransitionPlan` Mock (Phase 1):**
```json
{
"phases": [
{
"id": 1,
"title": "Phase 1: Assessment & Awareness",
"description": "Understand current cryptographic inventory and educate stakeholders.",
"tasks": [
{ "id": "task-1a", "name": "Inventory all cryptographic assets", "status": "completed", "dueDate": "2024-08-15" },
{ "id": "task-1b", "name": "Conduct initial quantum vulnerability assessment", "status": "in-progress", "dueDate": "2024-09-01" },
{ "id": "task-1c", "name": "Develop PQC awareness training materials", "status": "pending", "dueDate": "2024-09-15" }
]
}
]
}
```
- **`EncryptionAsset` Mocks:**
```json
[
{ "id": "asset-001", "type": "certificate", "name": "api.example.com SSL Cert", "algorithm": "RSA", "keyLength": 2048, "expiryDate": "2025-01-10", "status": "expiring" },
{ "id": "asset-002", "type": "key", "name": "Database Encryption Key", "algorithm": "AES-256", "keyLength": 256, "expiryDate": "2026-12-31", "status": "active" },
{ "id": "asset-003", "type": "key", "name": "Old Internal Service Key", "algorithm": "ECC", "keyLength": 256, "expiryDate": "2024-11-20", "status": "expiring" }
]
```
- **`Report` Mock:**
```json
{ "reportId": "rep-123", "type": "NIST Gap Analysis", "generatedAt": "2024-07-26T10:00:00Z", "content": "... PDF content placeholder ..." }
```
10. DEPLOYMENT NOTES:
- **Build Tool:** Vite (`npm run build`). Generates optimized static assets.
- **Environment Variables:** Use `.env` files for API keys, base URLs, etc. Prefix variables with `VITE_` (e.g., `VITE_API_BASE_URL`).
- **Production Build:** Configure Vite for production optimization (minification, code splitting).
- **Hosting:** Deploy static build to services like Netlify, Vercel, AWS S3/CloudFront.
- **State Persistence:** Consider using `localStorage` for some non-sensitive user preferences or temporary states if a backend API isn't used initially for everything.
- **Error Reporting:** Integrate a service like Sentry for production error tracking.
- **Performance:** Optimize image loading, code splitting, and memoization (React.memo, useMemo, useCallback) to ensure fast load times.
- **HTTPS:** Ensure the deployed application is served over HTTPS.