108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_A792pEssFe8",null],["b_LGdeIOURIOf",null],["b_wjlCOReRlZe",null]] 10e:[["b_A792pEssFe8",{"templateVersionId":null,"templateCanonId":null}],["b_LGdeIOURIOf",{"templateVersionId":null,"templateCanonId":null}],["b_wjlCOReRlZe",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["b_l82bFT5Ruiq","$D2025-07-15T10:48:03.757Z"],["b_Ghq8kENEbMm","$D2025-07-15T10:50:04.034Z"],["b_sD6RdGeiKpf","$D2025-07-15T10:50:37.130Z"],["b_uPE0Wq4WSF4","$D2025-07-15T11:00:22.721Z"],["b_JrVkJyIX0Nk","$D2025-07-15T11:10:04.088Z"],["b_uyrHAbZRxXr","$D2025-07-23T03:58:18.653Z"],["b_whPrZ6qD4sX","$D2025-07-23T04:07:55.648Z"],["b_GvYjyoxzDhN","$D2025-07-23T04:16:31.700Z"],["b_pjzBFjHZpHm","$D2025-07-23T12:20:03.285Z"],["b_2G88Ll8Ct1d","$D2025-07-23T12:26:22.163Z"],["b_Xnv2bT7YuHb","$D2025-07-23T12:28:54.942Z"],["b_QBZGTRUK448","$D2025-07-23T13:13:59.861Z"],["b_am8w1RRyVqm","$D2025-07-23T13:22:14.022Z"],["b_SHkU5ACPHyl","$D2025-07-23T13:33:17.578Z"],["b_0cnVofJgUkQ","$D2025-07-23T13:40:04.702Z"],["b_A792pEssFe8","$D2025-07-30T16:00:09.071Z"],["b_LGdeIOURIOf","$D2025-07-30T16:10:07.725Z"],["b_wjlCOReRlZe","$D2025-07-30T17:00:55.005Z"]] 110:[["b_A792pEssFe8",false],["b_LGdeIOURIOf",false],["b_wjlCOReRlZe",false]] 111:[["b_A792pEssFe8","$undefined"],["b_LGdeIOURIOf","$undefined"],["b_wjlCOReRlZe","$undefined"]] 112:[["b_A792pEssFe8",null],["b_LGdeIOURIOf",null],["b_wjlCOReRlZe",null]] 113:[["b_A792pEssFe8",true],["b_LGdeIOURIOf",true],["b_wjlCOReRlZe",true]] 114:[["b_A792pEssFe8",true],["b_LGdeIOURIOf",true],["b_wjlCOReRlZe",true]] 115:[] 116:Tabd,I have the schema of the api available, can you update the forms and api integrations according to it?SAVE NEW RISK{ "riskSubject": "Unauthorized Access to Production Systems", "riskThreadMapping": ["Cybersecurity", "Access Control"], "riskMapping": ["Infrastructure", "Operations"], "category": "Technology", "siteLocation": ["Mumbai", "Chennai"], "externalReferenceId": "EXT-12345", "controlRegulation": "ISO 27001", "controlNumber": "AC-12", "affectedAssets": ["Database", "Web Server"], "technology": "AWS EC2", "team": ["DevOps", "Security"], "additionalStakeholders": ["CIO", "Compliance Officer"], "owner": "Ajay Kumar", "ownersManager": "Ravi Sharma", "riskSource": "Internal Audit", "riskScoringMethod": "Qualitative", "currentLikelihood": "Medium", "currentImpact": "High", "riskAssessment": "Requires immediate mitigation", "additionalNotes": "Multiple failed login attempts detected last month.", "tags": ["Critical", "Production", "Security"], "supportingDocumentation": "https://docs.internal.com/risk/RISK-123"}SAVE_FRAMEWORK{ "frameWorkId": "FW001", "frameworkName": "ISO 27001", "frameWorkDescription": "Security management framework"}SAVE_DOCUMENT_PROGRAM{ "documentType": "Policy", "documentName": "Data Privacy Policy", "frameworksList": ["ISO27001", "NIST"], "controlsList": ["Access Control", "Audit Log"], "additionalStakeholders": ["stakeholder1@example.com", "stakeholder2@example.com"], "documentOwner": "John Doe", "teamMembers": ["Alice", "Bob", "Charlie"], "creationDate": "2025-07-29T12:00:00.000+05:30", "lastReviewDate": "2025-07-15T12:00:00.000+05:30", "reviewFrequencyDays": 90, "nextReviewDate": "2025-10-15T12:00:00.000+05:30", "approvalDate": "2025-07-29T14:00:00.000+05:30", "approver": "Jane Smith", "parentDocument": "ROOT_POLICY_001", "documentStatus": "Approved", "documentURI": "https://example.com/docs/privacy-policy.pdf"}SAVE_EXCEPTION{ "exceptionName": "Firewall Rule Exception", "exceptionStatus": "Open", "policy": "POL001", "framework": "NIST", "control": "AC-1", "associatedRisks": ["RISK001", "RISK002"], "exceptionOwner": "john.doe@example.com", "additionalStakeholders": ["jane.smith@example.com", "mark.taylor@example.com"], "creationDate": "2025-07-29T00:00:00.000+00:00", "reviewFrequencyDays": 90, "nextReviewDate": "2025-10-27T00:00:00.000+00:00", "approvalDate": "2025-07-28T00:00:00.000+00:00", "approver": "security.manager@example.com", "description": "Temporary exception for allowing external SSH traffic.", "justification": "Needed for urgent vendor access during system upgrade.", "exceptionFileURI": "https://your-bucket.s3.amazonaws.com/exceptions/firewall-ssh.pdf"}117:T7881f,[V0_FILE]typescriptreact:file="app/risk-management/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]markdown:file="README.md" isMerged="true" # QS-GRC Enterprise Platform A comprehensive Governance, Risk, and Compliance (GRC) management platform built with Next.js, TypeScript, and Tailwind CSS. ## 🚀 Features ### Core Modules - **Dashboard**: Real-time GRC metrics and analytics - **Risk Management**: Enterprise risk register, assessments, and heat maps - **Compliance**: Framework management, assessments, and policy tracking - **Governance**: Incident management, policy control, and audit trails - **Reports**: Automated reporting and analytics ### Key Capabilities - ✅ Real-time risk monitoring and assessment - ✅ Compliance framework tracking (ISO 27001, SOX, GDPR, NIST) - ✅ Incident management and business impact analysis - ✅ Policy lifecycle management - ✅ Role-based access control - ✅ Automated report generation - ✅ Interactive dashboards and analytics - ✅ Audit trail and activity logging ## 🛠️ Tech Stack - **Framework**: Next.js 14 (App Router) - **Language**: TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **Charts**: Recharts - **Icons**: Lucide React - **State Management**: React Hooks - **Authentication**: NextAuth.js (ready for integration) ## 📁 Project Structure \`\`\` ├── app/ # Next.js App Router pages │ ├── (auth)/ # Authentication pages │ ├── compliance/ # Compliance module │ ├── governance/ # Governance module │ ├── reports/ # Reports module │ ├── risk-management/ # Risk management module │ ├── settings/ # Settings pages │ ├── globals.css # Global styles │ ├── layout.tsx # Root layout │ └── page.tsx # Dashboard page ├── components/ # Reusable components │ ├── forms/ # Form components │ ├── layout/ # Layout components │ ├── settings/ # Settings components │ └── ui/ # shadcn/ui components ├── lib/ # Utility functions ├── hooks/ # Custom React hooks ├── types/ # TypeScript type definitions ├── data/ # Mock data and constants └── public/ # Static assets \`\`\` ## 🚀 Getting Started ### Prerequisites - Node.js 18+ - npm or yarn ### Installation 1. Clone the repository: \`\`\`bash git clone cd qs-grc-platform \`\`\` 2. Install dependencies: \`\`\`bash npm install # or yarn install \`\`\` 3. Run the development server: \`\`\`bash npm run dev # or yarn dev \`\`\` 4. Open [http://localhost:3000](http://localhost:3000) in your browser. ## 🔧 Configuration ### Environment Variables Create a `.env.local` file in the root directory: \`\`\`env # Database DATABASE_URL="your-database-url" # Authentication NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-secret-key" # Email SMTP_HOST="your-smtp-host" SMTP_PORT="587" SMTP_USER="your-email" SMTP_PASS="your-password" \`\`\` ## 📊 Usage ### Dashboard - View real-time GRC metrics - Monitor risk trends and compliance scores - Access quick actions for common tasks ### Risk Management - Create and manage risk assessments - View risk heat maps and analytics - Track risk mitigation activities ### Compliance - Monitor compliance frameworks - Conduct assessments and track findings - Manage policies and procedures ### Governance - Report and track incidents - Manage organizational policies - Control user access and permissions ### Settings - Configure system preferences - Manage user accounts and roles - Set up notifications and integrations ## 🔐 Security Features - Role-based access control (RBAC) - Audit trail logging - Data encryption - Secure authentication - Session management ## 📈 Performance - Server-side rendering (SSR) - Static site generation (SSG) - Optimized bundle size - Lazy loading components - Efficient data fetching ## 🧪 Testing \`\`\`bash # Run tests npm test # Run tests in watch mode npm run test:watch # Generate coverage report npm run test:coverage \`\`\` ## 🚀 Deployment ### Vercel (Recommended) 1. Connect your repository to Vercel 2. Configure environment variables 3. Deploy automatically on push ### Docker \`\`\`bash # Build image docker build -t qs-grc . # Run container docker run -p 3000:3000 qs-grc \`\`\` ## 🤝 Contributing 1. Fork the repository 2. Create a feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## 📝 License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## 🆘 Support For support and questions: - Email: support@qs-grc.com - Documentation: [docs.qs-grc.com](https://docs.qs-grc.com) - Issues: [GitHub Issues](https://github.com/your-org/qs-grc/issues) ## 🗺️ Roadmap - [ ] Advanced analytics and AI insights - [ ] Mobile application - [ ] Third-party integrations (Slack, Teams, etc.) - [ ] Advanced workflow automation - [ ] Multi-tenant support - [ ] API documentation and SDK \`\`\` Now let me create the TypeScript types: [V0_FILE]typescript:file="types/index.ts" isFixed="true" isQuickEdit="true" isMerged="true" export interface User { id: string name: string email: string role: UserRole department: string avatar?: string createdAt: Date updatedAt: Date } export interface UserRole { id: string name: string permissions: Permission[] description: string } export interface Permission { id: string name: string resource: string action: string } export interface Risk { id: string title: string description: string category: RiskCategory impact: RiskLevel likelihood: RiskLevel riskScore: number status: RiskStatus owner: string department: string dueDate: Date createdAt: Date updatedAt: Date mitigationPlan?: string controls: Control[] } export interface Control { id: string name: string description: string type: string // ControlType effectiveness: string // ControlEffectiveness owner: string testDate?: Date nextTestDate?: Date } export interface Incident { id: string title: string description: string severity: IncidentSeverity status: IncidentStatus category: string // IncidentCategory reportedBy: string assignedTo: string reportedDate: Date resolvedDate?: Date impact: string rootCause?: string correctiveActions: string[] } export interface ComplianceFramework { id: string name: string description: string version: string status: ComplianceStatus score: number lastAssessment: Date nextReview: Date controls: ComplianceControl[] requirements: any[] // Requirement } export interface ComplianceControl { id: string name: string description: string status: string // ControlStatus evidence: any[] // Evidence owner: string testDate?: Date } export interface Policy { id: string name: string description: string version: string status: PolicyStatus owner: string approvers: string[] lastReview: Date nextReview: Date content: string attachments: any[] // Attachment } export interface Assessment { id: string title: string type: AssessmentType framework: string status: string // AssessmentStatus score?: number assessor: string startDate: Date completedDate?: Date findings: Finding[] } export interface Finding { id: string title: string description: string severity: string // FindingSeverity status: string // FindingStatus recommendation: string dueDate: Date assignedTo: string } export interface Report { id: string name: string description: string type: ReportType category: string template: string schedule?: any // ReportSchedule recipients: string[] lastGenerated?: Date status: string // ReportStatus } export interface AuditLog { id: string userId: string action: string resource: string resourceId: string timestamp: Date ipAddress: string userAgent: string details: Record } export interface Notification { id: string userId: string title: string message: string type: NotificationType read: boolean createdAt: Date actionUrl?: string } export interface Settings { general: GeneralSettings security: SecuritySettings notifications: NotificationSettings integrations: any // IntegrationSettings appearance: any // AppearanceSettings } export interface GeneralSettings { organizationName: string timezone: string dateFormat: string language: string currency: string } export interface SecuritySettings { passwordPolicy: any // PasswordPolicy sessionTimeout: number mfaRequired: boolean ipWhitelist: string[] auditRetention: number } export interface NotificationSettings { email: any // EmailNotificationSettings inApp: any // InAppNotificationSettings sms: any // SMSNotificationSettings } // Enums export enum RiskLevel { VERY_LOW = 1, LOW = 2, MEDIUM = 3, HIGH = 4, VERY_HIGH = 5, } export enum RiskStatus { OPEN = "open", IN_PROGRESS = "in_progress", MONITORING = "monitoring", CLOSED = "closed", } export enum RiskCategory { CYBERSECURITY = "cybersecurity", OPERATIONAL = "operational", FINANCIAL = "financial", COMPLIANCE = "compliance", STRATEGIC = "strategic", REPUTATIONAL = "reputational", } export enum IncidentSeverity { LOW = "low", MEDIUM = "medium", HIGH = "high", CRITICAL = "critical", } export enum IncidentStatus { OPEN = "open", INVESTIGATING = "investigating", RESOLVED = "resolved", CLOSED = "closed", } export enum ComplianceStatus { COMPLIANT = "compliant", PARTIAL = "partial", NON_COMPLIANT = "non_compliant", IN_PROGRESS = "in_progress", } export enum PolicyStatus { DRAFT = "draft", UNDER_REVIEW = "under_review", ACTIVE = "active", ARCHIVED = "archived", } export enum NotificationType { INFO = "info", WARNING = "warning", ERROR = "error", SUCCESS = "success", } export enum ReportType { DASHBOARD = "dashboard", DETAILED = "detailed", SUMMARY = "summary", EXECUTIVE = "executive", } export enum AssessmentType { RISK = "risk", COMPLIANCE = "compliance", SECURITY = "security", OPERATIONAL = "operational", } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" import { type RiskLevel, IncidentSeverity, ComplianceStatus } from "@/types" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatDate(date: Date | string): string { const d = new Date(date) return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } export function formatDateTime(date: Date | string): string { const d = new Date(date) return d.toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } export function calculateRiskScore(impact: RiskLevel, likelihood: RiskLevel): number { return impact * likelihood } export function getRiskScoreColor(score: number): string { if (score >= 15) return "text-red-600" if (score >= 10) return "text-orange-600" if (score >= 5) return "text-yellow-600" return "text-green-600" } export function getRiskScoreBadge(score: number): "destructive" | "secondary" | "default" | "outline" { if (score >= 15) return "destructive" if (score >= 10) return "secondary" if (score >= 5) return "default" return "outline" } export function getIncidentSeverityColor(severity: IncidentSeverity): string { switch (severity) { case IncidentSeverity.CRITICAL: return "text-red-600" case IncidentSeverity.HIGH: return "text-orange-600" case IncidentSeverity.MEDIUM: return "text-yellow-600" case IncidentSeverity.LOW: return "text-green-600" default: return "text-gray-600" } } export function getComplianceStatusColor(status: ComplianceStatus): string { switch (status) { case ComplianceStatus.COMPLIANT: return "text-green-600" case ComplianceStatus.PARTIAL: return "text-orange-600" case ComplianceStatus.NON_COMPLIANT: return "text-red-600" case ComplianceStatus.IN_PROGRESS: return "text-blue-600" default: return "text-gray-600" } } export function generateId(prefix: string): string { const timestamp = Date.now().toString(36) const random = Math.random().toString(36).substr(2, 5) return `${prefix}-${timestamp}${random}`.toUpperCase() } export function debounce any>(func: T, wait: number): (...args: Parameters) => void { let timeout: NodeJS.Timeout return (...args: Parameters) => { clearTimeout(timeout) timeout = setTimeout(() => func(...args), wait) } } export function validateEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export function validatePassword(password: string): { isValid: boolean errors: string[] } { const errors: string[] = [] if (password.length < 8) { errors.push("Password must be at least 8 characters long") } if (!/[A-Z]/.test(password)) { errors.push("Password must contain at least one uppercase letter") } if (!/[a-z]/.test(password)) { errors.push("Password must contain at least one lowercase letter") } if (!/\d/.test(password)) { errors.push("Password must contain at least one number") } if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) { errors.push("Password must contain at least one special character") } return { isValid: errors.length === 0, errors, } } export function exportToCSV(data: any[], filename: string): void { if (!data.length) return const headers = Object.keys(data[0]) const csvContent = [ headers.join(","), ...data.map((row) => headers .map((header) => { const value = row[header] return typeof value === "string" && value.includes(",") ? `"${value}"` : value }) .join(","), ), ].join("\n") const blob = new Blob([csvContent], { type: "text/csv" }) const url = window.URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = `${filename}.csv` link.click() window.URL.revokeObjectURL(url) } export function formatFileSize(bytes: number): string { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } [V0_FILE]typescript:file="hooks/use-local-storage.ts" isMerged="true" "use client" import { useState } from "react" export function useLocalStorage(key: string, initialValue: T) { const [storedValue, setStoredValue] = useState(() => { if (typeof window === "undefined") { return initialValue } try { const item = window.localStorage.getItem(key) return item ? JSON.parse(item) : initialValue } catch (error) { console.error(`Error reading localStorage key "${key}":`, error) return initialValue } }) const setValue = (value: T | ((val: T) => T)) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value setStoredValue(valueToStore) if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)) } } catch (error) { console.error(`Error setting localStorage key "${key}":`, error) } } return [storedValue, setValue] as const } [V0_FILE]typescript:file="hooks/use-debounce.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useDebounce(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value) useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value) }, delay) return () => { clearTimeout(handler) } }, [value, delay]) return debouncedValue } [V0_FILE]typescript:file="hooks/use-notifications.ts" isMerged="true" "use client" import { useState, useCallback } from "react" import { type Notification, NotificationType } from "@/types" export function useNotifications() { const [notifications, setNotifications] = useState([]) const addNotification = useCallback( (title: string, message: string, type: NotificationType = NotificationType.INFO, actionUrl?: string) => { const notification: Notification = { id: Math.random().toString(36).substr(2, 9), userId: "current-user", // This would come from auth context title, message, type, read: false, createdAt: new Date(), actionUrl, } setNotifications((prev) => [notification, ...prev]) // Auto-remove after 5 seconds for non-error notifications if (type !== NotificationType.ERROR) { setTimeout(() => { removeNotification(notification.id) }, 5000) } }, [], ) const removeNotification = useCallback((id: string) => { setNotifications((prev) => prev.filter((n) => n.id !== id)) }, []) const markAsRead = useCallback((id: string) => { setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n))) }, []) const clearAll = useCallback(() => { setNotifications([]) }, []) return { notifications, addNotification, removeNotification, markAsRead, clearAll, } } [V0_FILE]typescript:file="app/settings/page.tsx" isMerged="true" "use client" import { MainLayout } from "@/components/layout/main-layout" import { SettingsLayout } from "@/components/settings/settings-layout" import { GeneralSettings } from "@/components/settings/general-settings" export default function SettingsPage() { return ( ) } [V0_FILE]typescript:file="app/settings/security/page.tsx" isMerged="true" "use client" import { MainLayout } from "@/components/layout/main-layout" import { SettingsLayout } from "@/components/settings/settings-layout" import { SecuritySettings } from "@/components/settings/security-settings" export default function SecuritySettingsPage() { return ( ) } [V0_FILE]typescript:file="app/settings/notifications/page.tsx" isMerged="true" "use client" import { MainLayout } from "@/components/layout/main-layout" import { SettingsLayout } from "@/components/settings/settings-layout" import { NotificationSettings } from "@/components/settings/notification-settings" export default function NotificationSettingsPage() { return ( ) } [V0_FILE]typescript:file="app/settings/users/page.tsx" isMerged="true" "use client" import { MainLayout } from "@/components/layout/main-layout" import { SettingsLayout } from "@/components/settings/settings-layout" import { UserManagement } from "@/components/settings/user-management" export default function UserManagementPage() { return ( ) } [V0_FILE]typescript:file="app/settings/integrations/page.tsx" isMerged="true" "use client" import { MainLayout } from "@/components/layout/main-layout" import { SettingsLayout } from "@/components/settings/settings-layout" import { IntegrationSettings } from "@/components/settings/integration-settings" export default function IntegrationSettingsPage() { return ( ) } [V0_FILE]typescript:file="components/settings/settings-layout.tsx" isMerged="true" "use client" import type React from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { Settings, Shield, Bell, Users, Plug, Palette, Database, FileText } from "lucide-react" import Link from "next/link" import { usePathname } from "next/navigation" interface SettingsLayoutProps { children: React.ReactNode } const settingsNavigation = [ { name: "General", href: "/settings", icon: Settings, description: "Organization settings and preferences", }, { name: "Security", href: "/settings/security", icon: Shield, description: "Password policies and security settings", }, { name: "Notifications", href: "/settings/notifications", icon: Bell, description: "Email and notification preferences", }, { name: "User Management", href: "/settings/users", icon: Users, description: "Manage users, roles, and permissions", }, { name: "Integrations", href: "/settings/integrations", icon: Plug, description: "Third-party integrations and APIs", }, { name: "Appearance", href: "/settings/appearance", icon: Palette, description: "Theme and display preferences", }, { name: "Data Management", href: "/settings/data", icon: Database, description: "Data retention and backup settings", }, { name: "Audit & Compliance", href: "/settings/audit", icon: FileText, description: "Audit logging and compliance settings", }, ] export function SettingsLayout({ children }: SettingsLayoutProps) { const pathname = usePathname() return (

{/* Page Header */}

Settings

Manage your organization's GRC platform configuration

{/* Settings Navigation */}

{settingsNavigation.map((item) => { const Icon = item.icon const isActive = pathname === item.href return ( ) })}

{/* Settings Content */}

{children}

) } [V0_FILE]typescript:file="components/settings/general-settings.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" import { useState } from "react" import { Building, Globe, Clock, DollarSign, Save } from "lucide-react" export function GeneralSettings() { const [settings, setSettings] = useState({ organizationName: "QS Corporation", organizationDescription: "Leading technology solutions provider", website: "https://qscorp.com", timezone: "America/New_York", dateFormat: "MM/DD/YYYY", timeFormat: "12h", language: "en", currency: "USD", fiscalYearStart: "January", enableMaintenanceMode: false, allowSelfRegistration: false, requireEmailVerification: true, }) const handleSave = () => { // Save settings logic here console.log("Saving settings:", settings) } return (

{/* Organization Information */} Organization Information Basic information about your organization

Organization Name setSettings((prev) => ({ ...prev, organizationName: e.target.value }))} />

Website setSettings((prev) => ({ ...prev, website: e.target.value }))} />

Description

setSettings((prev) => ({ ...prev, organizationDescription: e.target.value }))}
              rows={3}
            />
          </div>
        </CardContent>
      </Card>

{/* Regional Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Globe className="h-5 w-5 mr-2" />
            Regional Settings
          </CardTitle>
          <CardDescription>Configure timezone, language, and regional preferences</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="timezone">Timezone</Label>
              <Select
                value={settings.timezone}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, timezone: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="America/New_York">Eastern Time (ET)</SelectItem>
                  <SelectItem value="America/Chicago">Central Time (CT)</SelectItem>
                  <SelectItem value="America/Denver">Mountain Time (MT)</SelectItem>
                  <SelectItem value="America/Los_Angeles">Pacific Time (PT)</SelectItem>
                  <SelectItem value="Europe/London">London (GMT)</SelectItem>
                  <SelectItem value="Europe/Paris">Paris (CET)</SelectItem>
                  <SelectItem value="Asia/Tokyo">Tokyo (JST)</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="language">Language</Label>
              <Select
                value={settings.language}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, language: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="en">English</SelectItem>
                  <SelectItem value="es">Spanish</SelectItem>
                  <SelectItem value="fr">French</SelectItem>
                  <SelectItem value="de">German</SelectItem>
                  <SelectItem value="ja">Japanese</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="dateFormat">Date Format</Label>
              <Select
                value={settings.dateFormat}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, dateFormat: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
                  <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
                  <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="timeFormat">Time Format</Label>
              <Select
                value={settings.timeFormat}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, timeFormat: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="12h">12 Hour</SelectItem>
                  <SelectItem value="24h">24 Hour</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Financial Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <DollarSign className="h-5 w-5 mr-2" />
            Financial Settings
          </CardTitle>
          <CardDescription>Configure currency and fiscal year settings</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="currency">Currency</Label>
              <Select
                value={settings.currency}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, currency: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="USD">USD - US Dollar</SelectItem>
                  <SelectItem value="EUR">EUR - Euro</SelectItem>
                  <SelectItem value="GBP">GBP - British Pound</SelectItem>
                  <SelectItem value="JPY">JPY - Japanese Yen</SelectItem>
                  <SelectItem value="CAD">CAD - Canadian Dollar</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="fiscalYear">Fiscal Year Start</Label>
              <Select
                value={settings.fiscalYearStart}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, fiscalYearStart: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="January">January</SelectItem>
                  <SelectItem value="April">April</SelectItem>
                  <SelectItem value="July">July</SelectItem>
                  <SelectItem value="October">October</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* System Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Clock className="h-5 w-5 mr-2" />
            System Settings
          </CardTitle>
          <CardDescription>Configure system-wide settings and preferences</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Maintenance Mode</Label>
              <p className="text-sm text-slate-500">Enable maintenance mode to prevent user access during updates</p>
            </div>
            <Switch
              checked={settings.enableMaintenanceMode}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, enableMaintenanceMode: checked }))}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Allow Self Registration</Label>
              <p className="text-sm text-slate-500">Allow users to register for accounts without admin approval</p>
            </div>
            <Switch
              checked={settings.allowSelfRegistration}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, allowSelfRegistration: checked }))}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Require Email Verification</Label>
              <p className="text-sm text-slate-500">
                Require users to verify their email address before accessing the system
              </p>
            </div>
            <Switch
              checked={settings.requireEmailVerification}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, requireEmailVerification: checked }))}
            />
          </div>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Changes
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/settings/security-settings.tsx" isMerged="true"
"use client"

export function SecuritySettings() {
  const [settings, setSettings] = useState({
    passwordMinLength: 8,
    passwordRequireUppercase: true,
    passwordRequireLowercase: true,
    passwordRequireNumbers: true,
    passwordRequireSpecialChars: true,
    passwordExpiryDays: 90,
    sessionTimeoutMinutes: 30,
    maxLoginAttempts: 5,
    lockoutDurationMinutes: 15,
    mfaRequired: true,
    mfaGracePeriodDays: 7,
    auditLogRetentionDays: 365,
    enableIpWhitelist: false,
    ipWhitelist: ["192.168.1.0/24"],
    enableSso: false,
    ssoProvider: "saml",
    enableApiRateLimit: true,
    apiRateLimitPerMinute: 100,
  })

const [newIpRange, setNewIpRange] = useState("")

const handleSave = () => {
    console.log("Saving security settings:", settings)
  }

const addIpRange = () => {
    if (newIpRange && !settings.ipWhitelist.includes(newIpRange)) {
      setSettings((prev) => ({
        ...prev,
        ipWhitelist: [...prev.ipWhitelist, newIpRange],
      }))
      setNewIpRange("")
    }
  }

const removeIpRange = (ip: string) => {
    setSettings((prev) => ({
      ...prev,
      ipWhitelist: prev.ipWhitelist.filter((range) => range !== ip),
    }))
  }

return (
    <div className="space-y-6">
      {/* Password Policy */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Key className="h-5 w-5 mr-2" />
            Password Policy
          </CardTitle>
          <CardDescription>Configure password requirements and security policies</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="minLength">Minimum Length</Label>
              <Input
                id="minLength"
                type="number"
                min="6"
                max="32"
                value={settings.passwordMinLength}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, passwordMinLength: Number.parseInt(e.target.value) }))
                }
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="expiry">Password Expiry (days)</Label>
              <Input
                id="expiry"
                type="number"
                min="0"
                value={settings.passwordExpiryDays}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, passwordExpiryDays: Number.parseInt(e.target.value) }))
                }
              />
            </div>
          </div>

<div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Require Uppercase Letters</Label>
                <p className="text-sm text-slate-500">Password must contain at least one uppercase letter</p>
              </div>
              <Switch
                checked={settings.passwordRequireUppercase}
                onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, passwordRequireUppercase: checked }))}
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Require Lowercase Letters</Label>
                <p className="text-sm text-slate-500">Password must contain at least one lowercase letter</p>
              </div>
              <Switch
                checked={settings.passwordRequireLowercase}
                onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, passwordRequireLowercase: checked }))}
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Require Numbers</Label>
                <p className="text-sm text-slate-500">Password must contain at least one number</p>
              </div>
              <Switch
                checked={settings.passwordRequireNumbers}
                onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, passwordRequireNumbers: checked }))}
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Require Special Characters</Label>
                <p className="text-sm text-slate-500">Password must contain at least one special character</p>
              </div>
              <Switch
                checked={settings.passwordRequireSpecialChars}
                onCheckedChange={(checked) =>
                  setSettings((prev) => ({ ...prev, passwordRequireSpecialChars: checked }))
                }
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Session Management */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Clock className="h-5 w-5 mr-2" />
            Session Management
          </CardTitle>
          <CardDescription>Configure session timeout and login security</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label htmlFor="sessionTimeout">Session Timeout (minutes)</Label>
              <Input
                id="sessionTimeout"
                type="number"
                min="5"
                max="480"
                value={settings.sessionTimeoutMinutes}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, sessionTimeoutMinutes: Number.parseInt(e.target.value) }))
                }
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="maxAttempts">Max Login Attempts</Label>
              <Input
                id="maxAttempts"
                type="number"
                min="3"
                max="10"
                value={settings.maxLoginAttempts}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, maxLoginAttempts: Number.parseInt(e.target.value) }))
                }
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="lockoutDuration">Lockout Duration (minutes)</Label>
              <Input
                id="lockoutDuration"
                type="number"
                min="5"
                max="60"
                value={settings.lockoutDurationMinutes}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, lockoutDurationMinutes: Number.parseInt(e.target.value) }))
                }
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Multi-Factor Authentication */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Shield className="h-5 w-5 mr-2" />
            Multi-Factor Authentication
          </CardTitle>
          <CardDescription>Configure MFA requirements and settings</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Require MFA for All Users</Label>
              <p className="text-sm text-slate-500">All users must enable multi-factor authentication</p>
            </div>
            <Switch
              checked={settings.mfaRequired}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, mfaRequired: checked }))}
            />
          </div>

{settings.mfaRequired && (
            <>
              <Separator />
              <div className="space-y-2">
                <Label htmlFor="gracePeriod">Grace Period (days)</Label>
                <Input
                  id="gracePeriod"
                  type="number"
                  min="0"
                  max="30"
                  value={settings.mfaGracePeriodDays}
                  onChange={(e) =>
                    setSettings((prev) => ({ ...prev, mfaGracePeriodDays: Number.parseInt(e.target.value) }))
                  }
                />
                <p className="text-sm text-slate-500">Number of days users have to set up MFA after account creation</p>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* IP Whitelist */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <AlertTriangle className="h-5 w-5 mr-2" />
            IP Access Control
          </CardTitle>
          <CardDescription>Restrict access to specific IP addresses or ranges</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable IP Whitelist</Label>
              <p className="text-sm text-slate-500">Only allow access from whitelisted IP addresses</p>
            </div>
            <Switch
              checked={settings.enableIpWhitelist}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, enableIpWhitelist: checked }))}
            />
          </div>

