feat: purchase-plans page global update

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

@@ -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 ">
+              <div className="flex items-center px-2 py-1 bg-muted/50 rounded flex-1 min-w-0 gap-1">
-                <span className="text-xs font-medium truncate max-w-[100px]">{placement.creative_name || "Без названия"}</span>
+                {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">
+        <div key={column.id} className="py-2 px-3">
-          {costBefore !== null && costBefore !== undefined ? formatCurrency(costBefore) : "—"}
+          {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" ? (
+          <CostFormatSelector
-            <Select
+            value={costFormat}
-              value={costFormat}
+            isEditing={isEditing && editingCell?.field === "cost_format"}
-              onValueChange={(value: CostType) => {
+            canEdit={canEdit}
-                handleDraftChange(placement.id, {
+            onEdit={() => setEditingCell({ placementId: placement.id, field: "cost_format" })}
-                  cost: { type: value, value: placement.details?.cost?.value || 0 },
+            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 />
+            onCloseEdit={() => setEditingCell(null)}
-              </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>
-          )}
         </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" ? (
+          <FormatSelector
-            <Input
+            value={placement.details?.format}
-              autoFocus
+            isEditing={isEditing && editingCell?.field === "format"}
-              className="h-7 min-w-[140px] bg-background px-2 text-xs"
+            canEdit={canEdit}
-              defaultValue={placement.details?.format || ""}
+            onEdit={() => setEditingCell({ placementId: placement.id, field: "format" })}
-              onChange={(e) =>
+            onChange={(value) => handleDraftChange(placement.id, { format: value, originalFormat: value })}
-                handleDraftChange(placement.id, {
+            onCloseEdit={() => setEditingCell(null)}
-                  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>
-          )}
         </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>
+              <span className="truncate flex-1">{placement.comment || "—"}</span>
-              <Pencil className="h-3 w-3 shrink-0 ml-1 opacity-0 group-hover:opacity-50 transition-opacity" />
+              {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.originalFormat !== undefined
-          ? draft.format
+          ? draft.originalFormat
-          : placement.details?.format ?? null,
+          : 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 aValue: number | null = null;
-          let bValue = 0;
+          let bValue: number | null = null;
 
           switch (filters.sort!.field) {
             case "cost":
-              aValue = a.details?.cost?.value || 0;
+              aValue = a.details?.cost?.value ?? null;
-              bValue = b.details?.cost?.value || 0;
+              bValue = b.details?.cost?.value ?? null;
               break;
             case "date":
-              aValue = a.details?.placement_at ? new Date(a.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() : 0;
+              bValue = b.details?.placement_at ? new Date(b.details.placement_at).getTime() : null;
               break;
             case "cpm":
-              aValue = a.cpm || 0;
+              aValue = a.cpm ?? null;
-              bValue = b.cpm || 0;
+              bValue = b.cpm ?? null;
               break;
             case "cpf":
-              aValue = a.cpf || 0;
+              aValue = a.cpf ?? null;
-              bValue = b.cpf || 0;
+              bValue = b.cpf ?? null;
               break;
             case "subscribers":
-              aValue = a.placement_post?.subscriptions_count || 0;
+              aValue = a.placement_post?.subscriptions_count ?? null;
-              bValue = b.placement_post?.subscriptions_count || 0;
+              bValue = b.placement_post?.subscriptions_count ?? null;
               break;
             case "views":
-              aValue = a.placement_post?.views_count || 0;
+              aValue = a.placement_post?.views_count ?? null;
-              bValue = b.placement_post?.views_count || 0;
+              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>

components/cost-format-selector.tsx

@@ -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>
+  );
+}

components/creative-select-dialog.tsx

@@ -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 {
+interface CreativeMediaItem {
-  id: string;
+  media_type: string;
-  name: string;
+  media_file_id: string;
-  thumbnail_url?: string | null;
+  position: number;
+  s3_url?: string | null;
+}
+
+interface CreativeButton {
+  text: string;
+  url: string;
 }
 
 interface CreativeSelectDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  creatives: Creative[];
+  creatives: {
-  onSelect: (creative: Creative) => void;
+    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">
+      <DialogContent className="max-w-lg max-h-[85vh] flex flex-col">
-        <DialogHeader>
+        <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(
+                creative={creative}
-                  "flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors",
+                isSelected={currentCreativeId === creative.id}
-                  currentCreativeId === creative.id
-                    ? "border-primary bg-primary/5"
-                    : "hover:bg-muted"
-                )}
                 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"

components/format-selector.tsx

@@ -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>
+  );
+}

components/layout/dashboard-layout-content.tsx

@@ -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>
   );
 };

components/nav-main.tsx

@@ -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"
                           )}
                         />
@@ -209,16 +209,16 @@ export function NavMain({
                                  isActive={isSubActive}
                                >
                                  <Link href={subItem.url} className="flex items-center gap-2">
-                             {subItem.icon && (
+                            {subItem.icon && (
-                               <subItem.icon
+                              <subItem.icon
-                                 className={cn(
+                                className={cn(
-                                   "h-4 w-4 transition-colors duration-200",
+                                  "h-4 w-4 transition-colors duration-200",
-                                   isSubActive
+                                  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"
+                                    : "!text-muted-foreground/90"
-                                 )}
+                                )}
-                               />
+                              />
-                              )}
+                            )}
                                     <span
                                       className={cn(
                                         "transition-colors duration-200",
@@ -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"
                           )}
                         />

components/placements-table-header.tsx

@@ -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
+                sortDir ? (
-                  className={cn(
+                  sortDir === "asc" ? (
-                    "h-3 w-3 opacity-40",
+                    <ArrowUp className="h-3 w-3 text-primary" />
-                    sortDir && "opacity-100 text-primary"
+                  ) : (
-                  )}
+                    <ArrowDown className="h-3 w-3 text-primary" />
-                />
+                  )
+                ) : (
+                  <ArrowUpDown className="h-3 w-3 opacity-40" />
+                )
               )}
             </div>
           );

lib/types/api.ts

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