clossers/didi-lot1-ai

Fork 0

Dezvoltari Evotech 42ff22bf85 LOT 1 - Optimizare script build -Instalare mono comanda

2026-06-27 06:42:02 -07:00

11 KiB

Raw Blame History

NEXT STEPS - Plan de Dezvoltare

🎯 PRIORITĂȚI DEZVOLTARE

PHASE 1: Complete Backend Features (URGENT) ⚡

Estimare: 2-3 ore

✅ DNS Checking Service - ESENȚIAL pentru risk scoring
✅ SSL Certificate Validation - ESENȚIAL pentru risk scoring
✅ Whoxy API Fallback - Activare automată când python-whois eșuează
✅ Implementare Endpoints:
- GET /api/v1/domain/{domain} - Detalii + istoric
- GET /api/v1/stats - Statistici sistem
- GET /api/v1/search - Căutare domenii
✅ 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:

🏠 Home Page
- Hero section cu search bar central
- Live stats (total checks, domains analyzed)
- Recent high-risk domains feed
- Trending searches
🔍 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)
📊 Analytics Dashboard
- Risk distribution pie chart
- Daily checks timeline
- Top risky domains table
- Geographic distribution map (registrant countries)
- Registrar statistics
- Average processing time metrics
📜 History Browser
- Filterable table (domain, risk level, date)
- Pagination
- Quick re-check button
- Comparison mode (2 domains side-by-side)
⚙️ Settings
- API configuration
- Threshold customization
- Export preferences
- Dark/Light mode toggle
📖 Documentation
- API reference (embedded Swagger)
- Risk scoring explanation
- Integration examples
- FAQ

PHASE 3: Advanced Features 🎯

Estimare: 6-8 ore

Batch Processing - Verificare 100+ domenii simultan
VirusTotal Integration - Reputation checking
Real-time Webhooks - Notificări pentru high-risk
Email Validation - Verificare email addresses
Subdomain Enumeration - Discover subdomains
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

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:

  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

/* 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

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

"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)

// 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

11 KiB Raw Blame History