feat: purchase-plans update

app/dashboard/[workspaceId]/placements/[placementId]/page.tsx

@@ -19,7 +19,7 @@ import {
 } from "lucide-react";
 import { DashboardHeader } from "@/components/layout/dashboard-header";
 import { useWorkspace } from "@/components/providers/workspace-provider";
-import { placementsApi } from "@/lib/api";
+import { placementsApi, projectsApi } from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -94,13 +94,35 @@ export default function PlacementDetailPage() {
   const loadPlacement = async () => {
     try {
       setLoading(true);
-      // First, try to load placement without project_id (deprecated endpoint)
+      
-      // If that fails, we'd need projectId
+      // First, get all projects to find which project this placement belongs to
-      const data = await placementsApi.get(workspaceId, placementId);
+      const projectsResponse = await projectsApi.list(workspaceId, { size: 100 });
-      setPlacement(data);
+      const projects = projectsResponse.items;
-      // Store projectId from placement for future operations
+      
-      if (data.project?.id) {
+      // Search for the placement in all projects
-        setProjectId(data.project.id);
+      let foundProjectId: string | null = null;
+      let foundPlacement: any = null;
+      
+      for (const project of projects) {
+        try {
+          const placements = await placementsApi.getByProject(workspaceId, project.id);
+          const placement = placements.find((p) => p.id === placementId);
+          if (placement) {
+            foundProjectId = project.id;
+            foundPlacement = placement;
+            break;
+          }
+        } catch (e) {
+          // Skip if can't get placements for this project
+          continue;
+        }
+      }
+      
+      if (foundPlacement) {
+        setPlacement(foundPlacement);
+        setProjectId(foundProjectId);
+      } else {
+        console.error("Placement not found in any project");
       }
     } catch (err) {
       console.error("Failed to load placement:", err);

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

@@ -216,6 +216,7 @@ interface ChannelGroupProps {
   onOpenCreativeSelect?: (placement: PlacementWithStats) => void;
   onClearCreative?: (placementId: string) => void;
   onOpenCreativeSend?: (placement: PlacementWithStats) => void;
+  onAddPlacement?: (channel: Placement["channel"]) => void;
 }
 
 // ============================================================================
@@ -412,22 +413,22 @@ function CellRenderer({
       );
 
     case "creative":
-      const hasCreative = !!placement.creative_id;
+      const viewCreativeId = placement.creative_id;
+      const hasCreative = !!viewCreativeId;
       return (
         <td key={column.id} className="py-2 px-3">
           {hasCreative ? (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
-              <div className="w-8 h-8 rounded bg-muted flex items-center justify-center overflow-hidden shrink-0">
+              <div className="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded ">
-                <span className="text-xs">📷</span>
+                <span className="text-xs font-medium truncate max-w-[100px]">{placement.creative_name || "Без названия"}</span>
               </div>
-              <span className="text-xs truncate max-w-[100px]">{placement.creative_name || "Без названия"}</span>
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-6 w-6 p-0 text-muted-foreground hover:text-primary"
+                className="h-6 w-6 p-0 text-muted-foreground hover:text-primary rounded"
-                title="Отправить креатив"
+                title="Отправить готовый креатив"
                 onClick={() => {
-                  if (placement.creative_id) {
+                  if (viewCreativeId) {
                     onOpenCreativeSend?.(placement);
                   }
                 }}
@@ -437,10 +438,10 @@ function CellRenderer({
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
+                className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive rounded"
                 title="Очистить креатив"
                 onClick={() => {
-                  if (placement.creative_id) {
+                  if (viewCreativeId) {
                     onClearCreative?.(placement.id);
                   }
                 }}
@@ -469,7 +470,7 @@ function CellRenderer({
       return (
         <td key={column.id} className="py-2 px-3">
           {placement.invite_link ? (
-            <code className="text-xs bg-muted px-2 py-1 rounded truncate max-w-[200px]">
+            <code className="text-xs bg-muted/50 px-2 py-1 rounded truncate max-w-[200px]">
               {placement.invite_link}
             </code>
           ) : (
@@ -905,6 +906,7 @@ function ChannelGroup({
   onOpenCreativeSelect,
   onClearCreative,
   onOpenCreativeSend,
+  onAddPlacement,
 }: ChannelGroupProps) {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -993,6 +995,19 @@ function ChannelGroup({
                 {formatCompact(totalViews)}
               </span>
             </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 px-3 text-xs ml-4"
+              onClick={(e) => {
+                e.stopPropagation();
+                onAddPlacement?.(channel);
+              }}
+              title="Добавить размещение"
+            >
+              <Plus className="h-3.5 w-3.5 mr-1" />
+              Добавить
+            </Button>
           </div>
         </CollapsibleTrigger>
         <CollapsibleContent>
@@ -1005,10 +1020,27 @@ function ChannelGroup({
                       key={column.id}
                       className={cn(
                         "py-2 px-3 font-medium text-muted-foreground",
+                        column.editable && "cursor-help",
                         column.width || "w-auto"
                       )}
                     >
-                      {column.label}
+                      <div className="flex items-center gap-1.5">
+                        {column.editable && (
+                          <span
+                            className="flex items-center gap-0.5"
+                            title={column.partialEdit ? "Частично редактируемое" : "Редактируемое"}
+                          >
+                            <p className="flex items-center whitespace-nowrap">
+                            {column.partialEdit ? (
+                              <span className="text-[10px] opacity-40 flex items-center gap-0.5">(
+                            <Pencil className="h-3 w-3 " />)</span>
+                            ) : (
+                            <Pencil className="h-3 w-3 opacity-40" />)}
+                          </p>
+                          </span>
+                        )}
+                        <span>{column.label}</span>
+                      </div>
                     </th>
                   ))}
                 </tr>
@@ -1026,7 +1058,11 @@ function ChannelGroup({
                     : null;
 
                    return (
-                    <tr key={placement.id} className="border-b last:border-0 hover:bg-muted/30">
+                    <tr
+                      key={placement.id}
+                      data-placement-id={placement.id}
+                      className="border-b last:border-0 hover:bg-muted/30"
+                    >
                       {ALL_COLUMNS.filter((c) => visibleColumns.has(c.id)).map((column) => (
                         <CellRenderer
                           key={column.id}
@@ -1335,6 +1371,7 @@ export default function PurchasePlanDetailPage() {
       }
 
       await loadPlacements();
+      setSavingEdits(false);
     } catch (err: unknown) {
       console.error("Failed to save placement edits:", err);
       const message =
@@ -1422,6 +1459,41 @@ export default function PurchasePlanDetailPage() {
     }
   };
 
+  const handleAddPlacement = async (channel: Placement["channel"]) => {
+    if (!canEditPlacements) return;
+
+    try {
+      const result = await placementsApi.createInProject(workspaceId, projectId, {
+        creative_id: undefined,
+        channels: [{
+          channel_id: channel.id,
+          status: "Без статуса",
+          comment: undefined,
+          details: {},
+        }],
+        details: {},
+      });
+      
+      // Extract the new placement from the response
+      const newPlacement = result.placements[0];
+      
+      // Add the new placement to the list and switch to edit mode
+      setPlacements((prev) => [...prev, newPlacement]);
+      
+      // Scroll to and focus the new placement after a short delay
+      setTimeout(() => {
+        const rowElement = document.querySelector(`[data-placement-id="${newPlacement.id}"]`);
+        if (rowElement) {
+          rowElement.scrollIntoView({ behavior: "smooth", block: "center" });
+          // Set editing state for the first editable field
+          setEditingCell({ placementId: newPlacement.id, field: "status" });
+        }
+      }, 100);
+    } catch (err) {
+      console.error("Failed to add placement:", err);
+    }
+  };
+
   const groupedPlacements = useMemo(() => {
     const groups: Record<string, { channel: Placement["channel"]; placements: PlacementWithStats[] }> = {};
 
@@ -1793,6 +1865,7 @@ export default function PurchasePlanDetailPage() {
                 onOpenCreativeSelect={handleOpenCreativeSelect}
                 onClearCreative={handleClearCreative}
                 onOpenCreativeSend={handleOpenCreativeSend}
+                onAddPlacement={handleAddPlacement}
               />
             ))}
           </div>

components/placement-cells.tsx

@@ -192,7 +192,7 @@ export const InviteLinkCell = ({ inviteLink, onCopy }: { inviteLink: string | nu
   <td className="py-2 px-3">
     {inviteLink ? (
       <div className="flex items-center gap-1">
-        <code className="text-xs bg-muted px-2 py-1 rounded truncate max-w-[200px]">{inviteLink}</code>
+        <code className="text-xs bg-muted/50 px-2 py-1 rounded truncate max-w-[200px]">{inviteLink}</code>
         <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={onCopy}>
           <Copy className="h-3 w-3" />
         </Button>

lib/api/placements.ts

@@ -33,10 +33,17 @@ export const placementsApi = {
       .then((response) => response.items),
 
   /**
-   * Get single placement (deprecated - use getInProject for project-specific data)
+   * Get single placement (requires project_id in original backend)
+   * Uses: GET /workspaces/{workspace_id}/projects/{project_id}/placements/{placement_id}
    */
-  get: (workspaceId: string, placementId: string) =>
+  get: (
-    api.get<Placement>(`/workspaces/${workspaceId}/placements/${placementId}`),
+    workspaceId: string,
+    placementId: string,
+    projectId?: string
+  ) =>
+    api.get<Placement>(
+      `/workspaces/${workspaceId}/projects/${projectId}/placements/${placementId}`
+    ),
 
   /**
    * Get single placement within project
@@ -91,6 +98,47 @@ export const placementsApi = {
       data
     ),
 
+  /**
+   * Create single placement within project (bulk format)
+   * POST /workspaces/{workspace_id}/projects/{project_id}/placements
+   */
+  createInProject: (
+    workspaceId: string,
+    projectId: string,
+    data: {
+      creative_id?: string;
+      channels: Array<{
+        channel_id: string;
+        status?: string;
+        comment?: string;
+        details?: {
+          placement_at?: string;
+          payment_at?: string;
+          cost?: { type: string; value: number };
+          cost_before_bargain?: number;
+          placement_type?: string;
+          format?: string;
+          comment?: string;
+          creative_id?: string;
+        };
+      }>;
+      details?: {
+        placement_at?: string;
+        payment_at?: string;
+        cost?: { type: string; value: number };
+        cost_before_bargain?: number;
+        placement_type?: string;
+        format?: string;
+        comment?: string;
+        creative_id?: string;
+      };
+    }
+  ) =>
+    api.post<{ placements: Placement[] }>(
+      `/workspaces/${workspaceId}/projects/${projectId}/placements`,
+      data
+    ),
+
   /**
    * Update placement
    */

lib/config/placement-columns.ts

@@ -5,6 +5,7 @@ export interface ColumnConfig {
   label: string;
   group: string;
   editable: boolean;
+  partialEdit?: boolean;
   width?: string;
   required?: boolean;
 }
@@ -21,10 +22,10 @@ export const COLUMN_GROUPS = [
 
 export const ALL_COLUMNS: ColumnConfig[] = [
   // Basic
-  { id: "checkbox", label: "", group: "basic", editable: false, required: true },
+  { id: "checkbox", label: "Чекбокс", group: "basic", editable: false, required: true },
-  { id: "number", label: "№", group: "basic", editable: false, required: true },
+  { id: "number", label: "Номер", group: "basic", editable: false, required: true },
-  { id: "status_deal", label: "Статус сделки", group: "basic", editable: true },
+  { id: "status_deal", label: "Статус сделки", group: "basic", editable: true, partialEdit: true },
-  { id: "status_post", label: "Статус поста", group: "basic", editable: true },
+  { id: "status_post", label: "Статус поста", group: "basic", editable: true, partialEdit: true },
 
   // Content
   { id: "creative", label: "Креатив", group: "content", editable: true },
@@ -32,9 +33,9 @@ export const ALL_COLUMNS: ColumnConfig[] = [
   { id: "post_link", label: "Ссылка на пост", group: "content", editable: false },
 
   // Finance
-  { id: "cost", label: "Стоимость", group: "finance", editable: true },
+  { id: "cost", label: "Стоимость", group: "finance", editable: true, partialEdit: true },
   { id: "cost_before", label: "Стоимость до торга", group: "finance", editable: true },
-  { id: "cost_format", label: "Формат оплаты", group: "finance", editable: true },
+  { id: "cost_format", label: "Формат оплаты", group: "finance", editable: true, partialEdit: true },
   { id: "placement_type", label: "Тип закупа", group: "finance", editable: true },
   { id: "discount", label: "% скидки", group: "finance", editable: false },
   { id: "payment_date", label: "Дата оплаты", group: "finance", editable: true },
@@ -54,7 +55,7 @@ export const ALL_COLUMNS: ColumnConfig[] = [
 
   // Calculated
   { id: "cpf", label: "CPF", group: "calculated", editable: false },
-  { id: "cpm", label: "CPM", group: "calculated", editable: false },
+  { id: "cpm", label: "CPM", group: "calculated", editable: true, partialEdit: true },
   { id: "conversion_24h", label: "Конверсия 24ч", group: "calculated", editable: false },
   { id: "conversion_48h", label: "Конверсия 48ч", group: "calculated", editable: false },
   { id: "conversion_total", label: "Конверсия общ.", group: "calculated", editable: false },

lib/demo/demo-aware-api.ts

@@ -272,13 +272,13 @@ export const demoAwarePlacementsApi = {
     }
     return placementsApi.list(workspaceId, params);
   },
-  get: async (workspaceId: string, placementId: string): Promise<Placement> => {
+  get: async (workspaceId: string, placementId: string, _projectId?: string): Promise<Placement> => {
     if (isDemoWorkspace(workspaceId)) {
       const placement = demoPlacements.find((p) => p.id === placementId);
       if (!placement) throw new Error("Placement not found");
       return placement;
     }
-    return placementsApi.get(workspaceId, placementId);
+    return placementsApi.get(workspaceId, placementId, _projectId);
   },
   getByProject: async (workspaceId: string, projectId: string): Promise<Placement[]> => {
     if (isDemoWorkspace(workspaceId)) {