"use client"; // ============================================================================ // Placements Detail Page - All placements grouped by channel // ============================================================================ import { useEffect, useMemo, useState } from "react"; import { useParams, useRouter, useSearchParams } from "next/navigation"; import Link from "next/link"; import { Loader2, Plus, ArrowLeft, ChevronDown, ChevronRight, Search, Filter, Eye, Users, ExternalLink, CircleDollarSign, TrendingUp, RefreshCw, Loader2 as LoaderIcon, BarChart3, ArrowUpDown, X, } 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 { AddChannelDialog } from "@/components/dialog-add-channel"; import { CreatePlacementsDialog } from "@/components/dialog-create-placements"; import { FiltersModal, PlacementFilters } from "@/components/filters-modal"; import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; import type { Project, Placement, PlacementWithStats, PlacementsGroupedByChannel, PlacementStatus, } from "@/lib/types/api"; type PlacementInlineDraft = Partial<{ status: PlacementStatus; comment: string | null; creative_id: string | null; placement_at: string | null; payment_at: string | null; cost: { type: "fixed"; value: number } | null; cost_before_bargain: number | null; placement_type: string | null; format: string | null; }>; type EditableField = "status" | "placement_at" | "cost" | "format" | "comment"; interface EditingCell { placementId: string; field: EditableField; } // ============================================================================ // 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(); }; const formatDate = (dateStr: string | null): string => { if (!dateStr) return "—"; const date = new Date(dateStr); return date.toLocaleDateString("ru-RU", { day: "2-digit", month: "short", year: "numeric", }); }; const toDateInputValue = (iso: string | null | undefined): string => { if (!iso) return ""; const date = new Date(iso); if (Number.isNaN(date.getTime())) return ""; const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, "0"); const day = String(date.getDate()).padStart(2, "0"); return `${year}-${month}-${day}`; }; const toIsoFromDateInput = (value: string): string | null => { if (!value) return null; const date = new Date(`${value}T00:00:00.000Z`); if (Number.isNaN(date.getTime())) return null; return date.toISOString(); }; const PLACEMENT_STATUSES: PlacementStatus[] = [ "Без статуса", "Написать", "Ждём ответа", "Согласование условий", "Оплатить", "Оплачено", "Отмена", "Не подходит цена", "Неактуально", "Не отвечает", ]; const getStatusColor = (status: PlacementStatus): string => { switch (status) { case "Оплачено": return "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800"; case "Согласование условий": case "Ждём ответа": return "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"; case "Отмена": case "Не подходит цена": case "Неактуально": case "Не отвечает": return "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"; case "Оплатить": return "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800"; default: return "bg-muted text-muted-foreground border-border"; } }; // ============================================================================ // Components // ============================================================================ interface ChannelGroupProps { channel: Placement["channel"]; placements: PlacementWithStats[]; channelNumber: number; canEdit: boolean; getPlacementView: (placement: PlacementWithStats) => PlacementWithStats; handleDraftChange: (placementId: string, patch: PlacementInlineDraft) => void; editingCell: EditingCell | null; setEditingCell: (cell: EditingCell | null) => void; expanded: boolean; } function ChannelGroup({ channel, placements, channelNumber, canEdit, getPlacementView, handleDraftChange, editingCell, setEditingCell, expanded, }: ChannelGroupProps) { const [isOpen, setIsOpen] = useState(true); useEffect(() => { setIsOpen(expanded); }, [expanded]); const totalCost = placements.reduce((sum, p) => sum + (p.details?.cost?.value || 0), 0); const totalSubscriptions = placements.reduce((sum, p) => sum + (p.placement_post?.subscriptions_count || 0), 0); const totalViews = placements.reduce((sum, p) => sum + (p.placement_post?.views_count || 0), 0); const avgCpf = totalSubscriptions > 0 ? totalCost / totalSubscriptions : null; const avgCpm = totalViews > 0 ? (totalCost / totalViews) * 1000 : null; if (placements.length === 0) return null; return (
{channelNumber} {channel.title[0]}
{channel.title} {channel.username && ( @{channel.username} )}
{channel.username && ( )} {placements.length}
{formatCompact(channel.subscribers_count)} {formatCompact(totalViews)}
{placements.map((placement, idx) => { const viewPlacement = getPlacementView(placement); const effectiveCost = viewPlacement.details?.cost?.value || 0; const isEditingStatus = canEdit && editingCell?.placementId === placement.id && editingCell.field === "status"; const isEditingDate = canEdit && editingCell?.placementId === placement.id && editingCell.field === "placement_at"; const isEditingCost = canEdit && editingCell?.placementId === placement.id && editingCell.field === "cost"; const isEditingFormat = canEdit && editingCell?.placementId === placement.id && editingCell.field === "format"; const isEditingComment = canEdit && editingCell?.placementId === placement.id && editingCell.field === "comment"; const cpf = viewPlacement.placement_post?.subscriptions_count ? effectiveCost / viewPlacement.placement_post.subscriptions_count : null; const cpm = viewPlacement.placement_post?.views_count ? (effectiveCost / viewPlacement.placement_post.views_count) * 1000 : null; return ( ); })}
№ Статус Дата Стоимость Охват Подписки CPF CPM Формат Комментарий
{channelNumber}.{idx + 1} {isEditingStatus ? ( ) : ( )} {isEditingDate ? ( handleDraftChange(placement.id, { placement_at: toIsoFromDateInput(e.target.value), }) } onBlur={() => setEditingCell(null)} /> ) : ( )} {isEditingCost ? ( { const raw = e.target.value; if (!raw) { handleDraftChange(placement.id, { cost: null }); return; } const value = Number(raw); if (Number.isNaN(value)) return; handleDraftChange(placement.id, { cost: { type: "fixed", value } }); }} onBlur={() => setEditingCell(null)} /> ) : ( )} {formatCompact(viewPlacement.placement_post?.views_count || null)} {formatNumber(viewPlacement.placement_post?.subscriptions_count || null)} {formatCurrency(cpf)} {formatCurrency(cpm)} {isEditingFormat ? ( handleDraftChange(placement.id, { format: e.target.value ? e.target.value : null, }) } onBlur={() => setEditingCell(null)} /> ) : ( )} {isEditingComment ? ( handleDraftChange(placement.id, { comment: e.target.value ? e.target.value : null, }) } onBlur={() => setEditingCell(null)} /> ) : ( )}
); } // ============================================================================ // Main Component // ============================================================================ export default function PurchasePlanDetailPage() { const params = useParams(); const router = useRouter(); const searchParams = useSearchParams(); const workspaceId = params?.workspaceId as string; const projectId = params?.projectId as string; const { projects, hasPermission } = useWorkspace(); const [placements, setPlacements] = useState([]); const [loading, setLoading] = useState(true); const [project, setProject] = useState(null); const [draftsByPlacementId, setDraftsByPlacementId] = useState>({}); const [savingEdits, setSavingEdits] = useState(false); const [saveError, setSaveError] = useState(null); const [editingCell, setEditingCell] = useState(null); // Create placements dialog const prefilledCreativeId = searchParams.get("creative_id"); const [showCreateDialog, setShowCreateDialog] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [expandedAll, setExpandedAll] = useState(true); const [filtersOpen, setFiltersOpen] = useState(false); const [filters, setFilters] = useState({ channelFilters: { name: { value: "", condition: "contains" }, username: { value: "", condition: "contains" }, subscribersMin: null, subscribersMax: null, }, placementFilters: { statuses: [], costMin: null, costMax: null, dateFrom: null, dateTo: null, hasPlacement: null, }, sort: null, }); const { isDemoMode } = useWorkspace(); useEffect(() => { const proj = projects.find((p) => p.id === projectId); if (proj) { setProject(proj); } }, [projects, projectId]); // Auto-open create dialog if creative_id is provided useEffect(() => { if (prefilledCreativeId && project) { setShowCreateDialog(true); } }, [prefilledCreativeId, project]); useEffect(() => { loadPlacements(); }, [workspaceId, projectId]); const loadPlacements = async () => { try { setLoading(true); const api = isDemoMode ? demoAwarePlacementsApi : placementsApi; const data = await api.getByProject(workspaceId, projectId); setPlacements(data); setDraftsByPlacementId({}); setSaveError(null); } catch (err) { console.error("Failed to load placements:", err); } finally { setLoading(false); } }; const canEditPlacements = hasPermission("placements_write") && !isDemoMode; const hasUnsavedChanges = Object.keys(draftsByPlacementId).length > 0; const handleDraftChange = (placementId: string, patch: PlacementInlineDraft) => { if (!canEditPlacements) return; setDraftsByPlacementId((prev) => ({ ...prev, [placementId]: { ...(prev[placementId] || {}), ...patch, }, })); }; const getPlacementView = (placement: PlacementWithStats): PlacementWithStats => { const draft = draftsByPlacementId[placement.id]; if (!draft) return placement; const nextStatus = draft.status ?? placement.status; const nextComment = draft.comment !== undefined ? draft.comment : placement.comment; const nextDetails = { ...(placement.details || { placement_at: null, payment_at: null, cost: null, cost_before_bargain: null, placement_type: null, format: null, comment: null, creative_id: null, }), placement_at: draft.placement_at !== undefined ? draft.placement_at : placement.details?.placement_at ?? null, payment_at: draft.payment_at !== undefined ? draft.payment_at : placement.details?.payment_at ?? null, cost: draft.cost !== undefined ? draft.cost : placement.details?.cost ?? null, cost_before_bargain: draft.cost_before_bargain !== undefined ? draft.cost_before_bargain : placement.details?.cost_before_bargain ?? null, placement_type: draft.placement_type !== undefined ? draft.placement_type : placement.details?.placement_type ?? null, format: draft.format !== undefined ? draft.format : placement.details?.format ?? null, creative_id: draft.creative_id !== undefined ? draft.creative_id : placement.details?.creative_id ?? null, }; return { ...placement, status: nextStatus, comment: nextComment, details: nextDetails, }; }; const handleCancelEdits = () => { setDraftsByPlacementId({}); setSaveError(null); setEditingCell(null); }; const handleSaveEdits = async () => { if (!canEditPlacements) return; const entries = Object.entries(draftsByPlacementId); if (entries.length === 0) return; try { setSavingEdits(true); setSaveError(null); for (const [placementId, draft] of entries) { await placementsApi.updateInProject(workspaceId, projectId, placementId, draft); } await loadPlacements(); } catch (err: unknown) { console.error("Failed to save placement edits:", err); const message = typeof err === "object" && err && "detail" in err ? String((err as any).detail) : "Не удалось сохранить изменения"; setSaveError(message); setSavingEdits(false); } }; const groupedPlacements = useMemo(() => { const groups: Record = {}; placements.forEach((placement) => { const channelId = placement.channel.id; if (!groups[channelId]) { groups[channelId] = { channel: placement.channel, placements: [], }; } const cpf = placement.placement_post?.subscriptions_count ? (placement.details?.cost?.value || 0) / placement.placement_post.subscriptions_count : null; const cpm = placement.placement_post?.views_count ? ((placement.details?.cost?.value || 0) / placement.placement_post.views_count) * 1000 : null; groups[channelId].placements.push({ ...placement, cpf, cpm, }); }); return Object.entries(groups).map(([_, group]) => ({ channel: group.channel, placements: group.placements, })); }, [placements]); const summary = useMemo(() => { const totalCost = placements.reduce((sum, p) => sum + (p.details?.cost?.value || 0), 0); const totalSubscriptions = placements.reduce((sum, p) => sum + (p.placement_post?.subscriptions_count || 0), 0); const totalViews = placements.reduce((sum, p) => sum + (p.placement_post?.views_count || 0), 0); return { totalPlacements: placements.length, totalChannels: groupedPlacements.length, totalCost, totalSubscriptions, totalViews, avgCpf: totalSubscriptions > 0 ? totalCost / totalSubscriptions : null, avgCpm: totalViews > 0 ? (totalCost / totalViews) * 1000 : null, }; }, [placements, groupedPlacements]); const filteredGroups = useMemo(() => { let filtered = groupedPlacements.filter((group) => { // Channel filters const nameFilter = filters.channelFilters.name; const channelNameMatch = !nameFilter.value || (nameFilter.condition === "contains" ? group.channel.title.toLowerCase().includes(nameFilter.value.toLowerCase()) : nameFilter.condition === "not_contains" ? !group.channel.title.toLowerCase().includes(nameFilter.value.toLowerCase()) : group.channel.title.toLowerCase() === nameFilter.value.toLowerCase()); const usernameFilter = filters.channelFilters.username; const channelUsernameMatch = !usernameFilter.value || (usernameFilter.condition === "contains" ? group.channel.username?.toLowerCase().includes(usernameFilter.value.toLowerCase()) : usernameFilter.condition === "not_contains" ? !group.channel.username?.toLowerCase().includes(usernameFilter.value.toLowerCase()) : group.channel.username?.toLowerCase() === usernameFilter.value.toLowerCase()); const subscribersMinMatch = filters.channelFilters.subscribersMin === null || (group.channel.subscribers_count || 0) >= filters.channelFilters.subscribersMin; const subscribersMaxMatch = filters.channelFilters.subscribersMax === null || (group.channel.subscribers_count || 0) <= filters.channelFilters.subscribersMax; // Placement filters const placementsWithStatus = filters.placementFilters.statuses.length === 0 || group.placements.some((p) => filters.placementFilters.statuses.includes(p.status)); const costMinMatch = filters.placementFilters.costMin === null || group.placements.some((p) => (p.details?.cost?.value || 0) >= filters.placementFilters.costMin!); const costMaxMatch = filters.placementFilters.costMax === null || group.placements.some((p) => (p.details?.cost?.value || 0) <= filters.placementFilters.costMax!); let dateMatch = true; if (filters.placementFilters.dateFrom || filters.placementFilters.dateTo) { dateMatch = group.placements.some((p) => { if (!p.details?.placement_at) return false; const placementDate = new Date(p.details.placement_at); const fromMatch = !filters.placementFilters.dateFrom || placementDate >= new Date(filters.placementFilters.dateFrom); const toMatch = !filters.placementFilters.dateTo || placementDate <= new Date(filters.placementFilters.dateTo); return fromMatch && toMatch; }); } return channelNameMatch && channelUsernameMatch && subscribersMinMatch && subscribersMaxMatch && placementsWithStatus && costMinMatch && costMaxMatch && dateMatch; }); // Apply sorting if (filters.sort) { filtered = [...filtered].sort((a, b) => { let aValue: number | string = 0; let bValue: number | string = 0; switch (filters.sort!.field) { case "title": aValue = a.channel.title.toLowerCase(); bValue = b.channel.title.toLowerCase(); break; case "subscribers": aValue = a.channel.subscribers_count || 0; bValue = b.channel.subscribers_count || 0; break; case "cost": aValue = Math.max(...a.placements.map((p) => p.details?.cost?.value || 0)); bValue = Math.max(...b.placements.map((p) => p.details?.cost?.value || 0)); break; case "date": aValue = Math.max( ...a.placements.map((p) => p.details?.placement_at ? new Date(p.details.placement_at).getTime() : 0) ); bValue = Math.max( ...b.placements.map((p) => p.details?.placement_at ? new Date(p.details.placement_at).getTime() : 0) ); break; case "cpm": aValue = a.placements[0]?.cpm || 0; bValue = b.placements[0]?.cpm || 0; break; case "cpf": aValue = a.placements[0]?.cpf || 0; bValue = b.placements[0]?.cpf || 0; break; } if (typeof aValue === "string") { return filters.sort!.direction === "asc" ? aValue.localeCompare(bValue as string) : (bValue as string).localeCompare(aValue); } return filters.sort!.direction === "asc" ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number); }); } return filtered; }, [groupedPlacements, filters]); const canWrite = hasPermission("placements_write"); const hasActiveFilters = filters.channelFilters.name || filters.channelFilters.username || filters.channelFilters.subscribersMin !== null || filters.channelFilters.subscribersMax !== null || filters.placementFilters.statuses.length > 0 || filters.placementFilters.costMin !== null || filters.placementFilters.costMax !== null || filters.placementFilters.dateFrom || filters.placementFilters.dateTo || filters.sort; if (loading) { return ( <>
); } return ( <>
{/* Header */}

План закупов проекта «{project?.title || "Проект"}»

Список каналов, в которых планируем размещения для проекта

{/* Filters */}
setSearchQuery(e.target.value)} className="pl-9" />
{/* Placements List */} {filteredGroups.length === 0 ? (

Нет размещений

{placements.length === 0 ? "Добавьте первое размещение для этого проекта" : "Попробуйте изменить параметры поиска"}

) : (
{filteredGroups.map((group, idx) => ( ))}
)}
{hasUnsavedChanges && (
{saveError && (
{saveError}
)}
)} ); }