🎨 Detective Door AI — Frontend

Next.js 14 dashboard for the AI-powered smart door security system.

📁 Structure

frontend/src/
├── app/
│   ├── layout.tsx            # Root layout with Inter font & metadata
│   ├── page.tsx              # Main dashboard page
│   └── globals.css           # Global styles & utilities
├── components/
│   ├── dashboard/
│   │   ├── Header.tsx        # Top bar with logo + status
│   │   ├── CameraCard.tsx    # Camera feed placeholder
│   │   ├── AssistantPanel.tsx # AI orb + transcript
│   │   ├── ControlPanel.tsx  # Demo simulation buttons
│   │   ├── InsightCards.tsx   # Suspicion score + event type
│   │   ├── EventTimeline.tsx # Recent events list
│   │   └── TrustedProfiles.tsx # Known people
│   └── ui/
│       ├── GlassCard.tsx     # Reusable glass card
│       └── StatusBadge.tsx   # Status indicator badge
├── hooks/
│   └── useDashboard.ts      # Dashboard state management
├── services/
│   └── api.ts               # Backend API client
└── types/
    └── index.ts              # Shared TypeScript types

🏃 Getting Started

npm install
cp .env.example .env.local
npm run dev

Open http://localhost:3000.

🎯 Key Features

• Dark glassmorphism UI with ambient gradients
• Animated AI orb that reacts to system state
• Camera feed placeholder with detection overlay
• Real-time event timeline
• Demo control buttons for testing scenarios
• Fully typed API integration layer
• Component-based architecture for easy collaboration

👥 Team Ownership

• Tirth + Nareh: All frontend components and pages
• Components are isolated — work on any component without conflicts

🔌 Backend Connection

The frontend expects the backend running at http://localhost:8000. Configure via NEXT_PUBLIC_API_URL in .env.local.