{settings.enableIpWhitelist && (
            <>
              <Separator />
              <div className="space-y-4">
                <div className="flex space-x-2">
                  <Input
                    placeholder="Enter IP address or range (e.g., 192.168.1.0/24)"
                    value={newIpRange}
                    onChange={(e) => setNewIpRange(e.target.value)}
                  />
                  <Button onClick={addIpRange} variant="outline">
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>

<div className="space-y-2">
                  <Label>Whitelisted IP Ranges</Label>
                  <div className="flex flex-wrap gap-2">
                    {settings.ipWhitelist.map((ip, index) => (
                      <Badge key={index} variant="secondary" className="flex items-center gap-1">
                        {ip}
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-4 w-4 p-0 hover:bg-transparent"
                          onClick={() => removeIpRange(ip)}
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* Audit Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Audit & Logging</CardTitle>
          <CardDescription>Configure audit logging and data retention</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="auditRetention">Audit Log Retention (days)</Label>
            <Input
              id="auditRetention"
              type="number"
              min="30"
              max="2555"
              value={settings.auditLogRetentionDays}
              onChange={(e) =>
                setSettings((prev) => ({ ...prev, auditLogRetentionDays: Number.parseInt(e.target.value) }))
              }
            />
            <p className="text-sm text-slate-500">How long to keep audit logs before automatic deletion</p>
          </div>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Security Settings
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/settings/user-management.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useState } from "react"
import { Users, Plus, Edit, Trash2, Shield, Search } from "lucide-react"

interface User {
  id: string
  name: string
  email: string
  role: string
  department: string
  status: "active" | "inactive" | "pending"
  lastLogin: string
  createdAt: string
}

interface Role {
  id: string
  name: string
  description: string
  permissions: string[]
  userCount: number
}

const mockUsers: User[] = [
  {
    id: "1",
    name: "John Smith",
    email: "john.smith@company.com",
    role: "Risk Manager",
    department: "Risk Management",
    status: "active",
    lastLogin: "2024-01-22",
    createdAt: "2023-06-15",
  },
  {
    id: "2",
    name: "Sarah Johnson",
    email: "sarah.johnson@company.com",
    role: "Compliance Officer",
    department: "Compliance",
    status: "active",
    lastLogin: "2024-01-21",
    createdAt: "2023-07-20",
  },
  {
    id: "3",
    name: "Mike Davis",
    email: "mike.davis@company.com",
    role: "Auditor",
    department: "Internal Audit",
    status: "inactive",
    lastLogin: "2024-01-15",
    createdAt: "2023-08-10",
  },
]

const mockRoles: Role[] = [
  {
    id: "1",
    name: "Risk Manager",
    description: "Full access to risk management features",
    permissions: ["risk.create", "risk.read", "risk.update", "risk.delete"],
    userCount: 5,
  },
  {
    id: "2",
    name: "Compliance Officer",
    description: "Manage compliance frameworks and assessments",
    permissions: ["compliance.create", "compliance.read", "compliance.update"],
    userCount: 3,
  },
  {
    id: "3",
    name: "Auditor",
    description: "Read-only access for audit purposes",
    permissions: ["*.read"],
    userCount: 2,
  },
]

export function UserManagement() {
  const [users, setUsers] = useState<User[]>(mockUsers)
  const [roles, setRoles] = useState<Role[]>(mockRoles)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedRole, setSelectedRole] = useState<string>("all")
  const [isAddUserOpen, setIsAddUserOpen] = useState(false)
  const [isAddRoleOpen, setIsAddRoleOpen] = useState(false)

const [newUser, setNewUser] = useState({
    name: "",
    email: "",
    role: "",
    department: "",
  })

const [newRole, setNewRole] = useState({
    name: "",
    description: "",
    permissions: [] as string[],
  })

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesRole = selectedRole === "all" || user.role === selectedRole
    return matchesSearch && matchesRole
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge variant="default">Active</Badge>
      case "inactive":
        return <Badge variant="secondary">Inactive</Badge>
      case "pending":
        return <Badge variant="outline">Pending</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const handleAddUser = () => {
    const user: User = {
      id: Date.now().toString(),
      ...newUser,
      status: "pending",
      lastLogin: "Never",
      createdAt: new Date().toISOString().split("T")[0],
    }
    setUsers((prev) => [...prev, user])
    setNewUser({ name: "", email: "", role: "", department: "" })
    setIsAddUserOpen(false)
  }

const handleAddRole = () => {
    const role: Role = {
      id: Date.now().toString(),
      ...newRole,
      userCount: 0,
    }
    setRoles((prev) => [...prev, role])
    setNewRole({ name: "", description: "", permissions: [] })
    setIsAddRoleOpen(false)
  }

return (
    <div className="space-y-6">
      <Tabs defaultValue="users" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="users">Users</TabsTrigger>
          <TabsTrigger value="roles">Roles & Permissions</TabsTrigger>
        </TabsList>

<TabsContent value="users" className="space-y-6">
          {/* Users Header */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Users className="h-5 w-5 mr-2" />
                    User Management
                  </CardTitle>
                  <CardDescription>Manage user accounts, roles, and permissions</CardDescription>
                </div>
                <Dialog open={isAddUserOpen} onOpenChange={setIsAddUserOpen}>
                  <DialogTrigger asChild>
                    <Button className="bg-blue-600 hover:bg-blue-700">
                      <Plus className="h-4 w-4 mr-2" />
                      Add User
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Add New User</DialogTitle>
                      <DialogDescription>
                        Create a new user account with appropriate role and permissions.
                      </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="userName">Full Name</Label>
                        <Input
                          id="userName"
                          value={newUser.name}
                          onChange={(e) => setNewUser((prev) => ({ ...prev, name: e.target.value }))}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="userEmail">Email Address</Label>
                        <Input
                          id="userEmail"
                          type="email"
                          value={newUser.email}
                          onChange={(e) => setNewUser((prev) => ({ ...prev, email: e.target.value }))}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="userRole">Role</Label>
                        <Select
                          value={newUser.role}
                          onValueChange={(value) => setNewUser((prev) => ({ ...prev, role: value }))}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select a role" />
                          </SelectTrigger>
                          <SelectContent>
                            {roles.map((role) => (
                              <SelectItem key={role.id} value={role.name}>
                                {role.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="userDepartment">Department</Label>
                        <Input
                          id="userDepartment"
                          value={newUser.department}
                          onChange={(e) => setNewUser((prev) => ({ ...prev, department: e.target.value }))}
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsAddUserOpen(false)}>
                        Cancel
                      </Button>
                      <Button onClick={handleAddUser}>Add User</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </CardHeader>
            <CardContent>
              {/* Search and Filters */}
              <div className="flex flex-col md:flex-row gap-4 mb-6">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                    <Input
                      placeholder="Search users by name or email..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Select value={selectedRole} onValueChange={setSelectedRole}>
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="Filter by role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Roles</SelectItem>
                    {roles.map((role) => (
                      <SelectItem key={role.id} value={role.name}>
                        {role.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

{/* Users Table */}
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Department</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Last Login</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUsers.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell className="font-medium">{user.name}</TableCell>
                      <TableCell>{user.email}</TableCell>
                      <TableCell>{user.role}</TableCell>
                      <TableCell>{user.department}</TableCell>
                      <TableCell>{getStatusBadge(user.status)}</TableCell>
                      <TableCell>{user.lastLogin}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="roles" className="space-y-6">
          {/* Roles Header */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Shield className="h-5 w-5 mr-2" />
                    Roles & Permissions
                  </CardTitle>
                  <CardDescription>Manage user roles and their associated permissions</CardDescription>
                </div>
                <Dialog open={isAddRoleOpen} onOpenChange={setIsAddRoleOpen}>
                  <DialogTrigger asChild>
                    <Button className="bg-blue-600 hover:bg-blue-700">
                      <Plus className="h-4 w-4 mr-2" />
                      Add Role
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Add New Role</DialogTitle>
                      <DialogDescription>Create a new role with specific permissions.</DialogDescription>
                    </DialogHeader>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="roleName">Role Name</Label>
                        <Input
                          id="roleName"
                          value={newRole.name}
                          onChange={(e) => setNewRole((prev) => ({ ...prev, name: e.target.value }))}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="roleDescription">Description</Label>
                        <Input
                          id="roleDescription"
                          value={newRole.description}
                          onChange={(e) => setNewRole((prev) => ({ ...prev, description: e.target.value }))}
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsAddRoleOpen(false)}>
                        Cancel
                      </Button>
                      <Button onClick={handleAddRole}>Add Role</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {roles.map((role) => (
                  <Card key={role.id} className="border-2 hover:border-blue-200 transition-colors">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">{role.name}</CardTitle>
                        <Badge variant="outline">{role.userCount} users</Badge>
                      </div>
                      <CardDescription>{role.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <Label className="text-sm font-medium">Permissions:</Label>
                        <div className="flex flex-wrap gap-1">
                          {role.permissions.map((permission, index) => (
                            <Badge key={index} variant="secondary" className="text-xs">
                              {permission}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <div className="flex space-x-2 mt-4">
                        <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="components/settings/notification-settings.tsx" isMerged="true"
"use client"

export function NotificationSettings() {
  const [settings, setSettings] = useState({
    // Email Notifications
    emailEnabled: true,
    emailRiskAlerts: true,
    emailComplianceUpdates: true,
    emailIncidentReports: true,
    emailPolicyChanges: true,
    emailWeeklyDigest: true,
    emailFrequency: "immediate",

// In-App Notifications
    inAppEnabled: true,
    inAppRiskAlerts: true,
    inAppComplianceUpdates: true,
    inAppIncidentReports: true,
    inAppPolicyChanges: true,
    inAppTaskReminders: true,

// SMS Notifications
    smsEnabled: false,
    smsCriticalAlerts: false,
    smsIncidentReports: false,
    smsPhone: "",

// Slack Integration
    slackEnabled: false,
    slackWebhookUrl: "",
    slackChannel: "#grc-alerts",
    slackCriticalOnly: true,

// Teams Integration
    teamsEnabled: false,
    teamsWebhookUrl: "",
    teamsCriticalOnly: true,
  })

const handleSave = () => {
    console.log("Saving notification settings:", settings)
  }

return (
    <div className="space-y-6">
      {/* Email Notifications */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Mail className="h-5 w-5 mr-2" />
            Email Notifications
          </CardTitle>
          <CardDescription>Configure email notification preferences and frequency</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable Email Notifications</Label>
              <p className="text-sm text-slate-500">Receive notifications via email</p>
            </div>
            <Switch
              checked={settings.emailEnabled}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, emailEnabled: checked }))}
            />
          </div>

{settings.emailEnabled && (
            <>
              <Separator />

<div className="space-y-4">
                <div className="space-y-2">
                  <Label>Email Frequency</Label>
                  <Select
                    value={settings.emailFrequency}
                    onValueChange={(value) => setSettings((prev) => ({ ...prev, emailFrequency: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="immediate">Immediate</SelectItem>
                      <SelectItem value="hourly">Hourly Digest</SelectItem>
                      <SelectItem value="daily">Daily Digest</SelectItem>
                      <SelectItem value="weekly">Weekly Digest</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Risk Alerts</Label>
                      <p className="text-sm text-slate-500">High and critical risk notifications</p>
                    </div>
                    <Switch
                      checked={settings.emailRiskAlerts}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, emailRiskAlerts: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Compliance Updates</Label>
                      <p className="text-sm text-slate-500">Compliance framework and assessment updates</p>
                    </div>
                    <Switch
                      checked={settings.emailComplianceUpdates}
                      onCheckedChange={(checked) =>
                        setSettings((prev) => ({ ...prev, emailComplianceUpdates: checked }))
                      }
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Incident Reports</Label>
                      <p className="text-sm text-slate-500">New incidents and status updates</p>
                    </div>
                    <Switch
                      checked={settings.emailIncidentReports}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, emailIncidentReports: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Policy Changes</Label>
                      <p className="text-sm text-slate-500">Policy updates and approval requests</p>
                    </div>
                    <Switch
                      checked={settings.emailPolicyChanges}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, emailPolicyChanges: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Weekly Digest</Label>
                      <p className="text-sm text-slate-500">Weekly summary of GRC activities</p>
                    </div>
                    <Switch
                      checked={settings.emailWeeklyDigest}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, emailWeeklyDigest: checked }))}
                    />
                  </div>
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* In-App Notifications */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Bell className="h-5 w-5 mr-2" />
            In-App Notifications
          </CardTitle>
          <CardDescription>Configure browser and desktop notification preferences</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable In-App Notifications</Label>
              <p className="text-sm text-slate-500">Show notifications within the application</p>
            </div>
            <Switch
              checked={settings.inAppEnabled}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppEnabled: checked }))}
            />
          </div>

{settings.inAppEnabled && (
            <>
              <Separator />

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Risk Alerts</Label>
                    <p className="text-sm text-slate-500">High and critical risk notifications</p>
                  </div>
                  <Switch
                    checked={settings.inAppRiskAlerts}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppRiskAlerts: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Compliance Updates</Label>
                    <p className="text-sm text-slate-500">Compliance framework and assessment updates</p>
                  </div>
                  <Switch
                    checked={settings.inAppComplianceUpdates}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppComplianceUpdates: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Incident Reports</Label>
                    <p className="text-sm text-slate-500">New incidents and status updates</p>
                  </div>
                  <Switch
                    checked={settings.inAppIncidentReports}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppIncidentReports: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Policy Changes</Label>
                    <p className="text-sm text-slate-500">Policy updates and approval requests</p>
                  </div>
                  <Switch
                    checked={settings.inAppPolicyChanges}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppPolicyChanges: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Task Reminders</Label>
                    <p className="text-sm text-slate-500">Reminders for assigned tasks and due dates</p>
                  </div>
                  <Switch
                    checked={settings.inAppTaskReminders}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, inAppTaskReminders: checked }))}
                  />
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* SMS Notifications */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Smartphone className="h-5 w-5 mr-2" />
            SMS Notifications
          </CardTitle>
          <CardDescription>Configure SMS notifications for critical alerts</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable SMS Notifications</Label>
              <p className="text-sm text-slate-500">Receive critical alerts via SMS</p>
            </div>
            <Switch
              checked={settings.smsEnabled}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, smsEnabled: checked }))}
            />
          </div>

{settings.smsEnabled && (
            <>
              <Separator />

<div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="smsPhone">Phone Number</Label>
                  <Input
                    id="smsPhone"
                    type="tel"
                    placeholder="+1 (555) 123-4567"
                    value={settings.smsPhone}
                    onChange={(e) => setSettings((prev) => ({ ...prev, smsPhone: e.target.value }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Critical Risk Alerts</Label>
                    <p className="text-sm text-slate-500">Only critical and high-priority risks</p>
                  </div>
                  <Switch
                    checked={settings.smsCriticalAlerts}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, smsCriticalAlerts: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Critical Incident Reports</Label>
                    <p className="text-sm text-slate-500">High-severity incident notifications</p>
                  </div>
                  <Switch
                    checked={settings.smsIncidentReports}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, smsIncidentReports: checked }))}
                  />
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* Slack Integration */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <MessageSquare className="h-5 w-5 mr-2" />
            Slack Integration
          </CardTitle>
          <CardDescription>Send notifications to Slack channels</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable Slack Notifications</Label>
              <p className="text-sm text-slate-500">Send notifications to Slack workspace</p>
            </div>
            <Switch
              checked={settings.slackEnabled}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, slackEnabled: checked }))}
            />
          </div>

{settings.slackEnabled && (
            <>
              <Separator />

<div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="slackWebhook">Webhook URL</Label>
                  <Input
                    id="slackWebhook"
                    type="url"
                    placeholder="https://hooks.slack.com/services/..."
                    value={settings.slackWebhookUrl}
                    onChange={(e) => setSettings((prev) => ({ ...prev, slackWebhookUrl: e.target.value }))}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="slackChannel">Channel</Label>
                  <Input
                    id="slackChannel"
                    placeholder="#grc-alerts"
                    value={settings.slackChannel}
                    onChange={(e) => setSettings((prev) => ({ ...prev, slackChannel: e.target.value }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Critical Alerts Only</Label>
                    <p className="text-sm text-slate-500">Only send high-priority notifications</p>
                  </div>
                  <Switch
                    checked={settings.slackCriticalOnly}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, slackCriticalOnly: checked }))}
                  />
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Notification Settings
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/settings/integration-settings.tsx" isMerged="true"
"use client"

export function IntegrationSettings() {
  const [integrations, setIntegrations] = useState({
    // Database Integrations
    postgresql: {
      enabled: false,
      host: "",
      port: "5432",
      database: "",
      username: "",
      password: "",
      ssl: true,
    },

// Email Service
    smtp: {
      enabled: true,
      host: "smtp.company.com",
      port: "587",
      username: "grc@company.com",
      password: "",
      encryption: "tls",
    },

// Single Sign-On
    sso: {
      enabled: false,
      provider: "saml",
      entityId: "",
      ssoUrl: "",
      certificate: "",
    },

// API Integrations
    api: {
      enabled: true,
      rateLimit: 1000,
      keyExpiry: 90,
      webhookSecret: "",
    },

// Cloud Storage
    s3: {
      enabled: false,
      bucket: "",
      region: "us-east-1",
      accessKey: "",
      secretKey: "",
    },

// Monitoring
    monitoring: {
      enabled: false,
      endpoint: "",
      apiKey: "",
    },
  })

const handleSave = () => {
    console.log("Saving integration settings:", integrations)
  }

const testConnection = (integration: string) => {
    console.log(`Testing connection for ${integration}`)
    // Test connection logic here
  }

return (
    <div className="space-y-6">
      <Tabs defaultValue="database" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="database">Database</TabsTrigger>
          <TabsTrigger value="authentication">Authentication</TabsTrigger>
          <TabsTrigger value="communication">Communication</TabsTrigger>
          <TabsTrigger value="storage">Storage & APIs</TabsTrigger>
        </TabsList>

<TabsContent value="database" className="space-y-6">
          {/* PostgreSQL Integration */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Database className="h-5 w-5 mr-2" />
                    PostgreSQL Database
                  </CardTitle>
                  <CardDescription>Connect to external PostgreSQL database for data storage</CardDescription>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant={integrations.postgresql.enabled ? "default" : "secondary"}>
                    {integrations.postgresql.enabled ? "Connected" : "Disconnected"}
                  </Badge>
                  <Switch
                    checked={integrations.postgresql.enabled}
                    onCheckedChange={(checked) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        postgresql: { ...prev.postgresql, enabled: checked },
                      }))
                    }
                  />
                </div>
              </div>
            </CardHeader>
            {integrations.postgresql.enabled && (
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="pgHost">Host</Label>
                    <Input
                      id="pgHost"
                      value={integrations.postgresql.host}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, host: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pgPort">Port</Label>
                    <Input
                      id="pgPort"
                      value={integrations.postgresql.port}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, port: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pgDatabase">Database</Label>
                    <Input
                      id="pgDatabase"
                      value={integrations.postgresql.database}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, database: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pgUsername">Username</Label>
                    <Input
                      id="pgUsername"
                      value={integrations.postgresql.username}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, username: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pgPassword">Password</Label>
                    <Input
                      id="pgPassword"
                      type="password"
                      value={integrations.postgresql.password}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, password: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch
                      checked={integrations.postgresql.ssl}
                      onCheckedChange={(checked) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          postgresql: { ...prev.postgresql, ssl: checked },
                        }))
                      }
                    />
                    <Label>Enable SSL</Label>
                  </div>
                </div>
                <div className="flex space-x-2">
                  <Button variant="outline" onClick={() => testConnection("postgresql")}>
                    Test Connection
                  </Button>
                </div>
              </CardContent>
            )}
          </Card>
        </TabsContent>

<TabsContent value="authentication" className="space-y-6">
          {/* Single Sign-On */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Shield className="h-5 w-5 mr-2" />
                    Single Sign-On (SSO)
                  </CardTitle>
                  <CardDescription>Configure SAML or OAuth SSO integration</CardDescription>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant={integrations.sso.enabled ? "default" : "secondary"}>
                    {integrations.sso.enabled ? "Enabled" : "Disabled"}
                  </Badge>
                  <Switch
                    checked={integrations.sso.enabled}
                    onCheckedChange={(checked) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        sso: { ...prev.sso, enabled: checked },
                      }))
                    }
                  />
                </div>
              </div>
            </CardHeader>
            {integrations.sso.enabled && (
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="ssoEntityId">Entity ID</Label>
                  <Input
                    id="ssoEntityId"
                    value={integrations.sso.entityId}
                    onChange={(e) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        sso: { ...prev.sso, entityId: e.target.value },
                      }))
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ssoUrl">SSO URL</Label>
                  <Input
                    id="ssoUrl"
                    type="url"
                    value={integrations.sso.ssoUrl}
                    onChange={(e) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        sso: { ...prev.sso, ssoUrl: e.target.value },
                      }))
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ssoCertificate">X.509 Certificate</Label>
                  <Input
                    id="ssoCertificate"
                    value={integrations.sso.certificate}
                    onChange={(e) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        sso: { ...prev.sso, certificate: e.target.value },
                      }))
                    }
                  />
                </div>
              </CardContent>
            )}
          </Card>
        </TabsContent>

<TabsContent value="communication" className="space-y-6">
          {/* SMTP Email */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Mail className="h-5 w-5 mr-2" />
                    SMTP Email Service
                  </CardTitle>
                  <CardDescription>Configure email server for notifications and reports</CardDescription>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant={integrations.smtp.enabled ? "default" : "secondary"}>
                    {integrations.smtp.enabled ? "Connected" : "Disconnected"}
                  </Badge>
                  <Switch
                    checked={integrations.smtp.enabled}
                    onCheckedChange={(checked) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        smtp: { ...prev.smtp, enabled: checked },
                      }))
                    }
                  />
                </div>
              </div>
            </CardHeader>
            {integrations.smtp.enabled && (
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="smtpHost">SMTP Host</Label>
                    <Input
                      id="smtpHost"
                      value={integrations.smtp.host}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          smtp: { ...prev.smtp, host: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtpPort">Port</Label>
                    <Input
                      id="smtpPort"
                      value={integrations.smtp.port}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          smtp: { ...prev.smtp, port: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtpUsername">Username</Label>
                    <Input
                      id="smtpUsername"
                      value={integrations.smtp.username}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          smtp: { ...prev.smtp, username: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtpPassword">Password</Label>
                    <Input
                      id="smtpPassword"
                      type="password"
                      value={integrations.smtp.password}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          smtp: { ...prev.smtp, password: e.target.value },
                        }))
                      }
                    />
                  </div>
                </div>
                <Button variant="outline" onClick={() => testConnection("smtp")}>
                  Send Test Email
                </Button>
              </CardContent>
            )}
          </Card>
        </TabsContent>

<TabsContent value="storage" className="space-y-6">
          {/* API Configuration */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Key className="h-5 w-5 mr-2" />
                    API Configuration
                  </CardTitle>
                  <CardDescription>Configure API access and rate limiting</CardDescription>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant={integrations.api.enabled ? "default" : "secondary"}>
                    {integrations.api.enabled ? "Enabled" : "Disabled"}
                  </Badge>
                  <Switch
                    checked={integrations.api.enabled}
                    onCheckedChange={(checked) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        api: { ...prev.api, enabled: checked },
                      }))
                    }
                  />
                </div>
              </div>
            </CardHeader>
            {integrations.api.enabled && (
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="apiRateLimit">Rate Limit (requests/hour)</Label>
                    <Input
                      id="apiRateLimit"
                      type="number"
                      value={integrations.api.rateLimit}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          api: { ...prev.api, rateLimit: Number.parseInt(e.target.value) },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="apiKeyExpiry">API Key Expiry (days)</Label>
                    <Input
                      id="apiKeyExpiry"
                      type="number"
                      value={integrations.api.keyExpiry}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          api: { ...prev.api, keyExpiry: Number.parseInt(e.target.value) },
                        }))
                      }
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="webhookSecret">Webhook Secret</Label>
                  <Input
                    id="webhookSecret"
                    type="password"
                    value={integrations.api.webhookSecret}
                    onChange={(e) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        api: { ...prev.api, webhookSecret: e.target.value },
                      }))
                    }
                  />
                </div>
              </CardContent>
            )}
          </Card>

