415 lines
15 KiB
TypeScript
415 lines
15 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================================
|
||
// Create Placement Page
|
||
// ============================================================================
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||
import { Loader2, ArrowLeft, Info, Calendar as CalendarIcon } from "lucide-react";
|
||
import { format } from "date-fns";
|
||
import { ru } from "date-fns/locale";
|
||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||
import { placementsApi, creativesApi, channelsApi } from "@/lib/api";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||
import { Calendar } from "@/components/ui/calendar";
|
||
import {
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverTrigger,
|
||
} from "@/components/ui/popover";
|
||
import { cn } from "@/lib/utils";
|
||
import type { Creative, Channel, InviteLinkType } from "@/lib/types/api";
|
||
|
||
// ============================================================================
|
||
// Component
|
||
// ============================================================================
|
||
|
||
export default function NewPlacementPage() {
|
||
const params = useParams();
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const workspaceId = params?.workspaceId as string;
|
||
const { currentProject, setSelectedProjects, projects } = useWorkspace();
|
||
|
||
// Pre-filled from URL params
|
||
const prefilledChannelId = searchParams.get("channel_id");
|
||
const prefilledCreativeId = searchParams.get("creative_id");
|
||
|
||
// Form state
|
||
const [channelId, setChannelId] = useState(prefilledChannelId || "");
|
||
const [creativeId, setCreativeId] = useState(prefilledCreativeId || "");
|
||
const [placementDate, setPlacementDate] = useState<Date>(new Date());
|
||
const [cost, setCost] = useState("");
|
||
const [comment, setComment] = useState("");
|
||
const [adPostUrl, setAdPostUrl] = useState("");
|
||
const [inviteLinkType, setInviteLinkType] = useState<InviteLinkType>("approval");
|
||
|
||
// Data
|
||
const [channels, setChannels] = useState<Channel[]>([]);
|
||
const [creatives, setCreatives] = useState<Creative[]>([]);
|
||
const [loadingData, setLoadingData] = useState(true);
|
||
|
||
// Submit state
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// Auto-select project when creative_id is provided
|
||
useEffect(() => {
|
||
if (!prefilledCreativeId || projects.length === 0) return;
|
||
|
||
const loadCreativeAndSelectProject = async () => {
|
||
try {
|
||
const creative = await creativesApi.get(workspaceId, prefilledCreativeId);
|
||
const project = projects.find(p => p.id === creative.project_id);
|
||
if (project) {
|
||
setSelectedProjects([project]);
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to load creative:", err);
|
||
}
|
||
};
|
||
|
||
loadCreativeAndSelectProject();
|
||
}, [prefilledCreativeId, projects, workspaceId, setSelectedProjects]);
|
||
|
||
// Load channels and creatives
|
||
const loadData = async () => {
|
||
try {
|
||
setLoadingData(true);
|
||
|
||
const [channelsRes, creativesRes] = await Promise.all([
|
||
channelsApi.list({ size: 100 }),
|
||
currentProject
|
||
? creativesApi.list(workspaceId, {
|
||
project_id: currentProject.id,
|
||
include_archived: false,
|
||
size: 100,
|
||
})
|
||
: Promise.resolve({ items: [] }),
|
||
]);
|
||
|
||
setChannels(channelsRes.items);
|
||
setCreatives(creativesRes.items);
|
||
} catch (err) {
|
||
console.error("Failed to load data:", err);
|
||
} finally {
|
||
setLoadingData(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [workspaceId, currentProject?.id]);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!currentProject) {
|
||
setError("Выберите проект в верхнем меню");
|
||
return;
|
||
}
|
||
|
||
if (!channelId || !creativeId) {
|
||
setError("Выберите канал и креатив");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setIsSubmitting(true);
|
||
setError(null);
|
||
|
||
const placement = await placementsApi.create(workspaceId, {
|
||
project_id: currentProject.id,
|
||
placement_channel_id: channelId,
|
||
creative_id: creativeId,
|
||
placement_date: placementDate.toISOString(),
|
||
cost: cost ? parseFloat(cost) : undefined,
|
||
comment: comment || undefined,
|
||
ad_post_url: adPostUrl || undefined,
|
||
invite_link_type: inviteLinkType,
|
||
});
|
||
|
||
// Redirect to placements list with project filter
|
||
router.push(`/dashboard/${workspaceId}/placements?project_id=${currentProject.id}`);
|
||
} catch (err: any) {
|
||
setError(err?.detail || "Не удалось создать размещение");
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<DashboardHeader
|
||
breadcrumbs={[
|
||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||
{ label: "Размещения", href: `/dashboard/${workspaceId}/placements` },
|
||
{ label: "Новое размещение" },
|
||
]}
|
||
/>
|
||
|
||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-2xl">
|
||
<div className="flex items-center gap-4">
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</Button>
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">Новое размещение</h1>
|
||
<p className="text-muted-foreground">
|
||
Создайте размещение рекламы в Telegram канале
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{!currentProject && (
|
||
<Alert>
|
||
<Info className="h-4 w-4" />
|
||
<AlertDescription>
|
||
Выберите проект в верхнем меню для создания размещения
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{loadingData ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit}>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Параметры размещения</CardTitle>
|
||
<CardDescription>
|
||
Укажите канал, креатив и условия размещения
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{/* Channel */}
|
||
<div className="space-y-2">
|
||
<Label>
|
||
Канал для размещения <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Select value={channelId} onValueChange={setChannelId}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Выберите канал" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{channels.map((channel) => (
|
||
<SelectItem key={channel.id} value={channel.id}>
|
||
<div className="flex flex-col">
|
||
<span>{channel.title}</span>
|
||
{channel.username && (
|
||
<span className="text-xs text-muted-foreground">
|
||
@{channel.username}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Creative */}
|
||
<div className="space-y-2">
|
||
<Label>
|
||
Креатив <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Select value={creativeId} onValueChange={setCreativeId}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Выберите креатив" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{creatives.length === 0 ? (
|
||
<div className="p-2 text-sm text-muted-foreground text-center">
|
||
Нет доступных креативов
|
||
</div>
|
||
) : (
|
||
creatives.map((creative) => (
|
||
<SelectItem key={creative.id} value={creative.id}>
|
||
{creative.name}
|
||
</SelectItem>
|
||
))
|
||
)}
|
||
</SelectContent>
|
||
</Select>
|
||
{creatives.length === 0 && currentProject && (
|
||
<p className="text-xs text-muted-foreground">
|
||
Сначала{" "}
|
||
<a
|
||
href={`/dashboard/${workspaceId}/creatives/new`}
|
||
className="text-primary hover:underline"
|
||
>
|
||
создайте креатив
|
||
</a>
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Placement Date */}
|
||
<div className="space-y-2">
|
||
<Label>
|
||
Дата размещения <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className={cn(
|
||
"w-full justify-start text-left font-normal",
|
||
!placementDate && "text-muted-foreground"
|
||
)}
|
||
>
|
||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||
{placementDate
|
||
? format(placementDate, "PPP", { locale: ru })
|
||
: "Выберите дату"}
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="w-auto p-0" align="start">
|
||
<Calendar
|
||
mode="single"
|
||
selected={placementDate}
|
||
onSelect={(date) => date && setPlacementDate(date)}
|
||
locale={ru}
|
||
/>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
|
||
{/* Cost */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="cost">Стоимость (₽)</Label>
|
||
<Input
|
||
id="cost"
|
||
type="number"
|
||
placeholder="0"
|
||
value={cost}
|
||
onChange={(e) => setCost(e.target.value)}
|
||
disabled={isSubmitting}
|
||
/>
|
||
</div>
|
||
|
||
{/* Invite Link Type */}
|
||
<div className="space-y-2">
|
||
<Label>Тип пригласительной ссылки</Label>
|
||
<Select
|
||
value={inviteLinkType}
|
||
onValueChange={(v) => setInviteLinkType(v as InviteLinkType)}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="approval">
|
||
<div className="flex flex-col">
|
||
<span>С одобрением (рекомендуется)</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
Бот одобряет заявки и отслеживает подписчиков
|
||
</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="public">
|
||
<div className="flex flex-col">
|
||
<span>Публичная ссылка</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
Без отслеживания подписчиков
|
||
</span>
|
||
</div>
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Ad Post URL */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="adPostUrl">Ссылка на рекламный пост</Label>
|
||
<Input
|
||
id="adPostUrl"
|
||
placeholder="https://t.me/channel/123"
|
||
value={adPostUrl}
|
||
onChange={(e) => setAdPostUrl(e.target.value)}
|
||
disabled={isSubmitting}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Ссылка на пост после публикации (можно добавить позже)
|
||
</p>
|
||
</div>
|
||
|
||
{/* Comment */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="comment">Комментарий</Label>
|
||
<Textarea
|
||
id="comment"
|
||
placeholder="Дополнительная информация..."
|
||
value={comment}
|
||
onChange={(e) => setComment(e.target.value)}
|
||
disabled={isSubmitting}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 pt-4">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => router.back()}
|
||
disabled={isSubmitting}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
disabled={
|
||
isSubmitting ||
|
||
!channelId ||
|
||
!creativeId ||
|
||
!currentProject
|
||
}
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||
Создание...
|
||
</>
|
||
) : (
|
||
"Создать размещение"
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|