# NEXT STEPS - Plan de Dezvoltare

## 🎯 PRIORITĂȚI DEZVOLTARE

### PHASE 1: Complete Backend Features (URGENT) ⚡
**Estimare: 2-3 ore**

1. ✅ **DNS Checking Service** - ESENȚIAL pentru risk scoring
2. ✅ **SSL Certificate Validation** - ESENȚIAL pentru risk scoring
3. ✅ **Whoxy API Fallback** - Activare automată când python-whois eșuează
4. ✅ **Implementare Endpoints:**
   - `GET /api/v1/domain/{domain}` - Detalii + istoric
   - `GET /api/v1/stats` - Statistici sistem
   - `GET /api/v1/search` - Căutare domenii
5. ✅ **Redis Caching** - Activare completă

---

### PHASE 2: Modern Dashboard (NEXT.JS 15) 🚀
**Estimare: 4-6 ore**

#### Stack Tehnologic 2026:

**Frontend:**
- **Next.js 15** (App Router, Server Components, Server Actions)
- **React 19** (Concurrent features, Suspense)
- **TypeScript** (Type safety)
- **Tailwind CSS** + **shadcn/ui** (Modern UI components)
- **TanStack Query (React Query v5)** - Data fetching & caching
- **Zustand** - State management (lightweight)
- **Recharts** sau **Tremor** - Data visualization
- **Framer Motion** - Animations

**Features Dashboard:**

1. **🏠 Home Page**
   - Hero section cu search bar central
   - Live stats (total checks, domains analyzed)
   - Recent high-risk domains feed
   - Trending searches

2. **🔍 Domain Check Page**
   - Input field cu autocomplete
   - Real-time validation
   - Loading states cu skeleton
   - Result cards cu:
     - Risk score gauge (circular progress)
     - WHOIS data table
     - DNS records expandable
     - SSL certificate timeline
     - Historical checks graph
     - Export options (PDF, JSON)

3. **📊 Analytics Dashboard**
   - Risk distribution pie chart
   - Daily checks timeline
   - Top risky domains table
   - Geographic distribution map (registrant countries)
   - Registrar statistics
   - Average processing time metrics

4. **📜 History Browser**
   - Filterable table (domain, risk level, date)
   - Pagination
   - Quick re-check button
   - Comparison mode (2 domains side-by-side)

5. **⚙️ Settings**
   - API configuration
   - Threshold customization
   - Export preferences
   - Dark/Light mode toggle

6. **📖 Documentation**
   - API reference (embedded Swagger)
   - Risk scoring explanation
   - Integration examples
   - FAQ

---

### PHASE 3: Advanced Features 🎯
**Estimare: 6-8 ore**

1. **Batch Processing** - Verificare 100+ domenii simultan
2. **VirusTotal Integration** - Reputation checking
3. **Real-time Webhooks** - Notificări pentru high-risk
4. **Email Validation** - Verificare email addresses
5. **Subdomain Enumeration** - Discover subdomains
6. **IP Geolocation** - Hartă interactivă

---

## 📁 STRUCTURA PROIECT DASHBOARD

```
domain-check/
├── frontend/                    # Next.js App
│   ├── app/
│   │   ├── (dashboard)/
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx         # Home
│   │   │   ├── check/
│   │   │   │   └── page.tsx     # Domain Check
│   │   │   ├── analytics/
│   │   │   │   └── page.tsx     # Analytics
│   │   │   ├── history/
│   │   │   │   └── page.tsx     # History
│   │   │   └── settings/
│   │   │       └── page.tsx     # Settings
│   │   ├── api/                 # API Routes (Next.js)
│   │   │   └── proxy/
│   │   │       └── [...path]/route.ts  # Proxy to Flask
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Landing page
│   ├── components/
│   │   ├── ui/                  # shadcn components
│   │   ├── domain/
│   │   │   ├── DomainSearchBar.tsx
│   │   │   ├── RiskScoreGauge.tsx
│   │   │   ├── WhoisDataCard.tsx
│   │   │   └── DNSRecordsTable.tsx
│   │   ├── charts/
│   │   │   ├── RiskDistribution.tsx
│   │   │   └── TimelineChart.tsx
│   │   └── layout/
│   │       ├── Navbar.tsx
│   │       ├── Sidebar.tsx
│   │       └── Footer.tsx
│   ├── lib/
│   │   ├── api.ts               # API client
│   │   ├── types.ts             # TypeScript types
│   │   └── utils.ts             # Helper functions
│   ├── hooks/
│   │   ├── useDomainCheck.ts
│   │   ├── useStats.ts
│   │   └── useHistory.ts
│   ├── store/
│   │   └── store.ts             # Zustand store
│   ├── public/
│   ├── tailwind.config.ts
│   ├── next.config.mjs
│   ├── package.json
│   └── tsconfig.json
├── api/                          # Flask Backend (existing)
└── docker-compose.yml            # Add frontend service
```

