balikci/frontend/README.md

# 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
- 🎯 **6 Sayfa** - Login, Dashboard, Companies, Tokens, Templates, Settings

## 🚀 Kurulum

```bash
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
- Detay sayfası (tıklama geçmişi, IP & cihaz)

### ✉️ Mail Şablonları
- Tüm şablonların listesi (aktif/pasif)
- HTML editörü + Handlebars değişkenleri
- Önizleme (iframe) & tam ekran preview
- Template type kopyalama, aktif/pasif toggle
- Oluştur / Düzenle / Sil işlemleri

### ⚙️ 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

```bash
# Development
npm run dev

# Production build
npm run build

# Preview production build
npm run preview
```

## 🔐 Environment Variables

```env
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 + detay)
- ✅ Mail templates (CRUD + preview)
- ✅ Settings (Gmail + Telegram)
- ✅ Responsive layout
- ✅ Material-UI theming
- ✅ Error handling
- ✅ Loading states

**Production Ready!** 🎉