Generate a fully functional, multi-page Next.js MVP application for 'QuantumGuard', a SaaS platform designed to help organizations transition to quantum-resistant cryptography. The application should solve the problem of impending quantum computing threats to current encryption standards by providing tools for risk assessment, algorithm management, integration guidance, and ongoing security audits.
**1. PROJECT OVERVIEW:**
QuantumGuard addresses the critical and growing threat posed by quantum computers to existing cryptographic infrastructure. As quantum computing advances, widely used encryption algorithms (like RSA and ECC) will become vulnerable, potentially leading to catastrophic data breaches and security failures. QuantumGuard provides a proactive, comprehensive solution for businesses and organizations to assess their quantum risk, adopt quantum-resistant algorithms (QRAs), and manage their cryptographic security posture for the post-quantum era. Our core value proposition is enabling future-proof security through simplified QRA adoption and robust management.
**2. TECH STACK:**
- **Frontend Framework:** React (Next.js App Router)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (for PostgreSQL)
- **Database:** PostgreSQL
- **Authentication:** NextAuth.js (or Clerk for simplicity, if preferred)
- **UI Component Library:** shadcn/ui
- **State Management:** Zustand or React Context API
- **Form Handling:** React Hook Form + Zod for validation
- **Charting:** Recharts or Chart.js for data visualization
- **API Layer:** Next.js API Routes (App Router handlers)
- **Deployment:** Vercel (recommended)
- **TypeScript:** Enforce strict typing throughout.
**3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
```typescript
// schema.ts
import { pgTable, uuid, text, timestamp, boolean, varchar, integer, jsonb } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
// User Authentication Tables (assuming NextAuth.js)
export const users = pgTable('users', {
id: uuid('id').primaryKey(),
name: text('name'),
email: text('email').unique().notNull(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: text('image'),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow()
});
export const accounts = pgTable('accounts', {
id: text('id').primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
type: varchar('type', { length: 255 }),
provider: varchar('provider', { length: 255 }),
providerAccountId: varchar('providerAccountId', { length: 255 }),
token: jsonb('token'),
});
export const sessions = pgTable('sessions', {
sessionToken: text('sessionToken').primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
expires: timestamp('expires', { mode: 'date' }).notNull()
});
export const verificationTokens = pgTable('verificationTokens', {
identifier: text('identifier').notNull(),
token: text('token').notNull(),
expires: timestamp('expires', { mode: 'date' }).notNull()
});
// Application Specific Tables
export const organizations = pgTable('organizations', {
id: uuid('id').primaryKey(),
name: varchar('name', { length: 255 }).notNull(),
ownerId: uuid('ownerId').notNull().references(() => users.id, { onDelete: 'cascade' }),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow()
});
export const organizationMembers = pgTable('organization_members', {
id: uuid('id').primaryKey(),
organizationId: uuid('organizationId').notNull().references(() => organizations.id, { onDelete: 'cascade' }),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
role: varchar('role', { length: 50 }).notNull(), // e.g., 'admin', 'member', 'auditor'
joinedAt: timestamp('joinedAt', { mode: 'date' }).defaultNow()
});
export const cryptoAssets = pgTable('crypto_assets', {
id: uuid('id').primaryKey(),
organizationId: uuid('organizationId').notNull().references(() => organizations.id, { onDelete: 'cascade' }),
assetName: varchar('assetName', { length: 255 }).notNull(), // e.g., 'ECC Public Keys', 'TLS Certificates'
currentAlgorithm: varchar('currentAlgorithm', { length: 255 }), // e.g., 'NIST P-256', 'RSA-2048'
quantumRiskScore: integer('quantumRiskScore'), // 0-100 scale
lastScannedAt: timestamp('lastScannedAt', { mode: 'date' }),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow()
});
export const qraAlgorithms = pgTable('qra_algorithms', {
id: uuid('id').primaryKey(),
name: varchar('name', { length: 255 }).notNull(), // e.g., 'CRYSTALS-Kyber', 'SPHINCS+'
nistStandard: varchar('nistStandard', { length: 100 }), // e.g., 'FIPS 203'
type: varchar('type', { length: 100 }), // e.g., 'KEM', 'Signature'
description: text('description'),
securityLevel: integer('securityLevel'), // Relative security level
implementationStatus: varchar('implementationStatus', { length: 50 }), // e.g., 'Draft', 'Final', 'Implemented'
});
export const qraImplementations = pgTable('qra_implementations', {
id: uuid('id').primaryKey(),
cryptoAssetId: uuid('cryptoAssetId').notNull().references(() => cryptoAssets.id, { onDelete: 'cascade' }),
qraAlgorithmId: uuid('qraAlgorithmId').notNull().references(() => qraAlgorithms.id),
status: varchar('status', { length: 100 }), // e.g., 'Planned', 'In Progress', 'Completed', 'Not Applicable'
integrationNotes: text('integrationNotes'),
targetDate: timestamp('targetDate', { mode: 'date' }),
completedAt: timestamp('completedAt', { mode: 'date' })
});
// Relations (example)
export const organizationsRelations = relations(organizations, ({ many }) => ({
members: many(organizationMembers),
assets: many(cryptoAssets)
}));
export const cryptoAssetsRelations = relations(cryptoAssets, ({ one, many }) => ({
organization: one(organizations, {
fields: [cryptoAssets.organizationId],
references: [organizations.id]
}),
implementations: many(qraImplementations)
}));
export const qraImplementationsRelations = relations(qraImplementations, ({ one }) => ({
asset: one(cryptoAssets, {
fields: [qraImplementations.cryptoAssetId],
references: [cryptoAssets.id]
}),
algorithm: one(qraAlgorithms, {
fields: [qraImplementations.qraAlgorithmId],
references: [qraAlgorithms.id]
})
}));
// ... add relations for users, members etc. as needed
```
**4. CORE FEATURES & USER FLOW:**
* **a) User Authentication:**
* **Flow:** User lands on the homepage -> Clicks 'Sign Up' or 'Login' -> Redirected to authentication provider (e.g., Google, GitHub, Email/Password with NextAuth.js) -> Successfully authenticated -> Redirected to the dashboard.
* **Features:** Secure login/signup, password reset (if email/password used), OAuth integration.
* **Edge Cases:** Invalid credentials, account lockout (optional for MVP), email verification.
* **b) Organization Management:**
* **Flow:** After login, user can create a new organization or join an existing one. If creating, they become the owner. If joining, they receive an invite or use a code. Owners can invite/manage members and their roles.
* **Features:** Create organization, invite members (email), assign roles (Admin, Member, Auditor), view organization details.
* **Edge Cases:** Duplicate organization names, inviting non-existent users, revoking access.
* **c) Crypto Asset Inventory & Risk Assessment:**
* **Flow:** Within an organization, users can add their cryptographic assets (e.g., "Main Web Server TLS Cert", "Customer Database Encryption Key"). For each asset, they can input the current algorithm and potentially connect to discovery tools (future) or manually input risk factors. The system calculates a 'Quantum Risk Score' based on algorithm vulnerability data (sourced from NIST, academic papers).
* **Features:** Add/Edit/Delete crypto assets, associate algorithms, view risk scores, historical scan data.
* **Edge Cases:** Asset not found, unknown algorithm, data input errors.
* **d) QRA Library & Implementation Planning:**
* **Flow:** Users can browse the library of known Quantum-Resistant Algorithms (QRAs), filtered by type (KEM, Signature), NIST status, etc. For a selected asset, users can choose a suitable QRA from the library and create an 'Implementation Plan' specifying a target date, status, and integration notes.
* **Features:** Browse QRAs, view algorithm details, create QRA implementation plans per asset.
* **Edge Cases:** No suitable QRA found, planning conflicts (future).
* **e) Dashboard & Reporting:**
* **Flow:** The main dashboard provides an overview of the organization's quantum security posture: overall risk score, number of assets, progress on QRA implementation, recent activity. Detailed reports can be generated.
* **Features:** Overview widgets, risk score trends (chart), QRA implementation progress bar, downloadable reports (CSV/PDF - future).
* **Edge Cases:** Empty state (no assets/plans yet), data loading states.
**5. API & DATA FETCHING:**
- Use Next.js API Routes (App Router `route.ts` files).
- Employ `POST` for creating data, `GET` for fetching, `PUT`/`PATCH` for updating, `DELETE` for removing.
- All API routes should be protected and require authentication.
- Fetch data client-side using SWR or server-side using `fetch` within Server Components/Route Handlers, passing data to client components.
- Example API Endpoint:
- `POST /api/organizations/{orgId}/assets`
- Request Body: `{ assetName: string, currentAlgorithm: string }`
- Response Body: `{ id: string, ...assetData }` (201 Created)
- Example Server Action (App Router):
- `async function addAsset(formData: FormData) { ... }`
- Use ` செல்லுு்` to handle form submissions directly from components.
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
* **`app/`**
* **`layout.tsx`**: Root layout (<html>, <body>, global providers, main Tailwind wrapper).
* **`page.tsx`**: Landing Page (Public).
* **`auth/`**: Authentication routes (`/auth/signin`, `/auth/callback/...`).
* **`dashboard/`**: Authenticated user's main view.
* **`layout.tsx`**: Dashboard shell (sidebar, header).
* **`page.tsx`**: Overview Dashboard (Widgets, charts).
* **`organizations/`**: Organization management.
* **`page.tsx`**: List organizations, create new.
* **`[orgId]/`**: Specific organization view.
* **`layout.tsx`**: Org-specific navigation.
* **`page.tsx`**: Org overview, members.
* **`assets/`**: Crypto asset management.
* **`page.tsx`**: List assets, add new asset form.
* **`[assetId]/`**: Specific asset view.
* **`page.tsx`**: Asset details, risk score, QRA implementation status.
* **`edit/page.tsx`**: Edit asset form.
* **`qra/`**: QRA library browser.
* **`page.tsx`**: List/search QRAs, view details.
* **`settings/`**: User settings (profile, organization settings).
* **`page.tsx`**: Profile settings.
* **`organization/page.tsx`**: Manage organization details, members, billing (future).
* **`components/`**: Shared UI components (shadcn/ui based).
* **`ui/`**: Primitives from shadcn/ui (Button, Input, Card, etc.).
* **`layout/`**: Header, Sidebar, Footer.
* **`charts/`**: Recharts components (e.g., `RiskScoreTrendChart`).
* **`forms/`**: Reusable form components (e.g., `AssetForm`, `MemberInviteForm`).
* **`widgets/`**: Dashboard widgets (e.g., `RiskScoreWidget`, `ImplementationProgressWidget`).
* **`auth/`**: Auth-related components (e.g., `SignInButton`, `SignOutButton`).
* **`lib/`**: Utility functions, API clients, Drizzle setup, Zod schemas.
* **`hooks/`**: Custom React hooks (e.g., `useOrganizationAssets`).
* **`styles/`**: Global CSS files.
**State Management:** Server Components fetch data directly. Client Components use Zustand/Context for global state (e.g., user session, UI state) and fetch data via Server Actions or API routes, possibly using SWR for client-side caching and revalidation.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
* **Style:** Modern, Clean, Professional, Secure.
* **Color Palette:**
* Primary (Brand): #007AFF (Vibrant Blue)
* Secondary (Accent): #34C759 (Green for positive indicators)
* Background: #F2F2F7 (Light Gray)
* Card/Surface: #FFFFFF (White)
* Text (Primary): #1C1C1E (Near Black)
* Text (Secondary): #8E8E93 (Gray)
* Danger/Warning: #FF3B30 (Red)
* **Typography:** System fonts (Inter or San Francisco) for clean readability. Headings: Bold, 2.5rem+. Body: Regular, 1rem.
* **Layout:** Consistent use of padding and margins. Sidebar navigation on the left for authenticated sections. Main content area. Responsive design prioritizing mobile-first but scaling gracefully to desktop.
* **Visual Elements:** Subtle gradients, clean icons (e.g., Lucide React), focus on data visualization clarity.
**8. SAMPLE/MOCK DATA:**
* **User:**
`{ id: 'uuid-user-1', name: 'Alice Smith', email: 'alice@example.com', image: 'url-to-avatar.jpg' }`
* **Organization:**
`{ id: 'uuid-org-1', name: 'Example Corp', ownerId: 'uuid-user-1', createdAt: '2024-01-15T10:00:00Z' }`
* **Crypto Asset:**
`{ id: 'uuid-asset-1', organizationId: 'uuid-org-1', assetName: 'Public Web API TLS Certificate', currentAlgorithm: 'ECDSA P-256', quantumRiskScore: 75, lastScannedAt: '2024-05-01T08:00:00Z' }`
* **QRA Algorithm:**
`{ id: 'uuid-qra-1', name: 'CRYSTALS-Kyber-768', nistStandard: 'FIPS 203', type: 'KEM', securityLevel: 5, implementationStatus: 'Final' }`
* **QRA Implementation Plan:**
`{ id: 'uuid-impl-1', cryptoAssetId: 'uuid-asset-1', qraAlgorithmId: 'uuid-qra-1', status: 'In Progress', targetDate: '2025-01-01T00:00:00Z', integrationNotes: 'Requires update to OpenSSL library.' }`
* **Another Asset:**
`{ id: 'uuid-asset-2', organizationId: 'uuid-org-1', assetName: 'Internal Database Encryption Key', currentAlgorithm: 'AES-256-GCM', quantumRiskScore: 10, lastScannedAt: '2024-04-28T12:00:00Z' }`
* **Another Plan:**
`{ id: 'uuid-impl-2', cryptoAssetId: 'uuid-asset-2', qraAlgorithmId: null, status: 'Planned', targetDate: '2025-06-01T00:00:00Z', integrationNotes: 'AES-256 considered quantum-resistant for now, monitoring NIST updates.' }`
**9. TURKISH TRANSLATIONS (Key UI Elements):**
* **App Title:** QuantumGuard
* **Sign Up:** Kaydol
* **Login:** Giriş Yap
* **Dashboard:** Gösterge Paneli
* **Organizations:** Şirketler
* **Assets:** Kripto Varlıkları
* **QRAs:** Kuantuma Dayanıklı Algoritmalar (KDA)
* **Risk Score:** Risk Skoru
* **Current Algorithm:** Mevcut Algoritma
* **Add New Asset:** Yeni Varlık Ekle
* **Plan QRA Implementation:** KDA Entegrasyon Planı Yap
* **Settings:** Ayarlar
* **Profile:** Profil
* **Invite Member:** Üye Davet Et
* **Save Changes:** Değişiklikleri Kaydet
* **Loading...:** Yükleniyor...
* **No data available:** Veri Bulunamadı
* **Something went wrong:** Bir Hata Oluştu
**10. ANIMATIONS:**
* **Page Transitions:** Subtle fade-in/out using Next.js `AnimatePresence` (if needed, or rely on default Next.js behavior for App Router).
* **Hover Effects:** Slight scale-up or background color change on interactive elements (buttons, links, cards).
* **Loading States:** Skeleton loaders for data fetching, spinners within buttons for async actions.
* **Data Updates:** Subtle animations on chart data updates or score changes.
**11. EDGE CASES:**
* **Empty States:** All lists (assets, members, QRAs) should have clear 'No data available' messages with CTAs to add new items.
* **Authentication:** Redirect to login if accessing protected routes without authentication. Handle `401` and `403` errors gracefully.
* **Error Handling:** Global error boundary component. Specific UI feedback for API errors (e.g., toast notifications). Form validation errors displayed inline near fields.
* **Data Validation:** Use Zod for robust schema validation on all API inputs and form submissions.
* **Permissions:** Ensure users can only access/modify data within their organization based on their role.
**General Instruction:** Build a robust, scalable, and secure MVP. Prioritize clear user flows, intuitive UI, and reliable data management. Ensure all components are responsive and accessible. Use TypeScript rigorously. The codebase should be clean, well-documented, and follow Next.js App Router best practices.