feat(web): add admin referrals page, fix payment flow, update navigation
- Add admin referrals management page with search and pagination - Fix EFT payment endpoint URL and receipt upload path - Add admin nav items to mobile-nav with role-based visibility - Add referrals link and "Yonetim" section header to sidebar - Update next-env.d.ts for Next.js 16 dev types path Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2
apps/web/next-env.d.ts
vendored
2
apps/web/next-env.d.ts
vendored
@@ -1,6 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
309
apps/web/src/app/(dashboard)/dashboard/admin/referrals/page.tsx
Normal file
309
apps/web/src/app/(dashboard)/dashboard/admin/referrals/page.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
"use client";
|
||||
|
||||
import { api } from "@/lib/api-client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@sase/ui";
|
||||
import { Button } from "@sase/ui";
|
||||
import { Input } from "@sase/ui";
|
||||
import { Badge } from "@sase/ui";
|
||||
import { Skeleton } from "@sase/ui";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Gift,
|
||||
Users,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface ReferralItem {
|
||||
id: string;
|
||||
referredId: string;
|
||||
referredName: string;
|
||||
referredEmail: string;
|
||||
rewardApplied: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface ReferrerSummary {
|
||||
referrerId: string;
|
||||
referrerName: string;
|
||||
referrerEmail: string;
|
||||
referralCode: string | null;
|
||||
totalReferrals: number;
|
||||
referrals: ReferralItem[];
|
||||
}
|
||||
|
||||
interface ReferralsResponse {
|
||||
items: ReferrerSummary[];
|
||||
total: number;
|
||||
totalReferrals: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export default function AdminReferralsPage() {
|
||||
const { user, isLoading: authLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch, setDebouncedSearch] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [expandedReferrer, setExpandedReferrer] = useState<string | null>(null);
|
||||
const limit = 20;
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && user?.role !== "admin") {
|
||||
router.push("/dashboard/search");
|
||||
}
|
||||
}, [authLoading, user, router]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearch(search);
|
||||
setPage(1);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [search]);
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["admin", "referrals", debouncedSearch, page, limit],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams();
|
||||
if (debouncedSearch) params.set("search", debouncedSearch);
|
||||
params.set("page", String(page));
|
||||
params.set("limit", String(limit));
|
||||
return api.get<ReferralsResponse>(`/admin/referrals?${params.toString()}`);
|
||||
},
|
||||
enabled: user?.role === "admin",
|
||||
});
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-96 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (user?.role !== "admin") return null;
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString("tr-TR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const getTierBadge = (count: number) => {
|
||||
if (count >= 5) return <Badge variant="default">Tier 2 (+30 gun)</Badge>;
|
||||
if (count >= 3) return <Badge variant="secondary">Tier 1 (+7 gun)</Badge>;
|
||||
return <Badge variant="outline">{count}/3</Badge>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">Referans Yonetimi</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline">
|
||||
<Users className="mr-1 h-3 w-3" />
|
||||
{data?.total ?? 0} referans veren
|
||||
</Badge>
|
||||
<Badge variant="secondary">
|
||||
<Gift className="mr-1 h-3 w-3" />
|
||||
{data?.totalReferrals ?? 0} toplam referans
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{data && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{data.totalReferrals}</div>
|
||||
<p className="text-sm text-muted-foreground">Toplam Referans</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">
|
||||
{data.items.filter((r) => r.totalReferrals >= 3).length}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Tier 1+ (3+ referans)</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">
|
||||
{data.items.filter((r) => r.totalReferrals >= 5).length}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Tier 2 (5+ referans)</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Referans veren isim veya e-posta ile ara..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearch("")}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Referrers List */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={`ref-skeleton-${i}`} className="h-20 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : !data || data.items.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center gap-3 py-16 text-center">
|
||||
<Gift className="h-12 w-12 text-muted-foreground" />
|
||||
<p className="text-lg font-medium">
|
||||
{search ? "Sonuc bulunamadi" : "Henuz referans bulunmuyor"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Kullanicilar referans kodlarini paylastikca burada gorunecek
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{data.items.map((referrer) => {
|
||||
const isExpanded = expandedReferrer === referrer.referrerId;
|
||||
return (
|
||||
<Card key={referrer.referrerId}>
|
||||
<CardContent className="p-0">
|
||||
{/* Referrer Row */}
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between p-6 text-left transition-colors hover:bg-muted/50"
|
||||
onClick={() =>
|
||||
setExpandedReferrer(isExpanded ? null : referrer.referrerId)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary font-bold">
|
||||
{referrer.totalReferrals}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{referrer.referrerName}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{referrer.referrerEmail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{referrer.referralCode && (
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{referrer.referralCode}
|
||||
</Badge>
|
||||
)}
|
||||
{getTierBadge(referrer.totalReferrals)}
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Expanded Referrals */}
|
||||
{isExpanded && (
|
||||
<div className="border-t bg-muted/20 px-6 py-4">
|
||||
<p className="mb-3 text-sm font-medium text-muted-foreground">
|
||||
Davet edilen kullanicilar ({referrer.referrals.length})
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{referrer.referrals.map((ref) => (
|
||||
<div
|
||||
key={ref.id}
|
||||
className="flex items-center justify-between rounded-lg border bg-background p-3"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{ref.referredName}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{ref.referredEmail}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{ref.rewardApplied && (
|
||||
<Badge variant="default" className="text-xs">
|
||||
Odul verildi
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDate(ref.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{data && data.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sayfa {data.page} / {data.totalPages} (Toplam {data.total})
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
Onceki
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= data.totalPages}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
Sonraki
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -105,7 +105,7 @@ export default function PaymentPage() {
|
||||
|
||||
const eftMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
api.post<{ paymentId: string }>("/payments/eft/create", {
|
||||
api.post<{ paymentId: string }>("/payments/eft", {
|
||||
planKey,
|
||||
billingPeriod: period,
|
||||
brandIds,
|
||||
@@ -122,11 +122,8 @@ export default function PaymentPage() {
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append("receipt", file);
|
||||
if (eftPaymentId) {
|
||||
formData.append("paymentId", eftPaymentId);
|
||||
}
|
||||
return api.upload<{ success: boolean }>("/payments/eft/receipt", formData);
|
||||
formData.append("file", file);
|
||||
return api.upload<{ success: boolean }>(`/payments/eft/${eftPaymentId}/receipt`, formData);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success(t("payment.receiptUploaded"));
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@sase/ui";
|
||||
import { Search, History, CreditCard, Receipt, Settings, X } from "lucide-react";
|
||||
import { Search, History, CreditCard, Receipt, Settings, ShieldCheck, Users, Activity, Gift, X } from "lucide-react";
|
||||
import { Button } from "@sase/ui";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/dashboard/search", label: "Arama", icon: Search },
|
||||
@@ -14,6 +15,14 @@ const navItems = [
|
||||
{ href: "/dashboard/settings", label: "Ayarlar", icon: Settings },
|
||||
];
|
||||
|
||||
const adminItems = [
|
||||
{ href: "/dashboard/admin", label: "Admin Panel", icon: ShieldCheck, exact: true },
|
||||
{ href: "/dashboard/admin/users", label: "Kullanicilar", icon: Users },
|
||||
{ href: "/dashboard/admin/payments", label: "Odeme Onaylari", icon: Receipt },
|
||||
{ href: "/dashboard/admin/referrals", label: "Referanslar", icon: Gift },
|
||||
{ href: "/dashboard/admin/analytics", label: "Sorgu Analizi", icon: Activity },
|
||||
];
|
||||
|
||||
interface MobileNavProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
@@ -21,6 +30,7 @@ interface MobileNavProps {
|
||||
|
||||
export function MobileNav({ open, onClose }: MobileNavProps) {
|
||||
const pathname = usePathname();
|
||||
const { isAdmin } = useAuth();
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
@@ -55,6 +65,37 @@ export function MobileNav({ open, onClose }: MobileNavProps) {
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="my-4 border-t" />
|
||||
<p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Yonetim
|
||||
</p>
|
||||
{adminItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = "exact" in item && item.exact
|
||||
? pathname === item.href
|
||||
: pathname.startsWith(item.href);
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@sase/ui";
|
||||
import { Search, History, CreditCard, Receipt, Settings, ShieldCheck, Users, Activity } from "lucide-react";
|
||||
import { Search, History, CreditCard, Receipt, Settings, ShieldCheck, Users, Activity, Gift } from "lucide-react";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
|
||||
const navItems = [
|
||||
@@ -18,6 +18,7 @@ const adminItems = [
|
||||
{ href: "/dashboard/admin", label: "Admin Panel", icon: ShieldCheck, exact: true },
|
||||
{ href: "/dashboard/admin/users", label: "Kullanicilar", icon: Users },
|
||||
{ href: "/dashboard/admin/payments", label: "Odeme Onaylari", icon: Receipt },
|
||||
{ href: "/dashboard/admin/referrals", label: "Referanslar", icon: Gift },
|
||||
{ href: "/dashboard/admin/analytics", label: "Sorgu Analizi", icon: Activity },
|
||||
];
|
||||
|
||||
@@ -57,6 +58,9 @@ export function Sidebar() {
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="my-4 border-t" />
|
||||
<p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Yonetim
|
||||
</p>
|
||||
{adminItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = "exact" in item && item.exact
|
||||
|
||||
Reference in New Issue
Block a user