feat: purchase-plans page global update

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 {
-  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"

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
-                                 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-muted-foreground/90"
-                                 )}
-                               />
-                              )}
+                            {subItem.icon && (
+                              <subItem.icon
+                                className={cn(
+                                  "h-4 w-4 transition-colors duration-200",
+                                  isSubActive
+                                    ? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_15px_rgba(200_180_255_0.9)]"
+                                    : "!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
-                  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>
           );