272 lines
11 KiB
TypeScript
272 lines
11 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================================
|
||
// Placements Overview Page - Projects with Placement Statistics
|
||
// ============================================================================
|
||
|
||
import { useEffect, useState, useMemo } from "react";
|
||
import { useParams, useRouter } from "next/navigation";
|
||
import Link from "next/link";
|
||
import {
|
||
Loader2,
|
||
FolderKanban,
|
||
ChevronRight,
|
||
Users,
|
||
Eye,
|
||
DollarSign,
|
||
Target,
|
||
TrendingUp,
|
||
CircleDollarSign,
|
||
} from "lucide-react";
|
||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||
import { demoAwarePlacementsApi } from "@/lib/demo";
|
||
import { placementsApi } from "@/lib/api";
|
||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { cn } from "@/lib/utils";
|
||
import type { Project, ProjectPlacementsSummary, Placement } from "@/lib/types/api";
|
||
|
||
// ============================================================================
|
||
// Helpers
|
||
// ============================================================================
|
||
|
||
const formatNumber = (value: number | null | undefined): string => {
|
||
if (value === null || value === undefined) return "—";
|
||
return new Intl.NumberFormat("ru-RU").format(value);
|
||
};
|
||
|
||
const formatCurrency = (value: number | null | undefined): string => {
|
||
if (value === null || value === undefined) return "—";
|
||
return new Intl.NumberFormat("ru-RU", {
|
||
style: "currency",
|
||
currency: "RUB",
|
||
minimumFractionDigits: 0,
|
||
maximumFractionDigits: 0,
|
||
}).format(value);
|
||
};
|
||
|
||
const formatCompact = (value: number | null | undefined): string => {
|
||
if (value === null || value === undefined) return "—";
|
||
if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
|
||
if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
|
||
return value.toString();
|
||
};
|
||
|
||
// ============================================================================
|
||
// Component
|
||
// ============================================================================
|
||
|
||
export default function PurchasePlansPage() {
|
||
const params = useParams();
|
||
const router = useRouter();
|
||
const workspaceId = params?.workspaceId as string;
|
||
const { projects, isLoadingProjects, currentWorkspace, canViewAnalytics, canViewSubscriptions } = useWorkspace();
|
||
|
||
const [placementsByProject, setPlacementsByProject] = useState<Record<string, Placement[]>>({});
|
||
const [loadingStats, setLoadingStats] = useState(true);
|
||
const { isDemoMode } = useWorkspace();
|
||
|
||
useEffect(() => {
|
||
if (projects.length > 0) {
|
||
loadAllPlacements();
|
||
} else {
|
||
setLoadingStats(false);
|
||
}
|
||
}, [projects, workspaceId]);
|
||
|
||
const loadAllPlacements = async () => {
|
||
setLoadingStats(true);
|
||
const placementsMap: Record<string, Placement[]> = {};
|
||
|
||
for (const project of projects) {
|
||
try {
|
||
const api = isDemoMode ? demoAwarePlacementsApi : placementsApi;
|
||
const placements = await api.getByProject(workspaceId, project.id);
|
||
placementsMap[project.id] = placements;
|
||
} catch (err) {
|
||
console.error(`Failed to load placements for project ${project.id}:`, err);
|
||
placementsMap[project.id] = [];
|
||
}
|
||
}
|
||
|
||
setPlacementsByProject(placementsMap);
|
||
setLoadingStats(false);
|
||
};
|
||
|
||
const calculateProjectSummary = (placements: Placement[]): ProjectPlacementsSummary => {
|
||
const total_cost = placements.reduce((sum, p) => sum + (p.details?.cost?.value || 0), 0);
|
||
const total_subscriptions = placements.reduce((sum, p) => sum + (p.placement_post?.subscriptions_count || 0), 0);
|
||
const total_views = placements.reduce((sum, p) => sum + (p.placement_post?.views_count || 0), 0);
|
||
|
||
const channelsSet = new Set(placements.map(p => p.channel.id));
|
||
|
||
return {
|
||
total_placements: placements.length,
|
||
total_channels: channelsSet.size,
|
||
total_cost,
|
||
total_subscriptions,
|
||
total_views,
|
||
avg_cpf: total_subscriptions > 0 ? total_cost / total_subscriptions : null,
|
||
avg_cpm: total_views > 0 ? (total_cost / total_views) * 1000 : null,
|
||
};
|
||
};
|
||
|
||
const isLoading = isLoadingProjects || loadingStats;
|
||
|
||
return (
|
||
<>
|
||
<DashboardHeader
|
||
breadcrumbs={[
|
||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||
{ label: "Размещения" },
|
||
]}
|
||
/>
|
||
|
||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">Размещения</h1>
|
||
<p className="text-muted-foreground">
|
||
Статистика по всем размещениям ваших проектов
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : projects.length === 0 ? (
|
||
<Card>
|
||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||
<FolderKanban className="h-12 w-12 text-muted-foreground mb-4" />
|
||
<h3 className="text-lg font-semibold mb-2">Нет проектов</h3>
|
||
<p className="text-muted-foreground text-center mb-4">
|
||
Добавьте проект через Telegram бота для отслеживания размещений
|
||
</p>
|
||
<Button asChild>
|
||
<Link href={`/dashboard/${workspaceId}/projects`}>
|
||
Перейти к проектам
|
||
</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{projects.map((project) => {
|
||
const placements = placementsByProject[project.id] || [];
|
||
const summary = calculateProjectSummary(placements);
|
||
const avatarUrl = project.username
|
||
? `https://t.me/i/userpic/320/${project.username}.jpg`
|
||
: null;
|
||
|
||
return (
|
||
<Card key={project.id}
|
||
className="cursor-pointer hover:bg-muted/50 transition-colors"
|
||
onClick={() =>
|
||
router.push(`/dashboard/${workspaceId}/purchase-plans/${project.id}`)
|
||
}
|
||
>
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Avatar className="h-10 w-10">
|
||
<AvatarImage src={avatarUrl || undefined} alt={project.title} />
|
||
<AvatarFallback className="rounded-lg bg-primary/10">
|
||
<FolderKanban className="h-5 w-5 text-primary" />
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<CardTitle className="text-lg">{project.title}</CardTitle>
|
||
{project.username && (
|
||
<CardDescription>@{project.username}</CardDescription>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<ChevronRight className="h-5 w-5 text-muted-foreground" />
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{summary.total_placements > 0 ? (
|
||
<div className="space-y-3">
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10">
|
||
<Target className="h-4 w-4 text-primary" />
|
||
</div>
|
||
<div>
|
||
<div className="text-xs text-muted-foreground">Размещений</div>
|
||
<div className="font-semibold">{formatNumber(summary.total_placements)}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10">
|
||
<Users className="h-4 w-4 text-primary" />
|
||
</div>
|
||
<div>
|
||
<div className="text-xs text-muted-foreground">Каналов</div>
|
||
<div className="font-semibold">{formatNumber(summary.total_channels)}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||
<span className="text-sm text-muted-foreground">Охват:</span>
|
||
<span className="font-medium">
|
||
{canViewAnalytics ? formatCompact(summary.total_views) : "—"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<Users className="h-4 w-4 text-muted-foreground" />
|
||
<span className="text-sm text-muted-foreground">Подписок:</span>
|
||
<span className="font-medium">
|
||
{canViewSubscriptions ? formatCompact(summary.total_subscriptions) : "—"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="pt-2 border-t space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-1.5">
|
||
<CircleDollarSign className="h-4 w-4 text-muted-foreground" />
|
||
<span className="text-sm text-muted-foreground">Бюджет</span>
|
||
</div>
|
||
<span className="font-semibold">{formatCurrency(summary.total_cost)}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-1.5">
|
||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||
<span className="text-sm text-muted-foreground">CPF</span>
|
||
</div>
|
||
<span className="font-medium">
|
||
{canViewSubscriptions ? formatCurrency(summary.avg_cpf) : "—"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-muted-foreground">
|
||
Нет размещений
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|