LOT 1 - Optimizare script build -Instalare mono comanda
This commit is contained in:
parent
5380c3fc63
commit
42ff22bf85
127 changed files with 16163 additions and 532 deletions
452
ai_platform/modules/domain_check/NEXT_STEPS.md
Normal file
452
ai_platform/modules/domain_check/NEXT_STEPS.md
Normal file
|
|
@ -0,0 +1,452 @@
|
|||
# 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue