ClientFlow — Ajans Müşteri Portalı

Yaratıcı ajanslar için proje yönetimi ve müşteri iletişim platformu. Teknik güncellemeleri AI ile müşteri dostu dile çevirin, onay alın, şeffaf iletişim kurun.

---

Mimari

┌─────────────────┐     ┌─────────────────────────────────┐
│   Admin (Ajans) │     │         Next.js App Router       │
│                 │────▶│  /dashboard   (admin panel)      │
│  - Proje CRUD   │     │  /client      (müşteri portalı)  │
│  - AI çeviri    │     │  /api/generate-update (Groq AI)  │
│  - PDF export   │     └──────────────┬──────────────────┘
│  - Analytics    │                    │
└─────────────────┘            ┌───────▼───────┐
                               │   Firebase    │
┌─────────────────┐            │               │
│  Müşteri        │────▶       │  Firestore DB │
│                 │            │  Auth (Email) │
│  - Projelerini  │            │  Security     │
│    görür        │            │  Rules (RBAC) │
│  - Onayla /     │            └───────────────┘
│    Revize İste  │
└─────────────────┘

---

Özellikler

Faz 1 — Admin Panel

• Proje + müşteri CRUD
• Güncelleme ekleme (timeline görünümü)
• İstatistikler dashboard

Faz 2 — AI Entegrasyonu

• Groq Llama 3.3 70B ile teknik → müşteri dostu dil çevirisi
• Otomatik kategori tahmini (paralel API çağrısı)
• "Sihirli Değnek" butonu

Faz 3 — Müşteri Portalı

• Role-based access control (Admin / Client)
• Müşteri: sadece kendi projelerini görür
• Onayla / Revize İste mekanizması
• Firestore Security Rules (field-level RBAC)

Faz 4 — Production

• PDF raporu (proje + analitik)
• Recharts analytics dashboard
• Vercel + Firebase deploy yapılandırması

---

Teknoloji Stack

Katman	Teknoloji
Framework	Next.js 16 (App Router)
Dil	TypeScript 5
Stil	Tailwind CSS 4 + CSS Variables
Veritabanı	Firebase Firestore
Auth	Firebase Auth (Email/Password)
AI	Groq Llama 3.3 70B (OpenAI SDK)
Grafikler	Recharts
PDF	jsPDF + jspdf-autotable
Deploy	Vercel

---

Kurulum

# 1. Klonla
git clone https://github.com/EmrahFidan/clientflow.git
cd clientflow

# 2. Bağımlılıkları yükle
npm install

# 3. Ortam değişkenlerini ayarla
cp .env.example .env.local
# .env.local dosyasını doldur

# 4. Başlat
npm run dev

Test verisi eklemek için: http://localhost:3000/setup

---

Ortam Değişkenleri

.env.example dosyasını kopyalayıp .env.local adıyla kaydet:

NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
GROQ_API_KEY=...

---

Proje Yapısı

clientflow/
├── app/
│   ├── api/generate-update/   # Groq AI endpoint
│   ├── auth/login/            # Giriş sayfası
│   ├── dashboard/             # Admin paneli
│   │   ├── analytics/         # Recharts dashboard + PDF
│   │   ├── clients/           # Müşteri yönetimi
│   │   └── projects/[id]/     # Proje detayı + AI çeviri
│   ├── client/                # Müşteri portalı
│   │   └── projects/[id]/     # Timeline + onay/revize
│   └── setup/                 # Test veri kurulumu
├── components/dashboard/
├── lib/
│   ├── AuthContext.tsx         # Firebase Auth + rol yönetimi
│   ├── firestore/              # Firestore servis katmanı
│   └── exportPDF.ts
├── types/index.ts
├── firestore.rules             # RBAC güvenlik kuralları
└── .env.example

---

Güvenlik

• Firestore Security Rules: Field-level RBAC — müşteri sadece status, reviewedAt, reviewedBy alanlarını yazabilir
• Client-side koruma: Sayfa düzeyinde clientId kontrolü (Rules'a ek katman)
• Demo hesaplar: Sadece development ortamında görünür, production'da gizli

---

Lisans

MIT — EmrahFidan