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

344
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
<CostFormatSelector
value={costFormat}
onValueChange={(value: CostType) => {
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 },
});
}}
>
<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>
)}
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)}
<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)}
/>
) : (
<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>
)}
</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,7 +1382,9 @@ export default function PurchasePlanDetailPage() {
? draft.placement_type
: placement.details?.placement_type ?? null,
format:
draft.format !== undefined
draft.originalFormat !== undefined
? draft.originalFormat
: draft.format !== undefined
? draft.format
: placement.details?.format ?? null,
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>

100
components/cost-format-selector.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client";
import { Pencil, Check, Banknote, Eye } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CostType } from "@/lib/types/api";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
interface CostFormatSelectorProps {
value: CostType;
isEditing: boolean;
canEdit: boolean;
onEdit: () => void;
onChange: (value: CostType) => void;
onCloseEdit: () => void;
}
const COST_FORMATS: { value: CostType; label: string; icon: typeof Banknote }[] = [
{ value: "fixed", label: "Фикс", icon: Banknote },
{ value: "cpm", label: "CPM", icon: Eye },
];
export function CostFormatSelector({
value,
isEditing,
canEdit,
onEdit,
onChange,
onCloseEdit,
}: CostFormatSelectorProps) {
const currentFormat = COST_FORMATS.find((f) => f.value === value) || COST_FORMATS[0];
const Icon = currentFormat.icon;
if (isEditing) {
return (
<Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
<PopoverTrigger asChild>
<Button
variant="outline"
className="h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm"
>
<div className="flex items-center gap-1.5">
<Icon className="h-3.5 w-3.5" />
<span>{currentFormat.label}</span>
</div>
</Button>
</PopoverTrigger>
<PopoverContent className="w-40 p-1" align="start">
<div className="flex flex-col gap-0.5">
{COST_FORMATS.map((format) => {
const FormatIcon = format.icon;
const isSelected = format.value === value;
return (
<button
key={format.value}
type="button"
className={cn(
"flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
isSelected
? "bg-muted font-medium"
: "hover:bg-muted/50"
)}
onClick={() => {
onChange(format.value);
onCloseEdit();
}}
>
<FormatIcon className="h-3.5 w-3.5" />
<span className="flex-1 text-left">{format.label}</span>
{isSelected && <Check className="h-3 w-3" />}
</button>
);
})}
</div>
</PopoverContent>
</Popover>
);
}
return (
<button
type="button"
disabled={!canEdit}
className={cn(
"group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2"
)}
onClick={onEdit}
>
<div className="flex items-center gap-1.5">
<Icon className="h-3.5 w-3.5" />
<span>{currentFormat.label}</span>
</div>
{canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
</button>
);
}

138
components/creative-select-dialog.tsx
View File

@@ -1,24 +1,106 @@
import { useState, useEffect } from "react";
import { X } from "lucide-react";
import { X, Image, MousePointerClick } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { Creative } from "@/lib/types/api";
interface Creative {
id: string;
name: string;
thumbnail_url?: string | null;
interface CreativeMediaItem {
media_type: string;
media_file_id: string;
position: number;
s3_url?: string | null;
}
interface CreativeButton {
text: string;
url: string;
}
interface CreativeSelectDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
creatives: Creative[];
onSelect: (creative: Creative) => void;
creatives: {
id: string;
name: string;
text: string;
media_items: CreativeMediaItem[];
buttons: CreativeButton[];
}[];
onSelect: (creative: { id: string; name: string; thumbnail_url?: string | null }) => void;
onClear: (() => void) | null;
currentCreativeId: string | null | undefined;
}
function CreativeCard({
creative,
isSelected,
onClick,
}: {
creative: {
id: string;
name: string;
text: string;
media_items: CreativeMediaItem[];
buttons: CreativeButton[];
};
isSelected: boolean;
onClick: () => void;
}) {
const thumbnailUrl = creative.media_items?.[0]?.s3_url;
const imagesCount = creative.media_items?.length || 0;
const buttonsCount = creative.buttons?.length || 0;
const cleanText = creative.text?.replace(/<[^>]+>/g, '') || '';
const truncatedText = cleanText.substring(0, 80) + (cleanText.length > 80 ? '...' : '');
return (
<div
className={cn(
"flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-all",
isSelected
? "border-primary bg-primary/5 ring-1 ring-primary"
: "hover:bg-muted hover:border-muted-foreground/30"
)}
onClick={onClick}
>
{thumbnailUrl ? (
<div className="w-14 h-14 rounded-lg bg-muted flex items-center justify-center overflow-hidden shrink-0">
<img
src={thumbnailUrl}
alt=""
className="w-full h-full object-cover"
/>
</div>
) : (
<></>
)}
<div className="flex-1 min-w-0 space-y-1.5">
<div className="flex items-center gap-2">
{imagesCount > 0 && (
<span className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
<Image className="h-3 w-3" />
{imagesCount}
</span>
)}
{buttonsCount > 0 && (
<span className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
<MousePointerClick className="h-3 w-3" />
{buttonsCount}
</span>
)}
</div>
<p className="text-sm text-foreground line-clamp-2 leading-snug">
{truncatedText || 'Без текста'}
</p>
</div>
</div>
);
}
export function CreativeSelectDialog({
open,
onOpenChange,
@@ -29,48 +111,40 @@ export function CreativeSelectDialog({
}: CreativeSelectDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
<DialogHeader>
<DialogContent className="max-w-lg max-h-[85vh] flex flex-col">
<DialogHeader className="shrink-0">
<DialogTitle>Выберите креатив</DialogTitle>
<p className="text-sm text-muted-foreground">
{creatives.length} креативов доступно
</p>
</DialogHeader>
{creatives.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
Нет доступных креативов
</div>
) : (
<div className="space-y-2">
<div className="flex-1 overflow-y-auto space-y-2 pr-1">
{creatives.map((creative) => (
<div
<CreativeCard
key={creative.id}
className={cn(
"flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors",
currentCreativeId === creative.id
? "border-primary bg-primary/5"
: "hover:bg-muted"
)}
creative={creative}
isSelected={currentCreativeId === creative.id}
onClick={() => {
onSelect(creative);
onSelect({
id: creative.id,
name: creative.name,
thumbnail_url: creative.media_items?.[0]?.s3_url,
});
onOpenChange(false);
}}
>
<div className="w-12 h-12 rounded bg-muted flex items-center justify-center overflow-hidden shrink-0">
{creative.thumbnail_url ? (
<img
src={creative.thumbnail_url}
alt={creative.name}
className="w-full h-full object-cover"
/>
) : (
<span className="text-xs">📷</span>
)}
</div>
<span className="text-sm font-medium truncate">{creative.name}</span>
</div>
))}
</div>
)}
{currentCreativeId && onClear && (
<div className="pt-4 border-t mt-4">
<div className="shrink-0 pt-4 border-t mt-4">
<Button
variant="outline"
className="w-full"

235
components/format-selector.tsx Normal file
View File

@@ -0,0 +1,235 @@
"use client";
import { useState } from "react";
import { Pencil, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
interface FormatSelectorProps {
value: string | null | undefined;
isEditing: boolean;
canEdit: boolean;
onEdit: () => void;
onChange: (value: string | null) => void;
onCloseEdit: () => void;
}
interface FormatOption {
label: string;
topHours: number;
feedHours: number | null;
}
const FORMAT_OPTIONS: FormatOption[] = [
{ label: "1/24", topHours: 1, feedHours: 24 },
{ label: "1/48", topHours: 1, feedHours: 48 },
{ label: "1/72", topHours: 1, feedHours: 72 },
{ label: "1/7 дней", topHours: 1, feedHours: 168 },
{ label: "1/без удаления", topHours: 1, feedHours: null },
];
function parseFormat(format: string | null | undefined): { topHours: number; feedHours: number | null } | null {
if (!format) return null;
const match = format.match(/^(\d+)\/(\d+(?:\s*дней)?|без\s*удаления)$/i);
if (!match) return null;
const topHours = parseInt(match[1], 10);
let feedHours: number | null = null;
if (match[2].toLowerCase().includes('без')) {
feedHours = null;
} else if (match[2].includes('дней')) {
feedHours = parseInt(match[2], 10) * 24;
} else {
feedHours = parseInt(match[2], 10);
}
return { topHours, feedHours };
}
function formatToString(topHours: number, feedHours: number | null): string {
if (feedHours === null) {
return "1/без удаления";
}
if (feedHours >= 168) {
const days = feedHours / 24;
return `1/${days} дней`;
}
return `1/${feedHours}`;
}
function findMatchingOption(topHours: number, feedHours: number | null): string | null {
const option = FORMAT_OPTIONS.find(
o => o.topHours === topHours && o.feedHours === feedHours
);
return option?.label || null;
}
function FormatOptionItem({
option,
isSelected,
onClick,
}: {
option: FormatOption;
isSelected: boolean;
onClick: () => void;
}) {
return (
<button
type="button"
className={cn(
"flex items-center justify-between px-3 py-2 text-sm rounded-md transition-colors w-full",
isSelected ? "bg-muted font-medium" : "hover:bg-muted/50"
)}
onClick={onClick}
>
<span>{option.label}</span>
{isSelected && <Check className="h-4 w-4" />}
</button>
);
}
export function FormatSelector({
value,
isEditing,
canEdit,
onEdit,
onChange,
onCloseEdit,
}: FormatSelectorProps) {
const [showCustom, setShowCustom] = useState(false);
const [customTop, setCustomTop] = useState("");
const [customFeedText, setCustomFeedText] = useState("");
const parsed = parseFormat(value);
const matchedOption = parsed ? findMatchingOption(parsed.topHours, parsed.feedHours) : null;
const handleSelectPreset = (option: FormatOption) => {
const formatStr = formatToString(option.topHours, option.feedHours);
onChange(formatStr);
onCloseEdit();
};
const handleSelectCustom = () => {
const top = parseInt(customTop, 10);
let feed: number | null = null;
if (customFeedText.toLowerCase().includes('без')) {
feed = null;
} else if (customFeedText.includes('дней')) {
const daysMatch = customFeedText.match(/(\d+)/);
if (daysMatch) {
feed = parseInt(daysMatch[1], 10) * 24;
}
} else if (customFeedText) {
feed = parseInt(customFeedText, 10);
}
if (!isNaN(top) && feed !== null && !isNaN(feed)) {
const formatStr = formatToString(top, feed);
onChange(formatStr);
onCloseEdit();
}
};
if (isEditing) {
return (
<Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
<PopoverTrigger asChild>
<Button
variant="outline"
className="h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm"
>
<span className="truncate">{value || "Выберите..."}</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-64 p-2" align="start">
<div className="space-y-1">
<div className="text-xs font-medium text-muted-foreground px-2 pb-1">
Стандартные форматы
</div>
{FORMAT_OPTIONS.map((option) => (
<FormatOptionItem
key={option.label}
option={option}
isSelected={matchedOption === option.label}
onClick={() => handleSelectPreset(option)}
/>
))}
<div className="border-t my-2" />
{!showCustom ? (
<button
type="button"
className="flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-muted/50 w-full text-left text-muted-foreground"
onClick={() => setShowCustom(true)}
>
<Pencil className="h-3 w-3" />
Свой формат...
</button>
) : (
<div className="px-2 py-2 space-y-2">
<div className="text-xs font-medium text-muted-foreground">
Свой формат
</div>
<div className="flex items-center gap-1">
<Input
type="number"
placeholder="Часы"
className="h-8 text-xs w-16 shrink-0"
value={customTop}
onChange={(e) => setCustomTop(e.target.value)}
/>
<span className="text-xs shrink-0">/</span>
<Input
placeholder="Часы"
className="h-8 text-xs"
value={customFeedText}
onChange={(e) => setCustomFeedText(e.target.value)}
/>
</div>
<div className="flex gap-2">
<Button
size="sm"
variant="outline"
className="flex-1 text-xs h-7"
onClick={() => setShowCustom(false)}
>
Отмена
</Button>
<Button
size="sm"
className="flex-1 text-xs h-7"
onClick={handleSelectCustom}
>
Применить
</Button>
</div>
</div>
)}
</div>
</PopoverContent>
</Popover>
);
}
return (
<button
type="button"
disabled={!canEdit}
className="group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2"
onClick={onEdit}
>
<span className="truncate">{value || "—"}</span>
{canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity shrink-0" />}
</button>
);
}

8
components/layout/dashboard-layout-content.tsx
View File

@@ -1,9 +1,5 @@
"use client";
// ============================================================================
// Dashboard Layout Content
// ============================================================================
import { useWorkspace } from "@/components/providers/workspace-provider";
import { DemoBanner } from "@/components/demo-banner";
@@ -17,9 +13,9 @@ export const DashboardLayoutContent: React.FC<DashboardLayoutContentProps> = ({
const { isDemoMode } = useWorkspace();
return (
<div className="flex flex-col h-full">
<div className="flex flex-col min-h-full">
{isDemoMode && <DemoBanner />}
<div className="flex-1 overflow-auto">{children}</div>
<div className="flex-1">{children}</div>
</div>
);
};

10
components/nav-main.tsx
View File

@@ -92,7 +92,7 @@ export function NavMain({
className={cn(
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
: "text-muted-foreground/90"
)}
/>
@@ -130,7 +130,7 @@ export function NavMain({
className={cn(
"h-4 w-4 transition-colors duration-200",
isSubActive
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
: "!text-muted-foreground/90"
)}
/>
@@ -174,7 +174,7 @@ export function NavMain({
className={cn(
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
: "text-muted-foreground/90"
)}
/>
@@ -214,7 +214,7 @@ export function NavMain({
className={cn(
"h-4 w-4 transition-colors duration-200",
isSubActive
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
: "!text-muted-foreground/90"
)}
/>
@@ -248,7 +248,7 @@ export function NavMain({
className={cn(
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
: "text-muted-foreground/90"
)}
/>

41
components/placements-table-header.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { ArrowUpDown } from "lucide-react";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { ALL_COLUMNS, getColumnStyle, type ColumnConfig } from "@/lib/config/placement-columns";
@@ -84,38 +84,17 @@ export function PlacementsTableHeader({
onClick={() => handleSort(column)}
title={column.sortable ? "Нажмите для сортировки" : undefined}
>
{column.editable && (
<span
className="flex items-center gap-0.5"
title={column.partialEdit ? "Частично редактируемое" : "Редактируемое"}
>
<span className="text-[10px] opacity-40 flex items-center gap-0.5">
(
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-3 w-3"
>
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
)
</span>
</span>
)}
<span className="whitespace-nowrap">{column.label}</span>
{column.sortable && (
<ArrowUpDown
className={cn(
"h-3 w-3 opacity-40",
sortDir && "opacity-100 text-primary"
)}
/>
sortDir ? (
sortDir === "asc" ? (
<ArrowUp className="h-3 w-3 text-primary" />
) : (
<ArrowDown className="h-3 w-3 text-primary" />
)
) : (
<ArrowUpDown className="h-3 w-3 opacity-40" />
)
)}
</div>
);

1
lib/types/api.ts
View File

@@ -221,6 +221,7 @@ export interface CreativeMediaItem {
media_type: string;
media_file_id: string;
position: number;
s3_url?: string | null;
}
export interface CreativeButton {