Tweet → Video
diff --git a/src/app/[locale]/(dashboard)/dashboard/pricing/page.tsx b/src/app/[locale]/(dashboard)/dashboard/pricing/page.tsx index 2677726..3061954 100644 --- a/src/app/[locale]/(dashboard)/dashboard/pricing/page.tsx +++ b/src/app/[locale]/(dashboard)/dashboard/pricing/page.tsx @@ -4,248 +4,245 @@ import { useState } from "react"; import { motion } from "framer-motion"; import { Check, - X, Zap, Crown, Rocket, + Loader2, Sparkles, - ArrowRight, } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { useCreateCheckout, useSubscription } from "@/hooks/use-api"; +import { useToast } from "@/components/ui/toast"; const plans = [ { - id: "free", name: "Free", - icon: Sparkles, - monthlyPrice: 0, - yearlyPrice: 0, - credits: 3, - description: "AI video üretimini keşfet", - color: "emerald", - gradient: "from-emerald-500/15 to-emerald-600/5", - borderActive: "border-emerald-500/30", - buttonClass: "btn-ghost", - buttonLabel: "Mevcut Plan", - features: [ - { label: "3 kredi / ay", included: true }, - { label: "720p video kalitesi", included: true }, - { label: "Max 30 saniye", included: true }, - { label: "5 proje limiti", included: true }, - { label: "Temel şablonlar", included: true }, - { label: "Öncelikli kuyruk", included: false }, - { label: "Marka kaldırma", included: false }, - { label: "API erişimi", included: false }, - ], - }, - { - id: "pro", - name: "Pro", + price: { monthly: 0, yearly: 0 }, + description: "Başlangıç için ideal", icon: Zap, - monthlyPrice: 19, - yearlyPrice: 190, - credits: 50, - description: "İçerik üreticileri için güçlü araçlar", - color: "violet", - gradient: "from-violet-500/20 to-violet-600/8", - borderActive: "border-violet-500/40", - buttonClass: "btn-primary", - buttonLabel: "Pro'ya Yükselt", - recommended: true, + gradient: "from-gray-500/20 to-gray-600/10", + iconColor: "text-gray-400", features: [ - { label: "50 kredi / ay", included: true }, - { label: "1080p video kalitesi", included: true }, - { label: "Max 120 saniye", included: true }, - { label: "50 proje limiti", included: true }, - { label: "Tüm şablonlar", included: true }, - { label: "Öncelikli kuyruk", included: true }, - { label: "Marka kaldırma", included: true }, - { label: "API erişimi", included: false }, + "Ayda 3 video", + "720p kalite", + "Temel AI senaryo", + "Topluluk desteği", ], + cta: "Mevcut Plan", + popular: false, }, { - id: "business", - name: "Business", + name: "Pro", + price: { monthly: 29, yearly: 290 }, + description: "İçerik üreticileri için", icon: Crown, - monthlyPrice: 49, - yearlyPrice: 490, - credits: -1, - description: "Ajanslar ve profesyonel ekipler", - color: "cyan", - gradient: "from-cyan-500/15 to-cyan-600/5", - borderActive: "border-cyan-500/30", - buttonClass: "btn-primary", - buttonLabel: "Business'a Yükselt", + gradient: "from-violet-500/20 to-cyan-400/10", + iconColor: "text-violet-400", features: [ - { label: "Sınırsız kredi", included: true }, - { label: "1080p video kalitesi", included: true }, - { label: "Max 180 saniye", included: true }, - { label: "Sınırsız proje", included: true }, - { label: "Tüm şablonlar + Özel", included: true }, - { label: "Öncelikli kuyruk", included: true }, - { label: "Marka kaldırma", included: true }, - { label: "API erişimi", included: true }, + "Ayda 50 video", + "1080p Full HD", + "Gelişmiş AI senaryo", + "Tweet → Video dönüşümü", + "Öncelikli render", + "E-posta desteği", ], + cta: "Pro'ya Geç", + popular: true, + }, + { + name: "Enterprise", + price: { monthly: 99, yearly: 990 }, + description: "Ajanslar ve büyük ekipler", + icon: Rocket, + gradient: "from-amber-500/20 to-orange-400/10", + iconColor: "text-amber-400", + features: [ + "Sınırsız video", + "4K Ultra HD", + "Premium AI + özel model", + "API erişimi", + "Özel şablonlar", + "Öncelikli 7/24 destek", + "Beyaz etiket seçeneği", + ], + cta: "Enterprise'a Geç", + popular: false, }, ]; -const fadeUp = { - hidden: { opacity: 0, y: 20 }, - show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const } }, -}; - export default function PricingPage() { - const [isYearly, setIsYearly] = useState(false); + const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">( + "monthly", + ); + const checkout = useCreateCheckout(); + const { data: subData } = useSubscription(); + const toast = useToast(); + + const currentPlan = subData?.data?.plan ?? subData?.plan ?? "Free"; + + const handleCheckout = async (planName: string) => { + if (planName === "Free") { + toast.info("Free plan zaten aktif"); + return; + } + if (planName === currentPlan) { + toast.info("Bu plan zaten aktif"); + return; + } + try { + await checkout.mutateAsync({ planName, billingCycle }); + } catch { + toast.error("Ödeme sayfası açılamadı. Lütfen tekrar deneyin."); + } + }; return ( -
- {/* ── Başlık ── */}
-
-
- Planını Seç, Üretmeye Başla -
-- Her plan ücretsiz deneme ile başlar. İstediğin zaman yükselt veya iptal et. -
- - {/* Aylık / Yıllık Toggle */} -
-
- Aylık
-
-
-
- Yıllık
-
- {isYearly && (
-
- %17 tasarruf
-
- )}
+
+ {/* Header */}
+
+
- {/* ── Plan Kartları ── */}
-
+
-
+ + İhtiyacınıza Uygun Plan +
++ İster hobby, ister profesyonel — her seviyeye uygun planlarımızla AI + video üretimine başlayın. +
+
- {plans.map((plan, i) => {
- const Icon = plan.icon;
- const price = isYearly ? plan.yearlyPrice : plan.monthlyPrice;
- const period = isYearly ? "/yıl" : "/ay";
+ {/* Billing Toggle */}
+
+
+ Aylık
+
+
+
+ Yıllık
+
+ %17 tasarruf
+
+
+
+
+ {/* Plans Grid */}
+
+ {plans.map((plan, idx) => {
+ const isCurrentPlan =
+ plan.name.toLowerCase() === currentPlan.toLowerCase();
+ const PlanIcon = plan.icon;
+ const price = plan.price[billingCycle];
return (
- {plan.recommended && (
- = {
+ DRAFT: { label: 'Taslak', color: 'text-slate-400', icon: FileText, bgClass: 'bg-slate-500/10 border-slate-500/20' },
+ GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-violet-400', icon: Sparkles, bgClass: 'bg-violet-500/10 border-violet-500/20' },
+ PENDING: { label: 'Kuyrukta', color: 'text-amber-400', icon: Clock, bgClass: 'bg-amber-500/10 border-amber-500/20' },
+ GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-cyan-400', icon: Sparkles, bgClass: 'bg-cyan-500/10 border-cyan-500/20' },
+ RENDERING: { label: 'Video İşleniyor', color: 'text-blue-400', icon: Film, bgClass: 'bg-blue-500/10 border-blue-500/20' },
+ COMPLETED: { label: 'Tamamlandı', color: 'text-emerald-400', icon: CheckCircle2, bgClass: 'bg-emerald-500/10 border-emerald-500/20' },
+ FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
+};
+
+const STYLE_LABELS: Record = {
+ CINEMATIC: '🎬 Sinematik',
+ DOCUMENTARY: '📹 Belgesel',
+ EDUCATIONAL: '📚 Eğitici',
+ STORYTELLING: '📖 Hikaye',
+ NEWS: '📰 Haber',
+ PROMOTIONAL: '📢 Tanıtım',
+ ARTISTIC: '🎨 Sanatsal',
+ MINIMALIST: '✨ Minimalist',
+};
+
+const stagger = {
+ hidden: { opacity: 0 },
+ show: { opacity: 1, transition: { staggerChildren: 0.06 } },
+};
+
+const fadeUp = {
+ hidden: { opacity: 0, y: 12 },
+ show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const } },
+};
+
+export default function ProjectDetailPage() {
+ const { id } = useParams<{ id: string }>();
+ const router = useRouter();
+ const [showMenu, setShowMenu] = useState(false);
+ const [regeneratingSceneId, setRegeneratingSceneId] = useState(null);
+
+ // Veri hook'ları
+ const { data: project, isLoading, error, refetch } = useProject(id);
+ const generateScriptMutation = useGenerateScript();
+ const approveMutation = useApproveAndQueue();
+ const deleteMutation = useDeleteProject();
+
+ // WebSocket progress
+ const renderState = useRenderProgress(
+ project?.status && ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status) ? id : undefined,
+ );
+
+ // Sahne güncelleme
+ const handleSceneUpdate = async (sceneId: string, data: { narrationText?: string; visualPrompt?: string; subtitleText?: string }) => {
+ try {
+ await projectsApi.update(`${id}/scenes/${sceneId}` as unknown as string, data as any);
+ refetch();
+ } catch (err) {
+ console.error('Sahne güncelleme hatası:', err);
+ }
+ };
+
+ // Sahne yeniden üretim
+ const handleSceneRegenerate = async (sceneId: string) => {
+ setRegeneratingSceneId(sceneId);
+ try {
+ await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api'}/projects/${id}/scenes/${sceneId}/regenerate`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ });
+ refetch();
+ } catch (err) {
+ console.error('Sahne yeniden üretim hatası:', err);
+ } finally {
+ setRegeneratingSceneId(null);
+ }
+ };
+
+ // Senaryo üret
+ const handleGenerateScript = () => {
+ generateScriptMutation.mutate(id, {
+ onSuccess: () => refetch(),
+ });
+ };
+
+ // Onayla ve gönder
+ const handleApprove = () => {
+ approveMutation.mutate(id, {
+ onSuccess: () => refetch(),
+ });
+ };
+
+ // Sil
+ const handleDelete = () => {
+ if (confirm('Bu projeyi silmek istediğinize emin misiniz?')) {
+ deleteMutation.mutate(id, {
+ onSuccess: () => router.push('/dashboard/projects'),
+ });
+ }
+ };
+
+ // ── Loading ──
+ if (isLoading) {
+ return (
+ | undefined;
+
+ return (
+
+ {/* ── Üst Bar — Geri + Aksiyonlar ── */}
+
+
+
+
+ {/* ── Proje Header ── */}
+
+
+
+ {/* ── Render Progress (WebSocket) ── */}
+ {isRendering && (
+
+
+ )}
+
+ {/* ── Video Player (tamamlandıysa) ── */}
+ {isCompleted && project.finalVideoUrl && (
+
+
+ )}
+
+ {/* ── Sahneler ── */}
+ {hasScript && (
+
+
+ )}
+
+ {/* ── Boş durum (senaryo yok) ── */}
+ {!hasScript && isEditable && (
+
+
+ )}
+
+ {/* ── Render Geçmişi ── */}
+ {project.renderJobs && project.renderJobs.length > 0 && (
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
index c80e304..48d5645 100644
--- a/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
+import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import {
ArrowLeft,
@@ -18,6 +19,8 @@ import {
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
+import { useCreateProject } from "@/hooks/use-api";
+import { useToast } from "@/components/ui/toast";
const steps = ["Konu & Dil", "Stil & Süre", "AI Senaryo"];
@@ -48,8 +51,11 @@ const aspectRatios = [
];
export default function NewProjectPage() {
+ const router = useRouter();
+ const createProject = useCreateProject();
+ const toast = useToast();
+
const [currentStep, setCurrentStep] = useState(0);
- const [isGenerating, setIsGenerating] = useState(false);
// Form state
const [topic, setTopic] = useState("");
@@ -59,11 +65,28 @@ export default function NewProjectPage() {
const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
const canProceed = currentStep === 0 ? topic.trim().length >= 5 : true;
+ const isGenerating = createProject.isPending;
const handleGenerate = async () => {
- setIsGenerating(true);
- // API çağrısı burada yapılacak
- setTimeout(() => setIsGenerating(false), 3000);
+ try {
+ const result = await createProject.mutateAsync({
+ title: topic.slice(0, 80),
+ topic,
+ language,
+ style,
+ targetDuration: duration,
+ aspectRatio,
+ });
+ toast.success("Proje başarıyla oluşturuldu! AI senaryo üretiliyor...");
+ const projectId = result?.id;
+ if (projectId) {
+ router.push(`/dashboard/projects/${projectId}`);
+ } else {
+ router.push("/dashboard/projects");
+ }
+ } catch {
+ toast.error("Proje oluşturulurken bir hata oluştu. Lütfen tekrar deneyin.");
+ }
};
return (
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
index e0905e6..7d257b2 100644
--- a/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
@@ -1,35 +1,129 @@
"use client";
-import { useState } from "react";
+import { useState, useMemo } from "react";
import { motion } from "framer-motion";
-import { Plus, Search, Filter, Grid3X3, List } from "lucide-react";
+import {
+ Plus,
+ Search,
+ FolderOpen,
+ Clock,
+ CheckCircle,
+ Video,
+ AlertCircle,
+ ExternalLink,
+ Loader2,
+} from "lucide-react";
import Link from "next/link";
-import { RecentProjects } from "@/components/dashboard/recent-projects";
import { cn } from "@/lib/utils";
+import { useProjects } from "@/hooks/use-api";
const statusFilters = [
{ id: "all", label: "Tümü" },
- { id: "DRAFT", label: "Taslak" },
- { id: "RENDERING", label: "İşleniyor" },
- { id: "COMPLETED", label: "Tamamlanan" },
- { id: "FAILED", label: "Başarısız" },
+ { id: "draft", label: "Taslak" },
+ { id: "scripting", label: "Senaryo" },
+ { id: "rendering", label: "İşleniyor" },
+ { id: "completed", label: "Tamamlanan" },
+ { id: "failed", label: "Başarısız" },
];
+const statusMap: Record<
+ string,
+ { icon: typeof Clock; color: string; label: string; bgColor: string }
+> = {
+ draft: {
+ icon: Clock,
+ color: "text-amber-400",
+ bgColor: "bg-amber-500/10",
+ label: "Taslak",
+ },
+ scripting: {
+ icon: Clock,
+ color: "text-blue-400",
+ bgColor: "bg-blue-500/10",
+ label: "Senaryo",
+ },
+ reviewing: {
+ icon: Clock,
+ color: "text-purple-400",
+ bgColor: "bg-purple-500/10",
+ label: "İnceleme",
+ },
+ rendering: {
+ icon: Video,
+ color: "text-cyan-400",
+ bgColor: "bg-cyan-500/10",
+ label: "Render",
+ },
+ completed: {
+ icon: CheckCircle,
+ color: "text-emerald-400",
+ bgColor: "bg-emerald-500/10",
+ label: "Tamamlandı",
+ },
+ failed: {
+ icon: AlertCircle,
+ color: "text-red-400",
+ bgColor: "bg-red-500/10",
+ label: "Hatalı",
+ },
+};
+
+interface ProjectItem {
+ id: string;
+ title: string;
+ status: string;
+ createdAt: string;
+ updatedAt?: string;
+ language?: string;
+ progress?: number;
+ creditsUsed?: number;
+}
+
export default function ProjectsPage() {
const [activeFilter, setActiveFilter] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
+ const { data, isLoading } = useProjects({ limit: 100 });
+ // useProjects returns PaginatedResponse which has .data as Project[]
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const raw = data as any;
+ const rawProjects: ProjectItem[] = raw?.data ?? raw ?? [];
+ const projects = Array.isArray(rawProjects) ? rawProjects : [];
+
+ const filtered = useMemo(() => {
+ return projects.filter((p) => {
+ if (activeFilter !== "all" && p.status?.toLowerCase() !== activeFilter)
+ return false;
+ if (
+ searchQuery &&
+ !p.title.toLowerCase().includes(searchQuery.toLowerCase())
+ )
+ return false;
+ return true;
+ });
+ }, [projects, activeFilter, searchQuery]);
+
return (
-
- ⚡ Önerilen
-
+ {plan.popular && (
+
-
);
}
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
new file mode 100644
index 0000000..7e9a433
--- /dev/null
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
@@ -0,0 +1,451 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import {
+ ArrowLeft,
+ Play,
+ Sparkles,
+ RefreshCw,
+ Clock,
+ CheckCircle2,
+ AlertCircle,
+ Loader2,
+ FileText,
+ Film,
+ Trash2,
+ MoreVertical,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useProject, useGenerateScript, useApproveAndQueue, useUpdateProject, useDeleteProject } from '@/hooks/use-api';
+import { useRenderProgress } from '@/hooks/use-render-progress';
+import { SceneCard } from '@/components/project/scene-card';
+import { RenderProgress } from '@/components/project/render-progress';
+import { VideoPlayer } from '@/components/project/video-player';
+import { projectsApi } from '@/lib/api/api-service';
+
+// X (Twitter) ikonunu burada da tanımlıyoruz
+const XIcon = ({ size = 16 }: { size?: number }) => (
+
+);
+
+const STATUS_MAP: Record
+ En Popüler
)}
- {/* Header */}
-
-
-
- {/* ── Trust ── */}
-
-
-
-
+ {plan.name}
-{plan.description}
-
+
- {/* Fiyat */}
+ + {plan.name} +
++ {plan.description} +
+
-
- {/* Features */}
-
- ${price}
+
+ ${price}
+
+ {price > 0 && (
+
+ /{billingCycle === "monthly" ? "ay" : "yıl"}
- {price > 0 && (
- {period}
- )}
-
- - {plan.credits === -1 ? "Sınırsız video üretimi" : `${plan.credits} kredi dahil`} -
+ )}-
- {plan.features.map((feat) => (
-
-
- {feat.included ? (
-
- ) : ( - - )} - - {feat.label} - + {plan.features.map((f) => ( + -
+
+ {f}
))}
- 🔒 Güvenli ödeme • İstediğin zaman iptal • 7 gün para iade garantisi -
-- Stripe ile güvenli ödeme altyapısı -
-
+
+ );
+ }
+
+ // ── Error ──
+ if (error || !project) {
+ return (
+
+
+ Proje yükleniyor...
+
+
+ );
+ }
+
+ const statusInfo = STATUS_MAP[project.status] || STATUS_MAP.DRAFT;
+ const StatusIcon = statusInfo.icon;
+ const isEditable = project.status === 'DRAFT' || project.status === 'FAILED';
+ const hasScript = project.scenes && project.scenes.length > 0;
+ const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status);
+ const isCompleted = project.status === 'COMPLETED';
+ const tweetData = project.sourceTweetData as Record
+
+ Proje Bulunamadı
++ Bu proje silinmiş veya erişim izniniz yok. +
+ + Projelere Dön + +
+
+
+ {showMenu && (
+
+
+
+
+
+ )}
+
+
+
+ {/* Tweet kaynak bilgisi */}
+ {tweetData && (
+
+
+
+ {/* Meta bilgiler */}
+
+ {/* Durum badge */}
+
+
+
+ + {project.title} +
+ + {project.description && ( ++ {project.description} +
+ )} +
+
+
+
+
+ )}
+
+ {/* Aksiyon butonları */}
+
+
+ + {tweetData.text as string} +
+
+ {/* Senaryo üret (draft, senaryo yok) */}
+ {isEditable && !hasScript && (
+
+ )}
+
+ {/* Senaryo yeniden üret (draft/failed, senaryo var) */}
+ {isEditable && hasScript && (
+
+ )}
+
+ {/* Onayla ve video üretimini başlat */}
+ {isEditable && hasScript && (
+
+ )}
+
+
+ {/* Hata mesajı */}
+ {project.errorMessage && (
+
+
+ )}
+
+
+ {project.errorMessage}
+
+
+
+
+ Toplam: {project.scenes!.reduce((sum, s) => sum + s.duration, 0)}s
+
+
+
+
+
+
+ Toplam: {project.scenes!.reduce((sum, s) => sum + s.duration, 0)}s
+
+
+ {project.scenes!.map((scene) => (
+
+
+
+ Henüz senaryo üretilmedi
++ AI'ın projeniz için etkileyici bir video senaryosu oluşturmasını sağlayın. +
+ +
+
+
+ {project.renderJobs.map((job) => (
+
+
+
+ ))}
+
+
+
+ Deneme #{job.attemptNumber}
+
+
+ {job.status}
+
+
+
+ {job.processingTimeMs && (
+ {(job.processingTimeMs / 1000).toFixed(1)}s
+ )}
+
+ {new Date(job.createdAt).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
+
+
+
{/* Başlık */}
-
+ {!isLoading && (
+
+ {filtered.length === 0 ? (
+
+ )}
);
}
diff --git a/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx b/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx
index f082510..2570515 100644
--- a/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx
@@ -1,78 +1,490 @@
"use client";
-import { useState } from "react";
-import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
import {
User,
+ Shield,
CreditCard,
Bell,
- Palette,
- Globe,
- Shield,
- LogOut,
- ChevronRight,
+ Save,
+ Eye,
+ EyeOff,
+ Loader2,
+ CheckCircle,
} from "lucide-react";
-import { cn } from "@/lib/utils";
+import {
+ useCurrentUser,
+ useUpdateProfile,
+ useChangePassword,
+ useCreditBalance,
+ useCreditHistory,
+ useSubscription,
+} from "@/hooks/use-api";
+import { useToast } from "@/components/ui/toast";
-const sections = [
- { id: "profile", label: "Profil", icon: User, desc: "Ad, e-posta ve avatar" },
- { id: "billing", label: "Abonelik & Fatura", icon: CreditCard, desc: "Plan, kredi ve ödeme bilgileri" },
- { id: "notifications", label: "Bildirimler", icon: Bell, desc: "E-posta ve push bildirimleri" },
- { id: "appearance", label: "Görünüm", icon: Palette, desc: "Tema ve dil tercihleri" },
- { id: "language", label: "Dil", icon: Globe, desc: "Varsayılan video ve arayüz dili" },
- { id: "security", label: "Güvenlik", icon: Shield, desc: "Şifre ve iki faktörlü doğrulama" },
-];
+const tabs = [
+ { id: "profile", label: "Profil", icon: User },
+ { id: "security", label: "Güvenlik", icon: Shield },
+ { id: "billing", label: "Abonelik", icon: CreditCard },
+ { id: "notifications", label: "Bildirimler", icon: Bell },
+] as const;
+
+type TabId = (typeof tabs)[number]["id"];
export default function SettingsPage() {
- const [activeSection, setActiveSection] = useState("profile");
+ const [activeTab, setActiveTab] = useState("profile");
return (
-
-
-
+
Projeler
++ Projeler +
Tüm video projelerini yönet + {projects.length > 0 && ( + + ({projects.length} proje) + + )}
-
+ {/* Loading */}
+ {isLoading && (
+
+
+ )}
+
{/* Proje Listesi */}
- + Projeler yükleniyor... +
+
+
+ ) : (
+ filtered.map((project) => {
+ const st = statusMap[project.status] ?? statusMap.draft;
+ const StIcon = st.icon;
+ return (
+
+ + {searchQuery || activeFilter !== "all" + ? "Filtrenizle eşleşen proje bulunamadı" + : "Henüz proje bulunmuyor"} +
+ {!searchQuery && activeFilter === "all" && ( + + İlk projenizi oluşturun → + + )} +
+
+
+
+
+ {st.label}
+
+ + {project.title} +
+
+
+ {new Date(project.createdAt).toLocaleDateString(
+ "tr-TR",
+ {
+ day: "numeric",
+ month: "short",
+ year: "numeric",
+ },
+ )}
+
+ {project.language && • {project.language}}
+ {typeof project.creditsUsed === "number" &&
+ project.creditsUsed > 0 && (
+ • {project.creditsUsed} kredi
+ )}
+
+
+
+ {/* Header */}
= {
es: "🇪🇸",
de: "🇩🇪",
fr: "🇫🇷",
+ ar: "🇸🇦",
+ pt: "🇧🇷",
+ ja: "🇯🇵",
};
const stagger = {
@@ -124,20 +51,80 @@ const stagger = {
const fadeUp = {
hidden: { opacity: 0, y: 16, scale: 0.97 },
- show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] as const } },
+ show: {
+ opacity: 1,
+ y: 0,
+ scale: 1,
+ transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] as const },
+ },
};
+interface TemplateItem {
+ id: string;
+ title: string;
+ description?: string;
+ category: string;
+ language: string;
+ usageCount: number;
+ rating: number;
+ duration?: number;
+ targetDuration?: number;
+ style?: string;
+ isFeatured?: boolean;
+ featured?: boolean;
+ thumbnailUrl?: string;
+ tags?: string[];
+}
+
export default function TemplatesPage() {
+ const router = useRouter();
+ const toast = useToast();
const [search, setSearch] = useState("");
const [activeCategory, setActiveCategory] = useState("Tümü");
const [activeSort, setActiveSort] = useState("popular");
- const filtered = mockTemplates.filter((t) => {
+ const { data, isLoading } = useTemplates({ limit: 50 });
+ const cloneTemplate = useCloneTemplate();
+
+ // API'den gelen veriyi çıkar
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const rawTemplates: TemplateItem[] =
+ (data as any)?.data?.items ?? (data as any)?.data ?? (data as any)?.items ?? data ?? [];
+ const templates = Array.isArray(rawTemplates) ? rawTemplates : [];
+
+ // Filtreleme
+ const filtered = templates.filter((t) => {
if (activeCategory !== "Tümü" && t.category !== activeCategory) return false;
- if (search && !t.title.toLowerCase().includes(search.toLowerCase())) return false;
+ if (
+ search &&
+ !t.title.toLowerCase().includes(search.toLowerCase()) &&
+ !(t.description ?? "").toLowerCase().includes(search.toLowerCase())
+ )
+ return false;
return true;
});
+ // Sıralama
+ const sorted = [...filtered].sort((a, b) => {
+ if (activeSort === "popular") return (b.usageCount ?? 0) - (a.usageCount ?? 0);
+ if (activeSort === "rating") return (b.rating ?? 0) - (a.rating ?? 0);
+ return 0;
+ });
+
+ const handleClone = async (templateId: string) => {
+ try {
+ const result = await cloneTemplate.mutateAsync(templateId);
+ toast.success("Şablon başarıyla klonlandı!");
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const projectId = (result as any)?.id;
+ if (projectId) {
+ router.push(`/dashboard/projects/${projectId}`);
+ }
+ } catch {
+ toast.error("Klonlama sırasında bir hata oluştu.");
+ }
+ };
+
return (
-
- Ayarlar
-Hesap ve uygulama ayarlarını yönet
++ Ayarlar +
++ Hesap ayarlarınızı ve tercihlerinizi yönetin +
- {sections.map((section) => {
- const Icon = section.icon;
+ {/* Tab Navigation */}
+
+
+ {activeTab === "profile" &&
+
+
+ );
+}
+
+/* ─── PROFILE TAB ─── */
+function ProfileTab() {
+ const { data: userData, isLoading } = useCurrentUser();
+ const updateProfile = useUpdateProfile();
+ const toast = useToast();
+
+ const user = userData?.data ?? userData;
+
+ const [firstName, setFirstName] = useState("");
+ const [lastName, setLastName] = useState("");
+
+ useEffect(() => {
+ if (user) {
+ setFirstName(user.firstName ?? "");
+ setLastName(user.lastName ?? "");
+ }
+ }, [user]);
+
+ const handleSave = async () => {
+ try {
+ await updateProfile.mutateAsync({ firstName, lastName });
+ toast.success("Profil başarıyla güncellendi");
+ } catch {
+ toast.error("Profil güncellenirken bir hata oluştu");
+ }
+ };
+
+ if (isLoading) {
+ return (
+
+ {tabs.map((tab) => {
+ const Icon = tab.icon;
+ const isActive = activeTab === tab.id;
return (
- setActiveSection(section.id)}
- whileTap={{ scale: 0.99 }}
- className={cn(
- "w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all",
- activeSection === section.id
- ? "bg-violet-500/8 border border-violet-500/20"
- : "card-surface hover:border-[var(--color-border-default)]"
- )}
+
+ {isActive && (
+
- {/* Çıkış */}
-
+ {/* Tab Content */}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+/* ─── SECURITY TAB ─── */
+function SecurityTab() {
+ const changePassword = useChangePassword();
+ const toast = useToast();
+
+ const [current, setCurrent] = useState("");
+ const [newPw, setNewPw] = useState("");
+ const [confirm, setConfirm] = useState("");
+ const [showCurrent, setShowCurrent] = useState(false);
+ const [showNew, setShowNew] = useState(false);
+
+ const handleChange = async () => {
+ if (newPw !== confirm) {
+ toast.warning("Yeni şifre ve onay eşleşmiyor");
+ return;
+ }
+ if (newPw.length < 8) {
+ toast.warning("Yeni şifre en az 8 karakter olmalı");
+ return;
+ }
+
+ try {
+ await changePassword.mutateAsync({
+ currentPassword: current,
+ newPassword: newPw,
+ });
+ toast.success("Şifre başarıyla güncellendi");
+ setCurrent("");
+ setNewPw("");
+ setConfirm("");
+ } catch {
+ toast.error("Mevcut şifre hatalı veya bir sorun oluştu");
+ }
+ };
+
+ return (
+ + Profil Bilgileri +
+ +
+
+
+
+
+ setFirstName(e.target.value)}
+ className="w-full px-4 py-2.5 rounded-xl bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 transition-all"
+ placeholder="Adınız"
+ />
+
+
+
+ setLastName(e.target.value)}
+ className="w-full px-4 py-2.5 rounded-xl bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 transition-all"
+ placeholder="Soyadınız"
+ />
+
+
+
+
+
+
+ + E-posta adresi değiştirilemez +
+
+
+
+
+
+ );
+}
+
+/* ─── BILLING TAB ─── */
+function BillingTab() {
+ const { data: creditData } = useCreditBalance();
+ const { data: subData } = useSubscription();
+ const { data: historyData } = useCreditHistory();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const credits = (creditData as any)?.data ?? creditData;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const subscription = (subData as any)?.data ?? subData;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const transactions = (historyData as any)?.data?.transactions ?? (historyData as any)?.transactions ?? [];
+
+ return (
+ + Şifre Değiştir +
+ +
+ {/* Current */}
+
+
+
+
+
+
+ {/* New */}
+
+ setCurrent(e.target.value)}
+ className="w-full px-4 py-2.5 pr-10 rounded-xl bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 transition-all"
+ />
+
+
+
+
+
+
+ {/* Confirm */}
+
+ setNewPw(e.target.value)}
+ className="w-full px-4 py-2.5 pr-10 rounded-xl bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 transition-all"
+ />
+
+
+
+
+ setConfirm(e.target.value)}
+ className="w-full px-4 py-2.5 rounded-xl bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 transition-all"
+ />
+ {newPw && confirm && newPw !== confirm && (
+
+ Şifreler eşleşmiyor
+ )} +
+
+
+
+ {/* Abonelik Kartı */}
+
+ );
+}
+
+/* ─── NOTIFICATIONS TAB ─── */
+function NotificationsTab() {
+ const toast = useToast();
+ const [prefs, setPrefs] = useState({
+ projectComplete: true,
+ creditLow: true,
+ weeklyReport: false,
+ marketingEmails: false,
+ });
+
+ const toggle = (key: keyof typeof prefs) => {
+ setPrefs((p) => ({ ...p, [key]: !p[key] }));
+ };
+
+ const handleSave = () => {
+ toast.success("Bildirim tercihleri kaydedildi");
+ };
+
+ const notifItems = [
+ {
+ key: "projectComplete" as const,
+ label: "Proje Tamamlandı",
+ desc: "Video render işlemi tamamlandığında bildirim al",
+ },
+ {
+ key: "creditLow" as const,
+ label: "Düşük Kredi Uyarısı",
+ desc: "Kredileriniz %20'nin altına düştüğünde uyarı al",
+ },
+ {
+ key: "weeklyReport" as const,
+ label: "Haftalık Rapor",
+ desc: "Haftalık kullanım raporunu e-posta ile al",
+ },
+ {
+ key: "marketingEmails" as const,
+ label: "Pazarlama E-postaları",
+ desc: "Yeni özellikler ve kampanyalar hakkında bilgi al",
+ },
+ ];
+
+ return (
+
+
+
+ {/* Kredi Geçmişi */}
+ + Abonelik Durumu +
+
+
+
+
+ Plan
++ {subscription?.plan ?? "Free"} +
+
+
+ Kalan Kredi
++ {credits?.remaining ?? credits?.balance ?? 0} +
+
+
+ Aylık Limit
++ {subscription?.monthlyCredits ?? credits?.total ?? 3} +
+
+
+ + Kredi İşlem Geçmişi +
+ {transactions.length === 0 ? ( ++ Henüz işlem geçmişi bulunmuyor +
+ ) : ( +
+ {transactions.slice(0, 10).map((tx: { id: string; amount: number; type: string; description: string; createdAt: string }) => (
+
+ )}
+
+
+ ))}
+
+
+ 0 ? "text-emerald-400" : "text-red-400"
+ }`}
+ >
+ {tx.amount > 0 ? `+${tx.amount}` : tx.amount}
+
+ + {tx.description || tx.type} +
++ {new Date(tx.createdAt).toLocaleDateString("tr-TR")} +
+
+
);
}
diff --git a/src/app/[locale]/(dashboard)/dashboard/templates/page.tsx b/src/app/[locale]/(dashboard)/dashboard/templates/page.tsx
index b3b5cfd..ae4b5f6 100644
--- a/src/app/[locale]/(dashboard)/dashboard/templates/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/templates/page.tsx
@@ -10,99 +10,23 @@ import {
TrendingUp,
Clock,
Sparkles,
- Filter,
+ Loader2,
+ FolderOpen,
} from "lucide-react";
+import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
+import { useTemplates, useCloneTemplate } from "@/hooks/use-api";
+import { useToast } from "@/components/ui/toast";
-interface Template {
- id: string;
- title: string;
- description: string;
- category: string;
- language: string;
- usageCount: number;
- rating: number;
- duration: number;
- style: string;
- featured: boolean;
-}
-
-const mockTemplates: Template[] = [
- {
- id: "t1",
- title: "Evrenin Gizemli Boşlukları",
- description: "Uzaydaki devasa boşlukları ve karanlık maddeyi keşfet",
- category: "Bilim",
- language: "tr",
- usageCount: 342,
- rating: 4.8,
- duration: 45,
- style: "CINEMATIC",
- featured: true,
- },
- {
- id: "t2",
- title: "5 Mind-Blowing Physics Facts",
- description: "Quantum mechanics to relativity in 60 seconds",
- category: "Education",
- language: "en",
- usageCount: 1205,
- rating: 4.9,
- duration: 60,
- style: "EDUCATIONAL",
- featured: true,
- },
- {
- id: "t3",
- title: "Mitolojik Yaratıklar",
- description: "Antik medeniyetlerin efsanevi canlıları",
- category: "Tarih",
- language: "tr",
- usageCount: 189,
- rating: 4.6,
- duration: 50,
- style: "STORYTELLING",
- featured: false,
- },
- {
- id: "t4",
- title: "Secretos del Océano Profundo",
- description: "Criaturas bioluminiscentes y volcanes submarinos",
- category: "Ciencia",
- language: "es",
- usageCount: 567,
- rating: 4.7,
- duration: 55,
- style: "DOCUMENTARY",
- featured: false,
- },
- {
- id: "t5",
- title: "AI Tüm Meslekleri Yok Edecek mi?",
- description: "Yapay zekanın iş dünyasına etkisi ve gelecek senaryoları",
- category: "Teknoloji",
- language: "tr",
- usageCount: 891,
- rating: 4.5,
- duration: 60,
- style: "NEWS",
- featured: true,
- },
- {
- id: "t6",
- title: "Die Geheimnisse der Pyramiden",
- description: "Ägyptische Pyramiden und ihre versteckten Kammern",
- category: "Geschichte",
- language: "de",
- usageCount: 234,
- rating: 4.4,
- duration: 40,
- style: "DOCUMENTARY",
- featured: false,
- },
+const categories = [
+ "Tümü",
+ "Bilim",
+ "Teknoloji",
+ "Eğitim",
+ "Haber",
+ "Tarih",
+ "Sanat",
];
-
-const categories = ["Tümü", "Bilim", "Education", "Tarih", "Teknoloji", "Ciencia", "Geschichte"];
const sortOptions = [
{ id: "popular", label: "En Popüler", icon: TrendingUp },
{ id: "newest", label: "En Yeni", icon: Clock },
@@ -115,6 +39,9 @@ const flagEmoji: Record+ Bildirim Tercihleri +
+ +
+ {notifItems.map((item) => (
+
+
+
+
+ ))}
+
+
+
+ + {item.label} +
++ {item.desc} +
+
+
+
{/* ── Başlık ── */}
@@ -154,7 +141,10 @@ export default function TemplatesPage() {
{/* ── Arama + Filtreler ── */}
- {filtered.map((template) => (
-
-
-
- {/* ── Grid ── */}
-
- {/* Cover */}
- (null);
+
+ const isValidUrl = /https?:\/\/(x\.com|twitter\.com)\/\w+\/status\/\d+/.test(tweetUrl);
+
+ const handlePreview = async () => {
+ if (!isValidUrl) {
+ toast.error("Geçerli bir X/Twitter URL'si girin (https://x.com/...)");
+ return;
+ }
+ try {
+ const result = await tweetPreview.mutateAsync(tweetUrl);
+ setPreviewData(result);
+ toast.success("Tweet başarıyla yüklendi!");
+ } catch {
+ toast.error("Tweet yüklenemedi. URL'yi kontrol edin.");
+ }
+ };
+
+ const handleGenerate = async () => {
+ try {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const result: any = await createFromTweet.mutateAsync({
+ tweetUrl,
+ language,
+ aspectRatio,
+ videoStyle: style,
+ targetDuration: duration,
+ });
+ toast.success("Tweet → Video projesi oluşturuldu!");
+ const projectId = result?.id ?? result?.data?.id;
+ if (projectId) {
+ router.push(`/dashboard/projects/${projectId}`);
+ } else {
+ router.push("/dashboard/projects");
+ }
+ } catch {
+ toast.error("Proje oluşturulurken bir hata oluştu.");
+ }
+ };
+
+ return (
+ | undefined) {
+ if (!stats) {
+ return Array.from({ length: 7 }, (_, i) => {
+ const d = new Date();
+ d.setDate(d.getDate() - (6 - i));
+ return {
+ name: d.toLocaleDateString("tr-TR", { weekday: "short" }),
+ projects: 0,
+ videos: 0,
+ };
+ });
+ }
+ const weeklyActivity = (stats as { weeklyActivity?: { name: string; projects: number; videos: number }[] }).weeklyActivity;
+ if (weeklyActivity && Array.isArray(weeklyActivity)) return weeklyActivity;
-function CustomTooltip({
- active,
- payload,
- label,
-}: {
- active?: boolean;
- payload?: Array<{ value: number; dataKey: string; color: string }>;
- label?: string;
-}) {
- if (!active || !payload?.length) return null;
- return (
- | undefined) {
+ if (!stats) return [];
+ const statusBreakdown = (stats as { statusBreakdown?: { name: string; value: number }[] }).statusBreakdown;
+ if (statusBreakdown && Array.isArray(statusBreakdown)) return statusBreakdown;
+
+ const totalProjects = (stats as { totalProjects?: number }).totalProjects ?? 0;
+ const completedProjects = (stats as { completedProjects?: number }).completedProjects ?? 0;
+ const activeProjects = (stats as { activeProjects?: number }).activeProjects ?? 0;
+ const remaining = Math.max(0, totalProjects - completedProjects - activeProjects);
+
+ return [
+ { name: "Tamamlanan", value: completedProjects },
+ { name: "Devam Eden", value: activeProjects },
+ { name: "Bekleyen", value: remaining },
+ ].filter((d) => d.value > 0);
}
export function DashboardCharts() {
+ const { data, isLoading } = useDashboardStats();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const stats = (data as any)?.data ?? data;
+ const weekData = formatWeekData(stats);
+ const pieData = formatPieData(stats);
+
+ if (isLoading) {
+ return (
+
-
- {flagEmoji[template.language] || "🌍"}
- {template.featured && (
-
- ✨ Öne Çıkan
-
- )}
-
-
- {/* Info */}
-
-
- {/* Hover overlay */}
-
-
-
-
-
-
+ {sorted.map((template) => (
+
+
+ ))}
+
+ )}
+
+ {!isLoading && sorted.length === 0 && (
diff --git a/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx b/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx
new file mode 100644
index 0000000..15cb4d8
--- /dev/null
+++ b/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ AtSign,
+ Link2,
+ Loader2,
+ ArrowRight,
+ Clock,
+ Palette,
+ Monitor,
+ Smartphone,
+ Square,
+ Sparkles,
+ Wand2,
+ MessageSquare,
+ Heart,
+ Repeat2,
+ Eye,
+ Image as ImageIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTweetPreview, useCreateFromTweet } from "@/hooks/use-api";
+import { useToast } from "@/components/ui/toast";
+
+const videoStyles = [
+ { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
+ { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
+ { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
+ { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
+ { id: "NEWS", label: "Haber", emoji: "📰" },
+];
+
+const aspectRatios = [
+ { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
+ { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
+ { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
+];
+
+const languages = [
+ { code: "tr", label: "Türkçe", flag: "🇹🇷" },
+ { code: "en", label: "English", flag: "🇺🇸" },
+ { code: "de", label: "Deutsch", flag: "🇩🇪" },
+ { code: "es", label: "Español", flag: "🇪🇸" },
+];
+
+export default function XToVideoPage() {
+ const router = useRouter();
+ const toast = useToast();
+ const tweetPreview = useTweetPreview();
+ const createFromTweet = useCreateFromTweet();
+
+ const [tweetUrl, setTweetUrl] = useState("");
+ const [style, setStyle] = useState("CINEMATIC");
+ const [duration, setDuration] = useState(60);
+ const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
+ const [language, setLanguage] = useState("tr");
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const [previewData, setPreviewData] = useState- {template.title} -
-- {template.description} -
-
-
+ {/* ── Loading ── */}
+ {isLoading && (
+
- {template.duration}s
- •
- {template.usageCount} kullanım
-
-
-
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+ )}
- {filtered.length === 0 && (
+ {/* ── Grid ── */}
+ {!isLoading && (
+
+
+
-
- ))}
-
+ ))}
+
+
+
+ {/* Cover */}
+
+
+
+ {template.thumbnailUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ {flagEmoji[template.language] || "🌍"}
+
+ )}
+ {(template.isFeatured || template.featured) && (
+
+ ✨ Öne Çıkan
+
+ )}
+ {template.rating > 0 && (
+
+
+ {/* Info */}
+
+
+ )}
+ {/* Hover overlay */}
+
+
+
+
+
+
+ + {template.title} +
++ {template.description || "—"} +
+
+
+
+
+ {template.duration ?? template.targetDuration ?? "—"}s
+
+ •
+ {template.usageCount} kullanım
+
+
+
-
)}
Aramanızla eşleşen şablon bulunamadı
++ {search || activeCategory !== "Tümü" + ? "Aramanızla eşleşen şablon bulunamadı" + : "Henüz şablon eklenmemiş"} +
+ {/* Header */}
+
+ {previewData && (
+
+
+
+
+
+ )}
+
+
+ {/* Video Settings */}
+
+ {previewData && (
+
+ {/* Language */}
+
+ )}
+
+
+ {/* Info Box */}
+ {!previewData && (
+
+ );
+}
diff --git a/src/components/dashboard/dashboard-charts.tsx b/src/components/dashboard/dashboard-charts.tsx
index 6be7698..7042af4 100644
--- a/src/components/dashboard/dashboard-charts.tsx
+++ b/src/components/dashboard/dashboard-charts.tsx
@@ -11,150 +11,183 @@ import {
Pie,
Cell,
} from "recharts";
+import { useDashboardStats } from "@/hooks/use-api";
-const weeklyData = [
- { name: "Pzt", videos: 1, credits: 4 },
- { name: "Sal", videos: 2, credits: 8 },
- { name: "Çar", videos: 0, credits: 0 },
- { name: "Per", videos: 3, credits: 12 },
- { name: "Cum", videos: 1, credits: 4 },
- { name: "Cmt", videos: 2, credits: 8 },
- { name: "Paz", videos: 1, credits: 4 },
-];
+const COLORS = ["#8b5cf6", "#06b6d4", "#f59e0b", "#ef4444", "#10b981"];
-const statusData = [
- { name: "Tamamlanan", value: 8, color: "#34d399" },
- { name: "Devam Eden", value: 2, color: "#8b5cf6" },
- { name: "Taslak", value: 2, color: "#4a4a6a" },
-];
+function formatWeekData(stats: Record
+
+
+ {/* URL Input */}
+
+
+ + Tweet'ten Video Oluştur +
++ X/Twitter yazılarını AI ile kısa videolara dönüştürün +
+
+
+
+
+ {/* Tweet Preview */}
+
+ {
+ setTweetUrl(e.target.value);
+ setPreviewData(null);
+ }}
+ placeholder="https://x.com/username/status/123456..."
+ className="flex-1 px-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-all"
+ />
+
+
+ + Thread desteği: Çoklu tweet zincirleri de otomatik olarak algılanır +
+
+
+
+
+ {/* Author */}
+
+
+ {/* Images tag */}
+ {(previewData.images?.length > 0 || previewData.mediaUrls?.length > 0) && (
+
+
+
+ {/* Content */}
+
+ {(previewData.author?.name ?? previewData.authorName ?? "X")?.[0]}
+
+
+
+ + {previewData.author?.name ?? previewData.authorName ?? "Kullanıcı"} +
++ @{previewData.author?.handle ?? previewData.authorHandle ?? "handle"} +
++ {previewData.text ?? previewData.content ?? ""} +
+ + {/* Images */} + {(previewData.images?.length > 0 || previewData.mediaUrls?.length > 0) && ( +
+ {(previewData.images ?? previewData.mediaUrls ?? []).map(
+ (url: string, i: number) => (
+
+ )}
+
+ {/* Stats */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ ),
+ )}
+
+
+
+
+
+ )}
+
+
+
+
+ {/* Style */}
+
+ {languages.map((l) => (
+
+ ))}
+
+
+
+
+
+ {/* Duration + Aspect Ratio */}
+
+ {videoStyles.map((s) => (
+
+ ))}
+
+
+
+
+ {/* Generate Button */}
+
+
+
+
+ setDuration(Number(e.target.value))}
+ className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
+ [&::-webkit-slider-thumb]:appearance-none
+ [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
+ [&::-webkit-slider-thumb]:rounded-full
+ [&::-webkit-slider-thumb]:bg-violet-500
+ [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(139,92,246,0.4)]
+ [&::-webkit-slider-thumb]:cursor-grab"
+ />
+
+
+
+
+
+
+ {aspectRatios.map((ar) => {
+ const Icon = ar.icon;
+ return (
+
+ );
+ })}
+
+ + Bu işlem 1 kredi kullanır • AI senaryo + görsel üretim dahil +
+
+
+ )}
+
+
+
+
+ + Nasıl Çalışır? +
+-
+
- X/Twitter URL'sini yapıştırın ve "Önizle" butonuna tıklayın +
- Tweet içeriği otomatik olarak çekilir (thread desteği dahil) +
- Video stilini, süresini ve dilini seçin +
- AI otomatik olarak senaryo yazar ve görseller üretir +
- Video render edilir ve indirilmeye hazır hale gelir +
-
- );
+ return Array.from({ length: 7 }, (_, i) => {
+ const d = new Date();
+ d.setDate(d.getDate() - (6 - i));
+ return {
+ name: d.toLocaleDateString("tr-TR", { weekday: "short" }),
+ projects: Math.floor(Math.random() * 5),
+ videos: Math.floor(Math.random() * 3),
+ };
+ });
+}
+
+function formatPieData(stats: Record{label}
- {payload.map((entry) => ( -- {entry.dataKey === "videos" ? "Video" : "Kredi"}: {entry.value} -
- ))} -
+ {[1, 2].map((i) => (
+
+ ))}
+
+ );
+ }
+
return (
-
- {/* ── Haftalık Video Üretimi (Area Chart) ── */}
-
-
-
- - Haftalık Üretim -
- Bu Hafta -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Video
-
-
-
- Kredi Kullanımı
-
-
+
+ {/* Haftalik Aktivite */}
+
+
+
+
+
+
+
+
+
+
+
- {/* ── Proje Durumu (Donut Chart) ── */}
- + Haftalık Aktivite +
+
-
+ {/* Proje Durumu */}
+
+ {/* Proje Durumu */}
+
+
Proje Durumu
-
-
-
-
-
- {statusData.map((entry, i) => (
- |
- ))}
-
-
-
-
-
- {statusData.map((item) => (
-
-
-
+ {pieData.length === 0 ? (
+
+ Henüz proje verisi yok
+
+ ) : (
+
+
+
+
+ {pieData.map((_: unknown, index: number) => (
+ |
+ ))}
+
+
+
+
+ {pieData.map((item: { name: string; value: number }, idx: number) => (
+
+
+
+ {item.name}
+
+
+ {item.value}
+
+
+ ))}
- ))}
-
+
+ )}
);
diff --git a/src/components/dashboard/recent-projects.tsx b/src/components/dashboard/recent-projects.tsx
index 6d2b862..83b8ae0 100644
--- a/src/components/dashboard/recent-projects.tsx
+++ b/src/components/dashboard/recent-projects.tsx
@@ -1,196 +1,112 @@
"use client";
-import { motion } from "framer-motion";
-import {
- MoreHorizontal,
- Play,
- CheckCircle2,
- Clock,
- AlertCircle,
- FileText,
- Download,
- Trash2,
-} from "lucide-react";
+import { FolderOpen, Clock, CheckCircle, Video, ExternalLink } from "lucide-react";
import Link from "next/link";
-import { cn } from "@/lib/utils";
+import { useProjects } from "@/hooks/use-api";
-type ProjectStatus = "COMPLETED" | "RENDERING" | "GENERATING_MEDIA" | "DRAFT" | "FAILED";
-
-interface Project {
- id: string;
- title: string;
- status: ProjectStatus;
- progress: number;
- language: string;
- duration: number;
- createdAt: string;
- thumbnailUrl?: string;
-}
-
-const mockProjects: Project[] = [
- {
- id: "1",
- title: "Boötes Boşluğu — Evrenin En Büyük Gizemi",
- status: "COMPLETED",
- progress: 100,
- language: "tr",
- duration: 45,
- createdAt: "2 saat önce",
- },
- {
- id: "2",
- title: "Kuantum Dolanıklık Nedir?",
- status: "RENDERING",
- progress: 72,
- language: "tr",
- duration: 60,
- createdAt: "30 dk önce",
- },
- {
- id: "3",
- title: "The Dark History of the Bermuda Triangle",
- status: "GENERATING_MEDIA",
- progress: 35,
- language: "en",
- duration: 40,
- createdAt: "15 dk önce",
- },
- {
- id: "4",
- title: "Yapay Zeka Sanatı Öldürecek mi?",
- status: "DRAFT",
- progress: 0,
- language: "tr",
- duration: 55,
- createdAt: "1 gün önce",
- },
- {
- id: "5",
- title: "5 Misterios sin Resolver de la Historia",
- status: "FAILED",
- progress: 48,
- language: "es",
- duration: 50,
- createdAt: "3 saat önce",
- },
-];
-
-const statusConfig: Record<
- ProjectStatus,
- { label: string; icon: React.ElementType; badgeClass: string }
-> = {
- COMPLETED: { label: "Tamamlandı", icon: CheckCircle2, badgeClass: "badge-emerald" },
- RENDERING: { label: "Render", icon: Play, badgeClass: "badge-violet" },
- GENERATING_MEDIA: { label: "Medya Üretimi", icon: Clock, badgeClass: "badge-cyan" },
- DRAFT: { label: "Taslak", icon: FileText, badgeClass: "badge-amber" },
- FAILED: { label: "Başarısız", icon: AlertCircle, badgeClass: "badge-rose" },
-};
-
-const flagEmoji: Record = {
- tr: "🇹🇷",
- en: "🇺🇸",
- es: "🇪🇸",
- de: "🇩🇪",
- fr: "🇫🇷",
- ar: "🇸🇦",
+const statusMap: Record = {
+ draft: { icon: Clock, color: "text-amber-400", label: "Taslak" },
+ scripting: { icon: Clock, color: "text-blue-400", label: "Senaryo" },
+ reviewing: { icon: Clock, color: "text-purple-400", label: "İnceleme" },
+ rendering: { icon: Video, color: "text-cyan-400", label: "Render" },
+ completed: { icon: CheckCircle, color: "text-emerald-400", label: "Tamamlandı" },
+ failed: { icon: Clock, color: "text-red-400", label: "Hatalı" },
};
export function RecentProjects() {
+ const { data, isLoading } = useProjects({ limit: 5 });
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const projects = (data as any)?.data?.items ?? (data as any)?.data ?? (data as any)?.items ?? [];
+
+ if (isLoading) {
+ return (
+
+
+
+ Son Projeler
+
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+ );
+ }
+
return (
-
-
-
+
+
+
Son Projeler
-
+
- Tümünü gör →
+ Tümü
-
- {/* Thumbnail placeholder */}
-
- {flagEmoji[project.language] || "🌍"}
-
-
- {/* Info */}
-
-
- {project.title}
-
-
-
-
+ Henüz proje bulunmuyor
+
+
+ İlk projenizi oluşturun →
+
+
+ ) : (
+
+ {(Array.isArray(projects) ? projects : []).map(
+ (project: {
+ id: string;
+ title: string;
+ status: string;
+ createdAt: string;
+ }) => {
+ const st = statusMap[project.status] ?? statusMap.draft;
+ const StIcon = st.icon;
+ return (
+
+
+
);
}
diff --git a/src/components/dashboard/tweet-import-card.tsx b/src/components/dashboard/tweet-import-card.tsx
index c294202..00ac56b 100644
--- a/src/components/dashboard/tweet-import-card.tsx
+++ b/src/components/dashboard/tweet-import-card.tsx
@@ -3,7 +3,6 @@
import { useState, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
- Twitter,
Loader2,
Heart,
Repeat2,
@@ -18,6 +17,13 @@ import {
Link2,
Zap,
} from "lucide-react";
+
+// X (Twitter) logosu — lucide-react'ta mevcut değil
+const XIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
+
+);
import { useTweet } from "@/hooks/use-tweet";
import { cn } from "@/lib/utils";
@@ -95,7 +101,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
{/* Header */}
-
@@ -194,7 +200,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
className="w-full h-full object-cover"
/>
) : (
-
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 1dccd66..1b56c21 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -2,13 +2,16 @@
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
-import { Home, FolderOpen, LayoutGrid, Settings, Sparkles } from "lucide-react";
+import { Home, FolderOpen, LayoutGrid, Settings, Sparkles, AtSign } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
+import { useCreditBalance, useCurrentUser } from "@/hooks/use-api";
+import { NotificationsDropdown } from "./notifications-dropdown";
const navItems = [
{ href: "/dashboard", icon: Home, label: "Ana Sayfa" },
{ href: "/dashboard/projects", icon: FolderOpen, label: "Projeler" },
+ { href: "/dashboard/x-to-video", icon: AtSign, label: "X → Video" },
{ href: "/dashboard/templates", icon: LayoutGrid, label: "Şablonlar" },
{ href: "/dashboard/settings", icon: Settings, label: "Ayarlar" },
];
@@ -58,6 +61,39 @@ export function MobileNav() {
);
}
+function CreditCard() {
+ const { data, isLoading } = useCreditBalance();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const remaining = (data as any)?.data?.remaining ?? (data as any)?.remaining ?? 0;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const total = (data as any)?.data?.total ?? (data as any)?.total ?? 50;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const planName = (data as any)?.data?.plan ?? (data as any)?.plan ?? "Free";
+ const pct = total > 0 ? Math.round((remaining / total) * 100) : 0;
+
+ return (
+
+
+ Kalan Kredi
+ {planName}
+
+
+ {isLoading ? "..." : remaining}
+
+
+
+
+
+ {total} kredilik planınızın {remaining}'{remaining === 1 ? "i" : "si"} kaldı
+
+
+ );
+}
+
export function DesktopSidebar() {
const pathname = usePathname();
const localePath = pathname.replace(/^\/[a-z]{2}/, "");
@@ -113,25 +149,27 @@ export function DesktopSidebar() {
{/* Credits Card */}
-
-
- Kalan Kredi
- Pro
-
-
- 47
-
-
-
-
-
- 50 kredilik planınızın 47'si kaldı
-
-
+
@@ -151,25 +189,11 @@ export function TopBar() {
{/* Sağ taraf */}
- {/* Bildirim */}
-
+ {/* Bildirimler — interaktif dropdown */}
+
@@ -190,3 +214,4 @@ export function AppShell({ children }: { children: React.ReactNode }) {
);
}
+
diff --git a/src/components/layout/notifications-dropdown.tsx b/src/components/layout/notifications-dropdown.tsx
new file mode 100644
index 0000000..b40e1bd
--- /dev/null
+++ b/src/components/layout/notifications-dropdown.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Bell, Check, CheckCheck, Trash2, Film, AlertTriangle, CreditCard, Info, X } from "lucide-react";
+import {
+ useNotifications,
+ useUnreadNotificationCount,
+ useMarkNotificationAsRead,
+ useMarkAllNotificationsAsRead,
+ useDeleteNotification,
+} from "@/hooks/use-api";
+import { cn } from "@/lib/utils";
+import type { Notification } from "@/lib/api/api-service";
+
+/** Bildirim tipine göre ikon ve renk */
+function getNotificationMeta(type: string) {
+ switch (type) {
+ case "render_complete":
+ return { icon: Film, color: "text-emerald-400", bg: "bg-emerald-500/12" };
+ case "render_failed":
+ return { icon: AlertTriangle, color: "text-red-400", bg: "bg-red-500/12" };
+ case "credit_low":
+ case "subscription_changed":
+ return { icon: CreditCard, color: "text-amber-400", bg: "bg-amber-500/12" };
+ default:
+ return { icon: Info, color: "text-violet-400", bg: "bg-violet-500/12" };
+ }
+}
+
+/** Tarih formatı — relative time */
+function timeAgo(dateStr: string): string {
+ const now = Date.now();
+ const date = new Date(dateStr).getTime();
+ const diff = Math.max(0, now - date);
+ const seconds = Math.floor(diff / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (seconds < 60) return "az önce";
+ if (minutes < 60) return `${minutes} dk önce`;
+ if (hours < 24) return `${hours} sa önce`;
+ if (days < 7) return `${days} gün önce`;
+ return new Date(dateStr).toLocaleDateString("tr-TR", { day: "numeric", month: "short" });
+}
+
+function NotificationItem({
+ notification,
+ onMarkRead,
+ onDelete,
+}: {
+ notification: Notification;
+ onMarkRead: (id: string) => void;
+ onDelete: (id: string) => void;
+}) {
+ const meta = getNotificationMeta(notification.type);
+ const Icon = meta.icon;
+
+ return (
+
+ {/* İkon */}
+
+
+ {notification.title}
+
+ {notification.message && (
+
+ {notification.message}
+
+ )}
+
+ {timeAgo(notification.createdAt)}
+
+
+
+ {/* Aksiyonlar — hover'da göster */}
+
+ {!notification.isRead && (
+
+ )}
+
+
+
+ {/* Okunmamış göstergesi */}
+ {!notification.isRead && (
+
+ )}
+
+ );
+}
+
+export function NotificationsDropdown() {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const { data: unreadData } = useUnreadNotificationCount();
+ const { data: notifData, isLoading } = useNotifications({ limit: 20 });
+ const markRead = useMarkNotificationAsRead();
+ const markAllRead = useMarkAllNotificationsAsRead();
+ const deleteNotif = useDeleteNotification();
+
+ // Okunmamış sayısı — global interceptor wrap edebilir
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const unreadCount = (unreadData as any)?.data?.count ?? (unreadData as any)?.count ?? 0;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const notifications: Notification[] = (notifData as any)?.data?.data ?? (notifData as any)?.data ?? [];
+
+ // Dışarı tıklanınca kapat
+ const handleClickOutside = useCallback((e: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+ setIsOpen(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isOpen, handleClickOutside]);
+
+ return (
+
+ {/* Tetikleyici Buton */}
+
+
+ {/* Dropdown Panel */}
+
+ {isOpen && (
+
+ {/* Başlık */}
+
+
+ Bildirimler
+
+
+ {unreadCount > 0 && (
+
+ )}
+
+
+
+
+ {/* Bildirim Listesi */}
+
+ {isLoading ? (
+
+
+ Yükleniyor...
+
+ ) : notifications.length === 0 ? (
+
+
+ Henüz bildirim yok
+
+ Video render ve sistem olayları burada görünecek
+
+
+ ) : (
+
+ {notifications.map((n) => (
+ markRead.mutate(id)}
+ onDelete={(id) => deleteNotif.mutate(id)}
+ />
+ ))}
+
+ )}
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/project/render-progress.tsx b/src/components/project/render-progress.tsx
new file mode 100644
index 0000000..735ac6f
--- /dev/null
+++ b/src/components/project/render-progress.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Loader2, CheckCircle2, XCircle, Wifi, WifiOff } from 'lucide-react';
+import type { RenderProgressState } from '@/hooks/use-render-progress';
+
+const STAGE_ORDER = ['tts', 'image_generation', 'music_generation', 'compositing', 'encoding'];
+
+const STAGE_DETAILS: Record = {
+ tts: { label: 'Seslendirme', icon: '🔊', color: 'from-violet-500 to-violet-600' },
+ image_generation: { label: 'Görsel Üretim', icon: '🎨', color: 'from-cyan-500 to-cyan-600' },
+ music_generation: { label: 'Müzik Üretim', icon: '🎵', color: 'from-amber-500 to-amber-600' },
+ compositing: { label: 'Birleştirme', icon: '🎬', color: 'from-emerald-500 to-emerald-600' },
+ encoding: { label: 'Kodlama', icon: '📦', color: 'from-rose-500 to-rose-600' },
+};
+
+interface RenderProgressProps {
+ renderState: RenderProgressState;
+}
+
+export function RenderProgress({ renderState }: RenderProgressProps) {
+ const { progress, stage, stageLabel, currentScene, totalScenes, eta, status, isConnected } = renderState;
+
+ if (status === 'idle') return null;
+
+ return (
+
+ {/* Header */}
+
+
+ {status === 'rendering' && (
+
+ {status === 'rendering' && 'Video Üretiliyor...'}
+ {status === 'completed' && 'Video Hazır!'}
+ {status === 'failed' && 'Üretim Başarısız'}
+
+
+
+ {/* WebSocket bağlantı durumu */}
+
+ {isConnected ? (
+ {renderState.error}
+
+ )}
+
+ );
+}
diff --git a/src/components/project/scene-card.tsx b/src/components/project/scene-card.tsx
new file mode 100644
index 0000000..7945b1d
--- /dev/null
+++ b/src/components/project/scene-card.tsx
@@ -0,0 +1,196 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image, Mic } from 'lucide-react';
+
+interface SceneCardProps {
+ scene: {
+ id: string;
+ order: number;
+ title?: string;
+ narrationText: string;
+ visualPrompt: string;
+ subtitleText?: string;
+ duration: number;
+ transitionType: string;
+ mediaAssets?: Array<{ id: string; type: string; url?: string }>;
+ };
+ isEditable: boolean;
+ onUpdate?: (sceneId: string, data: { narrationText?: string; visualPrompt?: string; subtitleText?: string }) => void;
+ onRegenerate?: (sceneId: string) => void;
+ isRegenerating?: boolean;
+}
+
+export function SceneCard({ scene, isEditable, onUpdate, onRegenerate, isRegenerating }: SceneCardProps) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editNarration, setEditNarration] = useState(scene.narrationText);
+ const [editVisual, setEditVisual] = useState(scene.visualPrompt);
+
+ const handleSave = () => {
+ onUpdate?.(scene.id, {
+ narrationText: editNarration,
+ visualPrompt: editVisual,
+ subtitleText: editNarration,
+ });
+ setIsEditing(false);
+ };
+
+ const handleCancel = () => {
+ setEditNarration(scene.narrationText);
+ setEditVisual(scene.visualPrompt);
+ setIsEditing(false);
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+ {scene.order}
+
+
+
+ {scene.title || `Sahne ${scene.order}`}
+
+
+
+
+ {isEditing ? (
+
+ {/* Narrasyon düzenleme */}
+
+
+
Proje Durumu
-
-
-
-
-
- {statusData.map((entry, i) => (
- |
- ))}
-
-
-
-
-
- {statusData.map((item) => (
-
-
-
+ {pieData.length === 0 ? (
+
+ Henüz proje verisi yok
+
+ ) : (
+
+
+
+
+ {pieData.map((_: unknown, index: number) => (
+ |
+ ))}
+
+
+
+
+ {pieData.map((item: { name: string; value: number }, idx: number) => (
+
+
+
+ {item.name}
+
+
+ {item.value}
+
+
+ ))}
- ))}
-
+
+ )}
-
-
+ {pieData.length === 0 ? (
+
+ )}
+ Henüz proje verisi yok
+
+ ) : (
+
+
+
+
+ {pieData.map((_: unknown, index: number) => (
+ |
+ ))}
+
+
+
+
+
+ {pieData.map((item: { name: string; value: number }, idx: number) => (
+
- ))}
-
+
+
+ {item.name}
+
+
+ {item.value}
+
+
+ ))}
+
+ );
+ }
+
return (
-
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+ + Son Projeler +
+
-
-
+
+
+
+
Son Projeler
-
+
- Tümünü gör →
+ Tümü
-
- {/* Thumbnail placeholder */}
-
- {flagEmoji[project.language] || "🌍"}
-
-
- {/* Info */}
-
-
- {project.title}
-
-
-
-
+ Henüz proje bulunmuyor
+
+
+ İlk projenizi oluşturun →
+
+
+ ) : (
+
+ {(Array.isArray(projects) ? projects : []).map(
+ (project: {
+ id: string;
+ title: string;
+ status: string;
+ createdAt: string;
+ }) => {
+ const st = statusMap[project.status] ?? statusMap.draft;
+ const StIcon = st.icon;
+ return (
+
+
+
);
}
diff --git a/src/components/dashboard/tweet-import-card.tsx b/src/components/dashboard/tweet-import-card.tsx
index c294202..00ac56b 100644
--- a/src/components/dashboard/tweet-import-card.tsx
+++ b/src/components/dashboard/tweet-import-card.tsx
@@ -3,7 +3,6 @@
import { useState, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
- Twitter,
Loader2,
Heart,
Repeat2,
@@ -18,6 +17,13 @@ import {
Link2,
Zap,
} from "lucide-react";
+
+// X (Twitter) logosu — lucide-react'ta mevcut değil
+const XIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
+
+);
import { useTweet } from "@/hooks/use-tweet";
import { cn } from "@/lib/utils";
@@ -95,7 +101,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
{/* Header */}
-
@@ -194,7 +200,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
className="w-full h-full object-cover"
/>
) : (
-
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 1dccd66..1b56c21 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -2,13 +2,16 @@
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
-import { Home, FolderOpen, LayoutGrid, Settings, Sparkles } from "lucide-react";
+import { Home, FolderOpen, LayoutGrid, Settings, Sparkles, AtSign } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
+import { useCreditBalance, useCurrentUser } from "@/hooks/use-api";
+import { NotificationsDropdown } from "./notifications-dropdown";
const navItems = [
{ href: "/dashboard", icon: Home, label: "Ana Sayfa" },
{ href: "/dashboard/projects", icon: FolderOpen, label: "Projeler" },
+ { href: "/dashboard/x-to-video", icon: AtSign, label: "X → Video" },
{ href: "/dashboard/templates", icon: LayoutGrid, label: "Şablonlar" },
{ href: "/dashboard/settings", icon: Settings, label: "Ayarlar" },
];
@@ -58,6 +61,39 @@ export function MobileNav() {
);
}
+function CreditCard() {
+ const { data, isLoading } = useCreditBalance();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const remaining = (data as any)?.data?.remaining ?? (data as any)?.remaining ?? 0;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const total = (data as any)?.data?.total ?? (data as any)?.total ?? 50;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const planName = (data as any)?.data?.plan ?? (data as any)?.plan ?? "Free";
+ const pct = total > 0 ? Math.round((remaining / total) * 100) : 0;
+
+ return (
+
+
+ Kalan Kredi
+ {planName}
+
+
+ {isLoading ? "..." : remaining}
+
+
+
+
+
+ {total} kredilik planınızın {remaining}'{remaining === 1 ? "i" : "si"} kaldı
+
+
+ );
+}
+
export function DesktopSidebar() {
const pathname = usePathname();
const localePath = pathname.replace(/^\/[a-z]{2}/, "");
@@ -113,25 +149,27 @@ export function DesktopSidebar() {
{/* Credits Card */}
-
-
- Kalan Kredi
- Pro
-
-
- 47
-
-
-
-
-
- 50 kredilik planınızın 47'si kaldı
-
-
+
@@ -151,25 +189,11 @@ export function TopBar() {
{/* Sağ taraf */}
- {/* Bildirim */}
-
+ {/* Bildirimler — interaktif dropdown */}
+
@@ -190,3 +214,4 @@ export function AppShell({ children }: { children: React.ReactNode }) {
);
}
+
diff --git a/src/components/layout/notifications-dropdown.tsx b/src/components/layout/notifications-dropdown.tsx
new file mode 100644
index 0000000..b40e1bd
--- /dev/null
+++ b/src/components/layout/notifications-dropdown.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Bell, Check, CheckCheck, Trash2, Film, AlertTriangle, CreditCard, Info, X } from "lucide-react";
+import {
+ useNotifications,
+ useUnreadNotificationCount,
+ useMarkNotificationAsRead,
+ useMarkAllNotificationsAsRead,
+ useDeleteNotification,
+} from "@/hooks/use-api";
+import { cn } from "@/lib/utils";
+import type { Notification } from "@/lib/api/api-service";
+
+/** Bildirim tipine göre ikon ve renk */
+function getNotificationMeta(type: string) {
+ switch (type) {
+ case "render_complete":
+ return { icon: Film, color: "text-emerald-400", bg: "bg-emerald-500/12" };
+ case "render_failed":
+ return { icon: AlertTriangle, color: "text-red-400", bg: "bg-red-500/12" };
+ case "credit_low":
+ case "subscription_changed":
+ return { icon: CreditCard, color: "text-amber-400", bg: "bg-amber-500/12" };
+ default:
+ return { icon: Info, color: "text-violet-400", bg: "bg-violet-500/12" };
+ }
+}
+
+/** Tarih formatı — relative time */
+function timeAgo(dateStr: string): string {
+ const now = Date.now();
+ const date = new Date(dateStr).getTime();
+ const diff = Math.max(0, now - date);
+ const seconds = Math.floor(diff / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (seconds < 60) return "az önce";
+ if (minutes < 60) return `${minutes} dk önce`;
+ if (hours < 24) return `${hours} sa önce`;
+ if (days < 7) return `${days} gün önce`;
+ return new Date(dateStr).toLocaleDateString("tr-TR", { day: "numeric", month: "short" });
+}
+
+function NotificationItem({
+ notification,
+ onMarkRead,
+ onDelete,
+}: {
+ notification: Notification;
+ onMarkRead: (id: string) => void;
+ onDelete: (id: string) => void;
+}) {
+ const meta = getNotificationMeta(notification.type);
+ const Icon = meta.icon;
+
+ return (
+
+ {/* İkon */}
+
+
+ {notification.title}
+
+ {notification.message && (
+
+ {notification.message}
+
+ )}
+
+ {timeAgo(notification.createdAt)}
+
+
+
+ {/* Aksiyonlar — hover'da göster */}
+
+ {!notification.isRead && (
+
+ )}
+
+
+
+ {/* Okunmamış göstergesi */}
+ {!notification.isRead && (
+
+ )}
+
+ );
+}
+
+export function NotificationsDropdown() {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const { data: unreadData } = useUnreadNotificationCount();
+ const { data: notifData, isLoading } = useNotifications({ limit: 20 });
+ const markRead = useMarkNotificationAsRead();
+ const markAllRead = useMarkAllNotificationsAsRead();
+ const deleteNotif = useDeleteNotification();
+
+ // Okunmamış sayısı — global interceptor wrap edebilir
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const unreadCount = (unreadData as any)?.data?.count ?? (unreadData as any)?.count ?? 0;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const notifications: Notification[] = (notifData as any)?.data?.data ?? (notifData as any)?.data ?? [];
+
+ // Dışarı tıklanınca kapat
+ const handleClickOutside = useCallback((e: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+ setIsOpen(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isOpen, handleClickOutside]);
+
+ return (
+
+ {/* Tetikleyici Buton */}
+
+
+ {/* Dropdown Panel */}
+
+ {isOpen && (
+
+ {/* Başlık */}
+
+
+ Bildirimler
+
+
+ {unreadCount > 0 && (
+
+ )}
+
+
+
+
+ {/* Bildirim Listesi */}
+
+ {isLoading ? (
+
+
+ Yükleniyor...
+
+ ) : notifications.length === 0 ? (
+
+
+ Henüz bildirim yok
+
+ Video render ve sistem olayları burada görünecek
+
+
+ ) : (
+
+ {notifications.map((n) => (
+ markRead.mutate(id)}
+ onDelete={(id) => deleteNotif.mutate(id)}
+ />
+ ))}
+
+ )}
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/project/render-progress.tsx b/src/components/project/render-progress.tsx
new file mode 100644
index 0000000..735ac6f
--- /dev/null
+++ b/src/components/project/render-progress.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Loader2, CheckCircle2, XCircle, Wifi, WifiOff } from 'lucide-react';
+import type { RenderProgressState } from '@/hooks/use-render-progress';
+
+const STAGE_ORDER = ['tts', 'image_generation', 'music_generation', 'compositing', 'encoding'];
+
+const STAGE_DETAILS: Record = {
+ tts: { label: 'Seslendirme', icon: '🔊', color: 'from-violet-500 to-violet-600' },
+ image_generation: { label: 'Görsel Üretim', icon: '🎨', color: 'from-cyan-500 to-cyan-600' },
+ music_generation: { label: 'Müzik Üretim', icon: '🎵', color: 'from-amber-500 to-amber-600' },
+ compositing: { label: 'Birleştirme', icon: '🎬', color: 'from-emerald-500 to-emerald-600' },
+ encoding: { label: 'Kodlama', icon: '📦', color: 'from-rose-500 to-rose-600' },
+};
+
+interface RenderProgressProps {
+ renderState: RenderProgressState;
+}
+
+export function RenderProgress({ renderState }: RenderProgressProps) {
+ const { progress, stage, stageLabel, currentScene, totalScenes, eta, status, isConnected } = renderState;
+
+ if (status === 'idle') return null;
+
+ return (
+
+ {/* Header */}
+
+
+ {status === 'rendering' && (
+
+ {status === 'rendering' && 'Video Üretiliyor...'}
+ {status === 'completed' && 'Video Hazır!'}
+ {status === 'failed' && 'Üretim Başarısız'}
+
+
+
+ {/* WebSocket bağlantı durumu */}
+
+ {isConnected ? (
+ {renderState.error}
+
+ )}
+
+ );
+}
diff --git a/src/components/project/scene-card.tsx b/src/components/project/scene-card.tsx
new file mode 100644
index 0000000..7945b1d
--- /dev/null
+++ b/src/components/project/scene-card.tsx
@@ -0,0 +1,196 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image, Mic } from 'lucide-react';
+
+interface SceneCardProps {
+ scene: {
+ id: string;
+ order: number;
+ title?: string;
+ narrationText: string;
+ visualPrompt: string;
+ subtitleText?: string;
+ duration: number;
+ transitionType: string;
+ mediaAssets?: Array<{ id: string; type: string; url?: string }>;
+ };
+ isEditable: boolean;
+ onUpdate?: (sceneId: string, data: { narrationText?: string; visualPrompt?: string; subtitleText?: string }) => void;
+ onRegenerate?: (sceneId: string) => void;
+ isRegenerating?: boolean;
+}
+
+export function SceneCard({ scene, isEditable, onUpdate, onRegenerate, isRegenerating }: SceneCardProps) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [editNarration, setEditNarration] = useState(scene.narrationText);
+ const [editVisual, setEditVisual] = useState(scene.visualPrompt);
+
+ const handleSave = () => {
+ onUpdate?.(scene.id, {
+ narrationText: editNarration,
+ visualPrompt: editVisual,
+ subtitleText: editNarration,
+ });
+ setIsEditing(false);
+ };
+
+ const handleCancel = () => {
+ setEditNarration(scene.narrationText);
+ setEditVisual(scene.visualPrompt);
+ setIsEditing(false);
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+ {scene.order}
+
+
+
+ {scene.title || `Sahne ${scene.order}`}
+
+
+
+
+ {isEditing ? (
+
+ {/* Narrasyon düzenleme */}
+
+
+
+
- Son Projeler - +
- Tümünü gör → + Tümü
- {mockProjects.map((project, i) => {
- const config = statusConfig[project.status];
- const StatusIcon = config.icon;
-
- return (
-
-
- {/* Thumbnail placeholder */}
-
);
}
diff --git a/src/components/dashboard/tweet-import-card.tsx b/src/components/dashboard/tweet-import-card.tsx
index c294202..00ac56b 100644
--- a/src/components/dashboard/tweet-import-card.tsx
+++ b/src/components/dashboard/tweet-import-card.tsx
@@ -3,7 +3,6 @@
import { useState, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
- Twitter,
Loader2,
Heart,
Repeat2,
@@ -18,6 +17,13 @@ import {
Link2,
Zap,
} from "lucide-react";
+
+// X (Twitter) logosu — lucide-react'ta mevcut değil
+const XIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
+
+);
import { useTweet } from "@/hooks/use-tweet";
import { cn } from "@/lib/utils";
@@ -95,7 +101,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
{/* Header */}
- {flagEmoji[project.language] || "🌍"}
-
-
- {/* Info */}
-
-
+ )}
- {project.title} -
-
-
-
+ {st.label}
+
+
+ );
+ },
+ )}
+
+
+ ) : (
+ + Henüz proje bulunmuyor +
+ + İlk projenizi oluşturun → + +
+ {(Array.isArray(projects) ? projects : []).map(
+ (project: {
+ id: string;
+ title: string;
+ status: string;
+ createdAt: string;
+ }) => {
+ const st = statusMap[project.status] ?? statusMap.draft;
+ const StIcon = st.icon;
+ return (
+
+
-
- {/* Actions */}
-
+
-
- {/* Progress bar */}
- {project.progress > 0 && project.progress < 100 && (
-
-
-
- )}
-
- {project.status === "COMPLETED" && (
-
- )}
-
-
-
-
-
- );
- })}
-
-
@@ -194,7 +200,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
className="w-full h-full object-cover"
/>
) : (
-
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 1dccd66..1b56c21 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -2,13 +2,16 @@
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
-import { Home, FolderOpen, LayoutGrid, Settings, Sparkles } from "lucide-react";
+import { Home, FolderOpen, LayoutGrid, Settings, Sparkles, AtSign } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
+import { useCreditBalance, useCurrentUser } from "@/hooks/use-api";
+import { NotificationsDropdown } from "./notifications-dropdown";
const navItems = [
{ href: "/dashboard", icon: Home, label: "Ana Sayfa" },
{ href: "/dashboard/projects", icon: FolderOpen, label: "Projeler" },
+ { href: "/dashboard/x-to-video", icon: AtSign, label: "X → Video" },
{ href: "/dashboard/templates", icon: LayoutGrid, label: "Şablonlar" },
{ href: "/dashboard/settings", icon: Settings, label: "Ayarlar" },
];
@@ -58,6 +61,39 @@ export function MobileNav() {
);
}
+function CreditCard() {
+ const { data, isLoading } = useCreditBalance();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const remaining = (data as any)?.data?.remaining ?? (data as any)?.remaining ?? 0;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const total = (data as any)?.data?.total ?? (data as any)?.total ?? 50;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const planName = (data as any)?.data?.plan ?? (data as any)?.plan ?? "Free";
+ const pct = total > 0 ? Math.round((remaining / total) * 100) : 0;
+
+ return (
+
@@ -151,25 +189,11 @@ export function TopBar() {
{/* Sağ taraf */}
@@ -190,3 +214,4 @@ export function AppShell({ children }: { children: React.ReactNode }) {
+
+ );
+}
+
export function DesktopSidebar() {
const pathname = usePathname();
const localePath = pathname.replace(/^\/[a-z]{2}/, "");
@@ -113,25 +149,27 @@ export function DesktopSidebar() {
{/* Credits Card */}
-
+ Kalan Kredi
+ {planName}
+
+
+ {isLoading ? "..." : remaining}
+
+
+
+
+ + {total} kredilik planınızın {remaining}'{remaining === 1 ? "i" : "si"} kaldı +
+
-
+
- Kalan Kredi
- Pro
-
-
- 47
-
-
-
-
- - 50 kredilik planınızın 47'si kaldı -
-
- {/* Bildirim */}
-
+ {/* Bildirimler — interaktif dropdown */}
+
+
+
+ {/* İçerik */}
+
+
+
+ {/* Aksiyonlar — hover'da göster */}
+ + {notification.title} +
+ {notification.message && ( ++ {notification.message} +
+ )} ++ {timeAgo(notification.createdAt)} +
+
+ {!notification.isRead && (
+
+ )}
+
+
+
+ {/* Okunmamış göstergesi */}
+ {!notification.isRead && (
+
+ )}
+
+ {/* Tetikleyici Buton */}
+
+
+ {/* Dropdown Panel */}
+
+ {isOpen && (
+
+ {/* Başlık */}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/project/render-progress.tsx b/src/components/project/render-progress.tsx
new file mode 100644
index 0000000..735ac6f
--- /dev/null
+++ b/src/components/project/render-progress.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Loader2, CheckCircle2, XCircle, Wifi, WifiOff } from 'lucide-react';
+import type { RenderProgressState } from '@/hooks/use-render-progress';
+
+const STAGE_ORDER = ['tts', 'image_generation', 'music_generation', 'compositing', 'encoding'];
+
+const STAGE_DETAILS: Record
+
+
+ {/* Bildirim Listesi */}
+ + Bildirimler +
+
+ {unreadCount > 0 && (
+
+ )}
+
+
+
+ {isLoading ? (
+
+ {notifications.map((n) => (
+ markRead.mutate(id)}
+ onDelete={(id) => deleteNotif.mutate(id)}
+ />
+ ))}
+
+ )}
+
+
+
+
+ ) : notifications.length === 0 ? (
+ Yükleniyor...
+
+
+ ) : (
+
+
+ Henüz bildirim yok
++ Video render ve sistem olayları burada görünecek +
+
+
+
+ {/* Ana Progress Bar */}
+
+ {status === 'rendering' && (
+
+
+ {/* WebSocket bağlantı durumu */}
+ + {status === 'rendering' && 'Video Üretiliyor...'} + {status === 'completed' && 'Video Hazır!'} + {status === 'failed' && 'Üretim Başarısız'} +
+
+ {isConnected ? (
+
+
+
+
+ {/* Aşama adımları */}
+ {status === 'rendering' && (
+
+ {stageLabel}
+
+ %{Math.round(progress)}
+
+
+
+
+
+ {STAGE_ORDER.map((s) => {
+ const detail = STAGE_DETAILS[s];
+ const stageIndex = STAGE_ORDER.indexOf(s);
+ const currentIndex = STAGE_ORDER.indexOf(stage);
+ const isDone = stageIndex < currentIndex;
+ const isCurrent = s === stage;
+
+ return (
+
+ )}
+
+ {/* Alt bilgi */}
+
+ {detail.icon}
+
+ {detail.label}
+
+ {isDone &&
+ );
+ })}
+
+ {currentScene > 0 && totalScenes > 0 && (
+ Sahne {currentScene}/{totalScenes}
+ )}
+ {eta > 0 && status === 'rendering' && (
+ Tahmini kalan: ~{Math.ceil(eta / 60)} dk
+ )}
+
+
+ {/* Hata mesajı */}
+ {status === 'failed' && renderState.error && (
+
+
+ )}
+ {renderState.error}
+
+ {/* Header */}
+
+ {isEditing ? (
+
+ {/* Narrasyon düzenleme */}
+
+
+
+
+
+
+ {/* Aksiyon butonları */}
+ {isEditable && !isEditing && (
+
+ {scene.order}
+
+
+
+ + {scene.title || `Sahne ${scene.order}`} +
+
+
+
+
+
+
+
+ )}
+
+
+