balikci/frontend

Oltalama Frontend

Modern ve responsive phishing test yönetim paneli frontend'i.

✨ Özellikler

• 🎨 Material-UI - Modern UI component library
• ⚡ Vite - Hızlı development server
• 🔐 Session Auth - Context-based authentication
• 📱 Responsive - Mobile-first tasarım
• 🎯 5 Sayfa - Login, Dashboard, Companies, Tokens, Settings

🚀 Kurulum

npm install
cp .env.example .env
# VITE_API_URL=http://localhost:3000 olarak ayarlayın

npm run dev

URL: http://localhost:5173
Default Login: admin / admin123

📄 Sayfalar

🔑 Login

• Session-based authentication
• Form validation
• Auto redirect on success

📊 Dashboard

• Genel istatistikler (şirket, token, tıklama)
• Başarı oranı kartı
• Şirket performans tablosu
• Son tıklamalar listesi

🏢 Companies

• Grid view ile şirket kartları
• Create/Edit/Delete modal
• Şirket bazlı istatistikler
• Click-through to detail

🔗 Tokens

• Tüm tokenlar tablo görünümü
• Token oluştur + mail gönder
• Durum badge'leri (Tıklandı/Bekliyor)
• Tıklama sayısı tracking

⚙️ Settings

• Gmail yapılandırması
• Telegram yapılandırması
• Test butonları (mail & telegram)
• Gerçek zamanlı feedback

🎨 UI Komponenti

Layout

• Sidebar navigation
• Responsive drawer (mobile)
• User menu (logout)
• Material-UI theming

Services

• api.js - Axios instance (credentials, base URL)
• authService.js - Login/logout/check
• companyService.js - Company CRUD
• tokenService.js - Token CRUD + send
• statsService.js - Dashboard stats
• templateService.js - Mail templates

Context

• AuthContext - Global auth state
• Auto session check on mount
• Protected routes

🛠️ Teknolojiler

• React 18 - UI library
• Vite - Build tool
• Material-UI v6 - Component library
• React Router v7 - Routing
• Axios - HTTP client
• date-fns - Date formatting

📦 Build

# Development
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

🔐 Environment Variables

VITE_API_URL=http://localhost:3000

Not: Vite sadece VITE_ prefix'li değişkenleri expose eder.

📁 Yapı

src/
├── components/
│   └── Layout/
│       └── Layout.jsx      - Main layout with sidebar
├── context/
│   └── AuthContext.jsx     - Authentication context
├── pages/
│   ├── Login.jsx           - Login page
│   ├── Dashboard.jsx       - Stats dashboard
│   ├── Companies.jsx       - Company management
│   ├── Tokens.jsx          - Token management
│   └── Settings.jsx        - System settings
├── services/
│   ├── api.js              - Axios instance
│   ├── authService.js      - Auth endpoints
│   ├── companyService.js   - Company endpoints
│   ├── tokenService.js     - Token endpoints
│   ├── statsService.js     - Stats endpoints
│   └── templateService.js  - Template endpoints
├── App.jsx                 - Main app with routing
├── main.jsx                - App entry point
└── index.css               - Global styles

✅ Durum

Tamamlanan:

• ✅ Login & Authentication
• ✅ Protected routes
• ✅ Dashboard with stats
• ✅ Company management (CRUD)
• ✅ Token management (CRUD + send)
• ✅ Settings (Gmail + Telegram)
• ✅ Responsive layout
• ✅ Material-UI theming
• ✅ Error handling
• ✅ Loading states

Production Ready! 🎉