---

## 🚀 COMENZI DEZVOLTARE

### Setup Frontend

```bash
cd /home/admin365/domain-check

# Create Next.js app
npx create-next-app@latest frontend \
  --typescript \
  --tailwind \
  --app \
  --src-dir false \
  --import-alias "@/*"

cd frontend

# Install dependencies
npm install @tanstack/react-query zustand
npm install recharts date-fns lucide-react
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
npm install class-variance-authority clsx tailwind-merge

# Install shadcn/ui
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input table badge progress
npx shadcn-ui@latest add dialog dropdown-menu tooltip

# Development
npm run dev
```

### Docker Integration

Update `docker-compose.yml`:
```yaml
  dns_frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: dns_frontend
    networks:
      - dns-network
    environment:
      - NEXT_PUBLIC_API_URL=http://dns_api:5000
    volumes:
      - ./frontend:/app
      - /app/node_modules
      - /app/.next
    ports:
      - "3000:3000"
    depends_on:
      - dns_api
    restart: unless-stopped
    command: npm run dev
```

---

## 🎨 UI/UX DESIGN GUIDELINES

### Color Scheme
```css
/* Risk Levels */
--risk-low: #10b981      /* Green */
--risk-medium: #f59e0b   /* Amber */
--risk-high: #ef4444     /* Red */
--risk-critical: #dc2626 /* Dark Red */

/* Brand */
--primary: #3b82f6       /* Blue */
--secondary: #8b5cf6     /* Purple */
```

### Components Style
- **Modern:** Rounded corners (radius-lg)
- **Clean:** Generous whitespace
- **Responsive:** Mobile-first design
- **Accessible:** WCAG 2.1 AA compliant
- **Fast:** Optimistic UI updates
- **Smooth:** 60fps animations

---

## 📊 EXEMPLE COMPONENTE

### 1. Risk Score Gauge
```tsx
import { Progress } from "@/components/ui/progress"

export function RiskScoreGauge({ score, level }: Props) {
  const color = {
    LOW: "text-green-500",
    MEDIUM: "text-amber-500",
    HIGH: "text-red-500",
    CRITICAL: "text-red-700"
  }[level]

  return (
    <div className="space-y-2">
      <div className="flex justify-between">
        <span className="text-sm font-medium">Risk Score</span>
        <span className={`text-2xl font-bold ${color}`}>{score}/100</span>
      </div>
      <Progress value={score} className="h-2" />
      <span className={`text-xs font-semibold ${color}`}>{level}</span>
    </div>
  )
}
```

### 2. Domain Search Bar
```tsx
"use client"

import { useState } from "react"
import { useMutation } from "@tanstack/react-query"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export function DomainSearchBar() {
  const [domain, setDomain] = useState("")

  const checkMutation = useMutation({
    mutationFn: (domain: string) =>
      fetch("/api/v1/check", {
        method: "POST",
        body: JSON.stringify({ domain })
      }).then(r => r.json())
  })

  return (
    <div className="flex gap-2">
      <Input
        placeholder="Enter domain (e.g., example.com)"
        value={domain}
        onChange={(e) => setDomain(e.target.value)}
      />
      <Button
        onClick={() => checkMutation.mutate(domain)}
        disabled={checkMutation.isPending}
      >
        {checkMutation.isPending ? "Checking..." : "Check Domain"}
      </Button>
    </div>
  )
}
```

