ai-compliance-platform

AI Compliance Intelligence Platform

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

Features

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

Tech Stack

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

How to Run

Prerequisites

Node.js 18+
npm or yarn

Installation

Navigate to the project directory:
```
cd ai-compliance-platform
```
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open in browser: http://localhost:3000

Landing: / — hero, features, how it works, footer. Use “Access Demo” or “Sign in” to go to login.
Login: /login — any email/password works (demo). Choose role: Admin, Compliance Officer, or Viewer. After login you are redirected to /dashboard.
App (protected): /dashboard, /upload, /rules, /policy-impact, /violations, /review, /reports — require login. Sidebar and header show based on role. Use header theme toggle (sun/moon) and notification bell. Sign out from the user dropdown; you get a toast and redirect to /.

Build for Production

Stop the dev server (Ctrl+C) before building.

npm run build
npm start

Verify (No Errors)

npm run test    # Lint + TypeScript check

Project Structure

src/
├── app/
│   ├── (app)/              # Protected app routes (auth required)
│   │   ├── layout.tsx      # Auth guard, AppLayout, page transitions
│   │   ├── dashboard/
│   │   ├── upload/
│   │   ├── rules/
│   │   ├── policy-impact/
│   │   ├── violations/
│   │   ├── review/
│   │   └── reports/
│   ├── login/              # Login page
│   ├── page.tsx            # Landing page
│   ├── layout.tsx          # Root layout (Providers only)
│   └── globals.css
├── components/
│   ├── dashboard/
│   ├── layout/
│   │   ├── header.tsx      # Search, theme toggle, notifications, user dropdown (logout)
│   │   ├── sidebar.tsx    # Role-based nav
│   │   ├── notification-dropdown.tsx
│   │   ├── page-transition.tsx
│   │   ├── providers.tsx  # Auth, Theme, Toast
│   │   └── ...
│   └── ui/
├── contexts/
│   ├── auth-context.tsx    # User, login(), logout(), role helpers
│   ├── theme-context.tsx   # Dark/light, localStorage
│   └── toast-context.tsx  # Toast on logout
├── data/
└── lib/

Architecture (Performance & Layout)

Root layout (app/layout.tsx) — Server Component (no "use client"). Wraps children in <Providers>. No AnimatePresence on the whole tree.
App layout ((app)/layout.tsx) — Client component owns collapsed state and provides it via SidebarContext. On pathname change, setCollapsed(true) so sidebar auto-collapses on nav. Structure: <Sidebar /> then <div className="flex-1"><Header /><main>{children}</main></div>. Sidebar does not re-mount on route change.
Sidebar — Memoized. Width w-64 / w-16, transition-[width] duration-200 ease-in-out. Role-based nav (admin: all + Settings; compliance: all except Settings; viewer: Dashboard, Profile, Reports). Links use <Link prefetch>; layout collapses on pathname change.
Header — Memoized. Profile and Settings are <Link href="/profile"> and <Link href="/settings"> (Settings for admin only).
Page transitions — Per-page only: <PageTransition> wraps content with motion.div (opacity + scale 0.98 → 1). No AnimatePresence wrapping the whole layout.
Loading — Each route has loading.tsx with skeleton loaders.
Charts — Recharts loaded via dynamic(..., { ssr: false }) in trend-chart-dynamic.tsx.
Notifications — Framer Motion fade, outside-click close, red badge count.
Roles — admin compliance viewer. Login redirects with router.replace("/dashboard").

Design

Theme: Dark by default; light/dark toggle in header, persisted in localStorage
Style: Enterprise-grade, glassmorphism cards, blue-purple gradient accents
Auth: Mock; any email/password + role. Replace with real API in production

Connecting Backend & Database

1. Run the backend

From the project root:

cd backend
pip install -r requirements.txt
# Ensure .env exists (copy from .env.example) with DATABASE_URL and OPENAI_API_KEY
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

Backend will be at http://localhost:8000 (API docs: http://localhost:8000/docs).

2. Connect the frontend to the backend

In the project root (not inside backend/), create or edit .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

Then start the frontend (from project root):

npm run dev

Open http://localhost:3000. The dashboard will load real data from the backend (policies, violations, scan status). CORS is enabled on the backend for http://localhost:3000 and http://127.0.0.1:3000.

3. Connect an external database (for compliance scans)

The backend needs to connect to your database (the one you want to run compliance rules against). Use the API or Swagger:

Open http://localhost:8000/docs.
Find POST /database/connect.
Send a JSON body with your DB credentials, for example:

{
  "host": "localhost",
  "username": "your_db_user",
  "password": "your_db_password",
  "db_name": "your_database_name"
}

After a successful connect, you can upload policies (POST /policy/upload) and run scans (POST /scan/run). The scan runs the extracted rules against the connected external database and stores violations.

Summary

Step	What	Where
Backend	`uvicorn app.main:app --reload --port 8000`	`backend/`
Frontend env	`NEXT_PUBLIC_API_URL=http://localhost:8000`	`.env.local` in project root
Frontend	`npm run dev`	project root
External DB	POST /database/connect with host, username, password, db_name	API or Swagger UI

Mock Data

src/data/ — analytics, policies, rules, violations (JSON). Used when NEXT_PUBLIC_API_URL is not set.