ai-compliance-platform

An AI-powered compliance monitoring system for SaaS companies. Built with Next.js 14, TypeScript, TailwindCSS, shadcn/ui, Framer Motion, and Recharts.

• Landing Page (/) - Hero, features, how it works, enterprise trust, footer. Animated gradient background, smooth scroll, Framer Motion.
• Login (/login) - Glassmorphism login with email, password, role selector (Admin / Compliance Officer / Viewer), demo mode badge. Mock auth with redirect.
• Auth System - AuthContext with user (name, role, email, department), login(), logout(). Unauthenticated users redirect to /login.
• Role Logic - Admin: full access. Compliance Officer: no Settings, no user management. Viewer: Dashboard + Reports only, no action buttons.
• Dashboard - Compliance score, KPIs, 30-day trend chart, risk heatmap, recent violations
• Upload Policy - Drag-and-drop PDF upload with rule extraction preview
• Rules - Browse policy-derived rules with severity badges and expandable details
• Violations - Advanced table with filters, evidence panel, AI explanations, and suggested remediation steps
• Review - Approve/Reject workflow with reviewer comments, suggested remediation, and audit log
• Policy Impact - Compare two policy versions (rule diff) and estimated new violations if you adopt the new policy
• Reports - Download PDF, export CSV, trend analytics (export hidden for Viewer)
• Logout - Header dropdown; clears state, redirects to landing, shows toast
• Page Transitions - Route-based shrink/expand with Framer Motion AnimatePresence
• Theme Toggle - Dark/light in header, persisted in localStorage, Tailwind dark class
• Notifications - Clickable bell, dropdown with mock list, red badge count, close on outside click

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: TailwindCSS (dark mode class)
• Components: shadcn/ui (Radix UI primitives)
• Animation: Framer Motion
• Charts: Recharts
• Icons: Lucide React