---

## 🔄 API CLIENT (TypeScript)

```typescript
// lib/api.ts
export interface DomainCheckRequest {
  domain: string
  check_options?: {
    whois?: boolean
    dns?: boolean
    ssl?: boolean
    reputation?: boolean
    force_refresh?: boolean
  }
}

export interface RiskScore {
  total: number
  level: "LOW" | "MEDIUM" | "HIGH" | "CRITICAL"
  factors: Array<{
    factor: string
    score: number
    weight: number
    reason: string
  }>
}

export interface DomainCheckResponse {
  success: boolean
  data: {
    domain: string
    check_id: string
    timestamp: string
    whois: any
    dns: any
    ssl: any
    reputation: any
    risk_score: RiskScore
  }
  metadata: {
    cached: boolean
    processing_time_ms: number
    api_version: string
  }
}

export class DomainCheckAPI {
  private baseURL: string

  constructor(baseURL: string = "http://localhost:5000") {
    this.baseURL = baseURL
  }

  async checkDomain(request: DomainCheckRequest): Promise<DomainCheckResponse> {
    const response = await fetch(`${this.baseURL}/api/v1/check`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(request)
    })
    return response.json()
  }

  async getDomainDetails(domain: string) {
    const response = await fetch(`${this.baseURL}/api/v1/domain/${domain}`)
    return response.json()
  }

  async getStats() {
    const response = await fetch(`${this.baseURL}/api/v1/stats`)
    return response.json()
  }

  async searchDomains(params: {
    q?: string
    risk_level?: string
    page?: number
  }) {
    const query = new URLSearchParams(params as any)
    const response = await fetch(`${this.baseURL}/api/v1/search?${query}`)
    return response.json()
  }
}

export const api = new DomainCheckAPI()
```

---

## 📋 CHECKLIST IMPLEMENTARE

### Backend (Priority 1)
- [ ] Implementează DNS checking service
- [ ] Implementează SSL certificate validation
- [ ] Activează Whoxy API fallback
- [ ] Implementează endpoint `GET /api/v1/domain/{domain}`
- [ ] Implementează endpoint `GET /api/v1/stats`
- [ ] Implementează endpoint `GET /api/v1/search`
- [ ] Activează Redis caching complet
- [ ] Testează toate endpoint-urile

### Frontend Setup (Priority 2)
- [ ] Create Next.js app cu TypeScript
- [ ] Setup Tailwind CSS + shadcn/ui
- [ ] Configure TanStack Query
- [ ] Setup Zustand store
- [ ] Create API client library
- [ ] Setup Docker integration

### Frontend Components (Priority 3)
- [ ] Layout components (Navbar, Sidebar)
- [ ] Domain Search Bar
- [ ] Risk Score Gauge
- [ ] WHOIS Data Card
- [ ] DNS Records Table
- [ ] SSL Certificate Timeline
- [ ] Charts (Pie, Line, Bar)
- [ ] History Table
- [ ] Stats Dashboard

### Integration (Priority 4)
- [ ] Connect frontend cu backend API
- [ ] Implement error handling
- [ ] Add loading states
- [ ] Add toast notifications
- [ ] Test end-to-end flow

---

## 🎯 NEXT IMMEDIATE ACTIONS

**CE VREI SĂ FAC ACUM?**

### Option A: Complete Backend First (RECOMANDAT)
✅ Implementez DNS + SSL + endpoint-uri rămase
✅ Backend 100% funcțional
⏱️ Estimare: 2-3 ore

### Option B: Start Frontend Direct
🚀 Creez Next.js app cu structura completă
🎨 UI modern cu components
⏱️ Estimare: 4-6 ore

### Option C: Both in Parallel
⚡ DNS + SSL în background
🎨 Next.js setup simultan
⏱️ Estimare: 4-5 ore

**CE ALEGI? (A, B sau C)**

---

**Document creat:** 2026-01-29 16:00:00