root/tgex-frontend
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: purchase-plans page global update

Browse Source
This commit is contained in:
ivannoskov
2026-03-04 08:29:11 +03:00
parent ef903f1b23
commit 6a7b4dedcd
8 changed files with 690 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
app/dashboard/[workspaceId]/purchase-plans/[projectId]/page.tsx
View File

@@ -32,6 +32,8 @@ import {
Pencil,
Send,
Check,
ImageIcon,
MousePointerClick,
} from "lucide-react";
import { DashboardHeader } from "@/components/layout/dashboard-header";
import { useWorkspace } from "@/components/providers/workspace-provider";
@@ -82,6 +84,8 @@ import { ColumnSelectorDialog } from "@/components/column-selector-dialog";
import { CreativeSelectDialog } from "@/components/creative-select-dialog";
import { PlacementStatusSelector } from "@/components/placement-status-selector";
import { PlacementPostStatusSelector } from "@/components/placement-post-status-selector";
import { CostFormatSelector } from "@/components/cost-format-selector";
import { FormatSelector } from "@/components/format-selector";
import { PlacementWizard } from "@/components/placement-wizard";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
@@ -96,6 +100,7 @@ import type {
PlacementType,
CostType,
UpdatePlacementInProjectRequest,
Creative,
} from "@/lib/types/api";
import {
ALL_COLUMNS,
@@ -119,10 +124,11 @@ type PlacementInlineDraft = {
cost_before_bargain?: { type: CostType; value: number } | null;
placement_type?: PlacementType | null;
format?: string | null;
originalFormat?: string | null;
cpm?: number | null;
};
type EditableField = "status" | "post_status" | "placement_at" | "payment_at" | "cost" | "cost_before_bargain" | "format" | "comment" | "cost_format" | "cpm" | "creative_id" | "creative_name";
type EditableField = "status" | "post_status" | "placement_at" | "payment_at" | "cost" | "cost_before" | "cost_before_bargain" | "format" | "comment" | "cost_format" | "cpm" | "creative_id" | "creative_name" | "placement_type";
const FIXED_COST_TYPE: CostType = "fixed";
@@ -225,6 +231,7 @@ interface ChannelGroupProps {
onClearCreative?: (placementId: string) => void;
onOpenCreativeSend?: (placement: PlacementWithStats) => void;
onAddPlacement?: (channel: Placement["channel"]) => void;
creatives: Creative[];
}
// ============================================================================
@@ -249,6 +256,7 @@ interface CellRendererProps {
onOpenCreativeSelect?: (placement: PlacementWithStats) => void;
onClearCreative?: (placementId: string) => void;
onOpenCreativeSend?: (placement: PlacementWithStats) => void;
creatives: Creative[];
}
function CellRenderer({
@@ -269,6 +277,7 @@ function CellRenderer({
onOpenCreativeSelect,
onClearCreative,
onOpenCreativeSend,
creatives,
}: CellRendererProps) {
const isEditing = editingCell?.placementId === placement.id;
@@ -378,17 +387,37 @@ function CellRenderer({
case "creative":
const viewCreativeId = placement.creative_id;
const hasCreative = !!viewCreativeId;
const creative = hasCreative ? creatives.find((c) => c.id === viewCreativeId) : null;
const thumbnailUrl = creative?.media_items?.[0]?.s3_url;
const imagesCount = creative?.media_items?.length || 0;
const buttonsCount = creative?.buttons?.length || 0;
return (
<div key={column.id} className="py-2 px-3">
{hasCreative ? (
{hasCreative && creative ? (
<div className="flex items-center gap-1">
<div className="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded ">
<span className="text-xs font-medium truncate max-w-[100px]">{placement.creative_name || "Без названия"}</span>
<div className="flex items-center px-2 py-1 bg-muted/50 rounded flex-1 min-w-0 gap-1">
{imagesCount > 0 && (
<div className="flex items-center gap-0.5 text-xs text-muted-foreground shrink-0" title={`${imagesCount} изображений`}>
<ImageIcon className="size-3"/>
<span>{imagesCount}</span>
</div>
)}
{buttonsCount > 0 && (
<div className="flex items-center gap-0.5 text-xs text-muted-foreground shrink-0" title={`${buttonsCount} кнопок`}>
<MousePointerClick className="size-3"/>
<span>{buttonsCount}</span>
</div>
)}
<span className="text-xs font-medium truncate">
{creative.text?.replace(/<[^>]+>/g, '').substring(0, 50) || "Без текста"}
{creative.text && creative.text.replace(/<[^>]+>/g, '').length > 50 && '...'}
</span>
</div>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-muted-foreground hover:text-primary rounded"
className="h-6 w-6 p-0 text-muted-foreground hover:text-primary rounded shrink-0"
title="Отправить готовый креатив"
onClick={() => {
if (viewCreativeId) {
@@ -401,7 +430,7 @@ function CellRenderer({
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive rounded"
className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive rounded shrink-0"
title="Очистить креатив"
onClick={() => {
if (viewCreativeId) {
@@ -415,7 +444,7 @@ function CellRenderer({
) : (
<button
type="button"
className="flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-2 py-1"
className="flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-2 py-1 w-full min-h-[1.75rem]"
onClick={() => {
if (canEdit) {
onOpenCreativeSelect?.(placement);
@@ -429,37 +458,6 @@ function CellRenderer({
</div>
);
case "invite_link":
return (
<div key={column.id} className="py-2 px-3">
{placement.invite_link ? (
<code className="text-xs bg-muted/50 px-2 py-1 rounded truncate max-w-[200px]">
{placement.invite_link.slice(8, 20)}…
</code>
) : (
<span className="text-muted-foreground">—</span>
)}
</div>
);
case "post_link":
return (
<div key={column.id} className="py-2 px-3">
{placement.placement_post?.post?.url ? (
<a
href={placement.placement_post.post.url}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-primary hover:underline"
>
Пост
</a>
) : (
<span className="text-muted-foreground">—</span>
)}
</div>
);
case "cost":
const costType = placement.details?.cost?.type || "fixed";
const costValue = placement.details?.cost?.value || 0;
@@ -499,7 +497,7 @@ function CellRenderer({
<button
type="button"
disabled={!canEditCost}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEditCost && setEditingCell({ placementId: placement.id, field: "cost" })
}
@@ -546,7 +544,7 @@ function CellRenderer({
<button
type="button"
disabled={!canEditCpm}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEditCpm && setEditingCell({ placementId: placement.id, field: "cpm" })
}
@@ -560,9 +558,45 @@ function CellRenderer({
case "cost_before":
const costBefore = placement.details?.cost_before_bargain?.value;
const costBeforeType = placement.details?.cost_before_bargain?.type || "fixed" as CostType;
const canEditCostBefore = canEdit;
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
{costBefore !== null && costBefore !== undefined ? formatCurrency(costBefore) : "—"}
<div key={column.id} className="py-2 px-3">
{isEditing && editingCell?.field === "cost_before" ? (
<Input
type="number"
min="0"
step="0.01"
autoFocus
className="h-7 min-w-[80px] bg-background px-2 text-xs"
defaultValue={costBefore || 0}
onChange={(e) => {
const raw = e.target.value;
if (!raw) {
handleDraftChange(placement.id, { cost_before_bargain: null });
return;
}
const value = Number(raw);
if (Number.isNaN(value)) return;
handleDraftChange(placement.id, {
cost_before_bargain: { type: costBeforeType, value },
});
}}
onBlur={() => setEditingCell(null)}
/>
) : (
<button
type="button"
disabled={!canEditCostBefore}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEditCostBefore && setEditingCell({ placementId: placement.id, field: "cost_before" })
}
>
<span>{costBefore !== null && costBefore !== undefined ? formatCurrency(costBefore) : "—"}</span>
{canEditCostBefore && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" />}
</button>
)}
</div>
);
@@ -570,36 +604,18 @@ function CellRenderer({
const costFormat = placement.details?.cost?.type || "fixed" as CostType;
return (
<div key={column.id} className="py-2 px-3">
{isEditing && editingCell?.field === "cost_format" ? (
<Select
value={costFormat}
onValueChange={(value: CostType) => {
handleDraftChange(placement.id, {
cost: { type: value, value: placement.details?.cost?.value || 0 },
});
}}
>
<SelectTrigger className="h-7 w-[80px] bg-background px-2 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="fixed">Фикс</SelectItem>
<SelectItem value="cpm">CPM</SelectItem>
</SelectContent>
</Select>
) : (
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "cost_format" })
}
>
<span>{costFormat === "cpm" ? "CPM" : "Фикс"}</span>
<Pencil className="h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" />
</button>
)}
<CostFormatSelector
value={costFormat}
isEditing={isEditing && editingCell?.field === "cost_format"}
canEdit={canEdit}
onEdit={() => setEditingCell({ placementId: placement.id, field: "cost_format" })}
onChange={(value: CostType) => {
handleDraftChange(placement.id, {
cost: { type: value, value: placement.details?.cost?.value || 0 },
});
}}
onCloseEdit={() => setEditingCell(null)}
/>
</div>
);
@@ -607,7 +623,36 @@ function CellRenderer({
const placementType = placement.details?.placement_type;
return (
<div key={column.id} className="py-2 px-3">
{placementType === "self_promo" ? "Взаимный пиар" : placementType === "standard" ? "Стандартный" : "—"}
{isEditing && editingCell?.field === "placement_type" ? (
<Select
value={placementType || ""}
onValueChange={(value: PlacementType) => {
handleDraftChange(placement.id, {
placement_type: value as PlacementType,
});
}}
>
<SelectTrigger className="h-7 w-[120px] bg-background px-2 text-xs">
<SelectValue placeholder="Выберите..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="standard">Стандартный</SelectItem>
<SelectItem value="self_promo">Взаимный пиар</SelectItem>
</SelectContent>
</Select>
) : (
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "placement_type" })
}
>
<span>{placementType === "self_promo" ? "Взаимный пиар" : placementType === "standard" ? "Стандартный" : "—"}</span>
{canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-50 transition-opacity" />}
</button>
)}
</div>
);
@@ -616,7 +661,7 @@ function CellRenderer({
const cost = placement.details?.cost?.value;
const discount = costBeforeBargain && cost && costBeforeBargain > 0 ? ((costBeforeBargain - cost) / costBeforeBargain) * 100 : null;
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{discount ? `${discount.toFixed(1)}%` : "—"}
</div>
);
@@ -641,7 +686,7 @@ function CellRenderer({
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "payment_at" })
}
@@ -673,7 +718,7 @@ function CellRenderer({
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "placement_at" })
}
@@ -687,7 +732,7 @@ function CellRenderer({
case "actual_date":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{placement.placement_post?.post?.published_at
? formatDate(placement.placement_post.post.published_at)
: "—"}
@@ -697,136 +742,149 @@ function CellRenderer({
case "format":
return (
<div key={column.id} className="py-2 px-3">
{isEditing && editingCell?.field === "format" ? (
<Input
autoFocus
className="h-7 min-w-[140px] bg-background px-2 text-xs"
defaultValue={placement.details?.format || ""}
onChange={(e) =>
handleDraftChange(placement.id, {
format: e.target.value ? e.target.value : null,
})
}
onBlur={() => setEditingCell(null)}
/>
) : (
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-0 text-left text-xs text-muted-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "format" })
}
>
<span className="truncate w-full">{placement.details?.format || "—"}</span>
<Pencil className="h-3 w-3 shrink-0 ml-1 opacity-0 group-hover:opacity-50 transition-opacity" />
</button>
)}
<FormatSelector
value={placement.details?.format}
isEditing={isEditing && editingCell?.field === "format"}
canEdit={canEdit}
onEdit={() => setEditingCell({ placementId: placement.id, field: "format" })}
onChange={(value) => handleDraftChange(placement.id, { format: value, originalFormat: value })}
onCloseEdit={() => setEditingCell(null)}
/>
</div>
);
case "time_top":
const timeOnTop = placement.placement_post?.time_on_top;
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{formatTime(timeOnTop)}
</div>
);
case "link_created":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{formatDate(placement.invite_link_created_at)}
</div>
);
case "post_deleted":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{formatDate(placement.placement_post?.post?.deleted_from_channel_at)}
</div>
);
case "subscriptions":
const subsCountValue = placement.placement_post?.subscriptions_count;
// Show "—" if subscriptions are hidden due to permissions (0 means hidden)
const showSubs = subsCountValue === 0 ? "—" : formatNumber(subsCountValue);
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{showSubs}
</div>
);
case "views":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{formatNumber(placement.placement_post?.views_count)}
</div>
);
case "cpf":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{cpf ? formatCurrency(cpf) : "—"}
</div>
);
case "conversion_24h":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).conversion_24h !== undefined ? `${(placement as any).conversion_24h}%` : "—"}
</div>
);
case "conversion_48h":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).conversion_48h !== undefined ? `${(placement as any).conversion_48h}%` : "—"}
</div>
);
case "conversion_total":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).conversion_total !== undefined ? `${(placement as any).conversion_total}%` : "—"}
</div>
);
case "total_unsubs":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).total_unsubs !== undefined ? (placement as any).total_unsubs : "—"}
</div>
);
case "unsub_percent":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).unsub_percent !== undefined ? `${(placement as any).unsub_percent}%` : "—"}
</div>
);
case "total_active":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).total_active !== undefined ? (placement as any).total_active : "—"}
</div>
);
case "time_in_feed":
return (
<div key={column.id} className="py-2 px-3 text-muted-foreground text-xs">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs text-muted-foreground">
{(placement as any).time_in_feed !== undefined ? (placement as any).time_in_feed : "—"}
</div>
);
case "invite_type":
return (
<div key={column.id} className="py-2 px-3">
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem] text-xs">
{placement.invite_link_type === "approval" ? "С заявками" : "Открытая"}
</div>
);
case "invite_link":
return (
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem]">
{placement.invite_link ? (
<code className="text-xs bg-muted/50 px-2 py-1 rounded truncate max-w-[200px]">
{placement.invite_link.slice(8, 20)}…
</code>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</div>
);
case "post_link":
return (
<div key={column.id} className="py-2 px-3 flex items-center min-h-[1.75rem]">
{placement.placement_post?.post?.url ? (
<a
href={placement.placement_post.post.url}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-primary hover:underline"
>
Пост
</a>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</div>
);
case "comment":
return (
<div key={column.id} className="py-2 px-3">
@@ -834,7 +892,7 @@ function CellRenderer({
<Input
aria-label="Комментарий"
autoFocus
className="h-7 min-w-[240px] bg-background px-2 text-xs"
className="h-7 w-full bg-background px-2 text-xs"
value={placement.comment || ""}
onChange={(e) =>
handleDraftChange(placement.id, {
@@ -847,13 +905,13 @@ function CellRenderer({
<button
type="button"
disabled={!canEdit}
className="group inline-flex min-h-[1.75rem] max-w-[240px] items-center justify-between rounded px-0 text-left text-xs text-muted-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
className="group inline-flex min-h-[1.75rem] w-full items-center justify-between rounded px-2 text-xs text-left hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
onClick={() =>
canEdit && setEditingCell({ placementId: placement.id, field: "comment" })
}
>
<span className="truncate w-full">{placement.comment || "—"}</span>
<Pencil className="h-3 w-3 shrink-0 ml-1 opacity-0 group-hover:opacity-50 transition-opacity" />
<span className="truncate flex-1">{placement.comment || "—"}</span>
{canEdit && <Pencil className="h-3 w-3 shrink-0 ml-1 opacity-0 group-hover:opacity-50 transition-opacity" />}
</button>
)}
</div>
@@ -900,6 +958,7 @@ function ChannelGroup({
onClearCreative,
onOpenCreativeSend,
onAddPlacement,
creatives,
}: ChannelGroupProps) {
const [isOpen, setIsOpen] = useState(true);
@@ -1037,6 +1096,7 @@ function ChannelGroup({
onOpenCreativeSelect={onOpenCreativeSelect}
onClearCreative={onClearCreative}
onOpenCreativeSend={onOpenCreativeSend}
creatives={creatives}
/>
);
})}
@@ -1109,7 +1169,7 @@ export default function PurchasePlanDetailPage() {
// Creative selection dialog
const [showCreativeDialog, setShowCreativeDialog] = useState(false);
const [selectedPlacementForCreative, setSelectedPlacementForCreative] = useState<PlacementWithStats | null>(null);
const [creatives, setCreatives] = useState<Array<{ id: string; name: string; thumbnail_url?: string | null }>>([]);
const [creatives, setCreatives] = useState<Creative[]>([]);
// Placement wizard
const [wizardInitialCreative, setWizardInitialCreative] = useState<string | null>(null);
@@ -1212,6 +1272,20 @@ export default function PurchasePlanDetailPage() {
setPlacements(placementsWithCreativeNames);
setDraftsByPlacementId({});
setSaveError(null);
// Load creatives for the project
if (!isDemoMode) {
try {
const creativesResponse = await creativesApi.list(workspaceId, {
project_id: projectId,
include_archived: false,
size: 100,
});
setCreatives(creativesResponse.items);
} catch (err) {
console.error("Failed to load creatives:", err);
}
}
} catch (err) {
console.error("Failed to load placements:", err);
} finally {
@@ -1308,9 +1382,11 @@ export default function PurchasePlanDetailPage() {
? draft.placement_type
: placement.details?.placement_type ?? null,
format:
draft.format !== undefined
? draft.format
: placement.details?.format ?? null,
draft.originalFormat !== undefined
? draft.originalFormat
: draft.format !== undefined
? draft.format
: placement.details?.format ?? null,
creative_id:
draft.creative_id !== undefined
? draft.creative_id
@@ -1619,33 +1695,33 @@ export default function PurchasePlanDetailPage() {
filtered = filtered.map((group) => ({
...group,
placements: [...group.placements].sort((a, b) => {
let aValue = 0;
let bValue = 0;
let aValue: number | null = null;
let bValue: number | null = null;
switch (filters.sort!.field) {
case "cost":
aValue = a.details?.cost?.value || 0;
bValue = b.details?.cost?.value || 0;
aValue = a.details?.cost?.value ?? null;
bValue = b.details?.cost?.value ?? null;
break;
case "date":
aValue = a.details?.placement_at ? new Date(a.details.placement_at).getTime() : 0;
bValue = b.details?.placement_at ? new Date(b.details.placement_at).getTime() : 0;
aValue = a.details?.placement_at ? new Date(a.details.placement_at).getTime() : null;
bValue = b.details?.placement_at ? new Date(b.details.placement_at).getTime() : null;
break;
case "cpm":
aValue = a.cpm || 0;
bValue = b.cpm || 0;
aValue = a.cpm ?? null;
bValue = b.cpm ?? null;
break;
case "cpf":
aValue = a.cpf || 0;
bValue = b.cpf || 0;
aValue = a.cpf ?? null;
bValue = b.cpf ?? null;
break;
case "subscribers":
aValue = a.placement_post?.subscriptions_count || 0;
bValue = b.placement_post?.subscriptions_count || 0;
aValue = a.placement_post?.subscriptions_count ?? null;
bValue = b.placement_post?.subscriptions_count ?? null;
break;
case "views":
aValue = a.placement_post?.views_count || 0;
bValue = b.placement_post?.views_count || 0;
aValue = a.placement_post?.views_count ?? null;
bValue = b.placement_post?.views_count ?? null;
break;
case "created":
aValue = new Date(a.created_at).getTime();
@@ -1653,6 +1729,11 @@ export default function PurchasePlanDetailPage() {
break;
}
// Null values always at the end
if (aValue === null && bValue === null) return 0;
if (aValue === null) return 1;
if (bValue === null) return -1;
return filters.sort!.direction === "asc"
? aValue - bValue
: bValue - aValue;
@@ -1858,6 +1939,7 @@ export default function PurchasePlanDetailPage() {
onClearCreative={handleClearCreative}
onOpenCreativeSend={handleOpenCreativeSend}
onAddPlacement={handleAddPlacement}
creatives={creatives}
/>
))}
</div>