{/* AWS S3 Storage */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center">
                    <Cloud className="h-5 w-5 mr-2" />
                    AWS S3 Storage
                  </CardTitle>
                  <CardDescription>Configure S3 bucket for document and file storage</CardDescription>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant={integrations.s3.enabled ? "default" : "secondary"}>
                    {integrations.s3.enabled ? "Connected" : "Disconnected"}
                  </Badge>
                  <Switch
                    checked={integrations.s3.enabled}
                    onCheckedChange={(checked) =>
                      setIntegrations((prev) => ({
                        ...prev,
                        s3: { ...prev.s3, enabled: checked },
                      }))
                    }
                  />
                </div>
              </div>
            </CardHeader>
            {integrations.s3.enabled && (
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="s3Bucket">Bucket Name</Label>
                    <Input
                      id="s3Bucket"
                      value={integrations.s3.bucket}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          s3: { ...prev.s3, bucket: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="s3Region">Region</Label>
                    <Input
                      id="s3Region"
                      value={integrations.s3.region}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          s3: { ...prev.s3, region: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="s3AccessKey">Access Key ID</Label>
                    <Input
                      id="s3AccessKey"
                      value={integrations.s3.accessKey}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          s3: { ...prev.s3, accessKey: e.target.value },
                        }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="s3SecretKey">Secret Access Key</Label>
                    <Input
                      id="s3SecretKey"
                      type="password"
                      value={integrations.s3.secretKey}
                      onChange={(e) =>
                        setIntegrations((prev) => ({
                          ...prev,
                          s3: { ...prev.s3, secretKey: e.target.value },
                        }))
                      }
                    />
                  </div>
                </div>
                <Button variant="outline" onClick={() => testConnection("s3")}>
                  Test S3 Connection
                </Button>
              </CardContent>
            )}
          </Card>
        </TabsContent>
      </Tabs>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Integration Settings
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/forms/risk-assessment-form.tsx" isMerged="true"
"use client"

import type React from "react"

interface RiskAssessmentFormProps {
  onSubmit: (data: any) => void
  onCancel: () => void
  initialData?: any
}

export function RiskAssessmentForm({ onSubmit, onCancel, initialData }: RiskAssessmentFormProps) {
  const [formData, setFormData] = useState({
    title: initialData?.title || "",
    description: initialData?.description || "",
    category: initialData?.category || "",
    department: initialData?.department || "",
    owner: initialData?.owner || "",
    impact: initialData?.impact || "",
    likelihood: initialData?.likelihood || "",
    dueDate: initialData?.dueDate || null,
    mitigationPlan: initialData?.mitigationPlan || "",
    controls: initialData?.controls || [],
    tags: initialData?.tags || [],
    attachments: initialData?.attachments || [],
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.title.trim()) {
      newErrors.title = "Risk title is required"
    }

if (!formData.description.trim()) {
      newErrors.description = "Risk description is required"
    }

if (!formData.category) {
      newErrors.category = "Risk category is required"
    }

if (!formData.impact) {
      newErrors.impact = "Impact level is required"
    }

if (!formData.likelihood) {
      newErrors.likelihood = "Likelihood level is required"
    }

if (!formData.owner.trim()) {
      newErrors.owner = "Risk owner is required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (validateForm()) {
      const riskScore = Number.parseInt(formData.impact) * Number.parseInt(formData.likelihood)
      onSubmit({
        ...formData,
        riskScore,
        status: "open",
        createdAt: new Date(),
        updatedAt: new Date(),
      })
    }
  }

const riskCategories = [
    { value: RiskCategory.CYBERSECURITY, label: "Cybersecurity" },
    { value: RiskCategory.OPERATIONAL, label: "Operational" },
    { value: RiskCategory.FINANCIAL, label: "Financial" },
    { value: RiskCategory.COMPLIANCE, label: "Compliance" },
    { value: RiskCategory.STRATEGIC, label: "Strategic" },
    { value: RiskCategory.REPUTATIONAL, label: "Reputational" },
  ]

const riskLevels = [
    { value: "1", label: "Very Low" },
    { value: "2", label: "Low" },
    { value: "3", label: "Medium" },
    { value: "4", label: "High" },
    { value: "5", label: "Very High" },
  ]

return (
    <Card className="max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center">
          <AlertTriangle className="h-5 w-5 mr-2" />
          Risk Assessment Form
        </CardTitle>
        <CardDescription>
          Create a comprehensive risk assessment with impact analysis and mitigation planning
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Basic Information</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="title">Risk Title *</Label>
                <Input
                  id="title"
                  value={formData.title}
                  onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                  className={errors.title ? "border-red-500" : ""}
                />
                {errors.title && <p className="text-sm text-red-500">{errors.title}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Risk Category *</Label>
                <Select
                  value={formData.category}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, category: value }))}
                >
                  <SelectTrigger className={errors.category ? "border-red-500" : ""}>
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    {riskCategories.map((category) => (
                      <SelectItem key={category.value} value={category.value}>
                        {category.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.category && <p className="text-sm text-red-500">{errors.category}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="department">Department</Label>
                <Input
                  id="department"
                  value={formData.department}
                  onChange={(e) => setFormData((prev) => ({ ...prev, department: e.target.value }))}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="owner">Risk Owner *</Label>
                <Input
                  id="owner"
                  value={formData.owner}
                  onChange={(e) => setFormData((prev) => ({ ...prev, owner: e.target.value }))}
                  className={errors.owner ? "border-red-500" : ""}
                />
                {errors.owner && <p className="text-sm text-red-500">{errors.owner}</p>}
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Risk Description *</Label>
              <Textarea
                id="description"
                rows={4}
                value={formData.description}
                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                className={errors.description ? "border-red-500" : ""}
                placeholder="Provide a detailed description of the risk, including potential causes and scenarios..."
              />
              {errors.description && <p className="text-sm text-red-500">{errors.description}</p>}
            </div>
          </div>

{/* Risk Assessment */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Risk Assessment</h3>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="impact">Impact Level *</Label>
                <Select
                  value={formData.impact}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, impact: value }))}
                >
                  <SelectTrigger className={errors.impact ? "border-red-500" : ""}>
                    <SelectValue placeholder="Select impact" />
                  </SelectTrigger>
                  <SelectContent>
                    {riskLevels.map((level) => (
                      <SelectItem key={level.value} value={level.value}>
                        {level.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.impact && <p className="text-sm text-red-500">{errors.impact}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="likelihood">Likelihood *</Label>
                <Select
                  value={formData.likelihood}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, likelihood: value }))}
                >
                  <SelectTrigger className={errors.likelihood ? "border-red-500" : ""}>
                    <SelectValue placeholder="Select likelihood" />
                  </SelectTrigger>
                  <SelectContent>
                    {riskLevels.map((level) => (
                      <SelectItem key={level.value} value={level.value}>
                        {level.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.likelihood && <p className="text-sm text-red-500">{errors.likelihood}</p>}
              </div>

<div className="space-y-2">
                <Label>Risk Score</Label>
                <div className="h-10 px-3 py-2 border rounded-md bg-slate-50 flex items-center">
                  <span className="font-medium">
                    {formData.impact && formData.likelihood
                      ? Number.parseInt(formData.impact) * Number.parseInt(formData.likelihood)
                      : "—"}
                  </span>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="dueDate">Target Resolution Date</Label>
              <DatePicker
                date={formData.dueDate}
                onDateChange={(date) => setFormData((prev) => ({ ...prev, dueDate: date }))}
              />
            </div>
          </div>

{/* Mitigation Planning */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Mitigation Planning</h3>

<div className="space-y-2">
              <Label htmlFor="mitigationPlan">Mitigation Plan</Label>
              <Textarea
                id="mitigationPlan"
                rows={4}
                value={formData.mitigationPlan}
                onChange={(e) => setFormData((prev) => ({ ...prev, mitigationPlan: e.target.value }))}
                placeholder="Describe the planned actions to mitigate this risk..."
              />
            </div>
          </div>

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface DatePickerProps {
  date?: Date | null
  onDateChange: (date: Date | undefined) => void
  placeholder?: string
  className?: string
}

export function DatePicker({ date, onDateChange, placeholder = "Pick a date", className }: DatePickerProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground", className)}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>{placeholder}</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date || undefined} onSelect={onDateChange} initialFocus />
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescript:file="components/forms/incident-report-form.tsx" isMerged="true"
"use client"

import type React from "react"

interface IncidentReportFormProps {
  onSubmit: (data: any) => void
  onCancel: () => void
  initialData?: any
}

export function IncidentReportForm({ onSubmit, onCancel, initialData }: IncidentReportFormProps) {
  const [formData, setFormData] = useState({
    title: initialData?.title || "",
    description: initialData?.description || "",
    category: initialData?.category || "",
    severity: initialData?.severity || "",
    reportedBy: initialData?.reportedBy || "",
    assignedTo: initialData?.assignedTo || "",
    department: initialData?.department || "",
    occurredAt: initialData?.occurredAt || null,
    discoveredAt: initialData?.discoveredAt || null,
    impact: initialData?.impact || "",
    rootCause: initialData?.rootCause || "",
    correctiveActions: initialData?.correctiveActions || [""],
    affectedSystems: initialData?.affectedSystems || [""],
    witnesses: initialData?.witnesses || [""],
    estimatedCost: initialData?.estimatedCost || "",
    regulatoryReporting: initialData?.regulatoryReporting || false,
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.title.trim()) {
      newErrors.title = "Incident title is required"
    }

if (!formData.description.trim()) {
      newErrors.description = "Incident description is required"
    }

if (!formData.category) {
      newErrors.category = "Incident category is required"
    }

if (!formData.severity) {
      newErrors.severity = "Severity level is required"
    }

if (!formData.reportedBy.trim()) {
      newErrors.reportedBy = "Reporter name is required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (validateForm()) {
      onSubmit({
        ...formData,
        status: "open",
        reportedDate: new Date(),
        createdAt: new Date(),
        updatedAt: new Date(),
      })
    }
  }

const incidentCategories = [
    { value: "security", label: "Security Incident" },
    { value: "operational", label: "Operational Incident" },
    { value: "compliance", label: "Compliance Violation" },
    { value: "data_breach", label: "Data Breach" },
    { value: "system_outage", label: "System Outage" },
    { value: "fraud", label: "Fraud" },
    { value: "other", label: "Other" },
  ]

const severityLevels = [
    { value: IncidentSeverity.LOW, label: "Low" },
    { value: IncidentSeverity.MEDIUM, label: "Medium" },
    { value: IncidentSeverity.HIGH, label: "High" },
    { value: IncidentSeverity.CRITICAL, label: "Critical" },
  ]

const addArrayField = (field: string) => {
    setFormData((prev) => ({
      ...prev,
      [field]: [...(prev[field as keyof typeof prev] as string[]), ""],
    }))
  }

const removeArrayField = (field: string, index: number) => {
    setFormData((prev) => ({
      ...prev,
      [field]: (prev[field as keyof typeof prev] as string[]).filter((_, i) => i !== index),
    }))
  }

const updateArrayField = (field: string, index: number, value: string) => {
    setFormData((prev) => ({
      ...prev,
      [field]: (prev[field as keyof typeof prev] as string[]).map((item, i) => (i === index ? value : item)),
    }))
  }

return (
    <Card className="max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center">
          <AlertCircle className="h-5 w-5 mr-2" />
          Incident Report Form
        </CardTitle>
        <CardDescription>
          Report a security, operational, or compliance incident with detailed information
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Incident Details</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="title">Incident Title *</Label>
                <Input
                  id="title"
                  value={formData.title}
                  onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                  className={errors.title ? "border-red-500" : ""}
                />
                {errors.title && <p className="text-sm text-red-500">{errors.title}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Incident Category *</Label>
                <Select
                  value={formData.category}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, category: value }))}
                >
                  <SelectTrigger className={errors.category ? "border-red-500" : ""}>
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    {incidentCategories.map((category) => (
                      <SelectItem key={category.value} value={category.value}>
                        {category.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.category && <p className="text-sm text-red-500">{errors.category}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="severity">Severity Level *</Label>
                <Select
                  value={formData.severity}
                  onValueChange={(value) => setFormData((prev) => ({ ...prev, severity: value }))}
                >
                  <SelectTrigger className={errors.severity ? "border-red-500" : ""}>
                    <SelectValue placeholder="Select severity" />
                  </SelectTrigger>
                  <SelectContent>
                    {severityLevels.map((level) => (
                      <SelectItem key={level.value} value={level.value}>
                        {level.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.severity && <p className="text-sm text-red-500">{errors.severity}</p>}
              </div>

<div className="space-y-2">
              <Label htmlFor="description">Incident Description *</Label>
              <Textarea
                id="description"
                rows={4}
                value={formData.description}
                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                className={errors.description ? "border-red-500" : ""}
                placeholder="Provide a detailed description of what happened, when it occurred, and any immediate actions taken..."
              />
              {errors.description && <p className="text-sm text-red-500">{errors.description}</p>}
            </div>
          </div>

{/* Timeline */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Timeline</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>When did the incident occur?</Label>
                <DatePicker
                  date={formData.occurredAt}
                  onDateChange={(date) => setFormData((prev) => ({ ...prev, occurredAt: date }))}
                  placeholder="Select occurrence date"
                />
              </div>

<div className="space-y-2">
                <Label>When was it discovered?</Label>
                <DatePicker
                  date={formData.discoveredAt}
                  onDateChange={(date) => setFormData((prev) => ({ ...prev, discoveredAt: date }))}
                  placeholder="Select discovery date"
                />
              </div>
            </div>
          </div>

{/* People Involved */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">People Involved</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="reportedBy">Reported By *</Label>
                <Input
                  id="reportedBy"
                  value={formData.reportedBy}
                  onChange={(e) => setFormData((prev) => ({ ...prev, reportedBy: e.target.value }))}
                  className={errors.reportedBy ? "border-red-500" : ""}
                />
                {errors.reportedBy && <p className="text-sm text-red-500">{errors.reportedBy}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="assignedTo">Assigned To</Label>
                <Input
                  id="assignedTo"
                  value={formData.assignedTo}
                  onChange={(e) => setFormData((prev) => ({ ...prev, assignedTo: e.target.value }))}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label>Witnesses</Label>
              {formData.witnesses.map((witness, index) => (
                <div key={index} className="flex space-x-2">
                  <Input
                    value={witness}
                    onChange={(e) => updateArrayField("witnesses", index, e.target.value)}
                    placeholder="Witness name and contact"
                  />
                  {formData.witnesses.length > 1 && (
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => removeArrayField("witnesses", index)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
              <Button type="button" variant="outline" size="sm" onClick={() => addArrayField("witnesses")}>
                <Plus className="h-4 w-4 mr-2" />
                Add Witness
              </Button>
            </div>
          </div>

{/* Impact Assessment */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Impact Assessment</h3>

<div className="space-y-2">
              <Label htmlFor="impact">Business Impact</Label>
              <Textarea
                id="impact"
                rows={3}
                value={formData.impact}
                onChange={(e) => setFormData((prev) => ({ ...prev, impact: e.target.value }))}
                placeholder="Describe the business impact, including affected processes, customers, or operations..."
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="estimatedCost">Estimated Cost (USD)</Label>
                <Input
                  id="estimatedCost"
                  type="number"
                  value={formData.estimatedCost}
                  onChange={(e) => setFormData((prev) => ({ ...prev, estimatedCost: e.target.value }))}
                  placeholder="0.00"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label>Affected Systems</Label>
              {formData.affectedSystems.map((system, index) => (
                <div key={index} className="flex space-x-2">
                  <Input
                    value={system}
                    onChange={(e) => updateArrayField("affectedSystems", index, e.target.value)}
                    placeholder="System or application name"
                  />
                  {formData.affectedSystems.length > 1 && (
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => removeArrayField("affectedSystems", index)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
              <Button type="button" variant="outline" size="sm" onClick={() => addArrayField("affectedSystems")}>
                <Plus className="h-4 w-4 mr-2" />
                Add System
              </Button>
            </div>
          </div>

{/* Root Cause & Actions */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Analysis & Response</h3>

<div className="space-y-2">
              <Label htmlFor="rootCause">Root Cause Analysis</Label>
              <Textarea
                id="rootCause"
                rows={3}
                value={formData.rootCause}
                onChange={(e) => setFormData((prev) => ({ ...prev, rootCause: e.target.value }))}
                placeholder="Describe the root cause of the incident (if known)..."
              />
            </div>

<div className="space-y-2">
              <Label>Corrective Actions Taken</Label>
              {formData.correctiveActions.map((action, index) => (
                <div key={index} className="flex space-x-2">
                  <Textarea
                    value={action}
                    onChange={(e) => updateArrayField("correctiveActions", index, e.target.value)}
                    placeholder="Describe the corrective action taken..."
                    rows={2}
                  />
                  {formData.correctiveActions.length > 1 && (
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => removeArrayField("correctiveActions", index)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
              <Button type="button" variant="outline" size="sm" onClick={() => addArrayField("correctiveActions")}>
                <Plus className="h-4 w-4 mr-2" />
                Add Action
              </Button>
            </div>
          </div>

{/* Form Actions */}
          <div className="flex justify-end space-x-4 pt-6 border-t">
            <Button type="button" variant="outline" onClick={onCancel}>
              <X className="h-4 w-4 mr-2" />
              Cancel
            </Button>
            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
              <Save className="h-4 w-4 mr-2" />
              Submit Incident Report
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "qs-grc-platform",
  "version": "1.0.0",
  "description": "Enterprise Governance, Risk, and Compliance (GRC) Management Platform",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@next/font": "^14.0.4",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-calendar": "^1.0.0",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "date-fns": "^2.30.0",
    "lucide-react": "^0.294.0",
    "next": "^14.0.4",
    "next-auth": "^4.24.5",
    "react": "^18.2.0",
    "react-day-picker": "^8.9.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "recharts": "^2.8.0",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20.10.4",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "@typescript-eslint/eslint-plugin": "^6.13.2",
    "@typescript-eslint/parser": "^6.13.2",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-config-next": "^14.0.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.6",
    "typescript": "^5.3.3"
  },
  "keywords": [
    "grc",
    "governance",
    "risk-management",
    "compliance",
    "enterprise",
    "nextjs",
    "typescript",
    "tailwindcss"
  ],
  "author": "QS Corporation",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/your-org/qs-grc-platform.git"
  },
  "bugs": {
    "url": "https://github.com/your-org/qs-grc-platform/issues"
  },
  "homepage": "https://github.com/your-org/qs-grc-platform#readme"
}
[V0_FILE]dockerfile:file="Dockerfile" isMerged="true"
# Use the official Node.js 18 image as base
FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]
[V0_FILE]yaml:file="docker-compose.yml" isMerged="true"
version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgresql://grc_user:grc_password@postgres:5432/grc_db
      - NEXTAUTH_URL=http://localhost:3000
      - NEXTAUTH_SECRET=your-secret-key-here
    depends_on:
      - postgres
      - redis
    networks:
      - grc-network

postgres:
    image: postgres:15-alpine
    environment:
      - POSTGRES_DB=grc_db
      - POSTGRES_USER=grc_user
      - POSTGRES_PASSWORD=grc_password
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./scripts/init.sql:/docker-entrypoint-initdb.d/init.sql
    ports:
      - "5432:5432"
    networks:
      - grc-network

redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"
    volumes:
      - redis_data:/data
    networks:
      - grc-network

nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./ssl:/etc/nginx/ssl
    depends_on:
      - app
    networks:
      - grc-network

volumes:
  postgres_data:
  redis_data:

networks:
  grc-network:
    driver: bridge
[V0_FILE]javascript:file="next.config.mjs" isFixed="true" isQuickEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ['localhost', 'your-domain.com'],
    unoptimized: true,
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
  // Enable standalone output for Docker
  output: 'standalone',
  
  // Security headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block',
          },
        ],
      },
    ]
  },

// Redirects for better SEO
  async redirects() {
    return [
      {
        source: '/dashboard',
        destination: '/',
        permanent: true,
      },
    ]
  },

// Webpack configuration for better performance
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Important: return the modified config
    return config
  },

eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
}

export default nextConfig
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Application
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
DATABASE_URL="postgresql://grc_user:grc_password@localhost:5432/grc_db"

# Authentication
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# OAuth Providers (optional)
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
GITHUB_ID=""
GITHUB_SECRET=""

# Email Configuration
SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"
SMTP_FROM="noreply@yourcompany.com"

# Redis (for caching and sessions)
REDIS_URL="redis://localhost:6379"

# AWS S3 (for file storage)
AWS_ACCESS_KEY_ID=""
AWS_SECRET_ACCESS_KEY=""
AWS_REGION="us-east-1"
AWS_S3_BUCKET="grc-documents"

# Monitoring and Analytics
SENTRY_DSN=""
GOOGLE_ANALYTICS_ID=""

# API Keys
OPENAI_API_KEY=""
SLACK_WEBHOOK_URL=""
TEAMS_WEBHOOK_URL=""

# Security
ENCRYPTION_KEY="your-32-character-encryption-key"
JWT_SECRET="your-jwt-secret"

# Rate Limiting
RATE_LIMIT_MAX=100
RATE_LIMIT_WINDOW=900000

# Feature Flags
ENABLE_ANALYTICS=true
ENABLE_NOTIFICATIONS=true
ENABLE_FILE_UPLOAD=true

# Custom Environment Variable
CUSTOM_KEY="your-custom-value"
[V0_FILE]typescript:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import type * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescript:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescript:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescript:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescript:file="lib/context/app-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useReducer, useEffect } from "react"
import { type Risk, type Incident, type User, type Notification, NotificationType } from "@/types"
import { useNotifications } from "@/hooks/use-notifications"

interface AppState {
  user: User | null
  risks: Risk[]
  incidents: Incident[]
  notifications: Notification[]
  loading: boolean
  error: string | null
}

type AppAction =
  | { type: "SET_USER"; payload: User | null }
  | { type: "SET_RISKS"; payload: Risk[] }
  | { type: "ADD_RISK"; payload: Risk }
  | { type: "UPDATE_RISK"; payload: Risk }
  | { type: "DELETE_RISK"; payload: string }
  | { type: "SET_INCIDENTS"; payload: Incident[] }
  | { type: "ADD_INCIDENT"; payload: Incident }
  | { type: "UPDATE_INCIDENT"; payload: Incident }
  | { type: "DELETE_INCIDENT"; payload: string }
  | { type: "SET_LOADING"; payload: boolean }
  | { type: "SET_ERROR"; payload: string | null }
  | { type: "ADD_NOTIFICATION"; payload: Notification }
  | { type: "REMOVE_NOTIFICATION"; payload: string }

const initialState: AppState = {
  user: null,
  risks: [],
  incidents: [],
  notifications: [],
  loading: false,
  error: null,
}

function appReducer(state: AppState, action: AppAction): AppState {
  switch (action.type) {
    case "SET_USER":
      return { ...state, user: action.payload }
    case "SET_RISKS":
      return { ...state, risks: action.payload }
    case "ADD_RISK":
      return { ...state, risks: [...state.risks, action.payload] }
    case "UPDATE_RISK":
      return {
        ...state,
        risks: state.risks.map((risk) => (risk.id === action.payload.id ? action.payload : risk)),
      }
    case "DELETE_RISK":
      return { ...state, risks: state.risks.filter((risk) => risk.id !== action.payload) }
    case "SET_INCIDENTS":
      return { ...state, incidents: action.payload }
    case "ADD_INCIDENT":
      return { ...state, incidents: [...state.incidents, action.payload] }
    case "UPDATE_INCIDENT":
      return {
        ...state,
        incidents: state.incidents.map((incident) => (incident.id === action.payload.id ? action.payload : incident)),
      }
    case "DELETE_INCIDENT":
      return { ...state, incidents: state.incidents.filter((incident) => incident.id !== action.payload) }
    case "SET_LOADING":
      return { ...state, loading: action.payload }
    case "SET_ERROR":
      return { ...state, error: action.payload }
    case "ADD_NOTIFICATION":
      return { ...state, notifications: [action.payload, ...state.notifications] }
    case "REMOVE_NOTIFICATION":
      return { ...state, notifications: state.notifications.filter((n) => n.id !== action.payload) }
    default:
      return state
  }
}

interface AppContextType extends AppState {
  dispatch: React.Dispatch<AppAction>
  addRisk: (risk: Omit<Risk, "id" | "createdAt" | "updatedAt">) => void
  updateRisk: (risk: Risk) => void
  deleteRisk: (id: string) => void
  addIncident: (incident: Omit<Incident, "id" | "reportedDate">) => void
  updateIncident: (incident: Incident) => void
  deleteIncident: (id: string) => void
  showNotification: (title: string, message: string, type?: NotificationType) => void
}

const AppContext = createContext<AppContextType | undefined>(undefined)

export function AppProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(appReducer, initialState)
  const { addNotification } = useNotifications()

// Mock data initialization
  useEffect(() => {
    // Initialize with mock data
    const mockUser: User = {
      id: "1",
      name: "John Doe",
      email: "john.doe@company.com",
      role: {
        id: "1",
        name: "Risk Manager",
        permissions: [],
        description: "Risk management role",
      },
      department: "Risk Management",
      createdAt: new Date(),
      updatedAt: new Date(),
    }

dispatch({ type: "SET_USER", payload: mockUser })
  }, [])

const addRisk = (riskData: Omit<Risk, "id" | "createdAt" | "updatedAt">) => {
    const newRisk: Risk = {
      ...riskData,
      id: `RSK-${Date.now()}`,
      createdAt: new Date(),
      updatedAt: new Date(),
      controls: [],
    }
    dispatch({ type: "ADD_RISK", payload: newRisk })
    showNotification("Risk Added", `Risk "${newRisk.title}" has been successfully created.`, NotificationType.SUCCESS)
  }

const updateRisk = (risk: Risk) => {
    const updatedRisk = { ...risk, updatedAt: new Date() }
    dispatch({ type: "UPDATE_RISK", payload: updatedRisk })
    showNotification("Risk Updated", `Risk "${risk.title}" has been updated.`, NotificationType.INFO)
  }

const deleteRisk = (id: string) => {
    const risk = state.risks.find((r) => r.id === id)
    dispatch({ type: "DELETE_RISK", payload: id })
    if (risk) {
      showNotification("Risk Deleted", `Risk "${risk.title}" has been deleted.`, NotificationType.WARNING)
    }
  }

const addIncident = (incidentData: Omit<Incident, "id" | "reportedDate">) => {
    const newIncident: Incident = {
      ...incidentData,
      id: `INC-${Date.now()}`,
      reportedDate: new Date(),
      correctiveActions: incidentData.correctiveActions || [],
    }
    dispatch({ type: "ADD_INCIDENT", payload: newIncident })
    showNotification(
      "Incident Reported",
      `Incident "${newIncident.title}" has been reported.`,
      NotificationType.WARNING,
    )
  }

const updateIncident = (incident: Incident) => {
    dispatch({ type: "UPDATE_INCIDENT", payload: incident })
    showNotification("Incident Updated", `Incident "${incident.title}" has been updated.`, NotificationType.INFO)
  }

const deleteIncident = (id: string) => {
    const incident = state.incidents.find((i) => i.id === id)
    dispatch({ type: "DELETE_INCIDENT", payload: id })
    if (incident) {
      showNotification("Incident Deleted", `Incident "${incident.title}" has been deleted.`, NotificationType.WARNING)
    }
  }

const showNotification = (title: string, message: string, type: NotificationType = NotificationType.INFO) => {
    const notification: Notification = {
      id: Math.random().toString(36).substr(2, 9),
      userId: state.user?.id || "unknown",
      title,
      message,
      type,
      read: false,
      createdAt: new Date(),
    }
    dispatch({ type: "ADD_NOTIFICATION", payload: notification })
    addNotification(title, message, type)
  }

const contextValue: AppContextType = {
    ...state,
    dispatch,
    addRisk,
    updateRisk,
    deleteRisk,
    addIncident,
    updateIncident,
    deleteIncident,
    showNotification,
  }

return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
}

export function useApp() {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error("useApp must be used within an AppProvider")
  }
  return context
}
[V0_FILE]typescript:file="app/settings/appearance/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { AppearanceSettings } from "@/components/settings/appearance-settings"

export default function AppearanceSettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <AppearanceSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="components/settings/appearance-settings.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { useState } from "react"
import { Palette, Monitor, Sun, Moon, Save } from "lucide-react"

export function AppearanceSettings() {
  const [settings, setSettings] = useState({
    theme: "system",
    primaryColor: "blue",
    fontSize: "medium",
    compactMode: false,
    showAnimations: true,
    highContrast: false,
    reducedMotion: false,
    sidebarPosition: "left",
    headerStyle: "default",
  })

const handleSave = () => {
    console.log("Saving appearance settings:", settings)
    // Apply theme changes
    document.documentElement.setAttribute("data-theme", settings.theme)
  }

const themes = [
    { value: "light", label: "Light", icon: Sun },
    { value: "dark", label: "Dark", icon: Moon },
    { value: "system", label: "System", icon: Monitor },
  ]

const colors = [
    { value: "blue", label: "Blue", color: "#3b82f6" },
    { value: "green", label: "Green", color: "#10b981" },
    { value: "purple", label: "Purple", color: "#8b5cf6" },
    { value: "red", label: "Red", color: "#ef4444" },
    { value: "orange", label: "Orange", color: "#f97316" },
    { value: "teal", label: "Teal", color: "#14b8a6" },
  ]

return (
    <div className="space-y-6">
      {/* Theme Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Palette className="h-5 w-5 mr-2" />
            Theme & Colors
          </CardTitle>
          <CardDescription>Customize the visual appearance of the application</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <Label>Theme Mode</Label>
            <div className="grid grid-cols-3 gap-4">
              {themes.map((theme) => {
                const Icon = theme.icon
                return (
                  <Button
                    key={theme.value}
                    variant={settings.theme === theme.value ? "default" : "outline"}
                    className="h-20 flex flex-col items-center justify-center space-y-2"
                    onClick={() => setSettings((prev) => ({ ...prev, theme: theme.value }))}
                  >
                    <Icon className="h-6 w-6" />
                    <span className="text-sm">{theme.label}</span>
                  </Button>
                )
              })}
            </div>
          </div>

<div className="space-y-4">
            <Label>Primary Color</Label>
            <div className="grid grid-cols-6 gap-3">
              {colors.map((color) => (
                <Button
                  key={color.value}
                  variant="outline"
                  className={`h-12 w-full relative ${
                    settings.primaryColor === color.value ? "ring-2 ring-offset-2 ring-blue-500" : ""
                  }`}
                  onClick={() => setSettings((prev) => ({ ...prev, primaryColor: color.value }))}
                >
                  <div className="w-6 h-6 rounded-full" style={{ backgroundColor: color.color }} />
                  <span className="sr-only">{color.label}</span>
                </Button>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>

{/* Layout Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Layout & Navigation</CardTitle>
          <CardDescription>Configure layout preferences and navigation behavior</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="fontSize">Font Size</Label>
              <Select
                value={settings.fontSize}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, fontSize: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="small">Small</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="large">Large</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="sidebarPosition">Sidebar Position</Label>
              <Select
                value={settings.sidebarPosition}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, sidebarPosition: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">Left</SelectItem>
                  <SelectItem value="right">Right</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Compact Mode</Label>
                <p className="text-sm text-slate-500">Reduce spacing and padding for more content</p>
              </div>
              <Switch
                checked={settings.compactMode}
                onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, compactMode: checked }))}
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Show Animations</Label>
                <p className="text-sm text-slate-500">Enable smooth transitions and animations</p>
              </div>
              <Switch
                checked={settings.showAnimations}
                onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, showAnimations: checked }))}
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Accessibility Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Accessibility</CardTitle>
          <CardDescription>Configure accessibility and usability options</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>High Contrast Mode</Label>
              <p className="text-sm text-slate-500">Increase contrast for better visibility</p>
            </div>
            <Switch
              checked={settings.highContrast}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, highContrast: checked }))}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Reduced Motion</Label>
              <p className="text-sm text-slate-500">Minimize animations for motion sensitivity</p>
            </div>
            <Switch
              checked={settings.reducedMotion}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, reducedMotion: checked }))}
            />
          </div>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Apply Changes
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/settings/data/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { DataManagementSettings } from "@/components/settings/data-management-settings"

export default function DataManagementPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <DataManagementSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="components/settings/data-management-settings.tsx" isMerged="true"
"use client"

export function DataManagementSettings() {
  const [settings, setSettings] = useState({
    dataRetentionDays: 2555,
    autoBackup: true,
    backupFrequency: "daily",
    backupLocation: "s3",
    compressionEnabled: true,
    encryptionEnabled: true,
    purgeOldData: true,
    exportFormat: "json",
  })

const [backupStatus, setBackupStatus] = useState({
    lastBackup: "2024-01-22 03:00:00",
    nextBackup: "2024-01-23 03:00:00",
    backupSize: "2.4 GB",
    status: "completed",
  })

const handleSave = () => {
    console.log("Saving data management settings:", settings)
  }

const handleBackupNow = () => {
    console.log("Starting manual backup...")
    setBackupStatus((prev) => ({ ...prev, status: "running" }))
    // Simulate backup process
    setTimeout(() => {
      setBackupStatus((prev) => ({ ...prev, status: "completed", lastBackup: new Date().toISOString() }))
    }, 3000)
  }

const handleExportData = () => {
    console.log("Exporting data...")
    // Simulate data export
  }

const handleImportData = () => {
    console.log("Importing data...")
    // Simulate data import
  }

const handlePurgeOldData = () => {
    console.log("Purging old data...")
    // Simulate data purge
  }

return (
    <div className="space-y-6">
      {/* Data Retention */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Database className="h-5 w-5 mr-2" />
            Data Retention Policy
          </CardTitle>
          <CardDescription>Configure how long data is stored in the system</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="retentionDays">Data Retention Period (days)</Label>
              <Input
                id="retentionDays"
                type="number"
                min="30"
                max="3650"
                value={settings.dataRetentionDays}
                onChange={(e) =>
                  setSettings((prev) => ({ ...prev, dataRetentionDays: Number.parseInt(e.target.value) }))
                }
              />
              <p className="text-sm text-slate-500">
                Data older than this period will be automatically archived or deleted
              </p>
            </div>

<div className="space-y-2">
              <Label htmlFor="exportFormat">Default Export Format</Label>
              <Select
                value={settings.exportFormat}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, exportFormat: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="json">JSON</SelectItem>
                  <SelectItem value="csv">CSV</SelectItem>
                  <SelectItem value="xml">XML</SelectItem>
                  <SelectItem value="excel">Excel</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Auto-purge Old Data</Label>
              <p className="text-sm text-slate-500">Automatically delete data beyond retention period</p>
            </div>
            <Switch
              checked={settings.purgeOldData}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, purgeOldData: checked }))}
            />
          </div>
        </CardContent>
      </Card>

{/* Backup Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Backup & Recovery</CardTitle>
          <CardDescription>Configure automated backups and data recovery options</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable Automatic Backups</Label>
              <p className="text-sm text-slate-500">Automatically backup data at scheduled intervals</p>
            </div>
            <Switch
              checked={settings.autoBackup}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, autoBackup: checked }))}
            />
          </div>

{settings.autoBackup && (
            <>
              <Separator />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="backupFrequency">Backup Frequency</Label>
                  <Select
                    value={settings.backupFrequency}
                    onValueChange={(value) => setSettings((prev) => ({ ...prev, backupFrequency: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hourly">Hourly</SelectItem>
                      <SelectItem value="daily">Daily</SelectItem>
                      <SelectItem value="weekly">Weekly</SelectItem>
                      <SelectItem value="monthly">Monthly</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="backupLocation">Backup Location</Label>
                  <Select
                    value={settings.backupLocation}
                    onValueChange={(value) => setSettings((prev) => ({ ...prev, backupLocation: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="local">Local Storage</SelectItem>
                      <SelectItem value="s3">Amazon S3</SelectItem>
                      <SelectItem value="azure">Azure Blob</SelectItem>
                      <SelectItem value="gcp">Google Cloud</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Enable Compression</Label>
                    <p className="text-sm text-slate-500">Compress backups to save storage space</p>
                  </div>
                  <Switch
                    checked={settings.compressionEnabled}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, compressionEnabled: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Enable Encryption</Label>
                    <p className="text-sm text-slate-500">Encrypt backups for security</p>
                  </div>
                  <Switch
                    checked={settings.encryptionEnabled}
                    onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, encryptionEnabled: checked }))}
                  />
                </div>
              </div>

{/* Backup Status */}
              <div className="space-y-4">
                <h4 className="font-medium">Backup Status</h4>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="space-y-1">
                    <p className="text-sm text-slate-500">Last Backup</p>
                    <p className="font-medium">{backupStatus.lastBackup}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm text-slate-500">Next Backup</p>
                    <p className="font-medium">{backupStatus.nextBackup}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm text-slate-500">Backup Size</p>
                    <p className="font-medium">{backupStatus.backupSize}</p>
                  </div>
                  <div className="space-y-1">
                    <p className="text-sm text-slate-500">Status</p>
                    <Badge variant={backupStatus.status === "completed" ? "default" : "secondary"}>
                      {backupStatus.status}
                    </Badge>
                  </div>
                </div>

{backupStatus.status === "running" && (
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Backup in progress...</span>
                      <span className="text-sm">45%</span>
                    </div>
                    <Progress value={45} className="h-2" />
                  </div>
                )}

<Button onClick={handleBackupNow} disabled={backupStatus.status === "running"}>
                  <RefreshCw className={`h-4 w-4 mr-2 ${backupStatus.status === "running" ? "animate-spin" : ""}`} />
                  {backupStatus.status === "running" ? "Backing Up..." : "Backup Now"}
                </Button>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* Data Import/Export */}
      <Card>
        <CardHeader>
          <CardTitle>Data Import & Export</CardTitle>
          <CardDescription>Import and export data for migration or analysis</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Button
              onClick={handleExportData}
              variant="outline"
              className="h-20 flex flex-col items-center space-y-2 bg-transparent"
            >
              <Download className="h-6 w-6" />
              <span>Export Data</span>
              <span className="text-xs text-slate-500">Download all system data</span>
            </Button>

<Button
              onClick={handleImportData}
              variant="outline"
              className="h-20 flex flex-col items-center space-y-2 bg-transparent"
            >
              <Upload className="h-6 w-6" />
              <span>Import Data</span>
              <span className="text-xs text-slate-500">Upload data from file</span>
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Data Cleanup */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <AlertTriangle className="h-5 w-5 mr-2 text-orange-500" />
            Data Cleanup
          </CardTitle>
          <CardDescription>Manage and clean up old or unnecessary data</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
            <div className="flex items-start space-x-3">
              <AlertTriangle className="h-5 w-5 text-orange-500 mt-0.5" />
              <div className="flex-1">
                <h4 className="font-medium text-orange-800">Caution: Data Cleanup</h4>
                <p className="text-sm text-orange-700 mt-1">
                  This action will permanently delete old data based on your retention policy. This cannot be undone.
                </p>
              </div>
            </div>
          </div>

<div className="flex justify-between items-center">
            <div>
              <p className="font-medium">Purge Old Data</p>
              <p className="text-sm text-slate-500">Delete data older than {settings.dataRetentionDays} days</p>
            </div>
            <Button onClick={handlePurgeOldData} variant="destructive">
              <Trash2 className="h-4 w-4 mr-2" />
              Purge Now
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Data Settings
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/settings/audit/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { AuditSettings } from "@/components/settings/audit-settings"

export default function AuditSettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <AuditSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="components/settings/audit-settings.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Separator } from "@/components/ui/separator"
import { useState } from "react"
import { FileText, Download, Eye, Search, Save } from "lucide-react"

export function AuditSettings() {
  const [settings, setSettings] = useState({
    auditLogging: true,
    logLevel: "detailed",
    retentionPeriod: 2555,
    realTimeMonitoring: true,
    alertOnSuspiciousActivity: true,
    logUserActions: true,
    logSystemEvents: true,
    logDataChanges: true,
    logLoginAttempts: true,
    exportFormat: "json",
    autoArchive: true,
    complianceReporting: true,
  })

const [auditLogs] = useState([
    {
      id: "1",
      timestamp: "2024-01-22 14:30:15",
      user: "john.smith@company.com",
      action: "UPDATE_RISK",
      resource: "RSK-001",
      ipAddress: "192.168.1.100",
      status: "SUCCESS",
    },
    {
      id: "2",
      timestamp: "2024-01-22 14:25:32",
      user: "sarah.johnson@company.com",
      action: "CREATE_INCIDENT",
      resource: "INC-002",
      ipAddress: "192.168.1.105",
      status: "SUCCESS",
    },
    {
      id: "3",
      timestamp: "2024-01-22 14:20:45",
      user: "unknown",
      action: "LOGIN_FAILED",
      resource: "AUTH",
      ipAddress: "203.0.113.1",
      status: "FAILED",
    },
  ])

const handleSave = () => {
    console.log("Saving audit settings:", settings)
  }

const handleExportLogs = () => {
    console.log("Exporting audit logs...")
  }

const getStatusBadge = (status: string) => {
    return <Badge variant={status === "SUCCESS" ? "default" : "destructive"}>{status}</Badge>
  }

return (
    <div className="space-y-6">
      {/* Audit Configuration */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <FileText className="h-5 w-5 mr-2" />
            Audit Logging Configuration
          </CardTitle>
          <CardDescription>Configure audit logging and compliance monitoring settings</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable Audit Logging</Label>
              <p className="text-sm text-slate-500">Log all user actions and system events</p>
            </div>
            <Switch
              checked={settings.auditLogging}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, auditLogging: checked }))}
            />
          </div>

{settings.auditLogging && (
            <>
              <Separator />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="logLevel">Log Detail Level</Label>
                  <Select
                    value={settings.logLevel}
                    onValueChange={(value) => setSettings((prev) => ({ ...prev, logLevel: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="basic">Basic</SelectItem>
                      <SelectItem value="detailed">Detailed</SelectItem>
                      <SelectItem value="verbose">Verbose</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="retention">Retention Period (days)</Label>
                  <Input
                    id="retention"
                    type="number"
                    min="30"
                    max="3650"
                    value={settings.retentionPeriod}
                    onChange={(e) =>
                      setSettings((prev) => ({ ...prev, retentionPeriod: Number.parseInt(e.target.value) }))
                    }
                  />
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Logging Categories</h4>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>User Actions</Label>
                      <p className="text-sm text-slate-500">Log user interactions and changes</p>
                    </div>
                    <Switch
                      checked={settings.logUserActions}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, logUserActions: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>System Events</Label>
                      <p className="text-sm text-slate-500">Log system operations and errors</p>
                    </div>
                    <Switch
                      checked={settings.logSystemEvents}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, logSystemEvents: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Data Changes</Label>
                      <p className="text-sm text-slate-500">Log all data modifications</p>
                    </div>
                    <Switch
                      checked={settings.logDataChanges}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, logDataChanges: checked }))}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Login Attempts</Label>
                      <p className="text-sm text-slate-500">Log authentication attempts</p>
                    </div>
                    <Switch
                      checked={settings.logLoginAttempts}
                      onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, logLoginAttempts: checked }))}
                    />
                  </div>
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>

{/* Monitoring & Alerts */}
      <Card>
        <CardHeader>
          <CardTitle>Real-time Monitoring</CardTitle>
          <CardDescription>Configure real-time monitoring and alerting for suspicious activities</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Real-time Monitoring</Label>
              <p className="text-sm text-slate-500">Monitor activities as they happen</p>
            </div>
            <Switch
              checked={settings.realTimeMonitoring}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, realTimeMonitoring: checked }))}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Alert on Suspicious Activity</Label>
              <p className="text-sm text-slate-500">Send alerts for unusual patterns or failed attempts</p>
            </div>
            <Switch
              checked={settings.alertOnSuspiciousActivity}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, alertOnSuspiciousActivity: checked }))}
            />
          </div>
        </CardContent>
      </Card>

{/* Compliance Reporting */}
      <Card>
        <CardHeader>
          <CardTitle>Compliance Reporting</CardTitle>
          <CardDescription>Configure automated compliance reporting and archiving</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Enable Compliance Reporting</Label>
              <p className="text-sm text-slate-500">Generate automated compliance reports</p>
            </div>
            <Switch
              checked={settings.complianceReporting}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, complianceReporting: checked }))}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Auto-archive Old Logs</Label>
              <p className="text-sm text-slate-500">Automatically archive logs beyond retention period</p>
            </div>
            <Switch
              checked={settings.autoArchive}
              onCheckedChange={(checked) => setSettings((prev) => ({ ...prev, autoArchive: checked }))}
            />
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="exportFormat">Export Format</Label>
              <Select
                value={settings.exportFormat}
                onValueChange={(value) => setSettings((prev) => ({ ...prev, exportFormat: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="json">JSON</SelectItem>
                  <SelectItem value="csv">CSV</SelectItem>
                  <SelectItem value="xml">XML</SelectItem>
                  <SelectItem value="pdf">PDF Report</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Recent Audit Logs */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Recent Audit Logs</CardTitle>
              <CardDescription>View recent system activities and user actions</CardDescription>
            </div>
            <div className="flex space-x-2">
              <Button variant="outline" size="sm">
                <Search className="h-4 w-4 mr-2" />
                Search Logs
              </Button>
              <Button variant="outline" size="sm" onClick={handleExportLogs}>
                <Download className="h-4 w-4 mr-2" />
                Export
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Timestamp</TableHead>
                <TableHead>User</TableHead>
                <TableHead>Action</TableHead>
                <TableHead>Resource</TableHead>
                <TableHead>IP Address</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {auditLogs.map((log) => (
                <TableRow key={log.id}>
                  <TableCell className="font-mono text-sm">{log.timestamp}</TableCell>
                  <TableCell>{log.user}</TableCell>
                  <TableCell>{log.action}</TableCell>
                  <TableCell>{log.resource}</TableCell>
                  <TableCell className="font-mono text-sm">{log.ipAddress}</TableCell>
                  <TableCell>{getStatusBadge(log.status)}</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      <Eye className="h-4 w-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-700">
          <Save className="h-4 w-4 mr-2" />
          Save Audit Settings
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/modals/risk-assessment-modal.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { RiskAssessmentForm } from "@/components/forms/risk-assessment-form"
import { useApp } from "@/lib/context/app-context"

interface RiskAssessmentModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialData?: any
}

export function RiskAssessmentModal({ open, onOpenChange, initialData }: RiskAssessmentModalProps) {
  const { addRisk, updateRisk } = useApp()

const handleSubmit = (data: any) => {
    if (initialData) {
      updateRisk({ ...initialData, ...data })
    } else {
      addRisk(data)
    }
    onOpenChange(false)
  }

const handleCancel = () => {
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{initialData ? "Edit Risk Assessment" : "New Risk Assessment"}</DialogTitle>
          <DialogDescription>
            {initialData ? "Update the risk assessment details" : "Create a new risk assessment"}
          </DialogDescription>
        </DialogHeader>
        <RiskAssessmentForm onSubmit={handleSubmit} onCancel={handleCancel} initialData={initialData} />
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/modals/incident-report-modal.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { IncidentReportForm } from "@/components/forms/incident-report-form"
import { useApp } from "@/lib/context/app-context"

interface IncidentReportModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialData?: any
}

export function IncidentReportModal({ open, onOpenChange, initialData }: IncidentReportModalProps) {
  const { addIncident, updateIncident } = useApp()

const handleSubmit = (data: any) => {
    if (initialData) {
      updateIncident({ ...initialData, ...data })
    } else {
      addIncident(data)
    }
    onOpenChange(false)
  }

const handleCancel = () => {
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{initialData ? "Edit Incident Report" : "New Incident Report"}</DialogTitle>
          <DialogDescription>
            {initialData ? "Update the incident report details" : "Report a new incident"}
          </DialogDescription>
        </DialogHeader>
        <IncidentReportForm onSubmit={handleSubmit} onCancel={handleCancel} initialData={initialData} />
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/risk-management/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { MainLayout } from "@/components/layout/main-layout"
import { RiskAssessmentModal } from "@/components/modals/risk-assessment-modal"
import { useApp } from "@/lib/context/app-context"
import {
  AlertTriangle,
  Search,
  Filter,
  Plus,
  Eye,
  Edit,
  Download,
  Shield,
  TrendingUp,
  Calendar,
  Target,
  Trash2,
} from "lucide-react"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid, Scatter, ScatterChart, ZAxis } from "recharts"
import { useState } from "react"
import { exportToCSV } from "@/lib/utils"

const riskHeatMapData = [
  { impact: 1, likelihood: 1, count: 28, label: "Very Low/Very Low" },
  { impact: 1, likelihood: 2, count: 18, label: "Very Low/Low" },
  { impact: 1, likelihood: 3, count: 12, label: "Very Low/Medium" },
  { impact: 1, likelihood: 4, count: 5, label: "Very Low/High" },
  { impact: 2, likelihood: 1, count: 45, label: "Low/Very Low" },
  { impact: 2, likelihood: 2, count: 38, label: "Low/Low" },
  { impact: 2, likelihood: 3, count: 22, label: "Low/Medium" },
  { impact: 2, likelihood: 4, count: 8, label: "Low/High" },
  { impact: 3, likelihood: 1, count: 25, label: "Medium/Very Low" },
  { impact: 3, likelihood: 2, count: 32, label: "Medium/Low" },
  { impact: 3, likelihood: 3, count: 28, label: "Medium/Medium" },
  { impact: 3, likelihood: 4, count: 12, label: "Medium/High" },
  { impact: 4, likelihood: 1, count: 12, label: "High/Very Low" },
  { impact: 4, likelihood: 2, count: 15, label: "High/Low" },
  { impact: 4, likelihood: 3, count: 18, label: "High/Medium" },
  { impact: 4, likelihood: 4, count: 7, label: "High/High" },
  { impact: 5, likelihood: 1, count: 2, label: "Very High/Very Low" },
  { impact: 5, likelihood: 2, count: 5, label: "Very High/Low" },
  { impact: 5, likelihood: 3, count: 8, label: "Very High/Medium" },
  { impact: 5, likelihood: 4, count: 3, label: "Very High/High" },
]

const departmentRiskData = [
  { department: "IT Security", total: 45, high: 12, medium: 23, low: 10 },
  { department: "Finance", total: 32, high: 8, medium: 18, low: 6 },
  { department: "Operations", total: 67, high: 15, medium: 35, low: 17 },
  { department: "Legal", total: 28, high: 5, medium: 15, low: 8 },
  { department: "HR", total: 19, high: 3, medium: 10, low: 6 },
]

export default function RiskManagement() {
  const { risks, deleteRisk, showNotification } = useApp()
  const [isRiskModalOpen, setIsRiskModalOpen] = useState(false)
  const [editingRisk, setEditingRisk] = useState(null)
  const [searchTerm, setSearchTerm] = useState("")

const filteredRisks = risks.filter(
    (risk) =>
      risk.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      risk.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
      risk.owner.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const handleNewRisk = () => {
    setEditingRisk(null)
    setIsRiskModalOpen(true)
  }

const handleEditRisk = (risk: any) => {
    setEditingRisk(risk)
    setIsRiskModalOpen(true)
  }

const handleDeleteRisk = (riskId: string) => {
    if (window.confirm("Are you sure you want to delete this risk?")) {
      deleteRisk(riskId)
    }
  }

const handleExportRisks = () => {
    exportToCSV(filteredRisks, "risk-register")
    showNotification("Export Complete", "Risk register has been exported to CSV", "success" as any)
  }

const getRiskBadgeColor = (status: string) => {
    switch (status) {
      case "Critical":
        return "destructive"
      case "open":
        return "secondary"
      case "in_progress":
        return "default"
      case "monitoring":
        return "outline"
      default:
        return "secondary"
    }
  }

const getImpactColor = (impact: string) => {
    switch (impact) {
      case "5":
      case "High":
        return "text-red-600"
      case "4":
      case "Medium":
        return "text-orange-600"
      case "3":
      case "Low":
        return "text-green-600"
      default:
        return "text-gray-600"
    }
  }

return (
    <MainLayout>
      <div className="p-6 space-y-6">
        {/* Page Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-slate-900">Risk Management</h1>
            <p className="text-slate-600 mt-1">Identify, assess, and mitigate organizational risks</p>
          </div>
          <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleNewRisk}>
            <Plus className="h-4 w-4 mr-2" />
            New Risk Assessment
          </Button>
        </div>

<Tabs defaultValue="enterprise" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4 bg-slate-100">
            <TabsTrigger value="enterprise" className="data-[state=active]:bg-white">
              Enterprise Risk Register
            </TabsTrigger>
            <TabsTrigger value="departmental" className="data-[state=active]:bg-white">
              Departmental Risks
            </TabsTrigger>
            <TabsTrigger value="heatmap" className="data-[state=active]:bg-white">
              Risk Heat Map
            </TabsTrigger>
            <TabsTrigger value="analytics" className="data-[state=active]:bg-white">
              Risk Analytics
            </TabsTrigger>
          </TabsList>

<TabsContent value="enterprise" className="space-y-6">
            {/* Search and Filters */}
            <Card className="shadow-sm">
              <CardContent className="pt-6">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="flex-1">
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                      <Input
                        placeholder="Search risks by title, category, or owner..."
                        className="pl-10 bg-slate-50"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" className="bg-white">
                      <Filter className="h-4 w-4 mr-2" />
                      Filter
                    </Button>
                    <Button variant="outline" className="bg-white" onClick={handleExportRisks}>
                      <Download className="h-4 w-4 mr-2" />
                      Export
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Risk Summary Cards */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-sm">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-blue-700">Total Risks</p>
                      <p className="text-2xl font-bold text-blue-900">{risks.length}</p>
                    </div>
                    <AlertTriangle className="h-8 w-8 text-blue-600" />
                  </div>
                </CardContent>
              </Card>

<Card className="bg-gradient-to-br from-red-50 to-red-100 border-red-200 shadow-sm">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-red-700">Critical Risks</p>
                      <p className="text-2xl font-bold text-red-900">{risks.filter((r) => r.riskScore >= 15).length}</p>
                    </div>
                    <Shield className="h-8 w-8 text-red-600" />
                  </div>
                </CardContent>
              </Card>

<Card className="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200 shadow-sm">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-orange-700">High Risks</p>
                      <p className="text-2xl font-bold text-orange-900">
                        {risks.filter((r) => r.riskScore >= 10 && r.riskScore < 15).length}
                      </p>
                    </div>
                    <TrendingUp className="h-8 w-8 text-orange-600" />
                  </div>
                </CardContent>
              </Card>

<Card className="bg-gradient-to-br from-red-50 to-red-100 border-red-200 shadow-sm">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-red-700">Overdue</p>
                      <p className="text-2xl font-bold text-red-900">
                        {risks.filter((r) => new Date(r.dueDate) < new Date()).length}
                      </p>
                    </div>
                    <Calendar className="h-8 w-8 text-red-600" />
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Risk Register Table */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle>Enterprise Risk Register</CardTitle>
                <CardDescription>
                  Comprehensive list of all organizational risks with assessment details
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Risk ID</TableHead>
                      <TableHead>Risk Title</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Impact</TableHead>
                      <TableHead>Likelihood</TableHead>
                      <TableHead>Risk Score</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Owner</TableHead>
                      <TableHead>Due Date</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredRisks.map((risk) => (
                      <TableRow key={risk.id}>
                        <TableCell className="font-medium">{risk.id}</TableCell>
                        <TableCell>
                          <div>
                            <p className="font-medium">{risk.title}</p>
                            <p className="text-sm text-slate-500">{risk.department}</p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">{risk.category}</Badge>
                        </TableCell>
                        <TableCell>
                          <span className={getImpactColor(risk.impact.toString())}>{risk.impact}</span>
                        </TableCell>
                        <TableCell>
                          <span className={getImpactColor(risk.likelihood.toString())}>{risk.likelihood}</span>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            <span className="font-medium">{risk.riskScore}</span>
                            <div
                              className={`h-2 w-8 rounded ${
                                risk.riskScore >= 15
                                  ? "bg-red-500"
                                  : risk.riskScore >= 10
                                    ? "bg-orange-500"
                                    : "bg-green-500"
                              }`}
                            ></div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={getRiskBadgeColor(risk.status)}>{risk.status}</Badge>
                        </TableCell>
                        <TableCell>{risk.owner}</TableCell>
                        <TableCell>{risk.dueDate ? new Date(risk.dueDate).toLocaleDateString() : "-"}</TableCell>
                        <TableCell>
                          <div className="flex space-x-2">
                            <Button variant="ghost" size="sm">
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => handleEditRisk(risk)}>
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => handleDeleteRisk(risk.id)}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="departmental" className="space-y-6">
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle>Risk Distribution by Department</CardTitle>
                <CardDescription>Risk levels across different organizational departments</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    high: { label: "High Risk", color: "#ef4444" },
                    medium: { label: "Medium Risk", color: "#f97316" },
                    low: { label: "Low Risk", color: "#22c55e" },
                  }}
                  className="h-80"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={departmentRiskData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                      <XAxis dataKey="department" stroke="#64748b" />
                      <YAxis stroke="#64748b" />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Bar dataKey="high" stackId="a" fill="#ef4444" radius={[0, 0, 0, 0]} />
                      <Bar dataKey="medium" stackId="a" fill="#f97316" radius={[0, 0, 0, 0]} />
                      <Bar dataKey="low" stackId="a" fill="#22c55e" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {departmentRiskData.map((dept, index) => (
                <Card key={index} className="shadow-sm">
                  <CardHeader>
                    <CardTitle className="text-lg">{dept.department}</CardTitle>
                    <CardDescription>Risk assessment overview</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-sm font-medium">Total Risks:</span>
                        <span className="font-bold text-lg">{dept.total}</span>
                      </div>
                      <div className="space-y-2">
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-red-600">High Priority:</span>
                          <span className="font-medium text-red-600">{dept.high}</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-orange-600">Medium Priority:</span>
                          <span className="font-medium text-orange-600">{dept.medium}</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-green-600">Low Priority:</span>
                          <span className="font-medium text-green-600">{dept.low}</span>
                        </div>
                      </div>
                    </div>
                    <Button className="w-full mt-4 bg-transparent" variant="outline">
                      View Details
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="heatmap" className="space-y-6">
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Target className="h-5 w-5 mr-2 text-red-600" />
                  Risk Heat Map
                </CardTitle>
                <CardDescription>Risk distribution by impact and likelihood</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    count: { label: "Risk Count", color: "#3b82f6" },
                  }}
                  className="h-96"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <ScatterChart data={riskHeatMapData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                      <XAxis
                        type="number"
                        dataKey="impact"
                        domain={[0.5, 5.5]}
                        tickCount={5}
                        tickFormatter={(value) => {
                          const labels = ["", "Very Low", "Low", "Medium", "High", "Very High"]
                          return labels[value] || ""
                        }}
                        stroke="#64748b"
                      />
                      <YAxis
                        type="number"
                        dataKey="likelihood"
                        domain={[0.5, 4.5]}
                        tickCount={4}
                        tickFormatter={(value) => {
                          const labels = ["", "Very Low", "Low", "Medium", "High"]
                          return labels[value] || ""
                        }}
                        stroke="#64748b"
                      />
                      <ZAxis type="number" dataKey="count" range={[50, 400]} />
                      <ChartTooltip
                        content={({ active, payload }) => {
                          if (active && payload && payload.length) {
                            const data = payload[0].payload
                            return (
                              <div className="bg-white p-3 border rounded-lg shadow-lg">
                                <p className="font-medium">{data.label}</p>
                                <p className="text-sm text-slate-600">Risk Count: {data.count}</p>
                              </div>
                            )
                          }
                          return null
                        }}
                      />
                      <Scatter
                        dataKey="count"
                        fill={(entry: any) => {
                          const riskLevel = entry.impact * entry.likelihood
                          if (riskLevel >= 16) return "#dc2626" // High risk - red
                          if (riskLevel >= 9) return "#ea580c" // Medium-high risk - orange
                          if (riskLevel >= 4) return "#ca8a04" // Medium risk - yellow
                          return "#16a34a" // Low risk - green
                        }}
                      />
                    </ScatterChart>
                  </ResponsiveContainer>
                </ChartContainer>

<div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="flex items-center space-x-2">
                    <div className="w-4 h-4 bg-red-600 rounded"></div>
                    <span className="text-sm">Critical Risk (16+)</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <div className="w-4 h-4 bg-orange-600 rounded"></div>
                    <span className="text-sm">High Risk (9-15)</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <div className="w-4 h-4 bg-yellow-600 rounded"></div>
                    <span className="text-sm">Medium Risk (4-8)</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <div className="w-4 h-4 bg-green-600 rounded"></div>
                    <span className="text-sm">Low Risk (1-3)</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="analytics" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle>Risk Trend Analysis</CardTitle>
                  <CardDescription>Risk levels over time</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-64 flex items-center justify-center border-2 border-dashed border-slate-300 rounded-lg bg-slate-50">
                    <p className="text-slate-500">Risk Trend Chart</p>
                  </div>
                </CardContent>
              </Card>

<Card className="shadow-sm">
                <CardHeader>
                  <CardTitle>Risk Velocity</CardTitle>
                  <CardDescription>Rate of risk identification and resolution</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-64 flex items-center justify-center border-2 border-dashed border-slate-300 rounded-lg bg-slate-50">
                    <p className="text-slate-500">Risk Velocity Chart</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

{/* Risk Assessment Modal */}
        <RiskAssessmentModal open={isRiskModalOpen} onOpenChange={setIsRiskModalOpen} initialData={editingRisk} />
      </div>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="__tests__/app.test.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
import { AppProvider } from "@/lib/context/app-context"
import Dashboard from "@/app/page"
import RiskManagement from "@/app/risk-management/page"
import jest from "jest" // Import jest to fix the undeclared variable error

// Mock Next.js router
jest.mock("next/navigation", () => ({
  usePathname: () => "/",
  useRouter: () => ({
    push: jest.fn(),
    replace: jest.fn(),
    prefetch: jest.fn(),
  }),
}))

// Mock Recharts
jest.mock("recharts", () => ({
  ResponsiveContainer: ({ children }: any) => <div data-testid="chart">{children}</div>,
  AreaChart: ({ children }: any) => <div>{children}</div>,
  Area: () => <div />,
  XAxis: () => <div />,
  YAxis: () => <div />,
  CartesianGrid: () => <div />,
  BarChart: ({ children }: any) => <div>{children}</div>,
  Bar: () => <div />,
  LineChart: ({ children }: any) => <div>{children}</div>,
  Line: () => <div />,
  PieChart: ({ children }: any) => <div>{children}</div>,
  Pie: () => <div />,
  Cell: () => <div />,
  ScatterChart: ({ children }: any) => <div>{children}</div>,
  Scatter: () => <div />,
  ZAxis: () => <div />,
}))

const renderWithProvider = (component: React.ReactElement) => {
  return render(<AppProvider>{component}</AppProvider>)
}

describe("Dashboard", () => {
  it("renders dashboard with key metrics", () => {
    renderWithProvider(<Dashboard />)

expect(screen.getByText("Risk & Compliance Dashboard")).toBeInTheDocument()
    expect(screen.getByText("Total Risks")).toBeInTheDocument()
    expect(screen.getByText("Critical Risks")).toBeInTheDocument()
    expect(screen.getByText("Compliance Score")).toBeInTheDocument()
    expect(screen.getByText("Open Incidents")).toBeInTheDocument()
  })

it("opens risk assessment modal when Report Risk is clicked", async () => {
    renderWithProvider(<Dashboard />)

const reportRiskButton = screen.getByText("Report Risk")
    fireEvent.click(reportRiskButton)

await waitFor(() => {
      expect(screen.getByText("New Risk Assessment")).toBeInTheDocument()
    })
  })

it("opens incident report modal when Log Incident is clicked", async () => {
    renderWithProvider(<Dashboard />)

const logIncidentButton = screen.getByText("Log Incident")
    fireEvent.click(logIncidentButton)

await waitFor(() => {
      expect(screen.getByText("New Incident Report")).toBeInTheDocument()
    })
  })
})

describe("Risk Management", () => {
  it("renders risk management page with tabs", () => {
    renderWithProvider(<RiskManagement />)

expect(screen.getByText("Risk Management")).toBeInTheDocument()
    expect(screen.getByText("Enterprise Risk Register")).toBeInTheDocument()
    expect(screen.getByText("Departmental Risks")).toBeInTheDocument()
    expect(screen.getByText("Risk Heat Map")).toBeInTheDocument()
    expect(screen.getByText("Risk Analytics")).toBeInTheDocument()
  })

it("opens new risk assessment modal", async () => {
    renderWithProvider(<RiskManagement />)

const newRiskButton = screen.getByText("New Risk Assessment")
    fireEvent.click(newRiskButton)

await waitFor(() => {
      expect(screen.getByText("New Risk Assessment")).toBeInTheDocument()
    })
  })

it("filters risks based on search term", async () => {
    renderWithProvider(<RiskManagement />)

const searchInput = screen.getByPlaceholderText("Search risks by title, category, or owner...")
    fireEvent.change(searchInput, { target: { value: "security" } })

// The search functionality should filter the displayed risks
    expect(searchInput).toHaveValue("security")
  })
})
[V0_FILE]javascript:file="jest.config.js" isMerged="true"
const nextJest = require("next/jest")

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files
  dir: "./",
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapping: {
    // Handle module aliases (this will be automatically configured for you based on your tsconfig.json paths)
    "^@/(.*)$": "<rootDir>/$1",
  },
  testEnvironment: "jest-environment-jsdom",
  collectCoverageFrom: [
    "app/**/*.{js,jsx,ts,tsx}",
    "components/**/*.{js,jsx,ts,tsx}",
    "lib/**/*.{js,jsx,ts,tsx}",
    "hooks/**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
  transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
[V0_FILE]javascript:file="jest.setup.js" isFixed="true" isQuickEdit="true" isMerged="true"
import jest from "@testing-library/jest-dom"

// Mock IntersectionObserver
global.IntersectionObserver = class IntersectionObserver {
  constructor() {}
  disconnect() {}
  observe() {}
  unobserve() {}
}

// Mock ResizeObserver
global.ResizeObserver = class ResizeObserver {
  constructor() {}
  disconnect() {}
  observe() {}
  unobserve() {}
}

// Mock window.matchMedia
Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
})
[V0_FILE]typescript:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescript:file="app/profile/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { MainLayout } from "@/components/layout/main-layout"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import {
  User,
  Mail,
  MapPin,
  Calendar,
  Shield,
  Award,
  Activity,
  Settings,
  Camera,
  Edit,
  Save,
  Bell,
  Lock,
  Eye,
  TrendingUp,
  Target,
  CheckCircle,
  AlertTriangle,
} from "lucide-react"
import { useState } from "react"
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid, Bar, BarChart } from "recharts"

const activityData = [
  { month: "Jan", risks: 12, compliance: 8, incidents: 3 },
  { month: "Feb", risks: 15, compliance: 12, incidents: 2 },
  { month: "Mar", risks: 8, compliance: 15, incidents: 1 },
  { month: "Apr", risks: 18, compliance: 10, incidents: 4 },
  { month: "May", risks: 22, compliance: 18, incidents: 2 },
  { month: "Jun", risks: 16, compliance: 20, incidents: 1 },
]

const skillsData = [
  { skill: "Risk Assessment", level: 92 },
  { skill: "Compliance Management", level: 88 },
  { skill: "Policy Development", level: 85 },
  { skill: "Incident Response", level: 78 },
  { skill: "Audit Management", level: 82 },
]

export default function ProfilePage() {
  const [isEditing, setIsEditing] = useState(false)
  const [profile, setProfile] = useState({
    name: "John Doe",
    email: "john.doe@company.com",
    phone: "+1 (555) 123-4567",
    location: "New York, NY",
    department: "Risk Management",
    role: "Senior Risk Manager",
    joinDate: "January 2022",
    bio: "Experienced risk management professional with over 8 years in enterprise risk assessment and compliance. Specialized in developing comprehensive risk frameworks and leading cross-functional teams.",
    certifications: ["CRISC", "CISA", "ISO 27001 Lead Auditor"],
    skills: ["Risk Assessment", "Compliance", "Audit", "Policy Development"],
  })

const handleSave = () => {
    setIsEditing(false)
    // Save profile logic here
  }

return (
    <MainLayout>
      <div className="p-6 space-y-6 max-w-7xl mx-auto">
        {/* Profile Header */}
        <div className="relative">
          {/* Cover Image */}
          <div className="h-48 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-2xl relative overflow-hidden">
            <div className="absolute inset-0 bg-black/20" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
            <Button
              variant="ghost"
              size="sm"
              className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white rounded-xl"
            >
              <Camera className="h-4 w-4 mr-2" />
              Change Cover
            </Button>
          </div>

{/* Profile Info */}
          <div className="relative -mt-16 px-6">
            <div className="flex flex-col md:flex-row items-start md:items-end space-y-4 md:space-y-0 md:space-x-6">
              {/* Avatar */}
              <div className="relative">
                <div className="h-32 w-32 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl border-4 border-white">
                  <span className="text-white text-4xl font-bold">JD</span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="absolute -bottom-2 -right-2 bg-white shadow-lg hover:shadow-xl rounded-xl h-8 w-8 p-0"
                >
                  <Camera className="h-4 w-4" />
                </Button>
              </div>

{/* Basic Info */}
              <div className="flex-1 space-y-2">
                <div className="flex items-center space-x-3">
                  <h1 className="text-3xl font-bold text-slate-900 dark:text-white">{profile.name}</h1>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                    {profile.role}
                  </Badge>
                </div>
                <div className="flex flex-wrap items-center gap-4 text-slate-600 dark:text-slate-400">
                  <div className="flex items-center space-x-1">
                    <Mail className="h-4 w-4" />
                    <span>{profile.email}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <MapPin className="h-4 w-4" />
                    <span>{profile.location}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Calendar className="h-4 w-4" />
                    <span>Joined {profile.joinDate}</span>
                  </div>
                </div>
              </div>

{/* Actions */}
              <div className="flex space-x-2">
                <Button
                  variant={isEditing ? "default" : "outline"}
                  onClick={isEditing ? handleSave : () => setIsEditing(true)}
                  className="rounded-xl"
                >
                  {isEditing ? (
                    <>
                      <Save className="h-4 w-4 mr-2" />
                      Save Changes
                    </>
                  ) : (
                    <>
                      <Edit className="h-4 w-4 mr-2" />
                      Edit Profile
                    </>
                  )}
                </Button>
                <Button variant="outline" className="rounded-xl bg-transparent">
                  <Settings className="h-4 w-4 mr-2" />
                  Settings
                </Button>
              </div>
            </div>
          </div>
        </div>

{/* Profile Content */}
        <Tabs defaultValue="overview" className="space-y-6">
          <TabsList className="grid w-full grid-cols-5 bg-white/50 backdrop-blur-sm rounded-xl p-1">
            <TabsTrigger
              value="overview"
              className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              Overview
            </TabsTrigger>
            <TabsTrigger
              value="activity"
              className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              Activity
            </TabsTrigger>
            <TabsTrigger
              value="skills"
              className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              Skills
            </TabsTrigger>
            <TabsTrigger
              value="settings"
              className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              Settings
            </TabsTrigger>
            <TabsTrigger
              value="security"
              className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
            >
              Security
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Personal Information */}
              <div className="lg:col-span-2 space-y-6">
                <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <User className="h-5 w-5 mr-2" />
                      Personal Information
                    </CardTitle>
                    <CardDescription>Manage your personal details and contact information</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name</Label>
                        <Input
                          id="name"
                          value={profile.name}
                          disabled={!isEditing}
                          onChange={(e) => setProfile({ ...profile, name: e.target.value })}
                          className="rounded-xl"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email">Email Address</Label>
                        <Input
                          id="email"
                          type="email"
                          value={profile.email}
                          disabled={!isEditing}
                          onChange={(e) => setProfile({ ...profile, email: e.target.value })}
                          className="rounded-xl"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        <Input
                          id="phone"
                          value={profile.phone}
                          disabled={!isEditing}
                          onChange={(e) => setProfile({ ...profile, phone: e.target.value })}
                          className="rounded-xl"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="location">Location</Label>
                        <Input
                          id="location"
                          value={profile.location}
                          disabled={!isEditing}
                          onChange={(e) => setProfile({ ...profile, location: e.target.value })}
                          className="rounded-xl"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="bio">Bio</Label>
                      <Textarea
                        id="bio"
                        value={profile.bio}
                        disabled={!isEditing}
                        onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
                        className="rounded-xl min-h-[100px]"
                      />
                    </div>
                  </CardContent>
                </Card>

{/* Recent Activity */}
                <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Activity className="h-5 w-5 mr-2" />
                      Recent Activity
                    </CardTitle>
                    <CardDescription>Your recent actions and contributions</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-start space-x-3 p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20">
                        <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                        <div className="flex-1">
                          <p className="text-sm font-medium">Created new risk assessment</p>
                          <p className="text-xs text-slate-500">RSK-2024-001 - Data Security Risk</p>
                          <p className="text-xs text-slate-400 mt-1">2 hours ago</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-3 p-3 rounded-xl bg-green-50/50 dark:bg-green-900/20">
                        <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                        <div className="flex-1">
                          <p className="text-sm font-medium">Completed compliance review</p>
                          <p className="text-xs text-slate-500">ISO 27001 Assessment - Q1 2024</p>
                          <p className="text-xs text-slate-400 mt-1">1 day ago</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-3 p-3 rounded-xl bg-orange-50/50 dark:bg-orange-900/20">
                        <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
                        <div className="flex-1">
                          <p className="text-sm font-medium">Updated security policy</p>
                          <p className="text-xs text-slate-500">Information Security Policy v3.2</p>
                          <p className="text-xs text-slate-400 mt-1">3 days ago</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Sidebar */}
              <div className="space-y-6">
                {/* Quick Stats */}
                <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <TrendingUp className="h-5 w-5 mr-2" />
                      Quick Stats
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <AlertTriangle className="h-4 w-4 text-red-500" />
                        <span className="text-sm">Risks Managed</span>
                      </div>
                      <span className="font-bold text-lg">47</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span className="text-sm">Compliance Score</span>
                      </div>
                      <span className="font-bold text-lg">94%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Target className="h-4 w-4 text-blue-500" />
                        <span className="text-sm">Projects</span>
                      </div>
                      <span className="font-bold text-lg">12</span>
                    </div>
                  </CardContent>
                </Card>

{/* Certifications */}
                <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Award className="h-5 w-5 mr-2" />
                      Certifications
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {profile.certifications.map((cert, index) => (
                        <div
                          key={index}
                          className="flex items-center space-x-3 p-2 rounded-lg bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20"
                        >
                          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <Award className="h-4 w-4 text-white" />
                          </div>
                          <span className="font-medium">{cert}</span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

{/* Skills */}
                <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Shield className="h-5 w-5 mr-2" />
                      Top Skills
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {profile.skills.map((skill, index) => (
                        <Badge
                          key={index}
                          variant="secondary"
                          className="mr-2 mb-2 bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                        >
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

<TabsContent value="activity" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                <CardHeader>
                  <CardTitle>Activity Overview</CardTitle>
                  <CardDescription>Your monthly activity across different areas</CardDescription>
                </CardHeader>
                <CardContent>
                  <ChartContainer
                    config={{
                      risks: { label: "Risks", color: "#ef4444" },
                      compliance: { label: "Compliance", color: "#22c55e" },
                      incidents: { label: "Incidents", color: "#f59e0b" },
                    }}
                    className="h-80"
                  >
                    <ResponsiveContainer width="100%" height="100%">
                      <AreaChart data={activityData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                        <XAxis dataKey="month" stroke="#64748b" />
                        <YAxis stroke="#64748b" />
                        <ChartTooltip content={<ChartTooltipContent />} />
                        <Area
                          type="monotone"
                          dataKey="risks"
                          stackId="1"
                          stroke="#ef4444"
                          fill="#ef4444"
                          fillOpacity={0.6}
                        />
                        <Area
                          type="monotone"
                          dataKey="compliance"
                          stackId="1"
                          stroke="#22c55e"
                          fill="#22c55e"
                          fillOpacity={0.6}
                        />
                        <Area
                          type="monotone"
                          dataKey="incidents"
                          stackId="1"
                          stroke="#f59e0b"
                          fill="#f59e0b"
                          fillOpacity={0.6}
                        />
                      </AreaChart>
                    </ResponsiveContainer>
                  </ChartContainer>
                </CardContent>
              </Card>

<Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                <CardHeader>
                  <CardTitle>Performance Metrics</CardTitle>
                  <CardDescription>Key performance indicators for this quarter</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium">Risk Assessment Completion</span>
                      <span className="text-sm font-bold">92%</span>
                    </div>
                    <Progress value={92} className="h-2" />
                  </div>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium">Compliance Reviews</span>
                      <span className="text-sm font-bold">88%</span>
                    </div>
                    <Progress value={88} className="h-2" />
                  </div>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium">Incident Response Time</span>
                      <span className="text-sm font-bold">95%</span>
                    </div>
                    <Progress value={95} className="h-2" />
                  </div>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium">Policy Updates</span>
                      <span className="text-sm font-bold">78%</span>
                    </div>
                    <Progress value={78} className="h-2" />
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="skills" className="space-y-6">
            <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
              <CardHeader>
                <CardTitle>Skills Assessment</CardTitle>
                <CardDescription>Your proficiency levels across different competencies</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    level: { label: "Proficiency Level", color: "#3b82f6" },
                  }}
                  className="h-80"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={skillsData} layout="horizontal">
                      <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                      <XAxis type="number" domain={[0, 100]} stroke="#64748b" />
                      <YAxis dataKey="skill" type="category" stroke="#64748b" width={150} />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Bar dataKey="level" fill="#3b82f6" radius={4} />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="settings" className="space-y-6">
            <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Bell className="h-5 w-5 mr-2" />
                  Notification Preferences
                </CardTitle>
                <CardDescription>Manage how you receive notifications</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Email Notifications</p>
                    <p className="text-sm text-slate-500">Receive notifications via email</p>
                  </div>
                  <Button variant="outline" size="sm" className="rounded-xl bg-transparent">
                    Configure
                  </Button>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Push Notifications</p>
                    <p className="text-sm text-slate-500">Receive browser push notifications</p>
                  </div>
                  <Button variant="outline" size="sm" className="rounded-xl bg-transparent">
                    Configure
                  </Button>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">SMS Notifications</p>
                    <p className="text-sm text-slate-500">Receive critical alerts via SMS</p>
                  </div>
                  <Button variant="outline" size="sm" className="rounded-xl bg-transparent">
                    Configure
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="security" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Lock className="h-5 w-5 mr-2" />
                    Password & Authentication
                  </CardTitle>
                  <CardDescription>Manage your account security settings</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Button variant="outline" className="w-full justify-start rounded-xl bg-transparent">
                    <Lock className="h-4 w-4 mr-2" />
                    Change Password
                  </Button>
                  <Button variant="outline" className="w-full justify-start rounded-xl bg-transparent">
                    <Shield className="h-4 w-4 mr-2" />
                    Enable Two-Factor Authentication
                  </Button>
                  <Button variant="outline" className="w-full justify-start rounded-xl bg-transparent">
                    <Eye className="h-4 w-4 mr-2" />
                    View Login History
                  </Button>
                </CardContent>
              </Card>

<Card className="bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl card-hover">
                <CardHeader>
                  <CardTitle>Security Status</CardTitle>
                  <CardDescription>Your account security overview</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Password Strength</span>
                    <Badge variant="default" className="bg-green-100 text-green-700">
                      Strong
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Two-Factor Auth</span>
                    <Badge variant="secondary" className="bg-yellow-100 text-yellow-700">
                      Disabled
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Last Login</span>
                    <span className="text-sm text-slate-500">2 hours ago</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Active Sessions</span>
                    <span className="text-sm text-slate-500">3 devices</span>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="app/onboarding/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import {
  User,
  Building,
  Shield,
  CheckCircle,
  ArrowRight,
  ArrowLeft,
  Upload,
  Mail,
  Phone,
  MapPin,
  Briefcase,
  Award,
  Target,
} from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

const steps = [
  {
    id: 1,
    title: "Personal Information",
    description: "Tell us about yourself",
    icon: User,
  },
  {
    id: 2,
    title: "Organization Details",
    description: "Your company information",
    icon: Building,
  },
  {
    id: 3,
    title: "Role & Permissions",
    description: "Define your responsibilities",
    icon: Shield,
  },
  {
    id: 4,
    title: "Preferences",
    description: "Customize your experience",
    icon: Target,
  },
  {
    id: 5,
    title: "Complete Setup",
    description: "Review and finish",
    icon: CheckCircle,
  },
]

export default function OnboardingPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState({
    // Personal Information
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    location: "",
    profileImage: null,

// Organization Details
    companyName: "",
    department: "",
    companySize: "",
    industry: "",
    companyAddress: "",

// Role & Permissions
    jobTitle: "",
    role: "",
    experience: "",
    certifications: [],
    responsibilities: [],

// Preferences
    notifications: {
      email: true,
      push: true,
      sms: false,
    },
    theme: "system",
    language: "en",
    timezone: "",

// Terms
    termsAccepted: false,
    privacyAccepted: false,
    marketingOptIn: false,
  })

const progress = (currentStep / steps.length) * 100

const handleNext = () => {
    if (currentStep < steps.length) {
      setCurrentStep(currentStep + 1)
    }
  }

const handlePrevious = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
    }
  }

const handleComplete = () => {
    // Process onboarding completion
    console.log("Onboarding completed:", formData)
    router.push("/")
  }

const updateFormData = (field: string, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Welcome to QS-GRC!</h2>
              <p className="text-slate-600 dark:text-slate-400">Let's start by getting to know you better</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="firstName">First Name *</Label>
                <Input
                  id="firstName"
                  value={formData.firstName}
                  onChange={(e) => updateFormData("firstName", e.target.value)}
                  className="rounded-xl"
                  placeholder="Enter your first name"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName">Last Name *</Label>
                <Input
                  id="lastName"
                  value={formData.lastName}
                  onChange={(e) => updateFormData("lastName", e.target.value)}
                  className="rounded-xl"
                  placeholder="Enter your last name"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email Address *</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => updateFormData("email", e.target.value)}
                  className="rounded-xl pl-10"
                  placeholder="your.email@company.com"
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="phone">Phone Number</Label>
                <div className="relative">
                  <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                  <Input
                    id="phone"
                    value={formData.phone}
                    onChange={(e) => updateFormData("phone", e.target.value)}
                    className="rounded-xl pl-10"
                    placeholder="+1 (555) 123-4567"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="location">Location</Label>
                <div className="relative">
                  <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                  <Input
                    id="location"
                    value={formData.location}
                    onChange={(e) => updateFormData("location", e.target.value)}
                    className="rounded-xl pl-10"
                    placeholder="City, Country"
                  />
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label>Profile Picture</Label>
              <div className="flex items-center space-x-4">
                <div className="h-16 w-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                  <User className="h-8 w-8 text-white" />
                </div>
                <Button variant="outline" className="rounded-xl bg-transparent">
                  <Upload className="h-4 w-4 mr-2" />
                  Upload Photo
                </Button>
              </div>
            </div>
          </div>
        )

case 2:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Organization Details</h2>
              <p className="text-slate-600 dark:text-slate-400">Tell us about your company</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="companyName">Company Name *</Label>
              <div className="relative">
                <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                <Input
                  id="companyName"
                  value={formData.companyName}
                  onChange={(e) => updateFormData("companyName", e.target.value)}
                  className="rounded-xl pl-10"
                  placeholder="Your Company Name"
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="department">Department *</Label>
                <Select value={formData.department} onValueChange={(value) => updateFormData("department", value)}>
                  <SelectTrigger className="rounded-xl">
                    <SelectValue placeholder="Select department" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="risk-management">Risk Management</SelectItem>
                    <SelectItem value="compliance">Compliance</SelectItem>
                    <SelectItem value="audit">Internal Audit</SelectItem>
                    <SelectItem value="legal">Legal</SelectItem>
                    <SelectItem value="it">IT Security</SelectItem>
                    <SelectItem value="finance">Finance</SelectItem>
                    <SelectItem value="operations">Operations</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="companySize">Company Size</Label>
                <Select value={formData.companySize} onValueChange={(value) => updateFormData("companySize", value)}>
                  <SelectTrigger className="rounded-xl">
                    <SelectValue placeholder="Select company size" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1-10">1-10 employees</SelectItem>
                    <SelectItem value="11-50">11-50 employees</SelectItem>
                    <SelectItem value="51-200">51-200 employees</SelectItem>
                    <SelectItem value="201-1000">201-1000 employees</SelectItem>
                    <SelectItem value="1000+">1000+ employees</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="industry">Industry</Label>
              <Select value={formData.industry} onValueChange={(value) => updateFormData("industry", value)}>
                <SelectTrigger className="rounded-xl">
                  <SelectValue placeholder="Select industry" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="financial-services">Financial Services</SelectItem>
                  <SelectItem value="healthcare">Healthcare</SelectItem>
                  <SelectItem value="technology">Technology</SelectItem>
                  <SelectItem value="manufacturing">Manufacturing</SelectItem>
                  <SelectItem value="retail">Retail</SelectItem>
                  <SelectItem value="energy">Energy</SelectItem>
                  <SelectItem value="government">Government</SelectItem>
                  <SelectItem value="education">Education</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="companyAddress">Company Address</Label>
              <Textarea
                id="companyAddress"
                value={formData.companyAddress}
                onChange={(e) => updateFormData("companyAddress", e.target.value)}
                className="rounded-xl"
                placeholder="Enter company address"
                rows={3}
              />
            </div>
          </div>
        )

case 3:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Role & Permissions</h2>
              <p className="text-slate-600 dark:text-slate-400">Define your role and responsibilities</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="jobTitle">Job Title *</Label>
                <div className="relative">
                  <Briefcase className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                  <Input
                    id="jobTitle"
                    value={formData.jobTitle}
                    onChange={(e) => updateFormData("jobTitle", e.target.value)}
                    className="rounded-xl pl-10"
                    placeholder="e.g., Risk Manager"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="role">System Role *</Label>
                <Select value={formData.role} onValueChange={(value) => updateFormData("role", value)}>
                  <SelectTrigger className="rounded-xl">
                    <SelectValue placeholder="Select your role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="admin">Administrator</SelectItem>
                    <SelectItem value="risk-manager">Risk Manager</SelectItem>
                    <SelectItem value="compliance-officer">Compliance Officer</SelectItem>
                    <SelectItem value="auditor">Auditor</SelectItem>
                    <SelectItem value="analyst">Analyst</SelectItem>
                    <SelectItem value="viewer">Viewer</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="experience">Experience Level</Label>
              <Select value={formData.experience} onValueChange={(value) => updateFormData("experience", value)}>
                <SelectTrigger className="rounded-xl">
                  <SelectValue placeholder="Select experience level" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="entry">Entry Level (0-2 years)</SelectItem>
                  <SelectItem value="mid">Mid Level (3-5 years)</SelectItem>
                  <SelectItem value="senior">Senior Level (6-10 years)</SelectItem>
                  <SelectItem value="expert">Expert Level (10+ years)</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-3">
              <Label>Certifications</Label>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {["CRISC", "CISA", "CISSP", "ISO 27001", "COSO", "SOX", "GDPR", "NIST"].map((cert) => (
                  <div key={cert} className="flex items-center space-x-2">
                    <Checkbox
                      id={cert}
                      checked={formData.certifications.includes(cert)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          updateFormData("certifications", [...formData.certifications, cert])
                        } else {
                          updateFormData(
                            "certifications",
                            formData.certifications.filter((c) => c !== cert),
                          )
                        }
                      }}
                    />
                    <Label htmlFor={cert} className="text-sm">
                      {cert}
                    </Label>
                  </div>
                ))}
              </div>
            </div>

<div className="space-y-3">
              <Label>Primary Responsibilities</Label>
              <div className="space-y-2">
                {[
                  "Risk Assessment & Analysis",
                  "Compliance Monitoring",
                  "Policy Development",
                  "Incident Management",
                  "Audit Coordination",
                  "Reporting & Analytics",
                ].map((responsibility) => (
                  <div key={responsibility} className="flex items-center space-x-2">
                    <Checkbox
                      id={responsibility}
                      checked={formData.responsibilities.includes(responsibility)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          updateFormData("responsibilities", [...formData.responsibilities, responsibility])
                        } else {
                          updateFormData(
                            "responsibilities",
                            formData.responsibilities.filter((r) => r !== responsibility),
                          )
                        }
                      }}
                    />
                    <Label htmlFor={responsibility} className="text-sm">
                      {responsibility}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )

case 4:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Preferences</h2>
              <p className="text-slate-600 dark:text-slate-400">Customize your experience</p>
            </div>

<Card className="bg-white/50 backdrop-blur-sm border-white/20">
              <CardHeader>
                <CardTitle className="text-lg">Notification Preferences</CardTitle>
                <CardDescription>Choose how you'd like to receive notifications</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Email Notifications</p>
                    <p className="text-sm text-slate-500">Receive updates via email</p>
                  </div>
                  <Checkbox
                    checked={formData.notifications.email}
                    onCheckedChange={(checked) =>
                      updateFormData("notifications", { ...formData.notifications, email: checked })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Push Notifications</p>
                    <p className="text-sm text-slate-500">Browser notifications for urgent items</p>
                  </div>
                  <Checkbox
                    checked={formData.notifications.push}
                    onCheckedChange={(checked) =>
                      updateFormData("notifications", { ...formData.notifications, push: checked })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">SMS Notifications</p>
                    <p className="text-sm text-slate-500">Text messages for critical alerts</p>
                  </div>
                  <Checkbox
                    checked={formData.notifications.sms}
                    onCheckedChange={(checked) =>
                      updateFormData("notifications", { ...formData.notifications, sms: checked })
                    }
                  />
                </div>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="theme">Theme Preference</Label>
                <Select value={formData.theme} onValueChange={(value) => updateFormData("theme", value)}>
                  <SelectTrigger className="rounded-xl">
                    <SelectValue placeholder="Select theme" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">Light</SelectItem>
                    <SelectItem value="dark">Dark</SelectItem>
                    <SelectItem value="system">System</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="language">Language</Label>
                <Select value={formData.language} onValueChange={(value) => updateFormData("language", value)}>
                  <SelectTrigger className="rounded-xl">
                    <SelectValue placeholder="Select language" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="en">English</SelectItem>
                    <SelectItem value="es">Spanish</SelectItem>
                    <SelectItem value="fr">French</SelectItem>
                    <SelectItem value="de">German</SelectItem>
                    <SelectItem value="zh">Chinese</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="timezone">Timezone</Label>
              <Select value={formData.timezone} onValueChange={(value) => updateFormData("timezone", value)}>
                <SelectTrigger className="rounded-xl">
                  <SelectValue placeholder="Select timezone" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="UTC-8">Pacific Time (UTC-8)</SelectItem>
                  <SelectItem value="UTC-7">Mountain Time (UTC-7)</SelectItem>
                  <SelectItem value="UTC-6">Central Time (UTC-6)</SelectItem>
                  <SelectItem value="UTC-5">Eastern Time (UTC-5)</SelectItem>
                  <SelectItem value="UTC+0">GMT (UTC+0)</SelectItem>
                  <SelectItem value="UTC+1">Central European Time (UTC+1)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )

case 5:
        return (
          <div className="space-y-6">
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Complete Setup</h2>
              <p className="text-slate-600 dark:text-slate-400">Review your information and finish setup</p>
            </div>

<Card className="bg-white/50 backdrop-blur-sm border-white/20">
              <CardHeader>
                <CardTitle>Profile Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm text-slate-500">Name</p>
                    <p className="font-medium">
                      {formData.firstName} {formData.lastName}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Email</p>
                    <p className="font-medium">{formData.email}</p>
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Company</p>
                    <p className="font-medium">{formData.companyName}</p>
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Role</p>
                    <p className="font-medium">{formData.jobTitle}</p>
                  </div>
                </div>

{formData.certifications.length > 0 && (
                  <div>
                    <p className="text-sm text-slate-500 mb-2">Certifications</p>
                    <div className="flex flex-wrap gap-2">
                      {formData.certifications.map((cert) => (
                        <Badge key={cert} variant="secondary" className="bg-blue-100 text-blue-700">
                          <Award className="h-3 w-3 mr-1" />
                          {cert}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

<Card className="bg-white/50 backdrop-blur-sm border-white/20">
              <CardHeader>
                <CardTitle>Terms & Conditions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-start space-x-2">
                  <Checkbox
                    id="terms"
                    checked={formData.termsAccepted}
                    onCheckedChange={(checked) => updateFormData("termsAccepted", checked)}
                  />
                  <Label htmlFor="terms" className="text-sm leading-relaxed">
                    I agree to the{" "}
                    <a href="#" className="text-blue-600 hover:underline">
                      Terms of Service
                    </a>{" "}
                    and understand the platform's usage policies.
                  </Label>
                </div>
                <div className="flex items-start space-x-2">
                  <Checkbox
                    id="privacy"
                    checked={formData.privacyAccepted}
                    onCheckedChange={(checked) => updateFormData("privacyAccepted", checked)}
                  />
                  <Label htmlFor="privacy" className="text-sm leading-relaxed">
                    I acknowledge that I have read and understood the{" "}
                    <a href="#" className="text-blue-600 hover:underline">
                      Privacy Policy
                    </a>
                    .
                  </Label>
                </div>
                <div className="flex items-start space-x-2">
                  <Checkbox
                    id="marketing"
                    checked={formData.marketingOptIn}
                    onCheckedChange={(checked) => updateFormData("marketingOptIn", checked)}
                  />
                  <Label htmlFor="marketing" className="text-sm leading-relaxed">
                    I would like to receive product updates and marketing communications (optional).
                  </Label>
                </div>
              </CardContent>
            </Card>
          </div>
        )

default:
        return null
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center p-4">
      <div className="w-full max-w-4xl">
        {/* Progress Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center space-x-2">
              <div className="h-10 w-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <Shield className="h-6 w-6 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-slate-900 dark:text-white">QS-GRC Setup</h1>
                <p className="text-sm text-slate-500 dark:text-slate-400">
                  Step {currentStep} of {steps.length}
                </p>
              </div>
            </div>
            <div className="text-right">
              <p className="text-sm font-medium text-slate-900 dark:text-white">{Math.round(progress)}% Complete</p>
            </div>
          </div>

{/* Step Indicators */}
          <div className="flex items-center justify-between">
            {steps.map((step, index) => {
              const Icon = step.icon
              const isActive = currentStep === step.id
              const isCompleted = currentStep > step.id

return (
                <div key={step.id} className="flex flex-col items-center space-y-2">
                  <div
                    className={`
                    h-12 w-12 rounded-xl flex items-center justify-center transition-all duration-200
                    ${
                      isActive
                        ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg"
                        : isCompleted
                          ? "bg-green-500 text-white"
                          : "bg-white/50 text-slate-400 border border-slate-200"
                    }
                  `}
                  >
                    {isCompleted ? <CheckCircle className="h-6 w-6" /> : <Icon className="h-6 w-6" />}
                  </div>
                  <div className="text-center">
                    <p
                      className={`text-xs font-medium ${isActive ? "text-slate-900 dark:text-white" : "text-slate-500"}`}
                    >
                      {step.title}
                    </p>
                    <p className="text-xs text-slate-400 hidden md:block">{step.description}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>

{/* Main Content */}
        <Card className="bg-white/50 backdrop-blur-xl border-white/20 shadow-2xl rounded-2xl">
          <CardContent className="p-8">{renderStepContent()}</CardContent>
        </Card>

{/* Navigation */}
        <div className="flex items-center justify-between mt-6">
          <Button
            variant="outline"
            onClick={handlePrevious}
            disabled={currentStep === 1}
            className="rounded-xl bg-white/50 backdrop-blur-sm border-white/20"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Previous
          </Button>

<div className="flex space-x-2">
            {currentStep < steps.length ? (
              <Button
                onClick={handleNext}
                className="rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
              >
                Next Step
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            ) : (
              <Button
                onClick={handleComplete}
                disabled={!formData.termsAccepted || !formData.privacyAccepted}
                className="rounded-xl bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700"
              >
                Complete Setup
                <CheckCircle className="h-4 w-4 ml-2" />
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/search/smart-search.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Search, Filter, Clock, TrendingUp, AlertTriangle, FileText, Users, Building, Zap, Mic, X } from "lucide-react"
import { cn } from "@/lib/utils"

interface SearchResult {
  id: string
  title: string
  type: "risk" | "policy" | "incident" | "user" | "report"
  description: string
  severity?: "critical" | "high" | "medium" | "low"
  lastUpdated: string
  category: string
  url: string
}

interface SearchSuggestion {
  query: string
  type: "recent" | "trending" | "ai-suggested"
  count?: number
}

const mockSearchResults: SearchResult[] = [
  {
    id: "1",
    title: "Data Breach Risk Assessment",
    type: "risk",
    description: "Critical cybersecurity risk requiring immediate attention",
    severity: "critical",
    lastUpdated: "2 hours ago",
    category: "Cybersecurity",
    url: "/risks/1",
  },
  {
    id: "2",
    title: "GDPR Compliance Policy",
    type: "policy",
    description: "Updated privacy policy for European operations",
    lastUpdated: "1 day ago",
    category: "Privacy",
    url: "/policies/2",
  },
  {
    id: "3",
    title: "Payment System Incident",
    type: "incident",
    description: "Service disruption affecting customer transactions",
    severity: "high",
    lastUpdated: "3 hours ago",
    category: "Operations",
    url: "/incidents/3",
  },
]

const mockSuggestions: SearchSuggestion[] = [
  { query: "high risk cybersecurity", type: "recent" },
  { query: "compliance audit 2024", type: "recent" },
  { query: "data breach incidents", type: "trending", count: 12 },
  { query: "Show me overdue risk assessments", type: "ai-suggested" },
  { query: "Find policies updated this month", type: "ai-suggested" },
]

export function SmartSearch() {
  const [isOpen, setIsOpen] = useState(false)
  const [query, setQuery] = useState("")
  const [results, setResults] = useState<SearchResult[]>([])
  const [suggestions, setSuggestions] = useState<SearchSuggestion[]>(mockSuggestions)
  const [isListening, setIsListening] = useState(false)
  const [filters, setFilters] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

// Simulate AI-powered search
  useEffect(() => {
    if (query.length > 2) {
      setIsLoading(true)
      const timer = setTimeout(() => {
        const filteredResults = mockSearchResults.filter(
          (result) =>
            result.title.toLowerCase().includes(query.toLowerCase()) ||
            result.description.toLowerCase().includes(query.toLowerCase()) ||
            result.category.toLowerCase().includes(query.toLowerCase()),
        )
        setResults(filteredResults)
        setIsLoading(false)
      }, 300)
      return () => clearTimeout(timer)
    } else {
      setResults([])
    }
  }, [query])

// Voice search functionality
  const startVoiceSearch = () => {
    if ("webkitSpeechRecognition" in window) {
      const recognition = new (window as any).webkitSpeechRecognition()
      recognition.continuous = false
      recognition.interimResults = false
      recognition.lang = "en-US"

recognition.onstart = () => setIsListening(true)
      recognition.onend = () => setIsListening(false)
      recognition.onresult = (event: any) => {
        const transcript = event.results[0][0].transcript
        setQuery(transcript)
        setIsOpen(true)
      }

recognition.start()
    }
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "risk":
        return <AlertTriangle className="h-4 w-4" />
      case "policy":
        return <FileText className="h-4 w-4" />
      case "incident":
        return <TrendingUp className="h-4 w-4" />
      case "user":
        return <Users className="h-4 w-4" />
      case "report":
        return <Building className="h-4 w-4" />
      default:
        return <Search className="h-4 w-4" />
    }
  }

const getSeverityColor = (severity?: string) => {
    switch (severity) {
      case "critical":
        return "bg-red-500"
      case "high":
        return "bg-orange-500"
      case "medium":
        return "bg-yellow-500"
      case "low":
        return "bg-green-500"
      default:
        return "bg-gray-500"
    }
  }

const addFilter = (filter: string) => {
    if (!filters.includes(filter)) {
      setFilters([...filters, filter])
    }
  }

const removeFilter = (filter: string) => {
    setFilters(filters.filter((f) => f !== filter))
  }

return (
    <div className="relative w-full max-w-2xl">
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <PopoverTrigger asChild>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-5 w-5" />
            <Input
              ref={inputRef}
              placeholder="Search risks, policies, incidents... or try 'Show me critical risks'"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onFocus={() => setIsOpen(true)}
              className={cn(
                "pl-12 pr-20 h-12 text-base rounded-2xl transition-all duration-300",
                "bg-white/20 backdrop-blur-sm border-white/30 focus:bg-white/30 focus:border-blue-300/50",
                "dark:bg-slate-800/20 dark:border-slate-600/30 dark:focus:bg-slate-800/30",
                isOpen && "ring-2 ring-blue-500/20",
              )}
            />
            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center space-x-2">
              <Button
                variant="ghost"
                size="sm"
                onClick={startVoiceSearch}
                className={cn(
                  "h-8 w-8 p-0 rounded-lg transition-all duration-200",
                  isListening && "bg-red-500 text-white animate-pulse",
                )}
              >
                <Mic className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0 rounded-lg">
                <Filter className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </PopoverTrigger>

{/* Active Filters */}
            {filters.length > 0 && (
              <div className="px-4 py-2 border-b border-white/10">
                <div className="flex flex-wrap gap-2">
                  {filters.map((filter) => (
                    <Badge
                      key={filter}
                      variant="secondary"
                      className="bg-blue-100 text-blue-700 hover:bg-blue-200 cursor-pointer"
                      onClick={() => removeFilter(filter)}
                    >
                      {filter}
                      <X className="h-3 w-3 ml-1" />
                    </Badge>
                  ))}
                </div>
              </div>
            )}

<CommandList className="max-h-96">
              {query.length === 0 && (
                <>
                  <CommandGroup heading="Recent Searches">
                    {suggestions
                      .filter((s) => s.type === "recent")
                      .map((suggestion, index) => (
                        <CommandItem
                          key={index}
                          onSelect={() => setQuery(suggestion.query)}
                          className="flex items-center space-x-3 p-3 hover:bg-white/20 rounded-lg m-1"
                        >
                          <Clock className="h-4 w-4 text-slate-400" />
                          <span>{suggestion.query}</span>
                        </CommandItem>
                      ))}
                  </CommandGroup>

<CommandGroup heading="Trending">
                    {suggestions
                      .filter((s) => s.type === "trending")
                      .map((suggestion, index) => (
                        <CommandItem
                          key={index}
                          onSelect={() => setQuery(suggestion.query)}
                          className="flex items-center justify-between p-3 hover:bg-white/20 rounded-lg m-1"
                        >
                          <div className="flex items-center space-x-3">
                            <TrendingUp className="h-4 w-4 text-orange-500" />
                            <span>{suggestion.query}</span>
                          </div>
                          {suggestion.count && (
                            <Badge variant="outline" className="bg-orange-50 text-orange-700">
                              {suggestion.count}
                            </Badge>
                          )}
                        </CommandItem>
                      ))}
                  </CommandGroup>

<CommandGroup heading="AI Suggestions">
                    {suggestions
                      .filter((s) => s.type === "ai-suggested")
                      .map((suggestion, index) => (
                        <CommandItem
                          key={index}
                          onSelect={() => setQuery(suggestion.query)}
                          className="flex items-center space-x-3 p-3 hover:bg-white/20 rounded-lg m-1"
                        >
                          <Zap className="h-4 w-4 text-purple-500" />
                          <span className="text-purple-700 dark:text-purple-300">{suggestion.query}</span>
                        </CommandItem>
                      ))}
                  </CommandGroup>
                </>
              )}

{query.length > 0 && (
                <>
                  {isLoading ? (
                    <div className="p-4 space-y-3">
                      {[...Array(3)].map((_, i) => (
                        <div key={i} className="flex items-center space-x-3">
                          <div className="w-8 h-8 bg-slate-200 rounded-lg animate-pulse" />
                          <div className="flex-1 space-y-2">
                            <div className="h-4 bg-slate-200 rounded animate-pulse" />
                            <div className="h-3 bg-slate-100 rounded animate-pulse w-2/3" />
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : results.length > 0 ? (
                    <CommandGroup heading={`Results (${results.length})`}>
                      {results.map((result) => (
                        <CommandItem
                          key={result.id}
                          onSelect={() => (window.location.href = result.url)}
                          className="p-4 hover:bg-white/20 rounded-lg m-1 cursor-pointer"
                        >
                          <div className="flex items-start space-x-4 w-full">
                            <div
                              className={cn(
                                "flex items-center justify-center w-10 h-10 rounded-xl",
                                result.type === "risk" && "bg-red-100 text-red-600",
                                result.type === "policy" && "bg-blue-100 text-blue-600",
                                result.type === "incident" && "bg-orange-100 text-orange-600",
                              )}
                            >
                              {getTypeIcon(result.type)}
                            </div>
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center space-x-2 mb-1">
                                <h4 className="font-semibold text-slate-900 dark:text-white truncate">
                                  {result.title}
                                </h4>
                                {result.severity && (
                                  <div className={cn("w-2 h-2 rounded-full", getSeverityColor(result.severity))} />
                                )}
                              </div>
                              <p className="text-sm text-slate-600 dark:text-slate-400 line-clamp-2">
                                {result.description}
                              </p>
                              <div className="flex items-center space-x-3 mt-2">
                                <Badge variant="outline" className="text-xs">
                                  {result.category}
                                </Badge>
                                <span className="text-xs text-slate-400">{result.lastUpdated}</span>
                              </div>
                            </div>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  ) : (
                    <CommandEmpty className="p-6 text-center">
                      <div className="space-y-3">
                        <Search className="h-12 w-12 text-slate-300 mx-auto" />
                        <div>
                          <h3 className="font-medium text-slate-900 dark:text-white">No results found</h3>
                          <p className="text-sm text-slate-500 mt-1">
                            Try adjusting your search or using different keywords
                          </p>
                        </div>
                        <div className="flex flex-wrap gap-2 justify-center">
                          <Button variant="outline" size="sm" onClick={() => addFilter("risks")} className="text-xs">
                            Search in Risks
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => addFilter("policies")} className="text-xs">
                            Search in Policies
                          </Button>
                        </div>
                      </div>
                    </CommandEmpty>
                  )}
                </>
              )}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescript:file="components/charts/risk-heatmap.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { AlertTriangle, TrendingUp, Download, Maximize2, RefreshCw, Eye, BarChart3 } from "lucide-react"
import { cn } from "@/lib/utils"

interface RiskData {
  id: string
  title: string
  category: string
  department: string
  probability: number // 1-5
  impact: number // 1-5
  riskScore: number
  status: "open" | "mitigated" | "closed"
  owner: string
  lastUpdated: string
  trend: "increasing" | "stable" | "decreasing"
  description: string
}

const mockRiskData: RiskData[] = [
  {
    id: "R001",
    title: "Data Breach",
    category: "Cybersecurity",
    department: "IT",
    probability: 4,
    impact: 5,
    riskScore: 20,
    status: "open",
    owner: "John Smith",
    lastUpdated: "2024-01-15",
    trend: "increasing",
    description: "Potential unauthorized access to customer data",
  },
  {
    id: "R002",
    title: "Regulatory Non-compliance",
    category: "Compliance",
    department: "Legal",
    probability: 3,
    impact: 4,
    riskScore: 12,
    status: "open",
    owner: "Sarah Johnson",
    lastUpdated: "2024-01-14",
    trend: "stable",
    description: "Risk of GDPR violations in data processing",
  },
  {
    id: "R003",
    title: "Supply Chain Disruption",
    category: "Operational",
    department: "Operations",
    probability: 2,
    impact: 4,
    riskScore: 8,
    status: "mitigated",
    owner: "Mike Davis",
    lastUpdated: "2024-01-13",
    trend: "decreasing",
    description: "Potential delays in critical supplier deliveries",
  },
  {
    id: "R004",
    title: "Market Volatility",
    category: "Financial",
    department: "Finance",
    probability: 5,
    impact: 3,
    riskScore: 15,
    status: "open",
    owner: "Lisa Chen",
    lastUpdated: "2024-01-12",
    trend: "increasing",
    description: "Currency fluctuations affecting international operations",
  },
  {
    id: "R005",
    title: "Key Personnel Loss",
    category: "Strategic",
    department: "HR",
    probability: 2,
    impact: 3,
    riskScore: 6,
    status: "open",
    owner: "David Wilson",
    lastUpdated: "2024-01-11",
    trend: "stable",
    description: "Risk of losing critical team members",
  },
]

export function RiskHeatmap() {
  const [selectedRisk, setSelectedRisk] = useState<RiskData | null>(null)
  const [filterCategory, setFilterCategory] = useState<string>("all")
  const [filterDepartment, setFilterDepartment] = useState<string>("all")
  const [viewMode, setViewMode] = useState<"heatmap" | "list" | "matrix">("heatmap")
  const [isFullscreen, setIsFullscreen] = useState(false)

const filteredRisks = useMemo(() => {
    return mockRiskData.filter((risk) => {
      const categoryMatch = filterCategory === "all" || risk.category === filterCategory
      const departmentMatch = filterDepartment === "all" || risk.department === filterDepartment
      return categoryMatch && departmentMatch
    })
  }, [filterCategory, filterDepartment])

const categories = [...new Set(mockRiskData.map((r) => r.category))]
  const departments = [...new Set(mockRiskData.map((r) => r.department))]

const getRiskColor = (riskScore: number) => {
    if (riskScore >= 16) return "bg-red-500"
    if (riskScore >= 12) return "bg-orange-500"
    if (riskScore >= 8) return "bg-yellow-500"
    return "bg-green-500"
  }

const getRiskLevel = (riskScore: number) => {
    if (riskScore >= 16) return "Critical"
    if (riskScore >= 12) return "High"
    if (riskScore >= 8) return "Medium"
    return "Low"
  }

const getTrendIcon = (trend: string) => {
    switch (trend) {
      case "increasing":
        return <TrendingUp className="h-3 w-3 text-red-500" />
      case "decreasing":
        return <TrendingUp className="h-3 w-3 text-green-500 rotate-180" />
      default:
        return <div className="h-3 w-3 bg-gray-400 rounded-full" />
    }
  }

const HeatmapView = () => (
    <div className="space-y-6">
      {/* Risk Matrix */}
      <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
        <div className="grid grid-cols-6 gap-2">
          {/* Headers */}
          <div className="col-span-1"></div>
          {[1, 2, 3, 4, 5].map((impact) => (
            <div key={impact} className="text-center text-sm font-medium text-slate-600 dark:text-slate-400 p-2">
              Impact {impact}
            </div>
          ))}

{/* Probability rows */}
          {[5, 4, 3, 2, 1].map((probability) => (
            <div key={probability} className="contents">
              <div className="text-sm font-medium text-slate-600 dark:text-slate-400 p-2 flex items-center">
                Prob {probability}
              </div>
              {[1, 2, 3, 4, 5].map((impact) => {
                const cellRisks = filteredRisks.filter((r) => r.probability === probability && r.impact === impact)
                const cellScore = probability * impact

return (
                  <TooltipProvider key={`${probability}-${impact}`}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <div
                          className={cn(
                            "aspect-square rounded-xl border-2 border-white/20 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg",
                            "flex items-center justify-center relative",
                            cellScore >= 16 && "bg-red-500/20 hover:bg-red-500/30",
                            cellScore >= 12 && cellScore < 16 && "bg-orange-500/20 hover:bg-orange-500/30",
                            cellScore >= 8 && cellScore < 12 && "bg-yellow-500/20 hover:bg-yellow-500/30",
                            cellScore < 8 && "bg-green-500/20 hover:bg-green-500/30",
                          )}
                          onClick={() => cellRisks.length > 0 && setSelectedRisk(cellRisks[0])}
                        >
                          {cellRisks.length > 0 && (
                            <>
                              <span className="text-lg font-bold text-slate-900 dark:text-white">
                                {cellRisks.length}
                              </span>
                              {cellRisks.length > 1 && (
                                <Badge
                                  variant="secondary"
                                  className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs"
                                >
                                  +
                                </Badge>
                              )}
                            </>
                          )}
                        </div>
                      </TooltipTrigger>
                      <TooltipContent className="bg-white/90 backdrop-blur-sm border-white/20">
                        <div className="space-y-2">
                          <p className="font-semibold">Risk Score: {cellScore}</p>
                          <p className="text-sm">Risks: {cellRisks.length}</p>
                          {cellRisks.slice(0, 3).map((risk) => (
                            <p key={risk.id} className="text-xs text-slate-600">
                              {risk.title}
                            </p>
                          ))}
                          {cellRisks.length > 3 && (
                            <p className="text-xs text-slate-500">+{cellRisks.length - 3} more...</p>
                          )}
                        </div>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                )
              })}
            </div>
          ))}
        </div>
      </div>

{/* Risk Legend */}
      <div className="flex items-center justify-center space-x-6">
        {[
          { level: "Critical", color: "bg-red-500", range: "16-25" },
          { level: "High", color: "bg-orange-500", range: "12-15" },
          { level: "Medium", color: "bg-yellow-500", range: "8-11" },
          { level: "Low", color: "bg-green-500", range: "1-7" },
        ].map((item) => (
          <div key={item.level} className="flex items-center space-x-2">
            <div className={cn("w-4 h-4 rounded", item.color)} />
            <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
              {item.level} ({item.range})
            </span>
          </div>
        ))}
      </div>
    </div>
  )

const ListView = () => (
    <div className="space-y-4">
      {filteredRisks.map((risk) => (
        <Card
          key={risk.id}
          className={cn(
            "bg-white/10 backdrop-blur-sm border-white/20 cursor-pointer transition-all duration-200 hover:bg-white/20 hover:scale-[1.02]",
            selectedRisk?.id === risk.id && "ring-2 ring-blue-500/50",
          )}
          onClick={() => setSelectedRisk(risk)}
        >
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <div className={cn("w-3 h-3 rounded-full", getRiskColor(risk.riskScore))} />
                <div>
                  <h4 className="font-semibold text-slate-900 dark:text-white">{risk.title}</h4>
                  <p className="text-sm text-slate-600 dark:text-slate-400">{risk.description}</p>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <Badge variant="outline" className="bg-white/20">
                  {getRiskLevel(risk.riskScore)}
                </Badge>
                <div className="text-right">
                  <p className="text-sm font-medium text-slate-900 dark:text-white">Score: {risk.riskScore}</p>
                  <div className="flex items-center space-x-1">
                    {getTrendIcon(risk.trend)}
                    <span className="text-xs text-slate-500">{risk.trend}</span>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )

return (
    <Card
      className={cn(
        "bg-white/50 backdrop-blur-sm border-white/20 shadow-xl rounded-2xl transition-all duration-300",
        isFullscreen && "fixed inset-4 z-50",
      )}
    >
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center text-xl">
              <BarChart3 className="h-6 w-6 mr-3 text-purple-600" />
              Risk Heatmap
            </CardTitle>
            <CardDescription>Interactive risk assessment matrix with real-time updates</CardDescription>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" className="bg-white/20">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
            <Button variant="outline" size="sm" className="bg-white/20">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
            <Button variant="outline" size="sm" onClick={() => setIsFullscreen(!isFullscreen)} className="bg-white/20">
              <Maximize2 className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Filters */}
        <div className="flex items-center space-x-4 pt-4">
          <Select value={filterCategory} onValueChange={setFilterCategory}>
            <SelectTrigger className="w-48 bg-white/20 border-white/30">
              <SelectValue placeholder="Filter by category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Categories</SelectItem>
              {categories.map((category) => (
                <SelectItem key={category} value={category}>
                  {category}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<Select value={filterDepartment} onValueChange={setFilterDepartment}>
            <SelectTrigger className="w-48 bg-white/20 border-white/30">
              <SelectValue placeholder="Filter by department" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Departments</SelectItem>
              {departments.map((department) => (
                <SelectItem key={department} value={department}>
                  {department}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<div className="flex items-center space-x-2 ml-auto">
            <Button
              variant={viewMode === "heatmap" ? "default" : "outline"}
              size="sm"
              onClick={() => setViewMode("heatmap")}
              className="bg-white/20"
            >
              <BarChart3 className="h-4 w-4 mr-2" />
              Matrix
            </Button>
            <Button
              variant={viewMode === "list" ? "default" : "outline"}
              size="sm"
              onClick={() => setViewMode("list")}
              className="bg-white/20"
            >
              <Eye className="h-4 w-4 mr-2" />
              List
            </Button>
          </div>
        </div>
      </CardHeader>

<CardContent>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">{viewMode === "heatmap" ? <HeatmapView /> : <ListView />}</div>

{/* Risk Details Panel */}
          <div className="space-y-4">
            {selectedRisk ? (
              <Card className="bg-white/20 backdrop-blur-sm border-white/30">
                <CardHeader>
                  <CardTitle className="text-lg">{selectedRisk.title}</CardTitle>
                  <div className="flex items-center space-x-2">
                    <Badge className={cn("text-white", getRiskColor(selectedRisk.riskScore))}>
                      {getRiskLevel(selectedRisk.riskScore)}
                    </Badge>
                    <Badge variant="outline" className="bg-white/20">
                      {selectedRisk.category}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-slate-600 dark:text-slate-400">{selectedRisk.description}</p>

<div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <p className="font-medium text-slate-900 dark:text-white">Risk Score</p>
                      <p className="text-slate-600 dark:text-slate-400">{selectedRisk.riskScore}</p>
                    </div>
                    <div>
                      <p className="font-medium text-slate-900 dark:text-white">Status</p>
                      <p className="text-slate-600 dark:text-slate-400 capitalize">{selectedRisk.status}</p>
                    </div>
                    <div>
                      <p className="font-medium text-slate-900 dark:text-white">Owner</p>
                      <p className="text-slate-600 dark:text-slate-400">{selectedRisk.owner}</p>
                    </div>
                    <div>
                      <p className="font-medium text-slate-900 dark:text-white">Department</p>
                      <p className="text-slate-600 dark:text-slate-400">{selectedRisk.department}</p>
                    </div>
                  </div>

<div className="flex items-center justify-between pt-4 border-t border-white/10">
                    <div className="flex items-center space-x-2">
                      {getTrendIcon(selectedRisk.trend)}
                      <span className="text-sm text-slate-600 dark:text-slate-400 capitalize">
                        {selectedRisk.trend}
                      </span>
                    </div>
                    <span className="text-xs text-slate-500">Updated {selectedRisk.lastUpdated}</span>
                  </div>

<div className="space-y-2 pt-4">
                    <Button className="w-full bg-gradient-to-r from-blue-500 to-purple-600">View Details</Button>
                    <Button variant="outline" className="w-full bg-white/20">
                      Add Mitigation
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <Card className="bg-white/20 backdrop-blur-sm border-white/30">
                <CardContent className="p-6 text-center">
                  <AlertTriangle className="h-12 w-12 text-slate-400 mx-auto mb-4" />
                  <h3 className="font-medium text-slate-900 dark:text-white mb-2">Select a Risk</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-400">
                    Click on a risk in the matrix or list to view detailed information
                  </p>
                </CardContent>
              </Card>
            )}

{/* Quick Stats */}
            <Card className="bg-white/20 backdrop-blur-sm border-white/30">
              <CardHeader>
                <CardTitle className="text-lg">Quick Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {[
                  { label: "Total Risks", value: filteredRisks.length, color: "text-blue-600" },
                  {
                    label: "Critical",
                    value: filteredRisks.filter((r) => r.riskScore >= 16).length,
                    color: "text-red-600",
                  },
                  {
                    label: "High",
                    value: filteredRisks.filter((r) => r.riskScore >= 12 && r.riskScore < 16).length,
                    color: "text-orange-600",
                  },
                  {
                    label: "Open",
                    value: filteredRisks.filter((r) => r.status === "open").length,
                    color: "text-yellow-600",
                  },
                ].map((stat) => (
                  <div key={stat.label} className="flex items-center justify-between">
                    <span className="text-sm text-slate-600 dark:text-slate-400">{stat.label}</span>
                    <span className={cn("font-bold", stat.color)}>{stat.value}</span>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/dashboard/role-based-dashboard.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import {
  AlertTriangle,
  Clock,
  TrendingUp,
  FileText,
  Shield,
  BarChart3,
  Target,
  Calendar,
  Bell,
  Settings,
} from "lucide-react"
import { Area, AreaChart, Line, LineChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid } from "recharts"
import { cn } from "@/lib/utils"

interface UserRole {
  id: string
  name: string
  permissions: string[]
  dashboardConfig: DashboardConfig
}

interface DashboardConfig {
  layout: "executive" | "operational" | "analytical"
  widgets: Widget[]
  quickActions: QuickAction[]
  kpis: KPI[]
}

interface Widget {
  id: string
  title: string
  type: "chart" | "metric" | "list" | "calendar"
  size: "small" | "medium" | "large"
  data: any
  priority: number
}

interface QuickAction {
  id: string
  label: string
  icon: React.ReactNode
  color: string
  action: () => void
}

interface KPI {
  id: string
  label: string
  value: number
  target: number
  trend: "up" | "down" | "stable"
  format: "number" | "percentage" | "currency"
}

const userRoles: Record<string, UserRole> = {
  "risk-manager": {
    id: "risk-manager",
    name: "Risk Manager",
    permissions: ["view-risks", "create-risks", "edit-risks", "approve-mitigations"],
    dashboardConfig: {
      layout: "analytical",
      widgets: [
        {
          id: "risk-heatmap",
          title: "Risk Portfolio Heatmap",
          type: "chart",
          size: "large",
          data: {},
          priority: 1,
        },
        {
          id: "risk-trends",
          title: "Risk Trends",
          type: "chart",
          size: "medium",
          data: {},
          priority: 2,
        },
        {
          id: "pending-assessments",
          title: "Pending Assessments",
          type: "list",
          size: "medium",
          data: {},
          priority: 3,
        },
      ],
      quickActions: [
        {
          id: "create-risk",
          label: "Create Risk",
          icon: <AlertTriangle className="h-4 w-4" />,
          color: "bg-red-500",
          action: () => console.log("Create risk"),
        },
        {
          id: "review-mitigations",
          label: "Review Mitigations",
          icon: <Shield className="h-4 w-4" />,
          color: "bg-blue-500",
          action: () => console.log("Review mitigations"),
        },
      ],
      kpis: [
        { id: "total-risks", label: "Total Risks", value: 247, target: 200, trend: "up", format: "number" },
        { id: "critical-risks", label: "Critical Risks", value: 23, target: 15, trend: "down", format: "number" },
        { id: "mitigation-rate", label: "Mitigation Rate", value: 78, target: 85, trend: "up", format: "percentage" },
      ],
    },
  },
  "compliance-officer": {
    id: "compliance-officer",
    name: "Compliance Officer",
    permissions: ["view-compliance", "manage-frameworks", "audit-access"],
    dashboardConfig: {
      layout: "operational",
      widgets: [
        {
          id: "compliance-scores",
          title: "Compliance Framework Scores",
          type: "chart",
          size: "large",
          data: {},
          priority: 1,
        },
        {
          id: "upcoming-audits",
          title: "Upcoming Audits",
          type: "calendar",
          size: "medium",
          data: {},
          priority: 2,
        },
        {
          id: "policy-updates",
          title: "Policy Updates Required",
          type: "list",
          size: "medium",
          data: {},
          priority: 3,
        },
      ],
      quickActions: [
        {
          id: "schedule-audit",
          label: "Schedule Audit",
          icon: <Calendar className="h-4 w-4" />,
          color: "bg-green-500",
          action: () => console.log("Schedule audit"),
        },
        {
          id: "update-policy",
          label: "Update Policy",
          icon: <FileText className="h-4 w-4" />,
          color: "bg-purple-500",
          action: () => console.log("Update policy"),
        },
      ],
      kpis: [
        {
          id: "compliance-score",
          label: "Overall Compliance",
          value: 87,
          target: 90,
          trend: "up",
          format: "percentage",
        },
        { id: "overdue-items", label: "Overdue Items", value: 12, target: 5, trend: "down", format: "number" },
        {
          id: "audit-readiness",
          label: "Audit Readiness",
          value: 92,
          target: 95,
          trend: "stable",
          format: "percentage",
        },
      ],
    },
  },
  executive: {
    id: "executive",
    name: "Executive",
    permissions: ["view-all", "strategic-decisions"],
    dashboardConfig: {
      layout: "executive",
      widgets: [
        {
          id: "executive-summary",
          title: "Executive Risk Summary",
          type: "metric",
          size: "large",
          data: {},
          priority: 1,
        },
        {
          id: "board-metrics",
          title: "Board-Level Metrics",
          type: "chart",
          size: "medium",
          data: {},
          priority: 2,
        },
        {
          id: "strategic-risks",
          title: "Strategic Risk Outlook",
          type: "chart",
          size: "medium",
          data: {},
          priority: 3,
        },
      ],
      quickActions: [
        {
          id: "board-report",
          label: "Generate Board Report",
          icon: <BarChart3 className="h-4 w-4" />,
          color: "bg-indigo-500",
          action: () => console.log("Generate board report"),
        },
        {
          id: "strategic-review",
          label: "Strategic Review",
          icon: <Target className="h-4 w-4" />,
          color: "bg-orange-500",
          action: () => console.log("Strategic review"),
        },
      ],
      kpis: [
        {
          id: "risk-appetite",
          label: "Risk Appetite Utilization",
          value: 65,
          target: 70,
          trend: "stable",
          format: "percentage",
        },
        { id: "roi-risk", label: "Risk-Adjusted ROI", value: 12.5, target: 15, trend: "up", format: "percentage" },
        {
          id: "regulatory-score",
          label: "Regulatory Health",
          value: 94,
          target: 95,
          trend: "up",
          format: "percentage",
        },
      ],
    },
  },
}

export function RoleBasedDashboard() {
  const [currentRole, setCurrentRole] = useState<string>("risk-manager")
  const [personalizedLayout, setPersonalizedLayout] = useState<string>("default")
  const [notifications, setNotifications] = useState(3)

const role = userRoles[currentRole]
  const config = role.dashboardConfig

const formatKPIValue = (value: number, format: string) => {
    switch (format) {
      case "percentage":
        return `${value}%`
      case "currency":
        return `$${value.toLocaleString()}`
      default:
        return value.toString()
    }
  }

const getTrendIcon = (trend: string) => {
    switch (trend) {
      case "up":
        return <TrendingUp className="h-4 w-4 text-green-500" />
      case "down":
        return <TrendingUp className="h-4 w-4 text-red-500 rotate-180" />
      default:
        return <div className="h-4 w-4 bg-gray-400 rounded-full" />
    }
  }

const KPICard = ({ kpi }: { kpi: KPI }) => (
    <Card className="bg-white/50 backdrop-blur-sm border-white/20 hover-lift">
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-sm font-medium text-slate-600 dark:text-slate-400">{kpi.label}</h3>
          {getTrendIcon(kpi.trend)}
        </div>
        <div className="space-y-2">
          <div className="flex items-baseline space-x-2">
            <span className="text-3xl font-bold text-slate-900 dark:text-white">
              {formatKPIValue(kpi.value, kpi.format)}
            </span>
            <span className="text-sm text-slate-500">/ {formatKPIValue(kpi.target, kpi.format)}</span>
          </div>
          <Progress value={(kpi.value / kpi.target) * 100} className="h-2" />
        </div>
      </CardContent>
    </Card>
  )

const QuickActionButton = ({ action }: { action: QuickAction }) => (
    <Button
      onClick={action.action}
      className={cn(
        "h-20 flex flex-col items-center justify-center space-y-2 rounded-2xl transition-all duration-200 hover:scale-105",
        action.color,
        "text-white hover:opacity-90",
      )}
    >
      {action.icon}
      <span className="text-sm font-medium">{action.label}</span>
    </Button>
  )

const RiskManagerDashboard = () => (
    <div className="space-y-6">
      {/* KPIs */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {config.kpis.map((kpi) => (
          <KPICard key={kpi.id} kpi={kpi} />
        ))}
      </div>

{/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Risk Heatmap */}
          <Card className="bg-white/50 backdrop-blur-sm border-white/20 hover-lift">
            <CardHeader>
              <CardTitle className="flex items-center">
                <AlertTriangle className="h-5 w-5 mr-2 text-red-500" />
                Risk Portfolio Overview
              </CardTitle>
              <CardDescription>Current risk distribution across categories</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  critical: { label: "Critical", color: "#ef4444" },
                  high: { label: "High", color: "#f97316" },
                  medium: { label: "Medium", color: "#eab308" },
                  low: { label: "Low", color: "#22c55e" },
                }}
                className="h-80"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart
                    data={[
                      { category: "Cyber", critical: 8, high: 12, medium: 15, low: 5 },
                      { category: "Ops", critical: 3, high: 8, medium: 20, low: 12 },
                      { category: "Finance", critical: 2, high: 5, medium: 8, low: 15 },
                      { category: "Legal", critical: 1, high: 3, medium: 6, low: 8 },
                      { category: "Strategic", critical: 1, high: 2, medium: 4, low: 3 },
                    ]}
                  >
                    <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                    <XAxis dataKey="category" stroke="#64748b" />
                    <YAxis stroke="#64748b" />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Area
                      type="monotone"
                      dataKey="critical"
                      stackId="1"
                      stroke="#ef4444"
                      fill="#ef4444"
                      fillOpacity={0.8}
                    />
                    <Area
                      type="monotone"
                      dataKey="high"
                      stackId="1"
                      stroke="#f97316"
                      fill="#f97316"
                      fillOpacity={0.8}
                    />
                    <Area
                      type="monotone"
                      dataKey="medium"
                      stackId="1"
                      stroke="#eab308"
                      fill="#eab308"
                      fillOpacity={0.8}
                    />
                    <Area type="monotone" dataKey="low" stackId="1" stroke="#22c55e" fill="#22c55e" fillOpacity={0.8} />
                  </AreaChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>

{/* Risk Trends */}
          <Card className="bg-white/50 backdrop-blur-sm border-white/20 hover-lift">
            <CardHeader>
              <CardTitle className="flex items-center">
                <TrendingUp className="h-5 w-5 mr-2 text-blue-500" />
                Risk Trends (6 Months)
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  risks: { label: "Total Risks", color: "#3b82f6" },
                  mitigated: { label: "Mitigated", color: "#22c55e" },
                }}
                className="h-64"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={[
                      { month: "Jan", risks: 220, mitigated: 45 },
                      { month: "Feb", risks: 235, mitigated: 52 },
                      { month: "Mar", risks: 228, mitigated: 48 },
                      { month: "Apr", risks: 242, mitigated: 55 },
                      { month: "May", risks: 251, mitigated: 62 },
                      { month: "Jun", risks: 247, mitigated: 58 },
                    ]}
                  >
                    <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                    <XAxis dataKey="month" stroke="#64748b" />
                    <YAxis stroke="#64748b" />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Line
                      type="monotone"
                      dataKey="risks"
                      stroke="#3b82f6"
                      strokeWidth={3}
                      dot={{ fill: "#3b82f6", strokeWidth: 2, r: 4 }}
                    />
                    <Line
                      type="monotone"
                      dataKey="mitigated"
                      stroke="#22c55e"
                      strokeWidth={3}
                      dot={{ fill: "#22c55e", strokeWidth: 2, r: 4 }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Quick Actions */}
          <Card className="bg-white/50 backdrop-blur-sm border-white/20">
            <CardHeader>
              <CardTitle className="text-lg">Quick Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 gap-3">
                {config.quickActions.map((action) => (
                  <QuickActionButton key={action.id} action={action} />
                ))}
              </div>
            </CardContent>
          </Card>

{/* Pending Items */}
          <Card className="bg-white/50 backdrop-blur-sm border-white/20">
            <CardHeader>
              <CardTitle className="flex items-center text-lg">
                <Clock className="h-5 w-5 mr-2 text-orange-500" />
                Pending Actions
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {[
                { title: "Review Cybersecurity Risk", priority: "high", due: "Today" },
                { title: "Approve Mitigation Plan", priority: "medium", due: "Tomorrow" },
                { title: "Update Risk Register", priority: "low", due: "This Week" },
              ].map((item, index) => (
                <div key={index} className="flex items-center justify-between p-3 rounded-lg bg-white/20">
                  <div>
                    <p className="text-sm font-medium text-slate-900 dark:text-white">{item.title}</p>
                    <p className="text-xs text-slate-500">{item.due}</p>
                  </div>
                  <Badge
                    variant={
                      item.priority === "high" ? "destructive" : item.priority === "medium" ? "default" : "secondary"
                    }
                    className="text-xs"
                  >
                    {item.priority}
                  </Badge>
                </div>
              ))}
            </CardContent>
          </Card>

{/* Recent Activity */}
          <Card className="bg-white/50 backdrop-blur-sm border-white/20">
            <CardHeader>
              <CardTitle className="text-lg">Recent Activity</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {[
                { action: "Risk R-2024-001 created", time: "2 hours ago", type: "create" },
                { action: "Mitigation approved", time: "4 hours ago", type: "approve" },
                { action: "Assessment completed", time: "1 day ago", type: "complete" },
              ].map((activity, index) => (
                <div key={index} className="flex items-center space-x-3">
                  <div
                    className={cn(
                      "w-2 h-2 rounded-full",
                      activity.type === "create" && "bg-blue-500",
                      activity.type === "approve" && "bg-green-500",
                      activity.type === "complete" && "bg-purple-500",
                    )}
                  />
                  <div className="flex-1">
                    <p className="text-sm text-slate-900 dark:text-white">{activity.action}</p>
                    <p className="text-xs text-slate-500">{activity.time}</p>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">{role.name} Dashboard</h1>
          <p className="text-slate-600 dark:text-slate-400 mt-1">
            Personalized view for your role and responsibilities
          </p>
        </div>
        <div className="flex items-center space-x-3">
          <Select value={currentRole} onValueChange={setCurrentRole}>
            <SelectTrigger className="w-48 bg-white/20 border-white/30">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Object.values(userRoles).map((role) => (
                <SelectItem key={role.id} value={role.id}>
                  {role.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button variant="outline" className="bg-white/20">
            <Settings className="h-4 w-4 mr-2" />
            Customize
          </Button>
          <Button variant="outline" className="bg-white/20 relative">
            <Bell className="h-4 w-4" />
            {notifications > 0 && (
              <Badge className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center text-xs bg-red-500">
                {notifications}
              </Badge>
            )}
          </Button>
        </div>
      </div>

{/* Role-specific Dashboard */}
      {currentRole === "risk-manager" && <RiskManagerDashboard />}
      {currentRole === "compliance-officer" && (
        <div className="text-center py-12">
          <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">Compliance Officer Dashboard</h3>
          <p className="text-slate-600 dark:text-slate-400">
            Specialized compliance monitoring and audit management interface
          </p>
        </div>
      )}
      {currentRole === "executive" && (
        <div className="text-center py-12">
          <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">Executive Dashboard</h3>
          <p className="text-slate-600 dark:text-slate-400">
            High-level strategic risk overview and board-ready metrics
          </p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { AppProvider } from "@/lib/context/app-context"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

export const metadata: Metadata = {
  title: "QS-GRC | Enterprise Risk & Compliance Platform",
  description: "Modern Governance, Risk, and Compliance platform with AI-powered insights and real-time monitoring",
  keywords: ["GRC", "Risk Management", "Compliance", "Governance", "Enterprise"],
  authors: [{ name: "QS-GRC Team" }],
  viewport: "width=device-width, initial-scale=1",
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0f172a" },
  ],
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.variable}>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
      </head>
      <body className={`${inter.className} antialiased`}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <AppProvider>
            {children}
            <Toaster />
          </AppProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/layout/header.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { AssessmentModal } from "@/components/modals/assessment-modal"
import { ReportModal } from "@/components/modals/report-modal"
import {
  Bell,
  Search,
  Plus,
  Calendar,
  Download,
  Sun,
  Moon,
  Menu,
  LogOut,
  User,
  Settings,
  HelpCircle,
} from "lucide-react"
import { useTheme } from "next-themes"
import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils"

export function Header() {
  const { theme, setTheme } = useTheme()
  const router = useRouter()
  const [searchFocused, setSearchFocused] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      // Implement search functionality
      console.log("Searching for:", searchQuery)
      // You could navigate to a search results page or filter current content
      router.push(`/search?q=${encodeURIComponent(searchQuery)}`)
    }
  }

const handleQuickAdd = () => {
    // This could open a modal with quick add options
    console.log("Quick add clicked")
  }

const handleSchedule = () => {
    // This could open a scheduling modal
    console.log("Schedule clicked")
  }

const handleExport = () => {
    // This could trigger an export function
    console.log("Export clicked")
    // Simulate export
    const link = document.createElement("a")
    link.href = "data:text/csv;charset=utf-8,Sample,Data,Export\nRow1,Value1,Value2\nRow2,Value3,Value4"
    link.download = "grc-export.csv"
    link.click()
  }

const handleProfileAction = (action: string) => {
    switch (action) {
      case "profile":
        router.push("/profile")
        break
      case "settings":
        router.push("/settings")
        break
      case "support":
        window.open("https://support.example.com", "_blank")
        break
      case "logout":
        // Implement logout logic
        console.log("Logging out...")
        // You would typically clear auth tokens and redirect
        router.push("/login")
        break
      default:
        console.log(`Profile action: ${action}`)
    }
  }

return (
    <header className="h-16 bg-white/10 backdrop-blur-xl border-b border-white/20 dark:bg-slate-900/10 dark:border-slate-700/20 flex items-center justify-between px-6 relative">
      {/* Gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-r from-white/5 to-transparent pointer-events-none" />

{/* Search */}
      <div className="flex items-center space-x-4 flex-1 max-w-md relative z-10">
        <form
          onSubmit={handleSearch}
          className={cn("relative flex-1 transition-all duration-300", searchFocused && "transform scale-105")}
        >
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
          <Input
            placeholder="Search risks, policies, incidents..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className={cn(
              "pl-10 bg-white/20 backdrop-blur-sm border-white/30 focus:bg-white/30 focus:border-blue-300/50",
              "dark:bg-slate-800/20 dark:border-slate-600/30 dark:focus:bg-slate-800/30",
              "rounded-xl transition-all duration-300 focus:shadow-lg",
            )}
            onFocus={() => setSearchFocused(true)}
            onBlur={() => setSearchFocused(false)}
          />
        </form>
      </div>

{/* Actions */}
      <div className="flex items-center space-x-3 relative z-10">
        {/* Quick Actions */}
        <div className="hidden md:flex items-center space-x-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="outline"
                size="sm"
                className="bg-white/20 backdrop-blur-sm border-white/30 hover:bg-white/30 rounded-xl transition-all duration-200 hover:shadow-lg hover:scale-105"
              >
                <Plus className="h-4 w-4 mr-2" />
                Quick Add
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="bg-white/90 backdrop-blur-xl border-white/20 shadow-xl rounded-xl">
              <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <AssessmentModal>
                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                  <Plus className="h-4 w-4 mr-2" />
                  New Assessment
                </DropdownMenuItem>
              </AssessmentModal>
              <DropdownMenuItem onClick={() => router.push("/risk-management")}>
                <Plus className="h-4 w-4 mr-2" />
                New Risk
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => router.push("/governance")}>
                <Plus className="h-4 w-4 mr-2" />
                New Incident
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

<Button
            variant="outline"
            size="sm"
            onClick={handleSchedule}
            className="bg-white/20 backdrop-blur-sm border-white/30 hover:bg-white/30 rounded-xl transition-all duration-200 hover:shadow-lg hover:scale-105"
          >
            <Calendar className="h-4 w-4 mr-2" />
            Schedule
          </Button>

<ReportModal>
            <Button
              variant="outline"
              size="sm"
              className="bg-white/20 backdrop-blur-sm border-white/30 hover:bg-white/30 rounded-xl transition-all duration-200 hover:shadow-lg hover:scale-105"
            >
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
          </ReportModal>
        </div>

{/* Mobile menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="md:hidden rounded-xl hover:bg-white/20">
              <Menu className="h-5 w-5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="bg-white/90 backdrop-blur-xl border-white/20 shadow-xl rounded-xl">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={handleQuickAdd}>
              <Plus className="h-4 w-4 mr-2" />
              Quick Add
            </DropdownMenuItem>
            <DropdownMenuItem onClick={handleSchedule}>
              <Calendar className="h-4 w-4 mr-2" />
              Schedule
            </DropdownMenuItem>
            <DropdownMenuItem onClick={handleExport}>
              <Download className="h-4 w-4 mr-2" />
              Export
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

{/* Theme Toggle */}
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          className="rounded-xl hover:bg-white/20 dark:hover:bg-slate-800/20 transition-all duration-200 hover:scale-105"
        >
          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>

{/* Notifications */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="relative rounded-xl hover:bg-white/20 dark:hover:bg-slate-800/20 transition-all duration-200 hover:scale-105"
            >
              <Bell className="h-5 w-5" />
              <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs bg-gradient-to-r from-red-500 to-pink-500 border-0 shadow-lg">
                3
              </Badge>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            className="w-80 bg-white/90 backdrop-blur-xl border-white/20 shadow-xl rounded-xl"
          >
            <DropdownMenuLabel className="text-base font-semibold">Notifications</DropdownMenuLabel>
            <DropdownMenuSeparator className="bg-white/20" />
            <DropdownMenuItem className="p-4 hover:bg-white/20 rounded-lg m-1">
              <div className="flex flex-col space-y-1">
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                  <p className="text-sm font-medium">High risk identified</p>
                </div>
                <p className="text-xs text-slate-500">IT Security - 2 hours ago</p>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem className="p-4 hover:bg-white/20 rounded-lg m-1">
              <div className="flex flex-col space-y-1">
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                  <p className="text-sm font-medium">Compliance review due</p>
                </div>
                <p className="text-xs text-slate-500">GDPR Assessment - 1 day ago</p>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem className="p-4 hover:bg-white/20 rounded-lg m-1">
              <div className="flex flex-col space-y-1">
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <p className="text-sm font-medium">Policy approval needed</p>
                </div>
                <p className="text-xs text-slate-500">Security Policy v3.1 - 2 days ago</p>
              </div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

{/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              className="relative h-10 w-10 rounded-xl hover:bg-white/20 dark:hover:bg-slate-800/20 transition-all duration-200 hover:scale-105"
            >
              <div className="h-10 w-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                <span className="text-white text-sm font-semibold">JD</span>
              </div>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            className="bg-white/90 backdrop-blur-xl border-white/20 shadow-xl rounded-xl"
          >
            <DropdownMenuLabel>
              <div className="flex flex-col space-y-1">
                <p className="text-sm font-medium">John Doe</p>
                <p className="text-xs text-slate-500">john.doe@company.com</p>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator className="bg-white/20" />
            <DropdownMenuItem
              className="hover:bg-white/20 rounded-lg m-1"
              onClick={() => handleProfileAction("profile")}
            >
              <User className="h-4 w-4 mr-2" />
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem
              className="hover:bg-white/20 rounded-lg m-1"
              onClick={() => handleProfileAction("settings")}
            >
              <Settings className="h-4 w-4 mr-2" />
              Settings
            </DropdownMenuItem>
            <DropdownMenuItem
              className="hover:bg-white/20 rounded-lg m-1"
              onClick={() => handleProfileAction("support")}
            >
              <HelpCircle className="h-4 w-4 mr-2" />
              Support
            </DropdownMenuItem>
            <DropdownMenuSeparator className="bg-white/20" />
            <DropdownMenuItem
              className="hover:bg-white/20 rounded-lg m-1 text-red-600"
              onClick={() => handleProfileAction("logout")}
            >
              <LogOut className="h-4 w-4 mr-2" />
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/ai/ai-assistant.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Bot,
  Send,
  Mic,
  Paperclip,
  Minimize2,
  Maximize2,
  X,
  TrendingUp,
  AlertTriangle,
  FileText,
  Users,
} from "lucide-react"
import { cn } from "@/lib/utils"

interface Message {
  id: string
  type: "user" | "assistant"
  content: string
  timestamp: Date
  suggestions?: string[]
  attachments?: Array<{
    name: string
    type: string
    url: string
  }>
}

interface QuickAction {
  id: string
  label: string
  icon: React.ReactNode
  description: string
  action: () => void
}

export function AIAssistant() {
  const [isOpen, setIsOpen] = useState(false)
  const [isMinimized, setIsMinimized] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      type: "assistant",
      content:
        "Hello! I'm your GRC AI Assistant. I can help you with risk assessments, compliance queries, policy questions, and more. How can I assist you today?",
      timestamp: new Date(),
      suggestions: [
        "Show me critical risks",
        "What's my compliance score?",
        "Generate risk report",
        "Find overdue assessments",
      ],
    },
  ])
  const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isListening, setIsListening] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

const quickActions: QuickAction[] = [
    {
      id: "risks",
      label: "Risk Analysis",
      icon: <AlertTriangle className="h-4 w-4" />,
      description: "Analyze current risk portfolio",
      action: () => handleQuickAction("Show me a summary of all critical and high risks in my portfolio"),
    },
    {
      id: "compliance",
      label: "Compliance Check",
      icon: <FileText className="h-4 w-4" />,
      description: "Check compliance status",
      action: () => handleQuickAction("What's my current compliance status across all frameworks?"),
    },
    {
      id: "trends",
      label: "Risk Trends",
      icon: <TrendingUp className="h-4 w-4" />,
      description: "View risk trends and patterns",
      action: () => handleQuickAction("Show me risk trends over the last 6 months"),
    },
    {
      id: "team",
      label: "Team Performance",
      icon: <Users className="h-4 w-4" />,
      description: "Review team metrics",
      action: () => handleQuickAction("How is my team performing on risk assessments?"),
    },
  ]

useEffect(() => {
    scrollToBottom()
  }, [messages])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

const handleSendMessage = async (content: string) => {
    if (!content.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      type: "user",
      content,
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputValue("")
    setIsTyping(true)

// Simulate AI response
    setTimeout(() => {
      const aiResponse = generateAIResponse(content)
      setMessages((prev) => [...prev, aiResponse])
      setIsTyping(false)
    }, 1500)
  }

const generateAIResponse = (userInput: string): Message => {
    const lowerInput = userInput.toLowerCase()

let response = ""
    let suggestions: string[] = []

if (lowerInput.includes("risk") || lowerInput.includes("critical")) {
      response =
        "I found 23 critical risks in your portfolio. The top concerns are:\n\n• **Data Breach Risk** (Score: 20) - Cybersecurity\n• **Regulatory Non-compliance** (Score: 18) - Legal\n• **Supply Chain Disruption** (Score: 16) - Operations\n\nWould you like me to provide detailed mitigation strategies for any of these?"
      suggestions = ["Show mitigation strategies", "Export risk report", "Schedule risk review", "Notify risk owners"]
    } else if (lowerInput.includes("compliance")) {
      response =
        "Your current compliance status:\n\n• **Overall Score**: 87% (Good)\n• **ISO 27001**: 92% ✅\n• **GDPR**: 76% ⚠️ (Needs attention)\n• **SOX**: 88% ✅\n\nThe GDPR compliance gap is primarily due to 3 outstanding data mapping requirements. Shall I create action items for these?"
      suggestions = ["Create action items", "View compliance details", "Schedule audit", "Generate compliance report"]
    } else if (lowerInput.includes("trend")) {
      response =
        "Risk trends over the last 6 months:\n\n📈 **Increasing**: Cybersecurity risks (+15%)\n📊 **Stable**: Operational risks\n📉 **Decreasing**: Financial risks (-8%)\n\nThe cybersecurity trend is concerning. I recommend scheduling a security assessment. Would you like me to set that up?"
      suggestions = [
        "Schedule security assessment",
        "View detailed trends",
        "Compare with industry",
        "Alert security team",
      ]
    } else if (lowerInput.includes("team") || lowerInput.includes("performance")) {
      response =
        "Team performance metrics:\n\n• **Risk Assessments Completed**: 94% (Target: 90%)\n• **Average Response Time**: 2.3 days\n• **Quality Score**: 4.2/5\n• **Overdue Items**: 3\n\nYour team is performing excellently! The 3 overdue items are all low-priority. Should I send reminders to the owners?"
      suggestions = ["Send reminders", "View team details", "Generate team report", "Set new targets"]
    } else {
      response =
        "I understand you're asking about GRC matters. I can help you with:\n\n• Risk assessments and analysis\n• Compliance monitoring and reporting\n• Policy management\n• Incident tracking\n• Team performance metrics\n\nWhat specific area would you like to explore?"
      suggestions = ["Show dashboard overview", "Find specific risks", "Check policy updates", "Review incidents"]
    }

return {
      id: Date.now().toString(),
      type: "assistant",
      content: response,
      timestamp: new Date(),
      suggestions,
    }
  }

const handleQuickAction = (action: string) => {
    handleSendMessage(action)
  }

const startVoiceInput = () => {
    if ("webkitSpeechRecognition" in window) {
      const recognition = new (window as any).webkitSpeechRecognition()
      recognition.continuous = false
      recognition.interimResults = false
      recognition.lang = "en-US"

recognition.start()
    }
  }

const handleClose = () => {
    setIsOpen(false)
    setIsMinimized(false)
    // Reset messages to initial state
    setMessages([
      {
        id: "1",
        type: "assistant",
        content:
          "Hello! I'm your GRC AI Assistant. I can help you with risk assessments, compliance queries, policy questions, and more. How can I assist you today?",
        timestamp: new Date(),
        suggestions: [
          "Show me critical risks",
          "What's my compliance score?",
          "Generate risk report",
          "Find overdue assessments",
        ],
      },
    ])
    setInputValue("")
    setIsTyping(false)
  }

const AssistantButton = () => (
    <Button
      onClick={() => setIsOpen(true)}
      className={cn(
        "fixed bottom-6 right-6 h-14 w-14 rounded-full shadow-2xl z-40",
        "bg-gradient-to-r from-purple-500 to-blue-600 hover:from-purple-600 hover:to-blue-700",
        "transition-all duration-300 hover:scale-110 animate-pulse-slow",
      )}
    >
      <Bot className="h-6 w-6 text-white" />
    </Button>
  )

const ChatInterface = () => (
    <Card
      className={cn(
        "fixed bottom-6 right-6 w-96 shadow-2xl z-50 transition-all duration-300",
        "bg-white/90 backdrop-blur-xl border-white/20",
        isMinimized ? "h-16" : "h-[600px]",
      )}
    >
      {/* Header */}
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b border-white/10">
        <div className="flex items-center space-x-3">
          <div className="h-10 w-10 bg-gradient-to-r from-purple-500 to-blue-600 rounded-full flex items-center justify-center">
            <Bot className="h-5 w-5 text-white" />
          </div>
          <div>
            <CardTitle className="text-lg">GRC Assistant</CardTitle>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              <span className="text-xs text-slate-500">Online</span>
            </div>
          </div>
        </div>
        <div className="flex items-center space-x-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsMinimized(!isMinimized)}
            className="h-8 w-8 p-0 hover:bg-white/20"
          >
            {isMinimized ? <Maximize2 className="h-4 w-4" /> : <Minimize2 className="h-4 w-4" />}
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={handleClose}
            className="h-8 w-8 p-0 hover:bg-red-500/20 hover:text-red-600"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>

{!isMinimized && (
        <>
          {/* Quick Actions */}
          <div className="p-4 border-b border-white/10">
            <div className="grid grid-cols-2 gap-2">
              {quickActions.map((action) => (
                <Button
                  key={action.id}
                  variant="outline"
                  size="sm"
                  onClick={action.action}
                  className="h-auto p-3 flex flex-col items-start space-y-1 bg-white/20 hover:bg-white/30"
                >
                  <div className="flex items-center space-x-2">
                    {action.icon}
                    <span className="text-xs font-medium">{action.label}</span>
                  </div>
                  <span className="text-xs text-slate-500 text-left">{action.description}</span>
                </Button>
              ))}
            </div>
          </div>

{/* Messages */}
          <ScrollArea className="flex-1 p-4 h-[400px]">
            <div className="space-y-4">
              {messages.map((message) => (
                <div key={message.id} className={cn("flex", message.type === "user" ? "justify-end" : "justify-start")}>
                  <div
                    className={cn(
                      "max-w-[80%] rounded-2xl p-3 space-y-2",
                      message.type === "user"
                        ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white"
                        : "bg-white/20 backdrop-blur-sm border border-white/20",
                    )}
                  >
                    <div className="text-sm whitespace-pre-wrap">{message.content}</div>

{message.suggestions && (
                      <div className="flex flex-wrap gap-1 pt-2">
                        {message.suggestions.map((suggestion, index) => (
                          <Button
                            key={index}
                            variant="ghost"
                            size="sm"
                            onClick={() => handleSendMessage(suggestion)}
                            className="h-6 px-2 text-xs bg-white/20 hover:bg-white/30 rounded-full"
                          >
                            {suggestion}
                          </Button>
                        ))}
                      </div>
                    )}

<div className="text-xs opacity-70">
                      {message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                    </div>
                  </div>
                </div>
              ))}

{isTyping && (
                <div className="flex justify-start">
                  <div className="bg-white/20 backdrop-blur-sm border border-white/20 rounded-2xl p-3">
                    <div className="flex space-x-1">
                      <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" />
                      <div
                        className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                        style={{ animationDelay: "0.1s" }}
                      />
                      <div
                        className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                        style={{ animationDelay: "0.2s" }}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
            <div ref={messagesEndRef} />
          </ScrollArea>

{/* Input */}
          <div className="p-4 border-t border-white/10">
            <form
              onSubmit={(e) => {
                e.preventDefault()
                handleSendMessage(inputValue)
              }}
              className="flex items-center space-x-2"
            >
              <div className="flex-1 relative">
                <Input
                  ref={inputRef}
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  placeholder="Ask about risks, compliance, policies..."
                  className="bg-white/20 border-white/30 focus:bg-white/30 pr-20"
                />
                <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center space-x-1">
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={startVoiceInput}
                    className={cn("h-6 w-6 p-0", isListening && "text-red-500 animate-pulse")}
                  >
                    <Mic className="h-3 w-3" />
                  </Button>
                  <Button type="button" variant="ghost" size="sm" className="h-6 w-6 p-0">
                    <Paperclip className="h-3 w-3" />
                  </Button>
                </div>
              </div>
              <Button
                type="submit"
                size="sm"
                disabled={!inputValue.trim()}
                className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
              >
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </div>
        </>
      )}
    </Card>
  )

return (
    <>
      {!isOpen && <AssistantButton />}
      {isOpen && <ChatInterface />}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/layout/sidebar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import {
  Home,
  Shield,
  BarChart3,
  Settings,
  AlertTriangle,
  CheckCircle,
  Clock,
  ChevronLeft,
  ChevronRight,
  Target,
} from "lucide-react"
import { cn } from "@/lib/utils"

const navigation = [
  {
    name: "Dashboard",
    href: "/",
    icon: Home,
    badge: null,
  },
  {
    name: "Risk Management",
    href: "/risk-management",
    icon: AlertTriangle,
    badge: "23",
  },
  {
    name: "Compliance",
    href: "/compliance",
    icon: CheckCircle,
    badge: "4",
  },
  {
    name: "Governance",
    href: "/governance",
    icon: Shield,
    badge: "12",
  },
  {
    name: "Reports",
    href: "/reports",
    icon: BarChart3,
    badge: null,
  },
  {
    name: "Settings",
    href: "/settings",
    icon: Settings,
    badge: null,
  },
]

const quickStats = [
  {
    label: "Critical Risks",
    value: "5",
    icon: AlertTriangle,
    color: "text-red-600",
    bgColor: "bg-red-50",
  },
  {
    label: "Compliance Score",
    value: "87%",
    icon: Target,
    color: "text-green-600",
    bgColor: "bg-green-50",
  },
  {
    label: "Open Incidents",
    value: "12",
    icon: Clock,
    color: "text-orange-600",
    bgColor: "bg-orange-50",
  },
]

interface SidebarProps {
  className?: string
}

export function Sidebar({ className }: SidebarProps) {
  const pathname = usePathname()
  const [isCollapsed, setIsCollapsed] = useState(false)

return (
    <div
      className={cn(
        "flex flex-col h-full transition-all duration-300 ease-in-out",
        isCollapsed ? "w-16" : "w-64",
        className,
      )}
    >
      {/* Sidebar Header */}
      <div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-700">
        {!isCollapsed && (
          <div className="flex items-center space-x-2">
            <div className="h-8 w-8 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
              <Shield className="h-5 w-5 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-slate-900 dark:text-white">StreamlineGRC</h1>
              <p className="text-xs text-slate-500 dark:text-slate-400">Enterprise Edition</p>
            </div>
          </div>
        )}
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="h-8 w-8 p-0 hover:bg-slate-100 dark:hover:bg-slate-800"
        >
          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
        </Button>
      </div>

{/* Navigation */}
      <ScrollArea className="flex-1 px-3 py-4">
        <nav className="space-y-2">
          {navigation.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link key={item.name} href={item.href}>
                <Button
                  variant={isActive ? "default" : "ghost"}
                  className={cn(
                    "w-full justify-start h-10 transition-all duration-200",
                    isCollapsed ? "px-2" : "px-3",
                    isActive
                      ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:from-blue-700 hover:to-purple-700"
                      : "text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white",
                    "group relative overflow-hidden",
                  )}
                >
                  <item.icon className={cn("h-5 w-5 flex-shrink-0", isCollapsed ? "mx-auto" : "mr-3")} />
                  {!isCollapsed && (
                    <>
                      <span className="flex-1 text-left font-medium">{item.name}</span>
                      {item.badge && (
                        <Badge
                          variant={isActive ? "secondary" : "outline"}
                          className={cn(
                            "ml-auto text-xs",
                            isActive
                              ? "bg-white/20 text-white border-white/30"
                              : "bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700",
                          )}
                        >
                          {item.badge}
                        </Badge>
                      )}
                    </>
                  )}
                  {/* Hover effect */}
                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
                </Button>
              </Link>
            )
          })}
        </nav>

{/* Quick Stats */}
        {!isCollapsed && (
          <div className="mt-8 space-y-4">
            <div className="px-3">
              <h3 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                Quick Stats
              </h3>
            </div>
            <div className="space-y-2">
              {quickStats.map((stat, index) => (
                <div
                  key={index}
                  className={cn(
                    "mx-3 p-3 rounded-lg border transition-all duration-200 hover:shadow-md",
                    stat.bgColor,
                    "border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600",
                  )}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <stat.icon className={cn("h-4 w-4", stat.color)} />
                      <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{stat.label}</span>
                    </div>
                    <span className={cn("text-lg font-bold", stat.color)}>{stat.value}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{/* Recent Activity */}
        {!isCollapsed && (
          <div className="mt-8 space-y-4">
            <div className="px-3">
              <h3 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                Recent Activity
              </h3>
            </div>
            <div className="space-y-2">
              <div className="mx-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
                <div className="flex items-center space-x-2 mb-1">
                  <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">High Risk Identified</span>
                </div>
                <p className="text-xs text-slate-500 dark:text-slate-400">IT Security - 2h ago</p>
              </div>

<div className="mx-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
                <div className="flex items-center space-x-2 mb-1">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">Assessment Complete</span>
                </div>
                <p className="text-xs text-slate-500 dark:text-slate-400">GDPR Review - 4h ago</p>
              </div>

<div className="mx-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
                <div className="flex items-center space-x-2 mb-1">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">Policy Updated</span>
                </div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Security Policy - 1d ago</p>
              </div>
            </div>
          </div>
        )}
      </ScrollArea>

{/* Sidebar Footer */}
      <div className="p-4 border-t border-slate-200 dark:border-slate-700">
        {!isCollapsed ? (
          <div className="flex items-center space-x-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border border-blue-200 dark:border-blue-800">
            <div className="h-10 w-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
              <span className="text-white text-sm font-semibold">JD</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-slate-900 dark:text-white truncate">John Doe</p>
              <p className="text-xs text-slate-500 dark:text-slate-400 truncate">Risk Manager</p>
            </div>
          </div>
        ) : (
          <div className="flex justify-center">
            <div className="h-10 w-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
              <span className="text-white text-sm font-semibold">JD</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { MainLayout } from "@/components/layout/main-layout"
import { RiskHeatmap } from "@/components/charts/risk-heatmap"
import { RoleBasedDashboard } from "@/components/dashboard/role-based-dashboard"
import { AssessmentModal } from "@/components/modals/assessment-modal"
import { ReportModal } from "@/components/modals/report-modal"
import {
  AlertTriangle,
  CheckCircle,
  Clock,
  TrendingUp,
  TrendingDown,
  Shield,
  FileText,
  BarChart3,
  Plus,
  Eye,
  Calendar,
  Target,
  Activity,
} from "lucide-react"
import {
  Area,
  AreaChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  CartesianGrid,
  Bar,
  BarChart,
  PieChart,
  Pie,
  Cell,
} from "recharts"

// Sample data for charts
const riskTrendData = [
  { month: "Jan", critical: 8, high: 15, medium: 25, low: 12 },
  { month: "Feb", critical: 6, high: 18, medium: 22, low: 14 },
  { month: "Mar", critical: 9, high: 16, medium: 28, low: 11 },
  { month: "Apr", critical: 5, high: 14, medium: 30, low: 16 },
  { month: "May", critical: 7, high: 12, medium: 26, low: 18 },
  { month: "Jun", critical: 4, high: 10, medium: 24, low: 20 },
]

const complianceData = [
  { framework: "ISO 27001", score: 92, target: 90 },
  { framework: "SOX", score: 88, target: 85 },
  { framework: "GDPR", score: 76, target: 80 },
  { framework: "NIST", score: 82, target: 85 },
]

const incidentStatusData = [
  { name: "Resolved", value: 45, color: "#22c55e" },
  { name: "In Progress", value: 23, color: "#f59e0b" },
  { name: "Open", value: 12, color: "#ef4444" },
  { name: "Closed", value: 8, color: "#6b7280" },
]

const recentActivities = [
  {
    id: 1,
    type: "risk",
    title: "High risk identified in IT Security",
    description: "New cybersecurity threat detected",
    time: "2 hours ago",
    severity: "high",
    icon: AlertTriangle,
  },
  {
    id: 2,
    type: "compliance",
    title: "GDPR assessment completed",
    description: "Quarterly compliance review finished",
    time: "4 hours ago",
    severity: "success",
    icon: CheckCircle,
  },
  {
    id: 3,
    type: "incident",
    title: "Data breach incident resolved",
    description: "Security incident INC-001 closed",
    time: "1 day ago",
    severity: "resolved",
    icon: Shield,
  },
  {
    id: 4,
    type: "policy",
    title: "Security policy updated",
    description: "Version 3.1 approved and published",
    time: "2 days ago",
    severity: "info",
    icon: FileText,
  },
]

const upcomingTasks = [
  {
    id: 1,
    title: "Q1 Risk Assessment Review",
    dueDate: "2024-01-30",
    priority: "high",
    assignee: "John Smith",
    progress: 75,
  },
  {
    id: 2,
    title: "SOX Compliance Audit",
    dueDate: "2024-02-05",
    priority: "critical",
    assignee: "Sarah Johnson",
    progress: 45,
  },
  {
    id: 3,
    title: "Policy Review - Data Protection",
    dueDate: "2024-02-10",
    priority: "medium",
    assignee: "Mike Davis",
    progress: 20,
  },
  {
    id: 4,
    title: "Vendor Risk Assessment",
    dueDate: "2024-02-15",
    priority: "low",
    assignee: "Emily Brown",
    progress: 0,
  },
]

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case "critical":
      return "text-red-600 bg-red-50 border-red-200"
    case "high":
      return "text-orange-600 bg-orange-50 border-orange-200"
    case "medium":
      return "text-yellow-600 bg-yellow-50 border-yellow-200"
    case "low":
      return "text-green-600 bg-green-50 border-green-200"
    default:
      return "text-gray-600 bg-gray-50 border-gray-200"
  }
}

const getSeverityIcon = (severity: string) => {
  switch (severity) {
    case "high":
      return "text-red-600"
    case "success":
      return "text-green-600"
    case "resolved":
      return "text-blue-600"
    case "info":
      return "text-slate-600"
    default:
      return "text-gray-600"
  }
}

export default function Dashboard() {
  return (
    <MainLayout>
      <div className="p-4 md:p-6 space-y-6">
        {/* Welcome Header */}
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">Welcome back, John 👋</h1>
            <p className="text-slate-600 dark:text-slate-400 mt-1">
              Here's what's happening with your GRC program today
            </p>
          </div>
          <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 w-full sm:w-auto">
            <AssessmentModal>
              <Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 w-full sm:w-auto">
                <Plus className="h-4 w-4 mr-2" />
                New Assessment
              </Button>
            </AssessmentModal>
            <ReportModal>
              <Button variant="outline" className="bg-white/50 border-white/30 w-full sm:w-auto">
                <BarChart3 className="h-4 w-4 mr-2" />
                Generate Report
              </Button>
            </ReportModal>
          </div>
        </div>

{/* Key Metrics */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
          <Card className="bg-gradient-to-br from-red-50 to-red-100 border-red-200 shadow-sm hover:shadow-md transition-shadow">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-red-700">Critical Risks</p>
                  <p className="text-2xl font-bold text-red-900">5</p>
                  <div className="flex items-center mt-1">
                    <TrendingDown className="h-4 w-4 text-green-600 mr-1" />
                    <span className="text-xs text-green-600">-2 from last week</span>
                  </div>
                </div>
                <AlertTriangle className="h-8 w-8 text-red-600" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-sm hover:shadow-md transition-shadow">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-green-700">Compliance Score</p>
                  <p className="text-2xl font-bold text-green-900">87%</p>
                  <div className="flex items-center mt-1">
                    <TrendingUp className="h-4 w-4 text-green-600 mr-1" />
                    <span className="text-xs text-green-600">+3% this month</span>
                  </div>
                </div>
                <Target className="h-8 w-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200 shadow-sm hover:shadow-md transition-shadow">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-orange-700">Open Incidents</p>
                  <p className="text-2xl font-bold text-orange-900">12</p>
                  <div className="flex items-center mt-1">
                    <Clock className="h-4 w-4 text-orange-600 mr-1" />
                    <span className="text-xs text-orange-600">3 due today</span>
                  </div>
                </div>
                <Shield className="h-8 w-8 text-orange-600" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-sm hover:shadow-md transition-shadow">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-blue-700">Active Policies</p>
                  <p className="text-2xl font-bold text-blue-900">24</p>
                  <div className="flex items-center mt-1">
                    <FileText className="h-4 w-4 text-blue-600 mr-1" />
                    <span className="text-xs text-blue-600">2 pending review</span>
                  </div>
                </div>
                <FileText className="h-8 w-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>
        </div>

{/* Main Dashboard Content */}
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
          {/* Left Column - Charts */}
          <div className="xl:col-span-2 space-y-6">
            {/* Risk Trend Chart */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <TrendingUp className="h-5 w-5 mr-2 text-blue-600" />
                  Risk Trends
                </CardTitle>
                <CardDescription>Risk distribution over the last 6 months</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    critical: { label: "Critical", color: "#ef4444" },
                    high: { label: "High", color: "#f97316" },
                    medium: { label: "Medium", color: "#eab308" },
                    low: { label: "Low", color: "#22c55e" },
                  }}
                  className="h-64 md:h-80"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={riskTrendData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                      <XAxis dataKey="month" stroke="#64748b" />
                      <YAxis stroke="#64748b" />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Area
                        type="monotone"
                        dataKey="critical"
                        stackId="1"
                        stroke="#ef4444"
                        fill="#ef4444"
                        fillOpacity={0.8}
                      />
                      <Area
                        type="monotone"
                        dataKey="high"
                        stackId="1"
                        stroke="#f97316"
                        fill="#f97316"
                        fillOpacity={0.8}
                      />
                      <Area
                        type="monotone"
                        dataKey="medium"
                        stackId="1"
                        stroke="#eab308"
                        fill="#eab308"
                        fillOpacity={0.8}
                      />
                      <Area
                        type="monotone"
                        dataKey="low"
                        stackId="1"
                        stroke="#22c55e"
                        fill="#22c55e"
                        fillOpacity={0.8}
                      />
                    </AreaChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>

{/* Compliance Scores */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <CheckCircle className="h-5 w-5 mr-2 text-green-600" />
                  Compliance Scores
                </CardTitle>
                <CardDescription>Current vs target compliance scores by framework</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    score: { label: "Current Score", color: "#3b82f6" },
                    target: { label: "Target Score", color: "#e2e8f0" },
                  }}
                  className="h-64"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={complianceData} layout="horizontal">
                      <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                      <XAxis type="number" domain={[0, 100]} stroke="#64748b" />
                      <YAxis dataKey="framework" type="category" stroke="#64748b" width={80} />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Bar dataKey="target" fill="#e2e8f0" radius={4} />
                      <Bar dataKey="score" fill="#3b82f6" radius={4} />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>

{/* Risk Heatmap */}
            <RiskHeatmap />
          </div>

{/* Right Column - Activities & Tasks */}
          <div className="space-y-6">
            {/* Recent Activities */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Activity className="h-5 w-5 mr-2 text-purple-600" />
                  Recent Activities
                </CardTitle>
                <CardDescription>Latest updates across your GRC program</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {recentActivities.map((activity) => (
                  <div
                    key={activity.id}
                    className="flex items-start space-x-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                  >
                    <div className={`p-2 rounded-full ${getSeverityIcon(activity.severity)}`}>
                      <activity.icon className="h-4 w-4" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-slate-900 dark:text-white">{activity.title}</p>
                      <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{activity.description}</p>
                      <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">{activity.time}</p>
                    </div>
                  </div>
                ))}
                <Button variant="outline" className="w-full mt-4 bg-transparent">
                  <Eye className="h-4 w-4 mr-2" />
                  View All Activities
                </Button>
              </CardContent>
            </Card>

{/* Upcoming Tasks */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Calendar className="h-5 w-5 mr-2 text-orange-600" />
                  Upcoming Tasks
                </CardTitle>
                <CardDescription>Tasks requiring your attention</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {upcomingTasks.map((task) => (
                  <div
                    key={task.id}
                    className="space-y-3 p-3 rounded-lg border hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-slate-900 dark:text-white">{task.title}</p>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                          Due: {task.dueDate} • Assigned to: {task.assignee}
                        </p>
                      </div>
                      <Badge className={`text-xs ${getPriorityColor(task.priority)}`}>{task.priority}</Badge>
                    </div>
                    <div className="space-y-1">
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-500">Progress</span>
                        <span className="text-slate-700 dark:text-slate-300">{task.progress}%</span>
                      </div>
                      <Progress value={task.progress} className="h-2" />
                    </div>
                  </div>
                ))}
                <Button variant="outline" className="w-full mt-4 bg-transparent">
                  <Calendar className="h-4 w-4 mr-2" />
                  View All Tasks
                </Button>
              </CardContent>
            </Card>

{/* Incident Status */}
            <Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Shield className="h-5 w-5 mr-2 text-red-600" />
                  Incident Status
                </CardTitle>
                <CardDescription>Current incident distribution</CardDescription>
              </CardHeader>
              <CardContent>
                <ChartContainer
                  config={{
                    resolved: { label: "Resolved", color: "#22c55e" },
                    inProgress: { label: "In Progress", color: "#f59e0b" },
                    open: { label: "Open", color: "#ef4444" },
                    closed: { label: "Closed", color: "#6b7280" },
                  }}
                  className="h-48"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={incidentStatusData}
                        cx="50%"
                        cy="50%"
                        innerRadius={30}
                        outerRadius={60}
                        paddingAngle={2}
                        dataKey="value"
                      >
                        {incidentStatusData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <ChartTooltip content={<ChartTooltipContent />} />
                    </PieChart>
                  </ResponsiveContainer>
                </ChartContainer>
                <div className="mt-4 space-y-2">
                  {incidentStatusData.map((item, index) => (
                    <div key={index} className="flex items-center justify-between text-sm">
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: item.color }}></div>
                        <span>{item.name}</span>
                      </div>
                      <span className="font-medium">{item.value}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Role-Based Dashboard */}
        <RoleBasedDashboard />
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

/* Sidebar colors */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

/* Sidebar colors for dark mode */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 0 0% 98%;
    --sidebar-primary-foreground: 240 5.9% 10%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

.animate-float {
    animation: float 6s ease-in-out infinite;
  }

@keyframes float {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

.glass-effect {
    @apply bg-white/10 backdrop-blur-xl border border-white/20;
  }

.glass-effect-dark {
    @apply dark:bg-slate-900/10 dark:backdrop-blur-xl dark:border-slate-700/20;
  }

/* Responsive utilities */
  .container-responsive {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }

.grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6;
  }

.flex-responsive {
    @apply flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4;
  }

/* Custom scrollbar */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184) transparent;
  }

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(148 163 184);
    border-radius: 3px;
  }

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(100 116 139);
  }

/* Mobile-first responsive breakpoints */
  @media (max-width: 640px) {
    .mobile-stack {
      @apply flex-col space-y-2 space-x-0;
    }

.mobile-full {
      @apply w-full;
    }

.mobile-hidden {
      @apply hidden;
    }
  }

@media (min-width: 641px) and (max-width: 768px) {
    .tablet-stack {
      @apply flex-col space-y-3 space-x-0;
    }
  }

/* Focus styles for accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900;
  }

/* Animation utilities */
  .slide-in-right {
    animation: slideInRight 0.3s ease-out;
  }

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
  }

.fade-in {
    animation: fadeIn 0.3s ease-out;
  }

@keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

/* Print styles */
  @media print {
    .no-print {
      display: none !important;
    }

.print-break {
      page-break-after: always;
    }
  }
}

/* Custom component styles */
.chart-container {
  @apply w-full h-full;
}

.chart-container .recharts-wrapper {
  @apply w-full h-full;
}

/* Ensure proper spacing for mobile */
@media (max-width: 640px) {
  .mobile-padding {
    @apply px-4 py-3;
  }

.mobile-text {
    @apply text-sm;
  }

.mobile-title {
    @apply text-xl;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .high-contrast {
    @apply border-2 border-black dark:border-white;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-slow,
  .animate-float,
  .slide-in-right,
  .slide-in-left,
  .fade-in {
    animation: none;
  }

.transition-all,
  .transition-colors,
  .transition-transform {
    transition: none;
  }
}
[V0_FILE]typescriptreact:file="components/modals/assessment-modal.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatePicker } from "@/components/ui/date-picker"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Plus, X, CheckCircle, Clock } from "lucide-react"
import { useNotifications } from "@/hooks/use-notifications"

interface AssessmentModalProps {
  children: React.ReactNode
}

export function AssessmentModal({ children }: AssessmentModalProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const { addNotification } = useNotifications()

const [formData, setFormData] = useState({
    title: "",
    description: "",
    type: "",
    priority: "",
    assignee: "",
    dueDate: null as Date | null,
    framework: "",
    scope: "",
    requirements: [] as string[],
    controls: [] as string[],
    riskLevel: "",
    department: "",
    status: "draft",
  })

const [newRequirement, setNewRequirement] = useState("")
  const [newControl, setNewControl] = useState("")

const assessmentTypes = [
    "SOC 2 Type II",
    "ISO 27001",
    "GDPR Compliance",
    "HIPAA Assessment",
    "PCI DSS",
    "SOX Compliance",
    "NIST Framework",
    "Custom Assessment",
  ]

const priorityLevels = [
    { value: "critical", label: "Critical", color: "bg-red-500" },
    { value: "high", label: "High", color: "bg-orange-500" },
    { value: "medium", label: "Medium", color: "bg-yellow-500" },
    { value: "low", label: "Low", color: "bg-green-500" },
  ]

const riskLevels = [
    { value: "very-high", label: "Very High", color: "bg-red-600" },
    { value: "high", label: "High", color: "bg-red-500" },
    { value: "medium", label: "Medium", color: "bg-yellow-500" },
    { value: "low", label: "Low", color: "bg-green-500" },
    { value: "very-low", label: "Very Low", color: "bg-green-600" },
  ]

const departments = [
    "Information Technology",
    "Human Resources",
    "Finance",
    "Legal",
    "Operations",
    "Marketing",
    "Sales",
    "Customer Support",
  ]

const addRequirement = () => {
    if (newRequirement.trim()) {
      setFormData((prev) => ({
        ...prev,
        requirements: [...prev.requirements, newRequirement.trim()],
      }))
      setNewRequirement("")
    }
  }

const removeRequirement = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      requirements: prev.requirements.filter((_, i) => i !== index),
    }))
  }

const addControl = () => {
    if (newControl.trim()) {
      setFormData((prev) => ({
        ...prev,
        controls: [...prev.controls, newControl.trim()],
      }))
      setNewControl("")
    }
  }

const removeControl = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      controls: prev.controls.filter((_, i) => i !== index),
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

addNotification({
        id: Date.now().toString(),
        title: "Assessment Created",
        message: `${formData.title} has been successfully created and assigned.`,
        type: "success",
        timestamp: new Date(),
      })

setOpen(false)
      setFormData({
        title: "",
        description: "",
        type: "",
        priority: "",
        assignee: "",
        dueDate: null,
        framework: "",
        scope: "",
        requirements: [],
        controls: [],
        riskLevel: "",
        department: "",
        status: "draft",
      })
    } catch (error) {
      addNotification({
        id: Date.now().toString(),
        title: "Error",
        message: "Failed to create assessment. Please try again.",
        type: "error",
        timestamp: new Date(),
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <CheckCircle className="h-5 w-5 text-blue-600" />
            <span>Create New Compliance Assessment</span>
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Basic Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Assessment Title *</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="e.g., Q4 2024 SOC 2 Assessment"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="type">Assessment Type *</Label>
                  <Select
                    value={formData.type}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select assessment type" />
                    </SelectTrigger>
                    <SelectContent>
                      {assessmentTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="Provide a detailed description of the assessment objectives and scope..."
                  rows={3}
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="priority">Priority Level *</Label>
                  <Select
                    value={formData.priority}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, priority: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select priority" />
                    </SelectTrigger>
                    <SelectContent>
                      {priorityLevels.map((priority) => (
                        <SelectItem key={priority.value} value={priority.value}>
                          <div className="flex items-center space-x-2">
                            <div className={`w-2 h-2 rounded-full ${priority.color}`} />
                            <span>{priority.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="riskLevel">Risk Level</Label>
                  <Select
                    value={formData.riskLevel}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, riskLevel: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select risk level" />
                    </SelectTrigger>
                    <SelectContent>
                      {riskLevels.map((risk) => (
                        <SelectItem key={risk.value} value={risk.value}>
                          <div className="flex items-center space-x-2">
                            <div className={`w-2 h-2 rounded-full ${risk.color}`} />
                            <span>{risk.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="department">Department</Label>
                  <Select
                    value={formData.department}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, department: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select department" />
                    </SelectTrigger>
                    <SelectContent>
                      {departments.map((dept) => (
                        <SelectItem key={dept} value={dept}>
                          {dept}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Assignment & Timeline */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Assignment & Timeline</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="assignee">Assigned To</Label>
                  <Input
                    id="assignee"
                    value={formData.assignee}
                    onChange={(e) => setFormData((prev) => ({ ...prev, assignee: e.target.value }))}
                    placeholder="Enter assignee name or email"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Due Date</Label>
                  <DatePicker
                    date={formData.dueDate}
                    onDateChange={(date) => setFormData((prev) => ({ ...prev, dueDate: date }))}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Requirements */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Requirements</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex space-x-2">
                <Input
                  value={newRequirement}
                  onChange={(e) => setNewRequirement(e.target.value)}
                  placeholder="Add a requirement..."
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addRequirement())}
                />
                <Button type="button" onClick={addRequirement} size="sm">
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              {formData.requirements.length > 0 && (
                <div className="space-y-2">
                  {formData.requirements.map((req, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between bg-slate-50 dark:bg-slate-800 p-2 rounded"
                    >
                      <span className="text-sm">{req}</span>
                      <Button type="button" variant="ghost" size="sm" onClick={() => removeRequirement(index)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

{/* Controls */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Controls</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex space-x-2">
                <Input
                  value={newControl}
                  onChange={(e) => setNewControl(e.target.value)}
                  placeholder="Add a control..."
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addControl())}
                />
                <Button type="button" onClick={addControl} size="sm">
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              {formData.controls.length > 0 && (
                <div className="space-y-2">
                  {formData.controls.map((control, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between bg-slate-50 dark:bg-slate-800 p-2 rounded"
                    >
                      <span className="text-sm">{control}</span>
                      <Button type="button" variant="ghost" size="sm" onClick={() => removeControl(index)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

{/* Form Actions */}
          <div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !formData.title || !formData.type}>
              {loading ? (
                <>
                  <Clock className="h-4 w-4 mr-2 animate-spin" />
                  Creating...
                </>
              ) : (
                <>
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Create Assessment
                </>
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/modals/policy-modal.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatePicker } from "@/components/ui/date-picker"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { FileText, Upload, Clock, CheckCircle } from "lucide-react"
import { useNotifications } from "@/hooks/use-notifications"

interface PolicyModalProps {
  children: React.ReactNode
}

export function PolicyModal({ children }: PolicyModalProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const { addNotification } = useNotifications()

const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "",
    version: "1.0",
    owner: "",
    approver: "",
    effectiveDate: null as Date | null,
    reviewDate: null as Date | null,
    status: "draft",
    priority: "",
    scope: "",
    applicability: "",
    requiresTraining: false,
    requiresAcknowledgment: false,
    autoReminders: true,
    tags: [] as string[],
    relatedPolicies: [] as string[],
  })

const policyCategories = [
    "Information Security",
    "Data Privacy",
    "Human Resources",
    "Financial",
    "Operational",
    "Legal & Compliance",
    "IT Governance",
    "Risk Management",
    "Business Continuity",
    "Vendor Management",
  ]

const statusOptions = [
    { value: "draft", label: "Draft", color: "bg-gray-500" },
    { value: "review", label: "Under Review", color: "bg-yellow-500" },
    { value: "approved", label: "Approved", color: "bg-green-500" },
    { value: "active", label: "Active", color: "bg-blue-500" },
    { value: "archived", label: "Archived", color: "bg-gray-400" },
  ]

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

addNotification({
        id: Date.now().toString(),
        title: "Policy Created",
        message: `${formData.title} has been successfully created and is now ${formData.status}.`,
        type: "success",
        timestamp: new Date(),
      })

setOpen(false)
      setFormData({
        title: "",
        description: "",
        category: "",
        version: "1.0",
        owner: "",
        approver: "",
        effectiveDate: null,
        reviewDate: null,
        status: "draft",
        priority: "",
        scope: "",
        applicability: "",
        requiresTraining: false,
        requiresAcknowledgment: false,
        autoReminders: true,
        tags: [],
        relatedPolicies: [],
      })
    } catch (error) {
      addNotification({
        id: Date.now().toString(),
        title: "Error",
        message: "Failed to create policy. Please try again.",
        type: "error",
        timestamp: new Date(),
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <FileText className="h-5 w-5 text-blue-600" />
            <span>Create New Policy</span>
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Basic Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Policy Title *</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="e.g., Data Protection Policy"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="category">Category *</Label>
                  <Select
                    value={formData.category}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, category: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      {policyCategories.map((category) => (
                        <SelectItem key={category} value={category}>
                          {category}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="Provide a comprehensive description of the policy purpose and objectives..."
                  rows={4}
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="version">Version</Label>
                  <Input
                    id="version"
                    value={formData.version}
                    onChange={(e) => setFormData((prev) => ({ ...prev, version: e.target.value }))}
                    placeholder="1.0"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="priority">Priority Level</Label>
                  <Select
                    value={formData.priority}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, priority: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select priority" />
                    </SelectTrigger>
                    <SelectContent>
                      {priorityLevels.map((priority) => (
                        <SelectItem key={priority.value} value={priority.value}>
                          <div className="flex items-center space-x-2">
                            <div className={`w-2 h-2 rounded-full ${priority.color}`} />
                            <span>{priority.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="status">Status</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, status: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select status" />
                    </SelectTrigger>
                    <SelectContent>
                      {statusOptions.map((status) => (
                        <SelectItem key={status.value} value={status.value}>
                          <div className="flex items-center space-x-2">
                            <div className={`w-2 h-2 rounded-full ${status.color}`} />
                            <span>{status.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Ownership & Approval */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Ownership & Approval</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="owner">Policy Owner</Label>
                  <Input
                    id="owner"
                    value={formData.owner}
                    onChange={(e) => setFormData((prev) => ({ ...prev, owner: e.target.value }))}
                    placeholder="Enter owner name or email"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="approver">Approver</Label>
                  <Input
                    id="approver"
                    value={formData.approver}
                    onChange={(e) => setFormData((prev) => ({ ...prev, approver: e.target.value }))}
                    placeholder="Enter approver name or email"
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Effective Date</Label>
                  <DatePicker
                    date={formData.effectiveDate}
                    onDateChange={(date) => setFormData((prev) => ({ ...prev, effectiveDate: date }))}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Next Review Date</Label>
                  <DatePicker
                    date={formData.reviewDate}
                    onDateChange={(date) => setFormData((prev) => ({ ...prev, reviewDate: date }))}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Scope & Applicability */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Scope & Applicability</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="scope">Scope</Label>
                <Textarea
                  id="scope"
                  value={formData.scope}
                  onChange={(e) => setFormData((prev) => ({ ...prev, scope: e.target.value }))}
                  placeholder="Define the scope of this policy..."
                  rows={3}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="applicability">Applicability</Label>
                <Textarea
                  id="applicability"
                  value={formData.applicability}
                  onChange={(e) => setFormData((prev) => ({ ...prev, applicability: e.target.value }))}
                  placeholder="Specify who this policy applies to..."
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>

{/* Policy Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Policy Settings</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Requires Training</Label>
                    <p className="text-sm text-muted-foreground">
                      Employees must complete training before acknowledging this policy
                    </p>
                  </div>
                  <Switch
                    checked={formData.requiresTraining}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, requiresTraining: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Requires Acknowledgment</Label>
                    <p className="text-sm text-muted-foreground">
                      Employees must formally acknowledge reading and understanding this policy
                    </p>
                  </div>
                  <Switch
                    checked={formData.requiresAcknowledgment}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, requiresAcknowledgment: checked }))}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Auto Reminders</Label>
                    <p className="text-sm text-muted-foreground">
                      Send automatic reminders for policy reviews and renewals
                    </p>
                  </div>
                  <Switch
                    checked={formData.autoReminders}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, autoReminders: checked }))}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Document Upload */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Document Upload</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
                <Upload className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                  Drag and drop your policy document here, or click to browse
                </p>
                <Button type="button" variant="outline" size="sm">
                  Choose File
                </Button>
                <p className="text-xs text-gray-500 mt-2">Supported formats: PDF, DOC, DOCX (Max 10MB)</p>
              </div>
            </CardContent>
          </Card>

{/* Form Actions */}
          <div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !formData.title || !formData.category}>
              {loading ? (
                <>
                  <Clock className="h-4 w-4 mr-2 animate-spin" />
                  Creating...
                </>
              ) : (
                <>
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Create Policy
                </>
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/modals/report-modal.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatePicker } from "@/components/ui/date-picker"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { BarChart3, Clock } from "lucide-react"
import { useNotifications } from "@/hooks/use-notifications"

interface ReportModalProps {
  children: React.ReactNode
}

export function ReportModal({ children }: ReportModalProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const { addNotification } = useNotifications()

const [formData, setFormData] = useState({
    title: "",
    description: "",
    type: "",
    format: "pdf",
    dateRange: "last-30-days",
    customStartDate: null as Date | null,
    customEndDate: null as Date | null,
    includeCharts: true,
    includeSummary: true,
    includeDetails: true,
    includeRecommendations: false,
    recipients: [] as string[],
    schedule: "once",
    scheduleFrequency: "",
    autoSend: false,
    filters: {
      departments: [] as string[],
      riskLevels: [] as string[],
      statuses: [] as string[],
    },
  })

const [newRecipient, setNewRecipient] = useState("")

const reportTypes = [
    "Risk Assessment Report",
    "Compliance Status Report",
    "Policy Compliance Report",
    "Incident Summary Report",
    "Audit Findings Report",
    "Governance Dashboard Report",
    "Executive Summary Report",
    "Detailed Analytics Report",
  ]

const formatOptions = [
    { value: "pdf", label: "PDF Document" },
    { value: "excel", label: "Excel Spreadsheet" },
    { value: "csv", label: "CSV File" },
    { value: "html", label: "HTML Report" },
  ]

const dateRangeOptions = [
    { value: "last-7-days", label: "Last 7 Days" },
    { value: "last-30-days", label: "Last 30 Days" },
    { value: "last-90-days", label: "Last 90 Days" },
    { value: "last-year", label: "Last Year" },
    { value: "ytd", label: "Year to Date" },
    { value: "custom", label: "Custom Range" },
  ]

const scheduleOptions = [
    { value: "once", label: "Generate Once" },
    { value: "daily", label: "Daily" },
    { value: "weekly", label: "Weekly" },
    { value: "monthly", label: "Monthly" },
    { value: "quarterly", label: "Quarterly" },
  ]

const departments = [
    "Information Technology",
    "Human Resources",
    "Finance",
    "Legal",
    "Operations",
    "Marketing",
    "Sales",
    "Customer Support",
  ]

const riskLevels = ["Critical", "High", "Medium", "Low"]
  const statuses = ["Active", "In Progress", "Completed", "Overdue", "Draft"]

const addRecipient = () => {
    if (newRecipient.trim() && !formData.recipients.includes(newRecipient.trim())) {
      setFormData((prev) => ({
        ...prev,
        recipients: [...prev.recipients, newRecipient.trim()],
      }))
      setNewRecipient("")
    }
  }

const removeRecipient = (email: string) => {
    setFormData((prev) => ({
      ...prev,
      recipients: prev.recipients.filter((r) => r !== email),
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

addNotification({
        id: Date.now().toString(),
        title: "Report Generated",
        message: `${formData.title} has been successfully generated and ${formData.autoSend ? "sent to recipients" : "is ready for download"}.`,
        type: "success",
        timestamp: new Date(),
      })

setOpen(false)
      // Reset form
      setFormData({
        title: "",
        description: "",
        type: "",
        format: "pdf",
        dateRange: "last-30-days",
        customStartDate: null,
        customEndDate: null,
        includeCharts: true,
        includeSummary: true,
        includeDetails: true,
        includeRecommendations: false,
        recipients: [],
        schedule: "once",
        scheduleFrequency: "",
        autoSend: false,
        filters: {
          departments: [],
          riskLevels: [],
          statuses: [],
        },
      })
    } catch (error) {
      addNotification({
        id: Date.now().toString(),
        title: "Error",
        message: "Failed to generate report. Please try again.",
        type: "error",
        timestamp: new Date(),
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <BarChart3 className="h-5 w-5 text-blue-600" />
            <span>Generate Report</span>
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Report Configuration</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Report Title *</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="e.g., Monthly Compliance Report"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="type">Report Type *</Label>
                  <Select
                    value={formData.type}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select report type" />
                    </SelectTrigger>
                    <SelectContent>
                      {reportTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="Provide a description of what this report should include..."
                  rows={3}
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="format">Output Format</Label>
                  <Select
                    value={formData.format}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, format: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select format" />
                    </SelectTrigger>
                    <SelectContent>
                      {formatOptions.map((format) => (
                        <SelectItem key={format.value} value={format.value}>
                          {format.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="dateRange">Date Range</Label>
                  <Select
                    value={formData.dateRange}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, dateRange: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select date range" />
                    </SelectTrigger>
                    <SelectContent>
                      {dateRangeOptions.map((range) => (
                        <SelectItem key={range.value} value={range.value}>
                          {range.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

{formData.dateRange === "custom" && (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Start Date</Label>
                    <DatePicker
                      date={formData.customStartDate}
                      onDateChange={(date) => setFormData((prev) => ({ ...prev, customStartDate: date }))}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>End Date</Label>
                    <DatePicker
                      date={formData.customEndDate}
                      onDateChange={(date) => setFormData((prev) => ({ ...prev, customEndDate: date }))}
                    />
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

{/* Content Options */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Content Options</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="includeCharts"
                      checked={formData.includeCharts}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, includeCharts: checked as boolean }))
                      }
                    />
                    <Label htmlFor="includeCharts">Include Charts & Graphs</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="includeSummary"
                      checked={formData.includeSummary}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, includeSummary: checked as boolean }))
                      }
                    />
                    <Label htmlFor="includeSummary">Include Executive Summary</Label>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="includeDetails"
                      checked={formData.includeDetails}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, includeDetails: checked as boolean }))
                      }
                    />
                    <Label htmlFor="includeDetails">Include Detailed Data</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="includeRecommendations"
                      checked={formData.includeRecommendations}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, includeRecommendations: checked as boolean }))
                      }
                    />
                    <Label htmlFor="includeRecommendations">Include Recommendations</Label>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Filters */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Filters</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label>Departments</Label>
                  <div className="space-y-2 max-h-32 overflow-y-auto">
                    {departments.map((dept) => (
                      <div key={dept} className="flex items-center space-x-2">
                        <Checkbox
                          id={`dept-${dept}`}
                          checked={formData.filters.departments.includes(dept)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  departments: [...prev.filters.departments, dept],
                                },
                              }))
                            } else {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  departments: prev.filters.departments.filter((d) => d !== dept),
                                },
                              }))
                            }
                          }}
                        />
                        <Label htmlFor={`dept-${dept}`} className="text-sm">
                          {dept}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Risk Levels</Label>
                  <div className="space-y-2">
                    {riskLevels.map((level) => (
                      <div key={level} className="flex items-center space-x-2">
                        <Checkbox
                          id={`risk-${level}`}
                          checked={formData.filters.riskLevels.includes(level)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  riskLevels: [...prev.filters.riskLevels, level],
                                },
                              }))
                            } else {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  riskLevels: prev.filters.riskLevels.filter((r) => r !== level),
                                },
                              }))
                            }
                          }}
                        />
                        <Label htmlFor={`risk-${level}`} className="text-sm">
                          {level}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Statuses</Label>
                  <div className="space-y-2">
                    {statuses.map((status) => (
                      <div key={status} className="flex items-center space-x-2">
                        <Checkbox
                          id={`status-${status}`}
                          checked={formData.filters.statuses.includes(status)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  statuses: [...prev.filters.statuses, status],
                                },
                              }))
                            } else {
                              setFormData((prev) => ({
                                ...prev,
                                filters: {
                                  ...prev.filters,
                                  statuses: prev.filters.statuses.filter((s) => s !== status),
                                },
                              }))
                            }
                          }}
                        />
                        <Label htmlFor={`status-${status}`} className="text-sm">
                          {status}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Distribution */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Distribution</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Recipients</Label>
                <div className="flex space-x-2">
                  <Input
                    value={newRecipient}
                    onChange={(e) => setNewRecipient(e.target.value)}
                    placeholder="Enter email address..."
                    onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addRecipient())}
                  />
                  <Button type="button" onClick={addRecipient} size="sm">
                    Add
                  </Button>
                </div>
                {formData.recipients.length > 0 && (
                  <div className="flex flex-wrap gap-2 mt-2">
                    {formData.recipients.map((email) => (
                      <div
                        key={email}
                        className="flex items-center bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded text-sm"
                      >
                        {email}
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="ml-1 h-4 w-4 p-0"
                          onClick={() => removeRecipient(email)}
                        >
                          ×
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="schedule">Schedule</Label>
                  <Select
                    value={formData.schedule}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, schedule: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select schedule" />
                    </SelectTrigger>
                    <SelectContent>
                      {scheduleOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-center justify-between pt-6">
                  <div className="space-y-0.5">
                    <Label>Auto Send</Label>
                    <p className="text-sm text-muted-foreground">Automatically send to recipients</p>
                  </div>
                  <Switch
                    checked={formData.autoSend}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, autoSend: checked }))}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

{/* Form Actions */}
          <div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !formData.title || !formData.type}>
              {loading ? (
                <>
                  <Clock className="h-4 w-4 mr-2 animate-spin" />
                  Generating...
                </>
              ) : (
                <>
                  <BarChart3 className="h-4 w-4 mr-2" />
                  Generate Report
                </>
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/layout/main-layout.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Sidebar } from "./sidebar"
import { Header } from "./header"
import { AIAssistant } from "@/components/ai/ai-assistant"
import { cn } from "@/lib/utils"

interface MainLayoutProps {
  children: React.ReactNode
}

export function MainLayout({ children }: MainLayoutProps) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <div className="flex h-screen bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="w-64 bg-white/10 backdrop-blur-sm animate-pulse" />
        <div className="flex-1 flex flex-col">
          <div className="h-16 bg-white/10 backdrop-blur-sm animate-pulse" />
          <div className="flex-1 p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="h-32 bg-white/10 backdrop-blur-sm rounded-xl animate-pulse" />
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
      <Sidebar collapsed={sidebarCollapsed} onToggle={() => setSidebarCollapsed(!sidebarCollapsed)} />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header />
        <main
          className={cn(
            "flex-1 overflow-auto transition-all duration-300 ease-in-out",
            "bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-sm",
            "dark:from-slate-900/20 dark:to-slate-800/10",
          )}
        >
          <div className="animate-fade-in">{children}</div>
        </main>
      </div>

{/* AI Assistant */}
      <AIAssistant />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/compliance/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { MainLayout } from "@/components/layout/main-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AssessmentModal } from "@/components/modals/assessment-modal"
import {
  Search,
  Plus,
  Filter,
  Download,
  Calendar,
  Clock,
  Shield,
  FileText,
  TrendingUp,
  Users,
  Target,
} from "lucide-react"

export default function CompliancePage() {
  const [searchQuery, setSearchQuery] = useState("")

const complianceStats = [
    {
      title: "Overall Compliance Score",
      value: "87%",
      change: "+5%",
      trend: "up",
      icon: Shield,
      color: "text-green-600",
    },
    {
      title: "Active Assessments",
      value: "12",
      change: "+3",
      trend: "up",
      icon: FileText,
      color: "text-blue-600",
    },
    {
      title: "Pending Reviews",
      value: "8",
      change: "-2",
      trend: "down",
      icon: Clock,
      color: "text-orange-600",
    },
    {
      title: "Compliance Frameworks",
      value: "6",
      change: "+1",
      trend: "up",
      icon: Target,
      color: "text-purple-600",
    },
  ]

const assessments = [
    {
      id: 1,
      title: "SOC 2 Type II Assessment",
      framework: "SOC 2",
      status: "In Progress",
      progress: 65,
      dueDate: "2024-02-15",
      assignee: "Sarah Johnson",
      priority: "High",
      lastUpdated: "2024-01-10",
    },
    {
      id: 2,
      title: "GDPR Compliance Review",
      framework: "GDPR",
      status: "Completed",
      progress: 100,
      dueDate: "2024-01-30",
      assignee: "Mike Chen",
      priority: "Critical",
      lastUpdated: "2024-01-08",
    },
    {
      id: 3,
      title: "ISO 27001 Certification",
      framework: "ISO 27001",
      status: "Planning",
      progress: 25,
      dueDate: "2024-03-01",
      assignee: "Emily Davis",
      priority: "Medium",
      lastUpdated: "2024-01-05",
    },
    {
      id: 4,
      title: "HIPAA Security Assessment",
      framework: "HIPAA",
      status: "Overdue",
      progress: 45,
      dueDate: "2024-01-05",
      assignee: "David Wilson",
      priority: "Critical",
      lastUpdated: "2024-01-03",
    },
  ]

const frameworks = [
    {
      name: "SOC 2",
      compliance: 92,
      assessments: 3,
      lastReview: "2024-01-08",
      status: "Compliant",
    },
    {
      name: "GDPR",
      compliance: 88,
      assessments: 2,
      lastReview: "2024-01-10",
      status: "Compliant",
    },
    {
      name: "ISO 27001",
      compliance: 75,
      assessments: 4,
      lastReview: "2024-01-05",
      status: "In Progress",
    },
    {
      name: "HIPAA",
      compliance: 82,
      assessments: 2,
      lastReview: "2024-01-03",
      status: "Action Required",
    },
    {
      name: "PCI DSS",
      compliance: 95,
      assessments: 1,
      lastReview: "2024-01-12",
      status: "Compliant",
    },
    {
      name: "SOX",
      compliance: 78,
      assessments: 3,
      lastReview: "2024-01-07",
      status: "In Progress",
    },
  ]

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "completed":
      case "compliant":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "in progress":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "planning":
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
      case "overdue":
      case "action required":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority.toLowerCase()) {
      case "critical":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      case "high":
        return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
      case "medium":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "low":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const filteredAssessments = assessments.filter(
    (assessment) =>
      assessment.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      assessment.framework.toLowerCase().includes(searchQuery.toLowerCase()) ||
      assessment.assignee.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <MainLayout>
      <div className="p-6 space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Compliance Management</h1>
            <p className="text-slate-600 dark:text-slate-400 mt-1">
              Monitor and manage compliance assessments across all frameworks
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
            <AssessmentModal>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                New Assessment
              </Button>
            </AssessmentModal>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {complianceStats.map((stat, index) => (
            <Card
              key={index}
              className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">{stat.title}</p>
                    <p className="text-2xl font-bold text-slate-900 dark:text-white mt-1">{stat.value}</p>
                    <div className="flex items-center mt-2">
                      <TrendingUp
                        className={`h-4 w-4 mr-1 ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      />
                      <span
                        className={`text-sm font-medium ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      >
                        {stat.change}
                      </span>
                      <span className="text-sm text-slate-500 ml-1">vs last month</span>
                    </div>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color} bg-opacity-10`}>
                    <stat.icon className={`h-6 w-6 ${stat.color}`} />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Main Content */}
        <Tabs defaultValue="assessments" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2 lg:w-[400px]">
            <TabsTrigger value="assessments">Assessments</TabsTrigger>
            <TabsTrigger value="frameworks">Frameworks</TabsTrigger>
          </TabsList>

<TabsContent value="assessments" className="space-y-6">
            {/* Search and Filters */}
            <Card className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg">
              <CardContent className="p-6">
                <div className="flex flex-col sm:flex-row gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                    <Input
                      placeholder="Search assessments..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                  <Button variant="outline">
                    <Filter className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Assessments List */}
            <div className="grid gap-6">
              {filteredAssessments.map((assessment) => (
                <Card
                  key={assessment.id}
                  className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardContent className="p-6">
                    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{assessment.title}</h3>
                          <Badge className={getStatusColor(assessment.status)}>{assessment.status}</Badge>
                          <Badge className={getPriorityColor(assessment.priority)}>{assessment.priority}</Badge>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400">
                          <span className="flex items-center gap-1">
                            <Shield className="h-4 w-4" />
                            {assessment.framework}
                          </span>
                          <span className="flex items-center gap-1">
                            <Users className="h-4 w-4" />
                            {assessment.assignee}
                          </span>
                          <span className="flex items-center gap-1">
                            <Calendar className="h-4 w-4" />
                            Due: {assessment.dueDate}
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <div className="text-right">
                          <p className="text-sm font-medium text-slate-900 dark:text-white">
                            {assessment.progress}% Complete
                          </p>
                          <Progress value={assessment.progress} className="w-24 mt-1" />
                        </div>
                        <Button variant="outline" size="sm">
                          View Details
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="frameworks" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {frameworks.map((framework, index) => (
                <Card
                  key={index}
                  className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg">{framework.name}</CardTitle>
                      <Badge className={getStatusColor(framework.status)}>{framework.status}</Badge>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div>
                        <div className="flex justify-between items-center mb-2">
                          <span className="text-sm font-medium text-slate-600 dark:text-slate-400">
                            Compliance Score
                          </span>
                          <span className="text-sm font-bold text-slate-900 dark:text-white">
                            {framework.compliance}%
                          </span>
                        </div>
                        <Progress value={framework.compliance} />
                      </div>
                      <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <p className="text-slate-600 dark:text-slate-400">Assessments</p>
                          <p className="font-semibold text-slate-900 dark:text-white">{framework.assessments}</p>
                        </div>
                        <div>
                          <p className="text-slate-600 dark:text-slate-400">Last Review</p>
                          <p className="font-semibold text-slate-900 dark:text-white">{framework.lastReview}</p>
                        </div>
                      </div>
                      <Button variant="outline" className="w-full bg-transparent">
                        View Framework
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </MainLayout>
  )
}
[V0_FILE]typescriptreact:file="app/compliance/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/governance/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { MainLayout } from "@/components/layout/main-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { PolicyModal } from "@/components/modals/policy-modal"
import {
  Search,
  Plus,
  Filter,
  Download,
  Calendar,
  FileText,
  Users,
  Clock,
  Shield,
  TrendingUp,
  CheckCircle,
  Eye,
  Edit,
} from "lucide-react"

export default function GovernancePage() {
  const [searchQuery, setSearchQuery] = useState("")

const governanceStats = [
    {
      title: "Active Policies",
      value: "47",
      change: "+3",
      trend: "up",
      icon: FileText,
      color: "text-blue-600",
    },
    {
      title: "Policies Due for Review",
      value: "8",
      change: "-2",
      trend: "down",
      icon: Clock,
      color: "text-orange-600",
    },
    {
      title: "Compliance Rate",
      value: "94%",
      change: "+2%",
      trend: "up",
      icon: Shield,
      color: "text-green-600",
    },
    {
      title: "Policy Acknowledgments",
      value: "89%",
      change: "+5%",
      trend: "up",
      icon: CheckCircle,
      color: "text-purple-600",
    },
  ]

const policies = [
    {
      id: 1,
      title: "Information Security Policy",
      category: "Information Security",
      version: "2.1",
      status: "Active",
      owner: "Sarah Johnson",
      lastReview: "2024-01-15",
      nextReview: "2024-07-15",
      acknowledgmentRate: 95,
      priority: "Critical",
    },
    {
      id: 2,
      title: "Data Privacy Policy",
      category: "Data Privacy",
      version: "1.3",
      status: "Under Review",
      owner: "Mike Chen",
      lastReview: "2024-01-10",
      nextReview: "2024-04-10",
      acknowledgmentRate: 88,
      priority: "High",
    },
    {
      id: 3,
      title: "Remote Work Policy",
      category: "Human Resources",
      version: "1.0",
      status: "Draft",
      owner: "Emily Davis",
      lastReview: "2024-01-08",
      nextReview: "2024-03-08",
      acknowledgmentRate: 0,
      priority: "Medium",
    },
    {
      id: 4,
      title: "Incident Response Policy",
      category: "IT Governance",
      version: "3.0",
      status: "Active",
      owner: "David Wilson",
      lastReview: "2024-01-05",
      nextReview: "2024-06-05",
      acknowledgmentRate: 92,
      priority: "Critical",
    },
    {
      id: 5,
      title: "Vendor Management Policy",
      category: "Vendor Management",
      version: "1.2",
      status: "Expired",
      owner: "Lisa Brown",
      lastReview: "2023-12-01",
      nextReview: "2024-01-01",
      acknowledgmentRate: 78,
      priority: "High",
    },
  ]

const policyCategories = [
    {
      name: "Information Security",
      count: 12,
      compliance: 96,
      status: "Excellent",
    },
    {
      name: "Data Privacy",
      count: 8,
      compliance: 94,
      status: "Good",
    },
    {
      name: "Human Resources",
      count: 15,
      compliance: 89,
      status: "Good",
    },
    {
      name: "Financial",
      count: 6,
      compliance: 98,
      status: "Excellent",
    },
    {
      name: "IT Governance",
      count: 10,
      compliance: 91,
      status: "Good",
    },
    {
      name: "Vendor Management",
      count: 4,
      compliance: 85,
      status: "Needs Attention",
    },
  ]

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "active":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "under review":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "draft":
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
      case "expired":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const getComplianceStatus = (compliance: number) => {
    if (compliance >= 95) return { status: "Excellent", color: "text-green-600" }
    if (compliance >= 90) return { status: "Good", color: "text-blue-600" }
    if (compliance >= 80) return { status: "Needs Attention", color: "text-orange-600" }
    return { status: "Critical", color: "text-red-600" }
  }

const filteredPolicies = policies.filter(
    (policy) =>
      policy.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      policy.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      policy.owner.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <MainLayout>
      <div className="p-6 space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Governance</h1>
            <p className="text-slate-600 dark:text-slate-400 mt-1">
              Manage policies, procedures, and governance frameworks
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
            <PolicyModal>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                New Policy
              </Button>
            </PolicyModal>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {governanceStats.map((stat, index) => (
            <Card
              key={index}
              className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">{stat.title}</p>
                    <p className="text-2xl font-bold text-slate-900 dark:text-white mt-1">{stat.value}</p>
                    <div className="flex items-center mt-2">
                      <TrendingUp
                        className={`h-4 w-4 mr-1 ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      />
                      <span
                        className={`text-sm font-medium ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      >
                        {stat.change}
                      </span>
                      <span className="text-sm text-slate-500 ml-1">vs last month</span>
                    </div>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color} bg-opacity-10`}>
                    <stat.icon className={`h-6 w-6 ${stat.color}`} />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Main Content */}
        <Tabs defaultValue="policies" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2 lg:w-[400px]">
            <TabsTrigger value="policies">Policies</TabsTrigger>
            <TabsTrigger value="categories">Categories</TabsTrigger>
          </TabsList>

<TabsContent value="policies" className="space-y-6">
            {/* Search and Filters */}
            <Card className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg">
              <CardContent className="p-6">
                <div className="flex flex-col sm:flex-row gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                    <Input
                      placeholder="Search policies..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                  <Button variant="outline">
                    <Filter className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Policies List */}
            <div className="grid gap-6">
              {filteredPolicies.map((policy) => (
                <Card
                  key={policy.id}
                  className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardContent className="p-6">
                    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{policy.title}</h3>
                          <Badge className={getStatusColor(policy.status)}>{policy.status}</Badge>
                          <Badge className={getPriorityColor(policy.priority)}>{policy.priority}</Badge>
                          <span className="text-sm text-slate-500">v{policy.version}</span>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400 mb-3">
                          <span className="flex items-center gap-1">
                            <FileText className="h-4 w-4" />
                            {policy.category}
                          </span>
                          <span className="flex items-center gap-1">
                            <Users className="h-4 w-4" />
                            {policy.owner}
                          </span>
                          <span className="flex items-center gap-1">
                            <Calendar className="h-4 w-4" />
                            Next Review: {policy.nextReview}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-sm text-slate-600 dark:text-slate-400">Acknowledgment Rate:</span>
                          <Progress value={policy.acknowledgmentRate} className="w-24" />
                          <span className="text-sm font-medium text-slate-900 dark:text-white">
                            {policy.acknowledgmentRate}%
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button variant="outline" size="sm">
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </Button>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="categories" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {policyCategories.map((category, index) => {
                const complianceStatus = getComplianceStatus(category.compliance)
                return (
                  <Card
                    key={index}
                    className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
                  >
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">{category.name}</CardTitle>
                        <Badge className={`${complianceStatus.color} bg-opacity-10`}>{complianceStatus.status}</Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div>
                          <div className="flex justify-between items-center mb-2">
                            <span className="text-sm font-medium text-slate-600 dark:text-slate-400">
                              Compliance Score
                            </span>
                            <span className="text-sm font-bold text-slate-900 dark:text-white">
                              {category.compliance}%
                            </span>
                          </div>
                          <Progress value={category.compliance} />
                        </div>
                        <div className="flex justify-between items-center">
                          <span className="text-sm text-slate-600 dark:text-slate-400">Total Policies</span>
                          <span className="text-lg font-bold text-slate-900 dark:text-white">{category.count}</span>
                        </div>
                        <Button variant="outline" className="w-full bg-transparent">
                          View Category
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )
              })}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </MainLayout>
  )
}
[V0_FILE]typescriptreact:file="app/governance/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/reports/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { MainLayout } from "@/components/layout/main-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ReportModal } from "@/components/modals/report-modal"
import {
  Search,
  Plus,
  Filter,
  Download,
  BarChart3,
  FileText,
  Clock,
  TrendingUp,
  Eye,
  Share,
  RefreshCw,
} from "lucide-react"

export default function ReportsPage() {
  const [searchQuery, setSearchQuery] = useState("")

const reportStats = [
    {
      title: "Total Reports",
      value: "156",
      change: "+12",
      trend: "up",
      icon: FileText,
      color: "text-blue-600",
    },
    {
      title: "Scheduled Reports",
      value: "23",
      change: "+3",
      trend: "up",
      icon: Clock,
      color: "text-green-600",
    },
    {
      title: "Reports This Month",
      value: "34",
      change: "+8",
      trend: "up",
      icon: BarChart3,
      color: "text-purple-600",
    },
    {
      title: "Shared Reports",
      value: "89",
      change: "+15",
      trend: "up",
      icon: Share,
      color: "text-orange-600",
    },
  ]

const reports = [
    {
      id: 1,
      title: "Monthly Compliance Dashboard",
      type: "Compliance Status Report",
      format: "PDF",
      status: "Completed",
      createdBy: "Sarah Johnson",
      createdDate: "2024-01-15",
      lastRun: "2024-01-15 09:30",
      schedule: "Monthly",
      recipients: 5,
      size: "2.4 MB",
    },
    {
      id: 2,
      title: "Risk Assessment Summary",
      type: "Risk Assessment Report",
      format: "Excel",
      status: "Scheduled",
      createdBy: "Mike Chen",
      createdDate: "2024-01-10",
      lastRun: "2024-01-10 14:15",
      schedule: "Weekly",
      recipients: 8,
      size: "1.8 MB",
    },
    {
      id: 3,
      title: "Policy Compliance Analysis",
      type: "Policy Compliance Report",
      format: "PDF",
      status: "In Progress",
      createdBy: "Emily Davis",
      createdDate: "2024-01-12",
      lastRun: "2024-01-12 11:45",
      schedule: "Quarterly",
      recipients: 12,
      size: "3.2 MB",
    },
    {
      id: 4,
      title: "Incident Response Metrics",
      type: "Incident Summary Report",
      format: "HTML",
      status: "Failed",
      createdBy: "David Wilson",
      createdDate: "2024-01-08",
      lastRun: "2024-01-08 16:20",
      schedule: "Daily",
      recipients: 3,
      size: "0.9 MB",
    },
    {
      id: 5,
      title: "Executive GRC Summary",
      type: "Executive Summary Report",
      format: "PDF",
      status: "Completed",
      createdBy: "Lisa Brown",
      createdDate: "2024-01-14",
      lastRun: "2024-01-14 08:00",
      schedule: "Monthly",
      recipients: 15,
      size: "4.1 MB",
    },
  ]

const reportTemplates = [
    {
      name: "Risk Assessment Report",
      description: "Comprehensive risk analysis with heatmaps and recommendations",
      category: "Risk Management",
      usage: 45,
      lastUsed: "2024-01-15",
    },
    {
      name: "Compliance Status Report",
      description: "Current compliance status across all frameworks",
      category: "Compliance",
      usage: 67,
      lastUsed: "2024-01-14",
    },
    {
      name: "Policy Compliance Report",
      description: "Policy acknowledgment and compliance tracking",
      category: "Governance",
      usage: 32,
      lastUsed: "2024-01-12",
    },
    {
      name: "Incident Summary Report",
      description: "Security incidents and response metrics",
      category: "Incident Management",
      usage: 28,
      lastUsed: "2024-01-10",
    },
    {
      name: "Audit Findings Report",
      description: "Detailed audit results and remediation status",
      category: "Audit",
      usage: 19,
      lastUsed: "2024-01-08",
    },
    {
      name: "Executive Dashboard",
      description: "High-level GRC metrics for executive leadership",
      category: "Executive",
      usage: 56,
      lastUsed: "2024-01-15",
    },
  ]

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "completed":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "scheduled":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "in progress":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "failed":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const getFormatIcon = (format: string) => {
    switch (format.toLowerCase()) {
      case "pdf":
        return "📄"
      case "excel":
        return "📊"
      case "csv":
        return "📋"
      case "html":
        return "🌐"
      default:
        return "📄"
    }
  }

const filteredReports = reports.filter(
    (report) =>
      report.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      report.type.toLowerCase().includes(searchQuery.toLowerCase()) ||
      report.createdBy.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <MainLayout>
      <div className="p-6 space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Reports</h1>
            <p className="text-slate-600 dark:text-slate-400 mt-1">Generate, schedule, and manage GRC reports</p>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
            <ReportModal>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                Create Report
              </Button>
            </ReportModal>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {reportStats.map((stat, index) => (
            <Card
              key={index}
              className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-slate-600 dark:text-slate-400">{stat.title}</p>
                    <p className="text-2xl font-bold text-slate-900 dark:text-white mt-1">{stat.value}</p>
                    <div className="flex items-center mt-2">
                      <TrendingUp
                        className={`h-4 w-4 mr-1 ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      />
                      <span
                        className={`text-sm font-medium ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}
                      >
                        {stat.change}
                      </span>
                      <span className="text-sm text-slate-500 ml-1">vs last month</span>
                    </div>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color} bg-opacity-10`}>
                    <stat.icon className={`h-6 w-6 ${stat.color}`} />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Main Content */}
        <Tabs defaultValue="reports" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2 lg:w-[400px]">
            <TabsTrigger value="reports">My Reports</TabsTrigger>
            <TabsTrigger value="templates">Templates</TabsTrigger>
          </TabsList>

<TabsContent value="reports" className="space-y-6">
            {/* Search and Filters */}
            <Card className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg">
              <CardContent className="p-6">
                <div className="flex flex-col sm:flex-row gap-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
                    <Input
                      placeholder="Search reports..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                  <Button variant="outline">
                    <Filter className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Reports List */}
            <div className="grid gap-6">
              {filteredReports.map((report) => (
                <Card
                  key={report.id}
                  className="bg-white/80 backdrop-blur-sm border-white/20 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardContent className="p-6">
                    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <span className="text-lg">{getFormatIcon(report.format)}</span>
                          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{report.title}</h3>
                          <Badge className={getStatusColor(report.status)}>{report.status}</Badge>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400 mb-2">
                          <span className="flex items-center gap-1">
                            <BarChart3 className="h-4 w-4" />
                            {report.type}
                          </span>
                          <span className="flex items-center gap-1">
                            <FileText className="h-4 w-4" />
                            {report.format}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock className="h-4 w-4" />
                            {report.schedule}
                          </span>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400">
                          <span>Created by {report.createdBy}</span>
                          <span>Last run: {report.lastRun}</span>
                          <span>{report.recipients} recipients</span>
                          <span>{report.size}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button variant="outline" size="sm">
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </Button>
                        <Button variant="outline" size="sm">
                          <Download className="h-4 w-4 mr-2" />
                          Download
                        </Button>
                        <Button variant="outline" size="sm">
                          <Share className="h-4 w-4 mr-2" />
                          Share
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

A comprehensive Governance, Risk, and Compliance (GRC) management platform built with Next.js, TypeScript, and Tailwind CSS.

## 🚀 Features

### Core Modules
- **Dashboard**: Real-time GRC metrics and analytics
- **Risk Management**: Enterprise risk register, assessments, and heat maps
- **Compliance**: Framework management, assessments, and policy tracking
- **Governance**: Incident management, policy control, and audit trails
- **Reports**: Automated reporting and analytics

### Key Capabilities
- ✅ Real-time risk monitoring and assessment
- ✅ Compliance framework tracking (ISO 27001, SOX, GDPR, NIST)
- ✅ Incident management and business impact analysis
- ✅ Policy lifecycle management
- ✅ Role-based access control
- ✅ Automated report generation
- ✅ Interactive dashboards and analytics
- ✅ Audit trail and activity logging

## 🛠️ Tech Stack

- **Framework**: Next.js 14 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **Charts**: Recharts
- **Icons**: Lucide React
- **State Management**: React Hooks
- **Authentication**: NextAuth.js (ready for integration)

## 📁 Project Structure

\`\`\`
├── app/                          # Next.js App Router pages
│   ├── (auth)/                   # Authentication pages
│   ├── compliance/               # Compliance module
│   ├── governance/               # Governance module
│   ├── reports/                  # Reports module
│   ├── risk-management/          # Risk management module
│   ├── settings/                 # Settings pages
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Dashboard page
├── components/                   # Reusable components
│   ├── forms/                   # Form components
│   ├── layout/                  # Layout components
│   ├── settings/                # Settings components
│   └── ui/                      # shadcn/ui components
├── lib/                         # Utility functions
├── hooks/                       # Custom React hooks
├── types/                       # TypeScript type definitions
├── data/                        # Mock data and constants
└── public/                      # Static assets
\`\`\`

## 🚀 Getting Started

### Prerequisites
- Node.js 18+ 
- npm or yarn

### Installation

1. Clone the repository:
\`\`\`bash
git clone <repository-url>
cd qs-grc-platform
\`\`\`

2. Install dependencies:
\`\`\`bash
npm install
# or
yarn install
\`\`\`

3. Run the development server:
\`\`\`bash
npm run dev
# or
yarn dev
\`\`\`

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## 🔧 Configuration

### Environment Variables
Create a `.env.local` file in the root directory:

\`\`\`env
# Database
DATABASE_URL="your-database-url"

# Authentication
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"

# Email
SMTP_HOST="your-smtp-host"
SMTP_PORT="587"
SMTP_USER="your-email"
SMTP_PASS="your-password"
\`\`\`

## 📊 Usage

### Dashboard
- View real-time GRC metrics
- Monitor risk trends and compliance scores
- Access quick actions for common tasks

### Risk Management
- Create and manage risk assessments
- View risk heat maps and analytics
- Track risk mitigation activities

### Compliance
- Monitor compliance frameworks
- Conduct assessments and track findings
- Manage policies and procedures

### Governance
- Report and track incidents
- Manage organizational policies
- Control user access and permissions

### Settings
- Configure system preferences
- Manage user accounts and roles
- Set up notifications and integrations

## 🔐 Security Features

- Role-based access control (RBAC)
- Audit trail logging
- Data encryption
- Secure authentication
- Session management

## 📈 Performance

- Server-side rendering (SSR)
- Static site generation (SSG)
- Optimized bundle size
- Lazy loading components
- Efficient data fetching

## 🧪 Testing

\`\`\`bash
# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage
\`\`\`

## 🚀 Deployment

### Vercel (Recommended)
1. Connect your repository to Vercel
2. Configure environment variables
3. Deploy automatically on push

### Docker
\`\`\`bash
# Build image
docker build -t qs-grc .

# Run container
docker run -p 3000:3000 qs-grc
\`\`\`

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

For support and questions:
- Email: support@qs-grc.com
- Documentation: [docs.qs-grc.com](https://docs.qs-grc.com)
- Issues: [GitHub Issues](https://github.com/your-org/qs-grc/issues)

## 🗺️ Roadmap

- [ ] Advanced analytics and AI insights
- [ ] Mobile application
- [ ] Third-party integrations (Slack, Teams, etc.)
- [ ] Advanced workflow automation
- [ ] Multi-tenant support
- [ ] API documentation and SDK
\`\`\`

Now let me create the TypeScript types:
[V0_FILE]typescript:file="types/index.ts" isFixed="true" isQuickEdit="true" isMerged="true"
export interface User {
  id: string
  name: string
  email: string
  role: UserRole
  department: string
  avatar?: string
  createdAt: Date
  updatedAt: Date
}

export interface UserRole {
  id: string
  name: string
  permissions: Permission[]
  description: string
}

export interface Permission {
  id: string
  name: string
  resource: string
  action: string
}

export interface Risk {
  id: string
  title: string
  description: string
  category: RiskCategory
  impact: RiskLevel
  likelihood: RiskLevel
  riskScore: number
  status: RiskStatus
  owner: string
  department: string
  dueDate: Date
  createdAt: Date
  updatedAt: Date
  mitigationPlan?: string
  controls: Control[]
}

export interface Control {
  id: string
  name: string
  description: string
  type: string // ControlType
  effectiveness: string // ControlEffectiveness
  owner: string
  testDate?: Date
  nextTestDate?: Date
}

export interface Incident {
  id: string
  title: string
  description: string
  severity: IncidentSeverity
  status: IncidentStatus
  category: string // IncidentCategory
  reportedBy: string
  assignedTo: string
  reportedDate: Date
  resolvedDate?: Date
  impact: string
  rootCause?: string
  correctiveActions: string[]
}

export interface ComplianceFramework {
  id: string
  name: string
  description: string
  version: string
  status: ComplianceStatus
  score: number
  lastAssessment: Date
  nextReview: Date
  controls: ComplianceControl[]
  requirements: any[] // Requirement
}

export interface ComplianceControl {
  id: string
  name: string
  description: string
  status: string // ControlStatus
  evidence: any[] // Evidence
  owner: string
  testDate?: Date
}

export interface Policy {
  id: string
  name: string
  description: string
  version: string
  status: PolicyStatus
  owner: string
  approvers: string[]
  lastReview: Date
  nextReview: Date
  content: string
  attachments: any[] // Attachment
}

export interface Assessment {
  id: string
  title: string
  type: AssessmentType
  framework: string
  status: string // AssessmentStatus
  score?: number
  assessor: string
  startDate: Date
  completedDate?: Date
  findings: Finding[]
}

export interface Finding {
  id: string
  title: string
  description: string
  severity: string // FindingSeverity
  status: string // FindingStatus
  recommendation: string
  dueDate: Date
  assignedTo: string
}

export interface Report {
  id: string
  name: string
  description: string
  type: ReportType
  category: string
  template: string
  schedule?: any // ReportSchedule
  recipients: string[]
  lastGenerated?: Date
  status: string // ReportStatus
}

export interface AuditLog {
  id: string
  userId: string
  action: string
  resource: string
  resourceId: string
  timestamp: Date
  ipAddress: string
  userAgent: string
  details: Record<string, any>
}

export interface Notification {
  id: string
  userId: string
  title: string
  message: string
  type: NotificationType
  read: boolean
  createdAt: Date
  actionUrl?: string
}

export interface Settings {
  general: GeneralSettings
  security: SecuritySettings
  notifications: NotificationSettings
  integrations: any // IntegrationSettings
  appearance: any // AppearanceSettings
}

export interface GeneralSettings {
  organizationName: string
  timezone: string
  dateFormat: string
  language: string
  currency: string
}

export interface SecuritySettings {
  passwordPolicy: any // PasswordPolicy
  sessionTimeout: number
  mfaRequired: boolean
  ipWhitelist: string[]
  auditRetention: number
}

export interface NotificationSettings {
  email: any // EmailNotificationSettings
  inApp: any // InAppNotificationSettings
  sms: any // SMSNotificationSettings
}

// Enums
export enum RiskLevel {
  VERY_LOW = 1,
  LOW = 2,
  MEDIUM = 3,
  HIGH = 4,
  VERY_HIGH = 5,
}

export enum RiskStatus {
  OPEN = "open",
  IN_PROGRESS = "in_progress",
  MONITORING = "monitoring",
  CLOSED = "closed",
}

export enum RiskCategory {
  CYBERSECURITY = "cybersecurity",
  OPERATIONAL = "operational",
  FINANCIAL = "financial",
  COMPLIANCE = "compliance",
  STRATEGIC = "strategic",
  REPUTATIONAL = "reputational",
}

export enum IncidentSeverity {
  LOW = "low",
  MEDIUM = "medium",
  HIGH = "high",
  CRITICAL = "critical",
}

export enum IncidentStatus {
  OPEN = "open",
  INVESTIGATING = "investigating",
  RESOLVED = "resolved",
  CLOSED = "closed",
}

export enum ComplianceStatus {
  COMPLIANT = "compliant",
  PARTIAL = "partial",
  NON_COMPLIANT = "non_compliant",
  IN_PROGRESS = "in_progress",
}

export enum PolicyStatus {
  DRAFT = "draft",
  UNDER_REVIEW = "under_review",
  ACTIVE = "active",
  ARCHIVED = "archived",
}

export enum NotificationType {
  INFO = "info",
  WARNING = "warning",
  ERROR = "error",
  SUCCESS = "success",
}

export enum ReportType {
  DASHBOARD = "dashboard",
  DETAILED = "detailed",
  SUMMARY = "summary",
  EXECUTIVE = "executive",
}

export enum AssessmentType {
  RISK = "risk",
  COMPLIANCE = "compliance",
  SECURITY = "security",
  OPERATIONAL = "operational",
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import { type RiskLevel, IncidentSeverity, ComplianceStatus } from "@/types"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatDate(date: Date | string): string {
  const d = new Date(date)
  return d.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  })
}

export function formatDateTime(date: Date | string): string {
  const d = new Date(date)
  return d.toLocaleString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })
}

export function calculateRiskScore(impact: RiskLevel, likelihood: RiskLevel): number {
  return impact * likelihood
}

export function getRiskScoreColor(score: number): string {
  if (score >= 15) return "text-red-600"
  if (score >= 10) return "text-orange-600"
  if (score >= 5) return "text-yellow-600"
  return "text-green-600"
}

export function getRiskScoreBadge(score: number): "destructive" | "secondary" | "default" | "outline" {
  if (score >= 15) return "destructive"
  if (score >= 10) return "secondary"
  if (score >= 5) return "default"
  return "outline"
}

export function getIncidentSeverityColor(severity: IncidentSeverity): string {
  switch (severity) {
    case IncidentSeverity.CRITICAL:
      return "text-red-600"
    case IncidentSeverity.HIGH:
      return "text-orange-600"
    case IncidentSeverity.MEDIUM:
      return "text-yellow-600"
    case IncidentSeverity.LOW:
      return "text-green-600"
    default:
      return "text-gray-600"
  }
}

export function getComplianceStatusColor(status: ComplianceStatus): string {
  switch (status) {
    case ComplianceStatus.COMPLIANT:
      return "text-green-600"
    case ComplianceStatus.PARTIAL:
      return "text-orange-600"
    case ComplianceStatus.NON_COMPLIANT:
      return "text-red-600"
    case ComplianceStatus.IN_PROGRESS:
      return "text-blue-600"
    default:
      return "text-gray-600"
  }
}

export function generateId(prefix: string): string {
  const timestamp = Date.now().toString(36)
  const random = Math.random().toString(36).substr(2, 5)
  return `${prefix}-${timestamp}${random}`.toUpperCase()
}

export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout
  return (...args: Parameters<T>) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

export function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

export function validatePassword(password: string): {
  isValid: boolean
  errors: string[]
} {
  const errors: string[] = []

if (password.length < 8) {
    errors.push("Password must be at least 8 characters long")
  }

if (!/[A-Z]/.test(password)) {
    errors.push("Password must contain at least one uppercase letter")
  }

if (!/[a-z]/.test(password)) {
    errors.push("Password must contain at least one lowercase letter")
  }

if (!/\d/.test(password)) {
    errors.push("Password must contain at least one number")
  }

if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
    errors.push("Password must contain at least one special character")
  }

return {
    isValid: errors.length === 0,
    errors,
  }
}

export function exportToCSV(data: any[], filename: string): void {
  if (!data.length) return

const headers = Object.keys(data[0])
  const csvContent = [
    headers.join(","),
    ...data.map((row) =>
      headers
        .map((header) => {
          const value = row[header]
          return typeof value === "string" && value.includes(",") ? `"${value}"` : value
        })
        .join(","),
    ),
  ].join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement("a")
  link.href = url
  link.download = `${filename}.csv`
  link.click()
  window.URL.revokeObjectURL(url)
}

export function formatFileSize(bytes: number): string {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const sizes = ["Bytes", "KB", "MB", "GB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
}
[V0_FILE]typescript:file="hooks/use-local-storage.ts" isMerged="true"
"use client"

import { useState } from "react"

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") {
      return initialValue
    }

try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error)
      return initialValue
    }
  })

const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)

if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore))
      }
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error)
    }
  }

return [storedValue, setValue] as const
}
[V0_FILE]typescript:file="hooks/use-debounce.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

return debouncedValue
}
[V0_FILE]typescript:file="hooks/use-notifications.ts" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { type Notification, NotificationType } from "@/types"

export function useNotifications() {
  const [notifications, setNotifications] = useState<Notification[]>([])

const addNotification = useCallback(
    (title: string, message: string, type: NotificationType = NotificationType.INFO, actionUrl?: string) => {
      const notification: Notification = {
        id: Math.random().toString(36).substr(2, 9),
        userId: "current-user", // This would come from auth context
        title,
        message,
        type,
        read: false,
        createdAt: new Date(),
        actionUrl,
      }

setNotifications((prev) => [notification, ...prev])

// Auto-remove after 5 seconds for non-error notifications
      if (type !== NotificationType.ERROR) {
        setTimeout(() => {
          removeNotification(notification.id)
        }, 5000)
      }
    },
    [],
  )

const removeNotification = useCallback((id: string) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id))
  }, [])

const markAsRead = useCallback((id: string) => {
    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
  }, [])

const clearAll = useCallback(() => {
    setNotifications([])
  }, [])

return {
    notifications,
    addNotification,
    removeNotification,
    markAsRead,
    clearAll,
  }
}
[V0_FILE]typescript:file="app/settings/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { GeneralSettings } from "@/components/settings/general-settings"

export default function SettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <GeneralSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="app/settings/security/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { SecuritySettings } from "@/components/settings/security-settings"

export default function SecuritySettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <SecuritySettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="app/settings/notifications/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { NotificationSettings } from "@/components/settings/notification-settings"

export default function NotificationSettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <NotificationSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="app/settings/users/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { UserManagement } from "@/components/settings/user-management"

export default function UserManagementPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <UserManagement />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="app/settings/integrations/page.tsx" isMerged="true"
"use client"

import { MainLayout } from "@/components/layout/main-layout"
import { SettingsLayout } from "@/components/settings/settings-layout"
import { IntegrationSettings } from "@/components/settings/integration-settings"

export default function IntegrationSettingsPage() {
  return (
    <MainLayout>
      <SettingsLayout>
        <IntegrationSettings />
      </SettingsLayout>
    </MainLayout>
  )
}
[V0_FILE]typescript:file="components/settings/settings-layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Settings, Shield, Bell, Users, Plug, Palette, Database, FileText } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"

interface SettingsLayoutProps {
  children: React.ReactNode
}

const settingsNavigation = [
  {
    name: "General",
    href: "/settings",
    icon: Settings,
    description: "Organization settings and preferences",
  },
  {
    name: "Security",
    href: "/settings/security",
    icon: Shield,
    description: "Password policies and security settings",
  },
  {
    name: "Notifications",
    href: "/settings/notifications",
    icon: Bell,
    description: "Email and notification preferences",
  },
  {
    name: "User Management",
    href: "/settings/users",
    icon: Users,
    description: "Manage users, roles, and permissions",
  },
  {
    name: "Integrations",
    href: "/settings/integrations",
    icon: Plug,
    description: "Third-party integrations and APIs",
  },
  {
    name: "Appearance",
    href: "/settings/appearance",
    icon: Palette,
    description: "Theme and display preferences",
  },
  {
    name: "Data Management",
    href: "/settings/data",
    icon: Database,
    description: "Data retention and backup settings",
  },
  {
    name: "Audit & Compliance",
    href: "/settings/audit",
    icon: FileText,
    description: "Audit logging and compliance settings",
  },
]

export function SettingsLayout({ children }: SettingsLayoutProps) {
  const pathname = usePathname()

return (
    <div className="p-6 space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-3xl font-bold text-slate-900">Settings</h1>
        <p className="text-slate-600 mt-1">Manage your organization's GRC platform configuration</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Settings Navigation */}
        <div className="lg:col-span-1">
          <Card className="p-4">
            <nav className="space-y-2">
              {settingsNavigation.map((item) => {
                const Icon = item.icon
                const isActive = pathname === item.href

return (
                  <Link key={item.name} href={item.href}>
                    <Button
                      variant={isActive ? "default" : "ghost"}
                      className={cn(
                        "w-full justify-start h-auto p-3 text-left",
                        isActive && "bg-blue-600 text-white hover:bg-blue-700",
                      )}
                    >
                      <div className="flex items-start space-x-3">
                        <Icon className="h-5 w-5 mt-0.5 flex-shrink-0" />
                        <div className="flex-1 min-w-0">
                          <p className="font-medium">{item.name}</p>
                          <p className={cn("text-xs mt-1", isActive ? "text-blue-100" : "text-slate-500")}>
                            {item.description}
                          </p>
                        </div>
                      </div>
                    </Button>
                  </Link>
                )
              })}
            </nav>
          </Card>
        </div>

{/* Settings Content */}
        <div className="lg:col-span-3">{children}</div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/settings/general-settings.tsx" isMerged="true"
"use client"

export function GeneralSettings() {
  const [settings, setSettings] = useState({
    organizationName: "QS Corporation",
    organizationDescription: "Leading technology solutions provider",
    website: "https://qscorp.com",
    timezone: "America/New_York",
    dateFormat: "MM/DD/YYYY",
    timeFormat: "12h",
    language: "en",
    currency: "USD",
    fiscalYearStart: "January",
    enableMaintenanceMode: false,
    allowSelfRegistration: false,
    requireEmailVerification: true,
  })

const handleSave = () => {
    // Save settings logic here
    console.log("Saving settings:", settings)
  }

return (
    <div className="space-y-6">
      {/* Organization Information */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Building className="h-5 w-5 mr-2" />
            Organization Information
          </CardTitle>
          <CardDescription>Basic information about your organization</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="orgName">Organization Name</Label>
              <Input
                id="orgName"
                value={settings.organizationName}
                onChange={(e) => setSettings((prev) => ({ ...prev, organizationName: e.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="website">Website</Label>
              <Input
                id="website"
                type="url"
                value={settings.website}
                onChange={(e) => setSettings((prev) => ({ ...prev, website: e.target.value }))}
              />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={settings.organizationDescription}
              onChange={(e) => setSettings((prev) => ({ ...prev, organizationDescription: e.target.value }))}
              rows={3}
            />
          </div>
        </CardContent>
      </Card>